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.
This commit is contained in:
Eli Bosley
2025-08-30 21:26:49 -04:00
parent b9632b9774
commit 32bc79b93d

View File

@@ -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'
},
{