@atom-learning/components 11.0.0 → 11.2.0-beta.1

package/scripts/generate-responsive-variant-classes.mjs

@@ -1,6 +1,7 @@
 import fs from 'node:fs'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
+
 import g from 'glob'
 import { Project, SyntaxKind } from 'ts-morph'
 
@@ -19,7 +20,7 @@ function extractArrayElements(node) {
         } catch {
           // Fallback: if getLiteralValue() fails, try to extract from text
           // This can happen with malformed strings or edge cases
-          let text = element.getText().trim()
+          const text = element.getText().trim()
           // Remove surrounding quotes
           const quoteMatch = text.match(/^(['"`])([\s\S]*)\1$/)
           if (quoteMatch) {
@@ -133,6 +134,42 @@ function extractVariantsFromAST(sourceFile) {
       SyntaxKind.ObjectLiteralExpression
     )
 
+    // compoundVariants resolve per breakpoint too, so their classes need the
+    // same prefixed forms in the safelist as the plain variants'
+    const compoundVariantsValue = getPropertyValue(configObj, 'compoundVariants')
+
+    if (
+      compoundVariantsValue &&
+      compoundVariantsValue.getKind() === SyntaxKind.ArrayLiteralExpression
+    ) {
+      const compoundClasses = []
+
+      for (const element of compoundVariantsValue
+        .asKindOrThrow(SyntaxKind.ArrayLiteralExpression)
+        .getElements()) {
+        if (element.getKind() !== SyntaxKind.ObjectLiteralExpression) continue
+
+        const classValue = getPropertyValue(
+          element.asKindOrThrow(SyntaxKind.ObjectLiteralExpression),
+          'class'
+        )
+        if (!classValue) continue
+
+        compoundClasses.push(...extractClasses(classValue))
+      }
+
+      if (compoundClasses.length > 0) {
+        variants.compoundVariants = {
+          class: [
+            ...new Set([
+              ...(variants.compoundVariants?.class ?? []),
+              ...compoundClasses
+            ])
+          ]
+        }
+      }
+    }
+
     for (const variantProp of variantsObj.getProperties()) {
       if (variantProp.getKind() !== SyntaxKind.PropertyAssignment) continue
 
@@ -196,8 +233,13 @@ function extractVariantsFromAST(sourceFile) {
   return Object.keys(variants).length > 0 ? variants : null
 }
 
-function generateResponsiveVariantClasses(variants) {
-  const breakpoints = ['sm', 'md', 'lg', 'xl']
+/**
+ * Collect the unprefixed class names used by every responsive-enabled variant.
+ *
+ * Breakpoint prefixes belong to generateCSSFileContent, which emits them as a
+ * brace alternation, so adding `sm:`/`md:`/… here would only be collapsed again.
+ */
+function extractVariantClasses(variants) {
   const classes = new Set()
 
   for (const variantOptions of Object.values(variants)) {
@@ -205,37 +247,26 @@ function generateResponsiveVariantClasses(variants) {
       if (Array.isArray(classList)) {
         for (const cls of classList) {
           const trimmed = typeof cls === 'string' ? cls.trim() : ''
-          if (trimmed) {
-            classes.add(trimmed)
-            for (const bp of breakpoints) {
-              classes.add(`${bp}:${trimmed}`)
-            }
-          }
+          if (trimmed) classes.add(trimmed)
         }
       }
     }
   }
 
-  return Array.from(classes).sort()
-}
-
-function extractUniqueClasses(allClasses) {
-  const uniqueClasses = new Set()
-
-  for (const cls of allClasses) {
-    const match = cls.match(/^(sm|md|lg|xl):(.+)$/)
-    uniqueClasses.add(match ? match[2] : cls)
-  }
-
-  return Array.from(uniqueClasses).sort()
+  return [...classes].sort()
 }
 
 /**
  * Generate CSS file content with @source inline() patterns
  */
 function generateCSSFileContent(allClasses) {
-  const uniqueClasses = extractUniqueClasses(allClasses)
-  const breakpointPrefix = `{,sm:,md:,lg:,xl:}`
+  const uniqueClasses = [...new Set(allClasses)].sort()
+  // Prefixed forms only. A responsive variant builds `sm:h-px` by concatenation
+  // at runtime, so no scanner can see it; the bare `h-px` is a literal in the
+  // component source that ships verbatim in dist, so Tailwind finds it by
+  // scanning the package. Adding a bare alternative here would emit a fifth of
+  // this file's rules for classes that are already covered.
+  const breakpointPrefix = `{sm:,md:,lg:,xl:}`
   const classPattern = `{${uniqueClasses.join(',')}}`
   const pattern = `@source inline('${breakpointPrefix}${classPattern}');`
 
@@ -257,6 +288,30 @@ ${pattern}
 `
 }
 
+/**
+ * Write the CSS file only when its content actually changed.
+ *
+ * The generator runs on every source-file save via the dev-server watcher, so
+ * an unconditional write rewrites identical bytes constantly. Because this file
+ * is @import-ed into the Tailwind entry with @source inline(...), each rewrite
+ * makes @tailwindcss/vite trigger a full page reload — breaking HMR. Diffing
+ * against the existing content lets unchanged saves Fast-Refresh. See #857.
+ *
+ * @param {string} cssOutputPath - Absolute path of the CSS file to write
+ * @param {string} cssContent - The content to write
+ * @returns {boolean} true if the file was (over)written, false if unchanged
+ */
+function writeCSSFileIfChanged(cssOutputPath, cssContent) {
+  const existing = fs.existsSync(cssOutputPath)
+    ? fs.readFileSync(cssOutputPath, 'utf-8')
+    : null
+
+  if (cssContent === existing) return false
+
+  fs.writeFileSync(cssOutputPath, cssContent, 'utf-8')
+  return true
+}
+
 /**
  * Main function to generate responsive variant classes safelist
  *
@@ -280,9 +335,14 @@ async function generateResponsiveVariantClassesSafelist(options = {}) {
     })
 
     const patterns = Array.isArray(input) ? input : [input]
+    // Test files declare throwaway styled() fixtures whose classes never reach
+    // a consumer, so safelisting them ships dead CSS. `-d` covers the tsd
+    // type-test files, which are just as much fixtures as the runtime specs.
     const ignorePatterns = [
       '**/*.test.tsx',
       '**/*.test.ts',
+      '**/*.test-d.tsx',
+      '**/*.test-d.ts',
       '**/__snapshots__/**',
       '**/node_modules/**',
       '**/responsive-variant-classes.css'
@@ -294,7 +354,7 @@ async function generateResponsiveVariantClassesSafelist(options = {}) {
       matches.forEach((file) => files.add(file))
     }
 
-    const fileArray = Array.from(files)
+    const fileArray = [...files]
     console.log(`Found ${fileArray.length} component files to scan\n`)
 
     const allVariants = {}
@@ -353,19 +413,29 @@ async function generateResponsiveVariantClassesSafelist(options = {}) {
     )
 
     // Generate all responsive classes
-    const allClasses = generateResponsiveVariantClasses(allVariants)
+    const allClasses = extractVariantClasses(allVariants)
 
     console.log(
-      `✨ Generated ${allClasses.length} responsive variant class combinations\n`
+      `✨ Generated ${allClasses.length} variant classes × 4 breakpoints\n`
     )
 
     // Generate and write the CSS file
     const cssContent = generateCSSFileContent(allClasses)
     const cssOutputPath = path.resolve(cwd, outputPath)
-    fs.writeFileSync(cssOutputPath, cssContent, 'utf-8')
-
-    console.log(`✅ Generated ${path.relative(cwd, cssOutputPath)}`)
-    console.log(`   Contains ${allClasses.length} variant class combinations\n`)
+    const written = writeCSSFileIfChanged(cssOutputPath, cssContent)
+
+    if (written) {
+      console.log(`✅ Generated ${path.relative(cwd, cssOutputPath)}`)
+      console.log(`   Contains ${allClasses.length} variant classes\n`)
+    } else {
+      // Skipping the rewrite is the whole point: this file is @import-ed into
+      // the Tailwind entry with @source inline(...), so any rewrite — even
+      // identical bytes — makes @tailwindcss/vite trigger a full page reload,
+      // killing Fast Refresh/HMR in consuming apps. See #857.
+      console.log(
+        `✅ ${path.relative(cwd, cssOutputPath)} unchanged — skipped write (${allClasses.length} classes)\n`
+      )
+    }
   } catch (error) {
     console.error('❌ Error generating responsive variant classes:', error)
     process.exit(1)
@@ -380,8 +450,9 @@ export {
   extractArrayElements,
   extractClasses,
   extractVariantsFromAST,
-  generateResponsiveVariantClasses,
-  generateCSSFileContent
+  extractVariantClasses,
+  generateCSSFileContent,
+  writeCSSFileIfChanged
 }
 
 // Run the script if this file is executed directly (not imported)

package/src/responsive-variant-classes.css

@@ -12,4 +12,4 @@
  * Uses Tailwind v4's @source inline() pattern syntax for efficient class detection.
  */
 
-@source inline('{,sm:,md:,lg:,xl:}{*:not-last:mr-2,*:not-last:mr-3,-mt-1,[&>[data-dialog-close]]:right-4,[&>[data-dialog-close]]:right-safe-offset-4,[&>[data-dialog-close]]:top-4,[&>[data-dialog-close]]:top-safe-offset-4,[&_svg]:size-4,[&_svg]:size-5,[&_svg]:size-[22px],[--active:rgba(255,255,255,0.75)],[--active:var(--color-danger-dark)],[--active:var(--color-primary-1000)],[--active:var(--color-primary-1100)],[--active:var(--color-primary-1200)],[--active:var(--color-success-dark)],[--active:var(--color-warning-dark)],[--active:var(--color-white)],[--banner-heading-color:var(--color-foreground-7-plus)],[--banner-text-color:var(--color-grey-100)],[--base:var(--color-danger)],[--base:var(--color-grey-700)],[--base:var(--color-primary-1000)],[--base:var(--color-primary-800)],[--base:var(--color-success)],[--base:var(--color-warning)],[--base:var(--color-white)],[--base:white],[--interact:rgba(255,255,255,0.9)],[--interact:var(--color-danger-mid)],[--interact:var(--color-primary-1100)],[--interact:var(--color-primary-900)],[--interact:var(--color-success-mid)],[--interact:var(--color-warning-mid)],[--interact:var(--color-white)],[--solid-active:var(--color-grey-200)],[--solid-base:var(--color-white)],[--solid-interact:var(--color-grey-100)],[--solid-text:var(--color-grey-1200)],[--text:var(--color-grey-800)],[--text:var(--color-primary-800)],absolute,bg-(--background-bold),bg-(--background-subtle),bg-(--base),bg-(--base-1),bg-(--base-11),bg-(--base-3),bg-(--solid-base,var(--base)),bg-[unset],bg-grey-100,bg-grey-400,bg-position-[right_--spacing(2)_top_50%,0_0],bg-position-[right_--spacing(3)_top_50%,0_0],bg-size-[18px_auto,100%],bg-size-[20px_auto,100%],bg-transparent,bg-white,block,border,border-(--base-3),border-b,border-b-(--border-bottom),border-current,border-grey-700,border-none,border-white,capsize-[0.1309],capsize-[0.2078],capsize-[0.2709],capsize-[0.3336],capsize-[0.3506],capsize-[0.3864],capsize-[0.3983],capsize-[0.4056],capsize-[0.4364],capsize-after-[0.2405],capsize-after-[0.2634],capsize-after-[0.26],capsize-after-[0.2],capsize-before-[0.1405],capsize-before-[0.16],capsize-before-[0.1],capsize-before-[0.2114],capsize-none,cursor-not-allowed,cursor-pointer,data-[state=inactive]:hover:bg-marsh-300,data-[state=inactive]:hover:bg-primary-300,disabled:cursor-not-allowed,disabled:opacity-30,flex,flex-1,flex-[unset],flex-col,focus-visible:border-marsh-800,focus-visible:border-primary-800,focus:border-primary-800,focus:outline-2,focus:outline-blue-800,focus:outline-none,focus:outline-offset-1,focus:outline-solid,focus:z-1,font-body,font-bold,font-display,font-medium,font-mono,font-normal,font-semibold,gap-2,gap-3,gap-4,h-1,h-10,h-12,h-16,h-2,h-8,h-full,h-px,h-safe-offset-top-16,h-safe-offset-top-24,h-screen,hidden,leading-[1.08],leading-[1.12],leading-[1.14],leading-[1.28],leading-[1.40],leading-[1.42],leading-[1.52],leading-[1.53],leading-[1.6],leading-none,leading-normal,max-h-12,max-h-18,max-h-8,max-h-[142px],max-h-[213px],max-h-[90vh],max-h-screen,max-w-14,max-w-21,max-w-[126px],max-w-[190px],max-w-[285px],max-w-[90vw],max-w-full,max-w-screen,mb-3,mb-4,mb-6,min-h-10,min-h-12,min-h-8,not-disabled:active:bg-(--active),not-disabled:active:bg-(--solid-active,var(--active)),not-disabled:active:text-(--active),not-disabled:focus:bg-(--interact),not-disabled:focus:bg-(--solid-interact,var(--interact)),not-disabled:focus:no-underline,not-disabled:focus:text-(--interact),not-disabled:focus:text-(--solid-text,white),not-disabled:focus:text-(--text,white),not-disabled:hover:bg-(--interact),not-disabled:hover:bg-(--solid-interact,var(--interact)),not-disabled:hover:no-underline,not-disabled:hover:text-(--interact),not-disabled:hover:text-(--solid-text,white),not-disabled:hover:text-(--text,white),opacity-60,p-0,p-10,p-2,p-3,p-4,p-6,p-8,pl-2,pl-3,pointer-events-none,pr-10,pr-8,pt-safe,px-1,px-2,px-4,px-6,px-8,py-0,py-0.5,py-1,py-4,py-6,right-4,rounded-full,rounded-md,rounded-none,rounded-sm,rounded-xl,shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)],size-1.5,size-10,size-12,size-3,size-4,size-6,size-8,size-auto,static,stroke-2,stroke-[1.5],stroke-[1.75],supports-color-mix:backdrop-blur-sm,supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)],supports-svh:h-auto,supports-svh:h-svh,supports-svh:max-h-[90vh],supports-svh:max-h-svh,text-(--base),text-(--foreground-7-plus),text-(--solid-text,white),text-(--text,white),text-(--text-bold),text-(--text-on-white),text-(--text-subtle),text-2xl,text-3xl,text-4xl,text-danger,text-grey-800,text-info,text-lg,text-md,text-primary-800,text-sm,text-success,text-warning,text-white!,text-xl,text-xs,top-4,top-safe,top-safe-offset-2,tracking-[0.01em],w-120,w-150,w-200,w-275,w-95,w-[unset]!,w-auto,w-full,w-max,w-px,w-screen}');
+@source inline('{sm:,md:,lg:,xl:}{(--bg-background-subtle-hover),*:not-last:mr-2,*:not-last:mr-3,-mt-1,[&>[data-dialog-close]]:right-4,[&>[data-dialog-close]]:right-safe-offset-4,[&>[data-dialog-close]]:top-4,[&>[data-dialog-close]]:top-safe-offset-4,[&_svg]:size-4,[&_svg]:size-5,[&_svg]:size-[22px],[--active:rgba(255,255,255,0.75)],[--active:var(--color-danger-dark)],[--active:var(--color-primary-1000)],[--active:var(--color-primary-1100)],[--active:var(--color-primary-1200)],[--active:var(--color-success-dark)],[--active:var(--color-warning-dark)],[--active:var(--color-white)],[--banner-heading-color:var(--color-foreground-7-plus)],[--banner-text-color:var(--color-grey-100)],[--base:var(--color-danger)],[--base:var(--color-grey-700)],[--base:var(--color-primary-1000)],[--base:var(--color-primary-800)],[--base:var(--color-success)],[--base:var(--color-warning)],[--base:var(--color-white)],[--base:white],[--interact:rgba(255,255,255,0.9)],[--interact:var(--color-danger-mid)],[--interact:var(--color-primary-1100)],[--interact:var(--color-primary-900)],[--interact:var(--color-success-mid)],[--interact:var(--color-warning-mid)],[--interact:var(--color-white)],[--solid-active:var(--color-grey-200)],[--solid-base:var(--color-white)],[--solid-interact:var(--color-grey-100)],[--solid-text:var(--color-grey-1200)],[--text:var(--color-grey-800)],[--text:var(--color-primary-800)],absolute,bg-(--background-bold),bg-(--background-bold-hover),bg-(--background-subtle),bg-(--base),bg-(--base-1),bg-(--base-11),bg-(--base-3),bg-(--solid-base,var(--base)),bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)],bg-[unset],bg-danger-light,bg-grey-100,bg-grey-400,bg-position-[right_--spacing(2)_top_50%,0_0],bg-position-[right_--spacing(3)_top_50%,0_0],bg-size-[18px_auto,100%],bg-size-[20px_auto,100%],bg-transparent,bg-white,block,border,border-(--base-3),border-b,border-b-(--border-bottom),border-current,border-danger,border-grey-700,border-none,border-white,capsize-[0.1309],capsize-[0.2078],capsize-[0.2709],capsize-[0.3336],capsize-[0.3506],capsize-[0.3864],capsize-[0.3983],capsize-[0.4056],capsize-[0.4364],capsize-after-[0.2405],capsize-after-[0.2634],capsize-after-[0.26],capsize-after-[0.2],capsize-before-[0.1405],capsize-before-[0.16],capsize-before-[0.1],capsize-before-[0.2114],capsize-none,cursor-not-allowed,cursor-pointer,data-[state=inactive]:hover:bg-marsh-300,data-[state=inactive]:hover:bg-primary-300,disabled:cursor-not-allowed,disabled:opacity-30,flex,flex-1,flex-[unset],flex-col,focus-visible:border-marsh-800,focus-visible:border-primary-800,focus:border-primary-800,focus:outline-2,focus:outline-blue-800,focus:outline-danger,focus:outline-none,focus:outline-offset-1,focus:outline-solid,focus:z-1,font-body,font-bold,font-display,font-medium,font-mono,font-normal,font-semibold,gap-2,gap-3,gap-4,h-1,h-10,h-12,h-16,h-2,h-8,h-full,h-px,h-safe-offset-top-16,h-safe-offset-top-24,h-screen,hidden,hover:bg-(--background-bold-hover),hover:bg-(--background-subtle-hover),hover:bg-[color-mix(in_srgb,(--text-on-white),transparent_92%)],hover:text-(--text-bold),hover:text-(--text-on-white),hover:text-(--text-subtle-hover),leading-[1.08],leading-[1.12],leading-[1.14],leading-[1.28],leading-[1.40],leading-[1.42],leading-[1.52],leading-[1.53],leading-[1.6],leading-none,leading-normal,max-h-12,max-h-18,max-h-8,max-h-[142px],max-h-[213px],max-h-[90vh],max-h-screen,max-w-14,max-w-21,max-w-[126px],max-w-[190px],max-w-[285px],max-w-[90vw],max-w-full,max-w-screen,mb-3,mb-4,mb-6,min-h-10,min-h-12,min-h-8,min-w-10,min-w-12,min-w-15,min-w-8,mr-10,not-disabled:active:bg-(--active),not-disabled:active:bg-(--solid-active,var(--active)),not-disabled:active:text-(--active),not-disabled:focus:bg-(--interact),not-disabled:focus:bg-(--solid-interact,var(--interact)),not-disabled:focus:no-underline,not-disabled:focus:text-(--interact),not-disabled:focus:text-(--solid-text,white),not-disabled:focus:text-(--text,white),not-disabled:hover:bg-(--interact),not-disabled:hover:bg-(--solid-interact,var(--interact)),not-disabled:hover:no-underline,not-disabled:hover:text-(--interact),not-disabled:hover:text-(--solid-text,white),not-disabled:hover:text-(--text,white),opacity-60,p-0,p-10,p-2,p-3,p-4,p-6,p-8,pl-2,pl-3,pointer-events-none,pr-10,pr-8,pt-safe,px-1,px-2,px-4,px-6,px-8,py-0,py-0.5,py-1,py-4,py-6,right-4,rounded-full,rounded-md,rounded-none,rounded-sm,rounded-xl,shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)],size-1.5,size-10,size-12,size-3,size-4,size-6,size-8,size-auto,static,stroke-2,stroke-[1.5],stroke-[1.75],supports-color-mix:backdrop-blur-sm,supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)],supports-svh:h-auto,supports-svh:h-svh,supports-svh:max-h-[90vh],supports-svh:max-h-svh,text-(--base),text-(--foreground-7-plus),text-(--solid-text,white),text-(--text,white),text-(--text-bold),text-(--text-on-white),text-(--text-subtle),text-(--text-subtle-hover),text-2xl,text-3xl,text-4xl,text-danger,text-grey-800,text-info,text-lg,text-md,text-primary-800,text-sm,text-success,text-warning,text-white!,text-xl,text-xs,top-0,top-4,top-safe-offset-2,tracking-[0.01em],w-120,w-150,w-200,w-275,w-95,w-[unset]!,w-auto,w-full,w-max,w-px,w-screen}');