@mediaradar/design-components 0.5.1 → 0.7.0

package/package.json

@@ -1,13 +1,18 @@
 {
     "name": "@mediaradar/design-components",
-    "version": "0.5.1",
+    "version": "0.7.0",
     "type": "module",
     "main": "./dist/index.cjs",
     "module": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "files": [
-        "dist"
+        "dist",
+        "scripts/tailwind-coverage.mjs",
+        "scripts/check-tailwind-coverage.mjs"
     ],
+    "bin": {
+        "design-components-check-coverage": "./scripts/check-tailwind-coverage.mjs"
+    },
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
@@ -21,12 +26,13 @@
     },
     "scripts": {
         "build": "tsup",
-        "typecheck": "tsc --noEmit"
+        "typecheck": "tsc --noEmit",
+        "check:token-compat": "node scripts/check-token-compat.mjs"
     },
     "peerDependencies": {
+        "@mediaradar/design-tokens": ">=2.2.0",
         "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0",
-        "@mediaradar/design-tokens": ">=2.0.0"
+        "react-dom": "^18.0.0 || ^19.0.0"
     },
     "peerDependenciesMeta": {
         "@mediaradar/design-tokens": {
@@ -34,13 +40,19 @@
         }
     },
     "dependencies": {
-        "lucide-react": "^1.17.0"
+        "@radix-ui/react-slot": "^1.3.3",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "lucide-react": "^1.17.0",
+        "tailwind-merge": "^3.7.0"
     },
     "devDependencies": {
+        "@tailwindcss/cli": "^4.3.3",
         "@types/react": "^19.2.6",
         "@types/react-dom": "^19.2.6",
         "react": "^19.2.6",
         "react-dom": "^19.2.6",
+        "tailwindcss": "^4.3.3",
         "tsup": "^8.3.5",
         "typescript": "^5.7.2"
     },

package/scripts/check-tailwind-coverage.mjs

@@ -0,0 +1,51 @@
+#!/usr/bin/env node
+// Run from a consuming app's root, AFTER its production build:
+//
+//   npx design-components-check-coverage --css-dir dist          (Vite)
+//   npx design-components-check-coverage --css-dir .next/static  (Next.js)
+//
+// Fails if any Tailwind class used inside the app's installed copy of
+// @mediaradar/design-components is missing from the app's compiled CSS.
+
+import fs from "fs";
+import path from "path";
+import { parseArgs } from "util";
+import { createRequire } from "module";
+import { extractCandidateClasses, findMissingClasses, readCssFiles, MISSING_CLASS_CAUSES } from "./tailwind-coverage.mjs";
+
+const PACKAGE = "@mediaradar/design-components";
+
+const { values: args } = parseArgs({
+  options: { "css-dir": { type: "string", default: "dist" } },
+});
+
+// Resolve from the app, not from this file, so the check reads the copy the
+// app actually installed and bundles.
+const appRequire = createRequire(path.join(process.cwd(), "package.json"));
+let version;
+let bundleText;
+try {
+  version = appRequire(`${PACKAGE}/package.json`).version;
+  bundleText = fs.readFileSync(appRequire.resolve(PACKAGE), "utf8");
+} catch (err) {
+  console.error(`::error::Could not read ${PACKAGE} from this app's node_modules (${err.message}). Run npm ci first.`);
+  process.exit(1);
+}
+
+const candidates = extractCandidateClasses(bundleText);
+const cssDir = path.resolve(args["css-dir"]);
+const { files, text } = readCssFiles(cssDir);
+if (files.length === 0) {
+  console.error(`::error::No .css files under ${cssDir}. Run the app's production build first -- this check reads compiled CSS, not source.`);
+  process.exit(1);
+}
+
+const missing = findMissingClasses(candidates, text);
+console.log(`Checked ${candidates.size} class(es) from ${PACKAGE}@${version} against ${files.length} compiled CSS file(s) under ${args["css-dir"]}.`);
+if (missing.length) {
+  console.error(`\n::error::${missing.length} class(es) used by ${PACKAGE} are missing from this app's compiled CSS:`);
+  for (const c of missing) console.error(`  - ${c}`);
+  console.error(`\n${MISSING_CLASS_CAUSES}`);
+  process.exit(1);
+}
+console.log("All classes found in compiled CSS.");

package/scripts/tailwind-coverage.mjs

