From 32bc79b93dbfc77a30bb494752fd085aafc100f0 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Sat, 30 Aug 2025 21:26:49 -0400
Subject: [PATCH] fix: update CSS validation patterns for Tailwind classes

- Enhanced regex patterns in `validate-custom-elements-css.js` to accommodate minified CSS formats, ensuring accurate detection of Tailwind utility classes and other CSS properties.
- Adjusted patterns for flex, margin, padding, color, background utilities, CSS custom properties, and responsive breakpoints to support both spaced and non-spaced formats.
---
 web/scripts/validate-custom-elements-css.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/web/scripts/validate-custom-elements-css.js b/web/scripts/validate-custom-elements-css.js
index 3d4f5f39d..2e3ca048e 100644
--- a/web/scripts/validate-custom-elements-css.js
+++ b/web/scripts/validate-custom-elements-css.js
@@ -62,40 +62,41 @@ function validateCustomElementsCSS() {
     const jsContent = fs.readFileSync(jsFile, 'utf8');
     
     // Define required Tailwind indicators (looking for inlined CSS in JS)
+    // Updated patterns to work with minified CSS (no spaces)
     const requiredIndicators = [
       {
         name: 'Tailwind utility classes (inline)',
-        pattern: /\.flex\s*\{[^}]*display:\s*flex/,
+        pattern: /\.flex\s*\{[^}]*display:\s*flex|\.flex{display:flex/,
         description: 'Basic Tailwind utility classes inlined'
       },
       {
         name: 'Tailwind margin utilities (inline)',
-        pattern: /\.m-\d+\s*\{[^}]*margin:/,
+        pattern: /\.m-\d+\s*\{[^}]*margin:|\.m-\d+{[^}]*margin:/,
         description: 'Tailwind margin utilities inlined'
       },
       {
         name: 'Tailwind padding utilities (inline)',
-        pattern: /\.p-\d+\s*\{[^}]*padding:/,
+        pattern: /\.p-\d+\s*\{[^}]*padding:|\.p-\d+{[^}]*padding:/,
         description: 'Tailwind padding utilities inlined'
       },
       {
         name: 'Tailwind color utilities (inline)',
-        pattern: /\.text-\w+\s*\{[^}]*color:/,
+        pattern: /\.text-\w+\s*\{[^}]*color:|\.text-\w+{[^}]*color:/,
         description: 'Tailwind text color utilities inlined'
       },
       {
         name: 'Tailwind background utilities (inline)',
-        pattern: /\.bg-\w+\s*\{[^}]*background/,
+        pattern: /\.bg-\w+\s*\{[^}]*background|\.bg-\w+{[^}]*background/,
         description: 'Tailwind background utilities inlined'
       },
       {
         name: 'CSS custom properties',
-        pattern: /--[\w-]+:\s*[^;]+;/,
+        pattern: /--[\w-]+:\s*[^;]+;|--[\w-]+:[^;]+;/,
         description: 'CSS custom properties (variables)'
       },
       {
         name: 'Responsive breakpoints',
-        pattern: /@media\s*\([^)]*min-width/,
+        pattern: /@media\s*\([^)]*min-width|@media\([^)]*min-width/,
         description: 'Responsive media queries'
       },
       {