@brighterly/lib-fe-codestyle 0.5.1 → 0.5.2

package/dist/invariants/rules/convention.js

@@ -80,6 +80,26 @@ const uiKitReuseFirst = {
         return out;
     },
 };
+/**
+ * Blank everything outside `<style>` bodies, line count preserved. Colour tokens are a
+ * stylesheet concern: an SVG `fill="#E2E8F0"` in an inline-icon template has no place to
+ * put a `$token`, so flagging it prescribes an impossible fix (74 of 81 .vue findings
+ * fleet-wide were exactly that, 2026-10-02).
+ */
+const onlyStyleBlocks = (source) => {
+    let out = '';
+    let last = 0;
+    const re = /<style\b[^>]*>([\s\S]*?)<\/style>/g;
+    let m;
+    while ((m = re.exec(source)) !== null) {
+        const body = m[1] ?? '';
+        const bodyStart = m.index + m[0].length - body.length - '</style>'.length;
+        out += source.slice(last, bodyStart).replace(/[^\n]/g, ' ');
+        out += body;
+        last = bodyStart + body.length;
+    }
+    return out + source.slice(last).replace(/[^\n]/g, ' ');
+};
 const scssColourTokens = {
     id: 'core/C3',
     title: 'literal colour in SCSS instead of a design token',
@@ -96,7 +116,8 @@ const scssColourTokens = {
         const palette = setting({ settings }, 'scssTokensFile', 'app/assets/scss/_colors.scss');
         if (file === palette)
             return [];
-        return eachLine(code, (line, n) => {
+        const scanned = file.endsWith('.vue') ? onlyStyleBlocks(code) : code;
+        return eachLine(scanned, (line, n) => {
             // `rgba($token, .5)` is correct usage — only a NUMERIC first argument is a literal.
             const hex = /#[0-9a-fA-F]{3,8}\b/.exec(line);
             const numericRgb = /\brgba?\(\s*\d[^)]*\)/.exec(line);
@@ -122,12 +143,19 @@ const dateFormatEnum = {
             return [];
         // A date pattern: only Y/M/D/H/m/s and separators, and carrying a real token.
         const FORMAT = /(['"`])((?=[^'"`]*(?:YYYY|DD|MM|HH|mm|ss))[YMDHhmsAaZ\s:/.,-]{5,})\1/;
+        // Every letter RUN must be a real dayjs token: 'ADHD / ADD' passes the char class
+        // (A, D and H are all tokens) and the DD lookahead, but neither 'ADHD' nor 'ADD'
+        // is a token — it is an answer label, not a format (found live in cs-app, 2026-10-02).
+        const TOKENS = new Set(['YYYY', 'YY', 'Y', 'MMMM', 'MMM', 'MM', 'M', 'DD', 'D', 'Do', 'dddd', 'ddd', 'dd', 'd', 'HH', 'H', 'hh', 'h', 'mm', 'm', 'ss', 's', 'SSS', 'A', 'a', 'Z', 'ZZ']);
+        const isFormat = (s) => (s.match(/[A-Za-z]+/g) ?? []).every(run => TOKENS.has(run));
         return eachLine(code, (line, n) => {
-            if (/\.toISOString\s*\(/.test(line)) {
-                return { file, line: n, message: `toISOString() is always UTC and always carries a time — it shifts the calendar day; format through ${dateModule}` };
+            // Only the day-extraction misuse shifts the calendar day. A bare toISOString()
+            // (an API timestamp) and the epoch duration trick (.slice(14, 19)) are correct uses.
+            if (/\.toISOString\s*\(\s*\)\s*(?:\.split\s*\(\s*['"`]T['"`]\s*\)|\.(?:slice|substring)\s*\(\s*0\s*,\s*10\s*\))/.test(line)) {
+                return { file, line: n, message: `toISOString() is always UTC — extracting its date part shifts the calendar day for any visitor west of Greenwich; format through ${dateModule}` };
             }
             const m = FORMAT.exec(line);
-            if (!m)
+            if (!m || !isFormat(m[2] ?? ''))
                 return null;
             return { file, line: n, message: `hand-rolled date format ${m[1]}${m[2]}${m[1]} — use a member of ${dateModule}` };
         });

package/dist/invariants/rules/fixtures.js

@@ -33,16 +33,40 @@ export const commonFixtures = {
         bad: 'window.addEventListener("resize", onResize)',
         good: 'useEventListener(window, "resize", onResize)',
     },
-    'core/C3': {
-        file: 'app/assets/scss/components/Card.scss',
-        bad: '.card { color: #1f2937; }',
-        good: '.card { color: $slate-800; }',
-    },
-    'core/C4': {
-        file: 'app/a.ts',
-        bad: "const d = dayjs().format('YYYY-MM-DD')",
-        good: 'const d = dayjs().format(DateFormat.DefaultDate)',
-    },
+    'core/C3': [
+        {
+            file: 'app/assets/scss/components/Card.scss',
+            bad: '.card { color: #1f2937; }',
+            good: '.card { color: $slate-800; }',
+        },
+        // In a .vue file only the <style> block is a stylesheet: an SVG fill in the
+        // template has no place to put a $token, so it must stay quiet.
+        {
+            file: 'app/components/UI/Icons/IconLeaf.vue',
+            bad: '<template><svg><path fill="currentColor" /></svg></template>\n<style scoped lang="scss">\n.icon { color: #e2e8f0; }\n</style>',
+            good: '<template><svg><path fill="#E2E8F0" /></svg></template>\n<style scoped lang="scss">\n.icon { color: $slate-200; }\n</style>',
+        },
+    ],
+    'core/C4': [
+        {
+            file: 'app/a.ts',
+            bad: "const d = dayjs().format('YYYY-MM-DD')",
+            good: 'const d = dayjs().format(DateFormat.DefaultDate)',
+        },
+        // The day-extraction misuse fires; a bare toISOString() (an API timestamp) and the
+        // epoch duration trick do not.
+        {
+            file: 'app/b.ts',
+            bad: "const day = new Date().toISOString().split('T')[0]",
+            good: 'const generatedAt = dayjs().toISOString()\nconst duration = new Date(s * 1000).toISOString().slice(14, 19)',
+        },
+        // Every letter run must be a real dayjs token — an answer label that happens to fit
+        // the char class ('ADHD / ADD' carries a DD) is not a format string.
+        {
+            file: 'app/c.ts',
+            good: "const option = { code: 'ADHD_ADD', label: 'ADHD / ADD' }",
+        },
+    ],
     'core/C6': {
         file: 'app/assets/scss/components/Card.scss',
         bad: '.card { font-size: 14px; }',

package/dist/invariants/rules/index.d.ts

@@ -42,7 +42,7 @@ export declare const sharedRuleIds: {
     readonly 'core/C2': "core/C2";
     /** `warn` — a literal colour (`#hex`, numeric `rgba()`) in SCSS/Vue instead of a palette token. Hardcoded colours survive theme and palette changes silently. Fix: a token from `settings.scssTokensFile`. */
     readonly 'core/C3': "core/C3";
-    /** `warn` — a hand-rolled date format string (`'YYYY-MM-DD'`) or `toISOString()`. The date's shape becomes an accident instead of a contract. Fix: the shared enum (`settings.dateFormatModule`). */
+    /** `warn` — a hand-rolled date format string (`'YYYY-MM-DD'`) or a `toISOString()` whose date part is extracted (`.split('T')[0]`, `.slice(0, 10)`). The date's shape becomes an accident instead of a contract. Fix: the shared enum (`settings.dateFormatModule`). */
     readonly 'core/C4': "core/C4";
     /** `warn` — a type file outside `types/<entity>/{enums,interfaces,types}.ts` (root under `settings.typesRoot`). Root-level or mixed-kind type files accrete unrelated entities. `.d.ts` ambient files are exempt. */
     readonly 'core/C5': "core/C5";

package/dist/invariants/rules/index.js

@@ -42,7 +42,7 @@ export const sharedRuleIds = {
     'core/C2': 'core/C2',
     /** `warn` — a literal colour (`#hex`, numeric `rgba()`) in SCSS/Vue instead of a palette token. Hardcoded colours survive theme and palette changes silently. Fix: a token from `settings.scssTokensFile`. */
     'core/C3': 'core/C3',
-    /** `warn` — a hand-rolled date format string (`'YYYY-MM-DD'`) or `toISOString()`. The date's shape becomes an accident instead of a contract. Fix: the shared enum (`settings.dateFormatModule`). */
+    /** `warn` — a hand-rolled date format string (`'YYYY-MM-DD'`) or a `toISOString()` whose date part is extracted (`.split('T')[0]`, `.slice(0, 10)`). The date's shape becomes an accident instead of a contract. Fix: the shared enum (`settings.dateFormatModule`). */
     'core/C4': 'core/C4',
     /** `warn` — a type file outside `types/<entity>/{enums,interfaces,types}.ts` (root under `settings.typesRoot`). Root-level or mixed-kind type files accrete unrelated entities. `.d.ts` ambient files are exempt. */
     'core/C5': 'core/C5',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brighterly/lib-fe-codestyle",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "type": "module",
   "license": "UNLICENSED",
   "description": "Shared invariant-validator engine, rule pack and ESLint config for Brighterly Nuxt frontend apps",