@@ -0,0 +1,96 @@
+// Shared core of the Tailwind coverage check. Used by the consumer-facing
+// CLI (check-tailwind-coverage.mjs, shipped as this package's bin) and by
+// this package's own CI (check-token-compat.mjs). Heuristic: it extracts
+// every quoted string literal from the compiled bundle and keeps tokens
+// shaped like a Tailwind utility -- simpler and more robust against a
+// minified bundle than isolating specific call sites.
+
+import fs from "fs";
+import path from "path";
+
+const STRING_LITERAL_RE = /(["'])((?:\\.|(?!\1)[^\\\n])*)\1/g;
+
+// Dash-containing utilities only, optionally with variant prefixes and an
+// arbitrary [value] or (--css-var). Bare keywords (flex, hidden) are left
+// out: every consumer uses those in its own source, so they're not where a
+// missing-class bug actually bites, and including them only adds noise.
+const CANDIDATE_RE = /^(?:[a-z][a-zA-Z0-9]*:)*[a-z][a-zA-Z0-9]*-(?:\[[^\]\s"'<>]+\]|\([^)\s"'<>]+\)|[a-zA-Z0-9][a-zA-Z0-9.%/-]*)$/;
+
+// Class-shaped strings in the bundle confirmed by real runs not to be
+// classes: HTML attribute names, popper placement values, a package name,
+// a locale tag, an SVG attribute value, an event name.
+const KNOWN_NON_CLASS_RE = /^(aria|data)-/;
+const KNOWN_NON_CLASS_EXACT = new Set([
+  "lucide-react",
+  "class-variance-authority",
+  "tailwind-merge",
+  "account-list-name",
+  "react-dom",
+  "en-US",
+  "non-scaling-stroke",
+  "report-ready",
+  "top-start",
+  "top-end",
+  "bottom-start",
+  "bottom-end",
+  "left-start",
+  "left-end",
+  "right-start",
+  "right-end",
+]);
+
+export function extractCandidateClasses(bundleText) {
+  const candidates = new Set();
+  for (const match of bundleText.matchAll(STRING_LITERAL_RE)) {
+    const literal = match[2];
+    if (!/[\s-]/.test(literal)) continue;
+    for (const token of literal.split(/\s+/)) {
+      if (!CANDIDATE_RE.test(token)) continue;
+      if (KNOWN_NON_CLASS_RE.test(token) || KNOWN_NON_CLASS_EXACT.has(token)) continue;
+      candidates.add(token);
+    }
+  }
+  return candidates;
+}
+
+// Two separate escaping passes: Tailwind writes `border-x/40` as the
+// selector text `.border-x\/40`, and a regex searching for that literal
+// backslash must escape it again. Doing only one pass silently misses
+// every class containing a special character.
+function cssSelectorEscape(className) {
+  return className.replace(/([^a-zA-Z0-9_-])/g, "\\$1");
+}
+function escapeRegex(text) {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+export function findMissingClasses(candidates, cssText) {
+  const missing = [];
+  for (const className of [...candidates].sort()) {
+    const re = new RegExp(`\\.${escapeRegex(cssSelectorEscape(className))}(?![a-zA-Z0-9_-])`);
+    if (!re.test(cssText)) missing.push(className);
+  }
+  return missing;
+}
+
+export function readCssFiles(dir) {
+  const files = [];
+  const walk = (d) => {
+    if (!fs.existsSync(d)) return;
+    for (const entry of fs.readdirSync(d, { withFileTypes: true })) {
+      const full = path.join(d, entry.name);
+      if (entry.isDirectory()) walk(full);
+      else if (entry.name.endsWith(".css")) files.push(full);
+    }
+  };
+  walk(dir);
+  return { files, text: files.map((f) => fs.readFileSync(f, "utf8")).join("\n") };
+}
+
+export const MISSING_CLASS_CAUSES = `Each missing class compiles to no CSS at all, with no build error. Usual causes:
+  1. The app's Tailwind setup doesn't scan this package's compiled output. Tailwind v4 skips node_modules:
+     add  @source '<path-to>/node_modules/@mediaradar/design-components/dist/index.js';  after the last @import
+     (Tailwind v3 / @config apps: add that path to the content array instead).
+  2. The app's @mediaradar/design-tokens is older than this package's peerDependencies range, so the token
+     behind the class doesn't exist in its theme.css yet.
+  3. The class relies on an app-local alias that isn't in @mediaradar/design-tokens -- a bug in this package.`;