@usableapp/cardds 0.7.103 → 0.7.105

package/lint/values.mjs

@@ -0,0 +1,144 @@
+// lint/values.mjs — a value cardds writes for itself (Lh 2026-10-20: "the gallery is a component catalog: a component that slips out of the tokens or
+// the theme is a problem, because that is how a hard-coded look gets made that cannot be taken out and used"). Every declaration of a component's css
+// and every literal in an inline `style` of the package's own .tsx is read; what it may not hold is named by kind. The foundation files are where the
+// values live, so they are not read. `npm run check` reports these before the tests run (scripts/own-values.mjs); tests/tokens.spec.js holds them at none.
+import { readFileSync, readdirSync, statSync } from 'node:fs';
+import { join } from 'node:path';
+import { blankComments, braceAt, lineOf, styleEntries } from './rules.mjs';
+
+export const FOUNDATION = ['tokens.css', 'palette.css', 'finish.css', 'theme.template.css', 'fonts.css'];
+// where the package writes looks: its components' css, its components, its stories
+export const OWN = { css: 'css', tsx: ['src', '.design-sync/previews'] };
+
+// every named colour of CSS Color 4 (`transparent` and `currentcolor` name no look of their own)
+const COLOUR_NAMES = `aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse
+chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkgrey darkkhaki darkmagenta darkolivegreen
+darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkslategrey darkturquoise darkviolet deeppink deepskyblue dimgray
+dimgrey dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray green greenyellow grey honeydew hotpink indianred
+indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgray lightgreen lightgrey
+lightpink lightsalmon lightseagreen lightskyblue lightslategray lightslategrey lightsteelblue lightyellow lime limegreen linen magenta maroon
+mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue
+mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred
+papayawhip peachpuff peru pink plum powderblue purple rebeccapurple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna
+silver skyblue slateblue slategray slategrey snow springgreen steelblue tan teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen`.split(/\s+/);
+const COLOUR = new RegExp(`#[0-9a-f]{3,8}\\b|\\b(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color)\\(|(?<![\\w-])(?:${COLOUR_NAMES.join('|')})(?![\\w-])`, 'gi');
+const NUM = String.raw`(?<![\w.#-])(-?\d*\.?\d+)`;
+// the names of the tokens out, their fallbacks kept: `var(--x, 5)` reads as `5`
+const fallbacks = (v) => v.replace(/var\(\s*--[\w-]+\s*,?/g, '');
+const numbers = (v) => [...v.matchAll(new RegExp(`${NUM}(%?)(?![\\w.(])`, 'g'))].map((m) => ({ n: parseFloat(m[1]), what: m[0] }));
+// a sign or an identity is not a value: `* -1` turns a token round, 0 and 1 leave it as it is
+const sign = (n) => n === 0 || Math.abs(n) === 1;
+
+/** the values one declaration writes in place: [{ kind, what }] */
+export function ownIn(prop, raw) {
+  const out = [], say = (kind, what) => out.push({ kind, what });
+  prop = prop.toLowerCase();
+  if (/^(-webkit-)?mask/.test(prop)) return out; // a mask's colours are its shape
+  const v = raw.replace(/url\([^)]*\)/g, 'url()').replace(/"[^"]*"|'[^']*'/g, '""');
+  for (const m of v.matchAll(COLOUR)) say('colour', m[0]);
+  for (const m of v.matchAll(new RegExp(`${NUM}(px|pt|cm|mm|in|pc|q)\\b`, 'gi'))) if (parseFloat(m[1])) say('px', m[0]);
+  for (const m of v.matchAll(new RegExp(`${NUM}rem\\b`, 'gi'))) if (parseFloat(m[1])) say('length', m[0]);
+  for (const m of v.matchAll(new RegExp(`${NUM}(ms|s)\\b`, 'gi'))) if (parseFloat(m[1])) say('time', m[0]);
+  for (const m of v.matchAll(new RegExp(`${NUM}(deg|grad|rad|turn)\\b`, 'gi'))) {
+    const n = parseFloat(m[1]), deg = m[2].toLowerCase() === 'deg';
+    if (!n || (deg && n % 45 === 0) || (deg && Math.abs(n) === 1 && /\*\s*-?1deg/i.test(v))) continue; // a quarter or half turn is an orientation; `* 1deg` makes a number an angle
+    say('angle', m[0]);
+  }
+  if (/^(transition|animation)/.test(prop)) for (const m of v.matchAll(/(?<![\w-])(ease-in-out|ease-out|ease-in|ease|linear|cubic-bezier|steps)(?![\w-])/gi)) say('easing', m[0]);
+  if (prop === 'z-index') for (const x of numbers(fallbacks(v))) if (x.n) say('layer', x.what);
+  if (prop === 'opacity') for (const x of numbers(fallbacks(v))) if (x.what.endsWith('%') ? x.n % 100 : !sign(x.n)) say('fade', x.what);
+  if (/filter$/.test(prop)) for (const m of fallbacks(v).matchAll(/opacity\(\s*([^)]*)\)/gi)) for (const x of numbers(m[1])) if (x.what.endsWith('%') ? x.n % 100 : !sign(x.n)) say('fade', x.what);
+  if (prop === 'scale') for (const x of numbers(fallbacks(v))) if (!x.what.endsWith('%') && !sign(x.n)) say('scale', x.what);
+  if (prop === 'transform') for (const m of fallbacks(v).matchAll(/scale[xyz3d]*\(\s*([^)]*)\)/gi)) for (const x of numbers(m[1])) if (!sign(x.n)) say('scale', x.what);
+  if (/^(font|font-weight|line-height|letter-spacing)$/.test(prop)) {
+    if (prop === 'font') {
+      // a font's size may be made of a token (`calc(var(--fs-h1) * 3)`): calc() out, and what stays is written in place
+      const bare = fallbacks(v.replace(/calc\([^()]*(?:\([^()]*\)[^()]*)*\)/g, ''));
+      for (const m of bare.matchAll(/(?<![\w.-])[1-9]00(?![\w.])/g)) say('type', m[0]);
+      for (const m of bare.matchAll(/\/\s*\d*\.?\d+(?![\w.%])/g)) say('type', m[0]);
+    } else {
+      // a leading or a tracking is read inside calc() too: only a sign turns a token round
+      const bare = fallbacks(v).replace(/[*/]\s*-?1(?![\w.%])/g, '');
+      if (prop === 'letter-spacing') { for (const m of bare.matchAll(new RegExp(`${NUM}(?:em)?\\b`, 'gi'))) if (parseFloat(m[1])) say('type', m[0]); }
+      else for (const x of numbers(bare)) if (!x.what.endsWith('%') || x.n) say('type', x.what);
+    }
+  }
+  return out;
+}
+
+/** a component's css rules (tests/helpers.js cssRules) → every value written in place, at the line of its declaration */
+export function ownValues(rules) {
+  return rules.flatMap((r) => r.decls.flatMap((d, i) => {
+    const at = d.indexOf(':'), prop = d.slice(0, at).trim(), raw = d.slice(at + 1).trim();
+    return ownIn(prop, raw).map((o) => ({ file: r.file, line: r.lines?.[i] ?? r.line, selector: r.selector, ...o, decl: `${prop}: ${raw}` }));
+  }));
+}
+
+// React's numbers that are not lengths; any other number on a style key is px
+const UNITLESS = /^(opacity|z-index|line-height|font-weight|flex|flex-grow|flex-shrink|order|scale|zoom|aspect-ratio|column-count|tab-size|widows|orphans|animation-iteration-count|grid-(row|column)(-start|-end)?|--.*)$/;
+const kebab = (key) => key.startsWith('--') ? key : key.replace(/^(Webkit|Moz|ms)(?=[A-Z])/, (p) => `-${p.toLowerCase()}`).replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+
+/** a .tsx source → every value an inline `style` writes in place: the literals of each entry (a string, a template's text, a bare number) */
+export function ownStyle(source, file) {
+  const text = blankComments(source), out = [];
+  const read = (e) => {
+    const prop = kebab(e.key);
+    const lit = [...e.value.matchAll(/"([^"]*)"|'([^']*)'|`([^`]*)`/g)].map((m) => m[1] ?? m[2] ?? m[3].replace(/\$\{[^}]*\}/g, ' '));
+    const num = e.value.trim().match(/^-?\d*\.?\d+$/);
+    if (num) lit.push(UNITLESS.test(prop) || !parseFloat(num[0]) ? num[0] : `${num[0]}px`);
+    for (const raw of lit) for (const o of ownIn(prop, raw)) out.push({ file, line: lineOf(text, e.at), selector: 'style', ...o, decl: `${e.key}: ${e.value.trim()}` });
+  };
+  for (const m of text.matchAll(/\bstyle\s*=\s*\{\{/g)) {
+    const open = m.index + m[0].length - 2, expr = braceAt(text, open);
+    if (expr.endsWith('}}')) for (const e of styleEntries(expr.slice(2, -2), open + 2, ',')) read(e);
+  }
+  for (const m of text.matchAll(/\bstyle\s*=\s*(?:"([^"]*)"|'([^']*)')/g)) {
+    const body = m[1] ?? m[2];
+    for (const e of styleEntries(body, m.index + m[0].indexOf(body), ';')) read({ ...e, value: `'${e.value}'` });
+  }
+  return out.sort((a, b) => a.line - b.line);
+}
+
+// ---- css: every block of a file is a rule — selector (or at-rule prelude), its OWN declarations (and the line each starts on), and the block it sits in ----
+// Comments are blanked to newlines so a line number is the file's. A `}` with nothing open, or a block still open at the end, throws naming the file.
+export function cssRules(text, file) {
+  const css = text.replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, ''));
+  const rules = [], open = [];
+  let buf = '', quote = '', line = 1, from = 1;
+  const top = () => open[open.length - 1];
+  const decl = () => { const d = buf.replace(/\s+/g, ' ').trim(); buf = ''; if (d && top()) { top().decls.push(d.replace(/^([^:]+?)\s*:\s*/, '$1: ')); top().lines.push(from); } };
+  for (const c of css) {
+    if (c === '\n') line++;
+    if (quote) { buf += c; if (c === quote) quote = ''; continue; }
+    if (!buf.trim() && /\S/.test(c)) from = line;
+    if (c === '"' || c === "'") { quote = c; buf += c; continue; }
+    if (c === '{') {
+      const selector = buf.replace(/\s+/g, ' ').trim(), parent = top() ?? null;
+      const rule = { file, line, selector, decls: [], lines: [], parent, inKeyframes: !!parent?.inKeyframes || selector.startsWith('@keyframes') };
+      rules.push(rule); open.push(rule); buf = '';
+    } else if (c === ';') decl();
+    else if (c === '}') { if (!top()) throw new Error(`twins: ${file}:${line}: a } with no block open`); decl(); open.pop(); }
+    else buf += c;
+  }
+  if (top()) throw new Error(`twins: ${file}: the block opened at line ${top().line} (${top().selector}) never closes`);
+  return rules;
+}
+
+function* tsxIn(dir) {
+  for (const name of readdirSync(dir)) {
+    const p = join(dir, name);
+    if (statSync(p).isDirectory()) yield* tsxIn(p);
+    else if (name.endsWith('.tsx')) yield p;
+  }
+}
+
+/** every value the package writes for itself, from `root` (the package folder): its components' css and the inline styles of src/ and the stories */
+export function ownValuesIn(root = '.') {
+  const css = readdirSync(join(root, OWN.css)).filter((f) => f.endsWith('.css') && !FOUNDATION.includes(f)).sort()
+    .flatMap((f) => ownValues(cssRules(readFileSync(join(root, OWN.css, f), 'utf8'), `${OWN.css}/${f}`)));
+  const tsx = OWN.tsx.flatMap((d) => [...tsxIn(join(root, d))].sort().map((p) => [p, p.slice(root === '.' ? 0 : root.length + 1)]))
+    .flatMap(([p, f]) => ownStyle(readFileSync(p, 'utf8'), f));
+  return [...css, ...tsx];
+}
+
+export const say = (o) => `${o.file}:${o.line}  error  [own-value] ${o.kind} ${o.what} in \`${o.decl}\`${o.selector === 'style' ? ' (an inline style)' : ` (${o.selector})`}: read a token (css/tokens.css), or add one there`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usableapp/cardds",
-  "version": "0.7.103",
+  "version": "0.7.105",
   "license": "UNLICENSED",
   "type": "module",
   "description": "card-first mobile design system, React-first: the components in src/ are thin wrappers over the CSS contract (css/*.css stays the only truth); gallery/ shows every story live (npm run dev), tests/ measures the geometry.",
@@ -21,13 +21,15 @@
     "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p gallery/tsconfig.json --noEmit",
     "snapshot:write": "CARDDS_SNAPSHOT=write playwright test tests/style-snapshot.spec.js",
     "snapshot:check": "CARDDS_SNAPSHOT=check playwright test tests/style-snapshot.spec.js",
-    "check": "node bin/cardds.mjs check .design-sync/previews gallery/src"
+    "dup": "jscpd",
+    "check": "node scripts/own-values.mjs && node bin/cardds.mjs check .design-sync/previews gallery/src"
   },
   "devDependencies": {
     "@playwright/test": "1.58.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.1",
+    "jscpd": "4.3.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-router": "^8.3.1",
@@ -67,9 +69,9 @@
     "CHANGELOG.md"
   ],
   "peerDependencies": {
+    "eslint": ">=9",
     "react": ">=19",
-    "react-dom": ">=19",
-    "eslint": ">=9"
+    "react-dom": ">=19"
   },
   "publishConfig": {
     "access": "public"