@brighterly/lib-fe-codestyle 0.5.1 → 1.0.0

package/dist/invariants/ast.d.ts

@@ -71,7 +71,7 @@ export declare const findSharedMutables: (file: string, source: string) => Promi
 }[]>;
 /** One attribute or binding, normalised so a rule need not know the node types. */
 export interface TemplateAttr {
-    /** Attribute name without the `:` / `v-bind:` prefix — `data-qa`, `class`, `title`. */
+    /** Attribute name without the `:` / `v-bind:` prefix — `data-qa`, `class`, `title`; `v-if` for the condition. */
     name: string;
     /** Static value, or the raw expression source for a binding. Null for a bare attribute. */
     value: string | null;
@@ -95,11 +95,6 @@ export interface TemplateEl {
     /** True when this element carries a `v-for`. */
     vFor: boolean;
 }
-/**
- * Root elements of a .vue file's <template>. Empty array when the file has no
- * template or the template does not parse — a rule must treat that as "nothing
- * to say", never as "compliant".
- */
 export declare const templateElements: (file: string, source: string) => Promise<TemplateEl[]>;
 /** Every element with the given tag, at any depth, in document order. */
 export declare const elementsByTag: (roots: TemplateEl[], tag: string) => TemplateEl[];

package/dist/invariants/ast.js

@@ -248,6 +248,12 @@ const normalise = (node) => {
             vFor = true;
             continue;
         }
+        // The condition is exposed as a bound attribute so a rule can read `v-if` through
+        // the AST instead of a tag regex, which an attribute holding `=>` or `>` defeats.
+        if (p.name === 'if') {
+            attrs.push({ name: 'v-if', value: p.exp?.content ?? p.exp?.loc?.source ?? null, bound: true, line });
+            continue;
+        }
         if (p.name === 'slot') {
             // `#title` → arg.content 'title'; `#[slotName]` → dynamic, keep the source
             slot = p.arg ? String(p.arg.content ?? p.arg.loc?.source ?? '') : 'default';
@@ -271,7 +277,18 @@ const normalise = (node) => {
  * template or the template does not parse — a rule must treat that as "nothing
  * to say", never as "compliant".
  */
-export const templateElements = async (file, source) => {
+/** One parse per file and source per run: several registry rules read the same Views. */
+const templateCache = new Map();
+export const templateElements = (file, source) => {
+    const key = `${file}\0${source}`;
+    let hit = templateCache.get(key);
+    if (!hit) {
+        hit = parseTemplate(file, source);
+        templateCache.set(key, hit);
+    }
+    return hit;
+};
+const parseTemplate = async (file, source) => {
     if (!file.endsWith('.vue'))
         return [];
     const { parse } = await sfc();

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": "1.0.0",
   "type": "module",
   "license": "UNLICENSED",
   "description": "Shared invariant-validator engine, rule pack and ESLint config for Brighterly Nuxt frontend apps",