@atom-learning/components 6.0.0-beta.21 → 6.0.0-beta.22

package/package.json

@@ -4,7 +4,7 @@
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
   "module": "dist/index.js",
-  "version": "6.0.0-beta.21",
+  "version": "6.0.0-beta.22",
   "description": "",
   "files": [
     "dist",

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

@@ -11,11 +11,36 @@ function extractArrayElements(node) {
 
   return node
     .getElements()
-    .map((element) =>
-      element.getKind() === SyntaxKind.StringLiteral
-        ? element.getLiteralValue()
-        : element.getText().replace(/^['"`]|['"`]$/g, '')
-    )
+    .map((element) => {
+      if (element.getKind() === SyntaxKind.StringLiteral) {
+        try {
+          // Try to get the literal value first (handles escaped characters correctly)
+          return element.getLiteralValue()
+        } catch {
+          // Fallback: if getLiteralValue() fails, try to extract from text
+          // This can happen with malformed strings or edge cases
+          let text = element.getText().trim()
+          // Remove surrounding quotes
+          const quoteMatch = text.match(/^(['"`])([\s\S]*)\1$/)
+          if (quoteMatch) {
+            return quoteMatch[2]
+          }
+          // Remove quotes from start/end if not matched
+          return text.replace(/^['"`]+|['"`]+$/g, '').trim()
+        }
+      }
+      // Fallback for non-string-literal elements (template literals, etc.)
+      let text = element.getText().trim()
+      // Remove surrounding quotes (handles single, double, or backtick quotes at start/end)
+      const quoteMatch = text.match(/^(['"`])([\s\S]*)\1$/)
+      if (quoteMatch) {
+        text = quoteMatch[2]
+      } else {
+        // If no matching quotes, try removing any quotes from start/end separately
+        text = text.replace(/^['"`]+|['"`]+$/g, '')
+      }
+      return text.trim()
+    })
     .filter(Boolean)
 }
 
@@ -53,6 +78,23 @@ function extractClasses(optionValue) {
   if (optionValue.getKind() === SyntaxKind.StringLiteral) {
     return [optionValue.getLiteralValue()]
   }
+  // Handle template literals or other string-like expressions
+  if (optionValue.getKind() === SyntaxKind.TemplateExpression) {
+    // For template literals, try to get the text and clean it up
+    const text = optionValue.getText().trim()
+    // Remove backticks if present
+    return [text.replace(/^`|`$/g, '')]
+  }
+  // Fallback: try to extract as text if it looks like a string
+  const text = optionValue.getText().trim()
+  if (
+    (text.startsWith("'") && text.endsWith("'")) ||
+    (text.startsWith('"') && text.endsWith('"')) ||
+    (text.startsWith('`') && text.endsWith('`'))
+  ) {
+    // Remove surrounding quotes
+    return [text.slice(1, -1)]
+  }
   return []
 }
 
@@ -126,7 +168,27 @@ function extractVariantsFromAST(sourceFile) {
       }
 
       if (Object.keys(options).length > 0) {
-        variants[variantKey] = options
+        // Merge variants if the same variant key already exists (from another styled() call)
+        if (variants[variantKey]) {
+          const existing = variants[variantKey]
+          const merged = { ...existing }
+          for (const [optionKey, optionValue] of Object.entries(options)) {
+            if (Array.isArray(optionValue)) {
+              // Merge arrays and deduplicate
+              const existingClasses = Array.isArray(merged[optionKey])
+                ? merged[optionKey]
+                : []
+              merged[optionKey] = [
+                ...new Set([...existingClasses, ...optionValue])
+              ]
+            } else {
+              merged[optionKey] = optionValue
+            }
+          }
+          variants[variantKey] = merged
+        } else {
+          variants[variantKey] = options
+        }
       }
     }
   }
@@ -313,8 +375,25 @@ async function generateResponsiveVariantClassesSafelist(options = {}) {
 // Export the function for use in other modules
 export { generateResponsiveVariantClassesSafelist }
 
+// Export internal functions for testing
+export {
+  extractArrayElements,
+  extractClasses,
+  extractVariantsFromAST,
+  generateResponsiveVariantClasses,
+  generateCSSFileContent
+}
+
 // Run the script if this file is executed directly (not imported)
-const __filename = fileURLToPath(import.meta.url)
-if (process.argv[1] === __filename) {
-  generateResponsiveVariantClassesSafelist()
+// Only execute if import.meta.url is available (skip in Jest/test environments where it may be undefined)
+try {
+  if (import.meta.url) {
+    const currentFileUrl = fileURLToPath(import.meta.url)
+    if (process.argv[1] === currentFileUrl) {
+      generateResponsiveVariantClassesSafelist()
+    }
+  }
+} catch {
+  // Ignore errors in test environments where import.meta.url might not work correctly
+  // This allows the module to be imported in tests without errors
 }

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,[--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)],[--text:var(--color-primary-800)],[align-items:first baseline],[align-items:inherit],[align-items:initial],[align-items:last baseline],[align-items:normal],[align-items:revert-layer],[align-items:revert],[align-items:safe],[align-items:self-end],[align-items:self-start],[align-items:unsafe],[align-items:unset],[flex-wrap:inherit],[flex-wrap:initial],[flex-wrap:revert-layer],[flex-wrap:revert],[flex-wrap:unset],[justify-content:inherit],[justify-content:initial],[justify-content:left],[justify-content:revert-layer],[justify-content:revert],[justify-content:right],[justify-content:safe],[justify-content:unsafe],[justify-content:unset],absolute,after:hidden!,before:hidden!,bg-(--background-bold),bg-(--background-subtle),bg-(--base),bg-(--base-1),bg-(--base-11),bg-(--base-3),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-unset,bg-white,block,border,border-(--base-3),border-b,border-b-(--border-bottom),border-current,border-grey-700,border-none,border-white,capsize-[0.2078],capsize-[0.3864],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],cursor-not-allowed opacity-60 pointer-events-none,cursor-pointer,data-[state=inactive]:hover:bg-marsh-300,data-[state=inactive]:hover:bg-primary-300,direction-[inherit],direction-[initial],direction-[revert-layer],direction-[revert],direction-[unset],disabled:cursor-not-allowed,disabled:opacity-30,flex-1,flex-[unset],flex-col,flex-col-reverse,flex-no-wrap,flex-row,flex-row-reverse,flex-wrap,flex-wrap-reverse,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-0.5,gap-1,gap-10,gap-12,gap-16,gap-2,gap-20,gap-3,gap-4,gap-6,gap-8,h-1,h-10,h-12,h-16,h-2,h-24,h-8,h-auto,h-full,h-px,h-screen,hidden,items-baseline,items-center,items-end,items-start,items-stretch,justify-around,justify-between,justify-center,justify-end,justify-evenly,justify-normal,justify-start,justify-stretch,leading-[1.08],leading-[1.12],leading-[1.14],leading-none,leading-normal,max-h-12,max-h-18,max-h-8,max-h-[142px],max-h-[213px],max-h-none,max-h-screen,max-w-14,max-w-21,max-w-[126px],max-w-[190px],max-w-[285px],max-w-full,max-w-none,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:text-(--active),not-disabled:focus:bg-(--interact),not-disabled:focus:no-underline,not-disabled:focus:text-(--interact),not-disabled:focus:text-(--text,white),not-disabled:focus:text-white,not-disabled:hover:bg-(--interact),not-disabled:hover:no-underline,not-disabled:hover:text-(--interact),not-disabled:hover:text-(--text,white),not-disabled:hover:text-white,p-10,p-2,p-3,p-4,p-6,p-8,pl-2,pl-3,pr-10,pr-8,px-1,px-2,px-4,px-6,px-8,py-0.5,py-1,py-4,py-6,right-4,rounded-full,rounded-md,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,static,stroke-2,stroke-[1.5],stroke-[1.75],supports-[height:100svh]:h-auto,supports-[height:100svh]:h-svh,supports-[height:100svh]:max-h-none,supports-[height:100svh]:max-h-svh,supports-color-mix:backdrop-blur-sm,supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)],text-(--base),text-(--foreground-7-plus),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-white!,text-xl,text-xs,top-0,top-2,top-4,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:}{*:not-last:mr-2,*:not-last:mr-3,-mt-1,[--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)],[--text:var(--color-primary-800)],[align-items:first baseline],[align-items:inherit],[align-items:initial],[align-items:last baseline],[align-items:normal],[align-items:revert-layer],[align-items:revert],[align-items:safe],[align-items:self-end],[align-items:self-start],[align-items:unsafe],[align-items:unset],[flex-wrap:inherit],[flex-wrap:initial],[flex-wrap:revert-layer],[flex-wrap:revert],[flex-wrap:unset],[justify-content:inherit],[justify-content:initial],[justify-content:left],[justify-content:revert-layer],[justify-content:revert],[justify-content:right],[justify-content:safe],[justify-content:unsafe],[justify-content:unset],absolute,after:hidden!,before:hidden!,bg-(--background-bold),bg-(--background-subtle),bg-(--base),bg-(--base-1),bg-(--base-11),bg-(--base-3),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-unset,bg-white,block,border,border-(--base-3),border-b,border-b-(--border-bottom),border-current,border-grey-700,border-none,border-white,capsize-[0.2078],capsize-[0.3864],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],cursor-not-allowed opacity-60 pointer-events-none,cursor-pointer,data-[state=inactive]:hover:bg-marsh-300,data-[state=inactive]:hover:bg-primary-300,direction-[inherit],direction-[initial],direction-[revert-layer],direction-[revert],direction-[unset],disabled:cursor-not-allowed,disabled:opacity-30,flex-1,flex-[unset],flex-col,flex-col-reverse,flex-no-wrap,flex-row,flex-row-reverse,flex-wrap,flex-wrap-reverse,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-0.5,gap-1,gap-10,gap-12,gap-16,gap-2,gap-20,gap-3,gap-4,gap-6,gap-8,h-1,h-10,h-12,h-16,h-2,h-24,h-8,h-auto,h-full,h-px,h-screen,hidden,items-baseline,items-center,items-end,items-start,items-stretch,justify-around,justify-between,justify-center,justify-end,justify-evenly,justify-normal,justify-start,justify-stretch,leading-[1.08],leading-[1.12],leading-[1.14],leading-none,leading-normal,max-h-12,max-h-18,max-h-8,max-h-[142px],max-h-[213px],max-h-none,max-h-screen,max-w-14,max-w-21,max-w-[126px],max-w-[190px],max-w-[285px],max-w-full,max-w-none,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:text-(--active),not-disabled:focus:bg-(--interact),not-disabled:focus:no-underline,not-disabled:focus:text-(--interact),not-disabled:focus:text-(--text,white),not-disabled:focus:text-white,not-disabled:hover:bg-(--interact),not-disabled:hover:no-underline,not-disabled:hover:text-(--interact),not-disabled:hover:text-(--text,white),not-disabled:hover:text-white,p-10,p-2,p-3,p-4,p-6,p-8,pl-2,pl-3,pr-10,pr-8,px-1,px-2,px-4,px-6,px-8,py-0.5,py-1,py-4,py-6,right-4,rounded-full,rounded-md,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,static,stroke-2,stroke-[1.5],stroke-[1.75],supports-[height:100svh]:h-auto,supports-[height:100svh]:h-svh,supports-[height:100svh]:max-h-none,supports-[height:100svh]:max-h-svh,supports-color-mix:backdrop-blur-sm,supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)],text-(--base),text-(--foreground-7-plus),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-lg leading-normal h-12 px-8 gap-3 [&_svg]:size-[22px],text-lg leading-normal h-16 px-8 gap-3 [&_svg]:size-[22px],text-md,text-md leading-normal h-10 px-8 gap-3 [&_svg]:size-5,text-primary-800,text-sm,text-sm leading-[1.53] h-8 px-4 gap-2 [&_svg]:size-4,text-success,text-warning,text-white,text-white!,text-xl,text-xs,top-0,top-2,top-4,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}");