fix: resolve design-diff theme and EMCN conventions

Author: Bill Leoutsakos

design-diff.config.json

@@ -76,6 +76,7 @@
     "clsx",
     "classnames",
     "tailwind-merge",
+    "@sim/emcn",
     "@sim/emcn/lib/cn",
     "@/lib/utils",
     "@/lib/cn"

scripts/design-diff/README.md

@@ -202,3 +202,29 @@ are whole commits, including ancillary changes, rather than only their headline
 
 These comparisons validate source-policy behavior, not rendered pixels or recall over all
 historical PRs. Screenshot capture, AI interpretation and Slack delivery are separate stages.
+
+### Incremental smoke test on PR #7742
+
+Five temporary commits were created directly on `458a515cbed7fbcf127ce72348ff755c5308ce13`,
+each changing one existing source file. Comparing that commit with each temporary head
+isolated the test edit from the implementation PR's own dependency changes. No temporary
+UI edits were checked out, pushed or included in the PR.
+
+| Incremental edit | Observed result after fixes |
+| --- | --- |
+| EMCN Button `rounded-[5px]` to `rounded-none` | Flagged; a `shape-effects` finding identifies `buttonVariants` |
+| Send button token `bg-[#383838]` to `bg-[#E11D48]` | Flagged; `colour` review evidence reaches the unchanged `SendButton` consumer |
+| Send button token `p-0` to `p-2` | Flagged; `dimensions` review evidence reaches the unchanged consumer |
+| TSDoc wording only in EMCN Button | Clean; zero findings |
+| Add `translate-x-2` to the send button token | Flagged for review; movement is not proven harmless in this runtime context |
+
+The experiment exposed and fixed dropped semicolons between CSS custom-variant statements
+and missing recognition of the repository's `cn` import from `@sim/emcn`. Regression tests
+cover both. All five overall flagging decisions matched expectations. One stricter category
+assertion did not: generated translation declarations currently receive the broader `layout`
+category, rather than `movement`; the conservative review decision is retained.
+
+Report noise remains substantial: the shared shape edit generated 2 static flags and 2,205
+review findings; each local token edit generated 93 review findings. These counts describe
+potential effects, not independently verified visual regressions. Conditional consumers
+still require review. This validates local engine behavior, not cloud workflow activation.

scripts/design-diff/tailwind.ts

@@ -49,7 +49,7 @@ export class TailwindNormalizer {
         root.each((node) => {
           if (node.type !== 'atrule') return
           if (['theme', 'custom-variant', 'utility'].includes(node.name))
-            chunks.push(node.toString())
+            chunks.push(`${node.toString()}${node.nodes ? '' : ';'}`)
           if (['plugin', 'config'].includes(node.name))
             limitations.push('Application JavaScript plugins/configuration are not executed')
           if (node.name === 'import') {

scripts/design-diff/tests/resolve.test.ts

@@ -105,6 +105,26 @@ it('does not collapse class composition order', async () => {
   expect(report.flagged).toBe(true)
 })
 
+it.each([
+  ['bg-[#383838]', 'bg-[#E11D48]', 'colour'],
+  ['p-0', 'p-2', 'dimensions'],
+])('resolves imported %s through the EMCN root cn export', async (before, after, category) => {
+  const report = await compareFiles(
+    {
+      [token]: `export const classes = '${before}'`,
+      [consumer]:
+        'import {cn} from "@sim/emcn"; import {classes} from "./token"; export const A=()=> <button className={cn("rounded-full", classes)}/>',
+    },
+    { [token]: `export const classes = '${after}'` },
+    { ...config, themes: [] }
+  )
+  const finding = report.findings.find((finding) => finding.after?.location.file === consumer)
+  expect(finding?.decision).toBe('flag')
+  expect(finding?.category).toBe(category)
+  expect(finding?.limitations).toEqual([])
+  expect(finding?.dependencies).toContain(token)
+})
+
 it('reviews unsupported class helpers instead of executing or trusting their names', async () => {
   const source = (value: string) =>
     `import {clsx} from 'untrusted-helper'; export const A=()=> <div className={clsx('${value}')}/>`

scripts/design-diff/tests/tailwind.test.ts

@@ -39,6 +39,30 @@ it('preserves dark/responsive/state variants', async () => {
   expect(JSON.stringify(report.findings)).toContain('hover')
 })
 
+it('preserves statement boundaries between selector and block custom variants', async () => {
+  const report = await compareFiles(
+    {
+      [theme]: `
+        @custom-variant dark (&:where(.dark, .dark *):not(:where(.light, .light *)));
+        @custom-variant hover (&:hover);
+        @custom-variant hover-hover {
+          @media (hover: hover) and (pointer: fine) { &:hover { @slot; } }
+        }
+        @theme { --color-brand: #383838; }
+      `,
+      [file]: 'export const A=()=> <div className="dark:bg-brand hover:bg-brand hover-hover:p-2"/>',
+    },
+    {
+      [file]: 'export const A=()=> <div className="dark:bg-brand hover:bg-brand hover-hover:p-4"/>',
+    }
+  )
+  const finding = report.findings.find((finding) => finding.after?.location.file === file)
+  expect(finding?.decision).toBe('flag')
+  expect(finding?.category).toBe('dimensions')
+  expect(finding?.limitations).toEqual([])
+  expect(JSON.stringify(finding?.after?.value)).toContain('(pointer: fine)')
+})
+
 it('flags unchanged consumers of changed global theme variables', async () => {
   const report = await compareFiles(
     {