hlmnhkl-ui 0.20.0 → 0.20.2

package/README.md

@@ -50,6 +50,8 @@ Using Next.js or React Router? The [installation guide](https://ui.hlmnhkl.my/in
 
 Every copied file starts with one line naming hlmnhkl/ui and the MIT licence, so the licence notice travels with the code. `diff` and `update` ignore that line.
 
+`add`, `diff` and `update` never change your `tokens.css`. If the latest one has tokens yours lacks, they list them after the result, with the lines to copy.
+
 **With an AI assistant:** point it at [llms.txt](https://ui.hlmnhkl.my/llms.txt) (every component and the rules) or [llms-full.txt](https://ui.hlmnhkl.my/llms-full.txt) (props, keyboard notes and an example for each free component). There is also a [registry.json](https://ui.hlmnhkl.my/registry.json).
 
 ## What you get

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hlmnhkl-ui",
-  "version": "0.20.0",
+  "version": "0.20.2",
   "description": "React components in a monochrome style. Copy them into your app with npx hlmnhkl-ui add <name>.",
   "license": "MIT",
   "homepage": "https://ui.hlmnhkl.my",

package/scripts/add.js

@@ -464,9 +464,45 @@ async function runUpdate(opts) {
   console.log(`Updated ${plural(todo.length, 'file')}.`)
 }
 
+const tokenNames = (text) => new Set([...text.replace(/\/\*[\s\S]*?\*\//g, '').matchAll(/(--[\w-]+)\s*:/g)].map((m) => m[1]))
+
+// tokens.css is never replaced, so a new component can read a token the project's copy does not have yet.
+function warnMissingTokens(opts) {
+  const mine = join(targetFolder(opts).to, 'tokens.css')
+  if (!isFile(mine)) return
+  const latest = join(SRC, 'tokens.css')
+  const text = readFileSync(latest, 'utf8')
+  const have = tokenNames(readFileSync(mine, 'utf8'))
+  const missing = [...tokenNames(text)].filter((name) => !have.has(name))
+  if (!missing.length) return
+  console.log(`\nYour tokens.css is missing ${plural(missing.length, 'token')} that the latest components use: ${missing.join(', ')}`)
+  console.log(`Your file was not changed. Copy these lines from the latest tokens.css into ${shown(CWD, mine)}, each into the same block:`)
+  // A token can be set in more than one block (dark theme, reduced motion), so every line is listed under its block.
+  const blocks = new Map()
+  const stack = []
+  let selector = ''
+  for (const line of text.split('\n').map((l) => l.trim())) {
+    if (line.endsWith('{')) {
+      stack.push(`${selector}${line.slice(0, -1)}`.trim())
+      selector = ''
+    } else if (line.startsWith('}')) stack.pop()
+    else if (line.endsWith(',') && !line.includes(': ')) selector += `${line} `
+    else if (missing.some((name) => line.startsWith(`${name}:`))) {
+      const where = stack.join(' / ')
+      blocks.set(where, [...(blocks.get(where) ?? []), line])
+    }
+  }
+  for (const [where, found] of blocks) {
+    console.log(`  In ${where}:`)
+    for (const line of found) console.log(`    ${line}`)
+  }
+  console.log(`The latest file is at ${latest}`)
+}
+
 const opts = parseArgs(process.argv.slice(2))
 if (opts.command === 'init') runInit(opts)
 else if (opts.command === 'list') runList(opts)
 else if (opts.command === 'diff') runDiff(opts)
 else if (opts.command === 'update') await runUpdate(opts)
 else runAdd(opts)
+if (['add', 'diff', 'update'].includes(opts.command)) warnMissingTokens(opts)