@klodd/ds 5.7.0 → 5.7.1

package/bin/verify.js

@@ -1,9 +1,14 @@
 #!/usr/bin/env node
-/* @klodd/ds verify - diff:ar committade DS-filer mot paket-källan.
- * Kör i CI: npx @klodd/ds verify
- * Fail:ar med exit code 1 om drift detekteras.
+/* @klodd/ds verify - validerar att en app stammer mot paketet.
+ * Kör i CI: npx @klodd/ds verify. Exit 1 vid problem.
  *
- * exclude-fältet (v3.5.0+) i klodd-ds.json hoppas över vid diff. */
+ * Check 1 - fil-drift: diffar committade DS-filer mot paket-källan.
+ *   exclude-fältet (v3.5.0+) i klodd-ds.json hoppas över.
+ * Check 2 - deprecade selektorer: letar i app-ägd kod (app/templates/
+ *   + app/static/, exkl. synkade paket-filer i ds/) efter klass-
+ *   ANVANDNING av namn listade i paketets deprecated-classes.txt.
+ *   Kommentarer ignoreras - bara riktiga class=""/selektor/JS-strang-
+ *   referenser flaggas. */
 'use strict';
 
 const fs = require('fs');
@@ -26,6 +31,7 @@ function hashFile(filePath) {
 
 function listFilesRec(dir) {
   const out = [];
+  if (!fs.existsSync(dir)) return out;
   const stack = [{ abs: dir, rel: '' }];
   while (stack.length) {
     const { abs, rel } = stack.pop();
@@ -57,17 +63,151 @@ function diffDirs(sourceDir, targetRel, kind) {
   return drifted;
 }
 
+// --- Deprecated-class-check ---
+
+function escapeRe(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+// deprecated-classes.txt: en CSS-klass per rad (utan punkt). Allt efter
+// klassnamnet pa raden ar fri kommentar. Tomma rader + #-rader hoppas.
+function loadDeprecatedClasses() {
+  const file = path.join(pkgDir, 'deprecated-classes.txt');
+  if (!fs.existsSync(file)) return [];
+  return fs.readFileSync(file, 'utf8')
+    .split('\n')
+    .map((line) => line.trim())
+    .filter((line) => line && !line.startsWith('#'))
+    .map((line) => line.split(/\s+/)[0]);
+}
+
+// Returnerar varje rads kod med kommentarer borttagna. Flerrads
+// /* */ (css/js), <!-- --> + {# #} (html) och radslut // (js).
+function stripComments(content, lang) {
+  const blocks = {
+    css: [['/*', '*/']],
+    js: [['/*', '*/']],
+    html: [['<!--', '-->'], ['{#', '#}']],
+  }[lang] || [];
+  const lineMarker = lang === 'js' ? '//' : null;
+  const out = [];
+  let close = null;
+  for (const raw of content.split('\n')) {
+    let code = '';
+    let i = 0;
+    while (i < raw.length) {
+      if (close) {
+        const end = raw.indexOf(close, i);
+        if (end === -1) { i = raw.length; }
+        else { i = end + close.length; close = null; }
+        continue;
+      }
+      let bestPos = -1;
+      let bestOpenLen = 0;
+      let bestClose = null;
+      for (const [open, cl] of blocks) {
+        const p = raw.indexOf(open, i);
+        if (p !== -1 && (bestPos === -1 || p < bestPos)) {
+          bestPos = p;
+          bestOpenLen = open.length;
+          bestClose = cl;
+        }
+      }
+      const lc = lineMarker ? raw.indexOf(lineMarker, i) : -1;
+      if (lc !== -1 && (bestPos === -1 || lc < bestPos)) {
+        code += raw.slice(i, lc);
+        i = raw.length;
+      } else if (bestPos !== -1) {
+        code += raw.slice(i, bestPos);
+        i = bestPos + bestOpenLen;
+        close = bestClose;
+      } else {
+        code += raw.slice(i);
+        i = raw.length;
+      }
+    }
+    out.push(code);
+  }
+  return out;
+}
+
+// Sann om raden (kommentarsbefriad) ANVANDER klassen: class=""-attribut
+// (html), .selektor (css) eller klass-strang i JS.
+function usesClass(code, cls, lang) {
+  const c = escapeRe(cls);
+  if (lang === 'css') {
+    return new RegExp('\\.' + c + '(?![\\w-])').test(code);
+  }
+  if (lang === 'js') {
+    return new RegExp("['\"`](?:[^'\"`]*\\.)?" + c + '(?![\\w-])').test(code);
+  }
+  if (lang === 'html') {
+    const attrs = code.match(/class\s*=\s*("[^"]*"|'[^']*')/gi) || [];
+    return attrs.some((a) => new RegExp('(^|[^\\w-])' + c + '(?![\\w-])').test(a));
+  }
+  return false;
+}
+
+// Synkade paket-filer (css/ds/<X>, js/ds/<X> dar <X> finns i paketet)
+// hoppas - checken galler app-agd kod. App-agda domain-filer i ds/
+// (ekonom.css, jubb.css, bundles/ osv.) behalls i kontrollen.
+function grepDeprecated(classNames) {
+  const hits = [];
+  if (classNames.length === 0) return hits;
+  const LANG = { '.html': 'html', '.css': 'css', '.js': 'js' };
+  const pkgCss = new Set(listFilesRec(path.join(pkgDir, 'css')));
+  const pkgJs = new Set(listFilesRec(path.join(pkgDir, 'js')));
+  function isSyncedPackageFile(rel) {
+    if (rel.startsWith('css/ds/')) return pkgCss.has(rel.slice('css/ds/'.length));
+    if (rel.startsWith('js/ds/')) return pkgJs.has(rel.slice('js/ds/'.length));
+    return false;
+  }
+  for (const dir of ['app/templates', 'app/static']) {
+    const abs = path.join(process.cwd(), dir);
+    if (!fs.existsSync(abs)) continue;
+    for (const rel of listFilesRec(abs)) {
+      const lang = LANG[path.extname(rel)];
+      if (!lang) continue;
+      if (dir === 'app/static' && isSyncedPackageFile(rel)) continue;
+      const code = stripComments(fs.readFileSync(path.join(abs, rel), 'utf8'), lang);
+      code.forEach((line, idx) => {
+        for (const cls of classNames) {
+          if (usesClass(line, cls, lang)) {
+            hits.push(`${dir}/${rel}:${idx + 1}  ${cls}`);
+          }
+        }
+      });
+    }
+  }
+  return hits;
+}
+
+// --- Check 1: fil-drift mot paket-kallan ---
 const cssDrift = diffDirs(path.join(pkgDir, 'css'), config.cssTarget, 'css');
 const jsDrift = diffDirs(path.join(pkgDir, 'js'), config.jsTarget, 'js');
 const allDrift = [...cssDrift, ...jsDrift];
 
+// --- Check 2: deprecade selektorer i app-koden ---
+const deprecatedHits = grepDeprecated(loadDeprecatedClasses());
+
+let failed = false;
+
 if (allDrift.length > 0) {
+  failed = true;
   console.error('FAIL: @klodd/ds drift detekterad:');
   allDrift.forEach((d) => console.error('  ' + d));
-  console.error('\nKör `npm run build:ds` för att synka.');
-  process.exit(1);
+  console.error('Kör `npm run build:ds` för att synka.\n');
 }
 
+if (deprecatedHits.length > 0) {
+  failed = true;
+  console.error(`FAIL: ${deprecatedHits.length} referens(er) till deprecade klasser:`);
+  deprecatedHits.forEach((h) => console.error('  ' + h));
+  console.error('Se @klodd/ds deprecated-classes.txt för ersättningar.\n');
+}
+
+if (failed) process.exit(1);
+
 const excludedCount = exclude.size > 0 ? ` (${exclude.size} excluderade fran kontroll)` : '';
-console.log(`OK: alla DS-filer matchar @klodd/ds-paketet${excludedCount}.`);
+console.log(`OK: alla DS-filer matchar @klodd/ds-paketet${excludedCount}, 0 deprecade selektorer.`);
 process.exit(0);

package/deprecated-classes.txt

@@ -0,0 +1,10 @@
+# @klodd/ds deprecated-classes.txt
+# En CSS-klass per rad (utan punkt). Text efter klassnamnet på raden
+# är fri kommentar. Tomma rader och #-rader hoppas över.
+# npx @klodd/ds verify greppar app/templates/ + app/static/ efter
+# varje klassnamn och exit 1 vid träff.
+
+sub-row        (→ expandable-row__item matched-row, ADR 0002)
+hero-amount    (→ hero__amount, ADR 0019. /design-demon fixad, 0 träffar - kvar som påminnelse)
+btn--negative  (raderad, ingen ersättning)
+tx-row         (→ list-row)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "5.7.0",
+  "version": "5.7.1",
   "description": "Klodd shared design system - tokens, components, JS",
   "main": "css/index.css",
   "bin": {
@@ -10,6 +10,7 @@
     "css/",
     "js/",
     "bin/",
+    "deprecated-classes.txt",
     "stylelint-plugin/",
     "SKILL.md",
     "references/"