refactor: update and simplify validate

Author: simonsmith

src/validate.test.ts

@@ -1,83 +1,63 @@
 import {test, expect, describe} from 'vitest'
 import {isValidSuitCssProperty, isValidCustomProperty} from './validate.js'
 
-describe('valid patterns', () => {
-  test('basic properties', () => {
-    expect(isValidSuitCssProperty('--Button-color', 'Button')).toBe(true)
-    expect(isValidSuitCssProperty('--Button-backgroundColor', 'Button')).toBe(
-      true,
-    )
+describe('isValidCustomProperty (default)', () => {
+  test('accepts valid component names with any suffix', () => {
+    expect(isValidCustomProperty('--Button-color', 'Button')).toBe(true)
+    expect(isValidCustomProperty('--Button-Color', 'Button')).toBe(true)
+    expect(isValidCustomProperty('--Button-123', 'Button')).toBe(true)
+    expect(isValidCustomProperty('--Button', 'Button')).toBe(true)
+    expect(
+      isValidCustomProperty('--UserProfile-avatar-size', 'UserProfile'),
+    ).toBe(true)
   })
 
-  test('descendants', () => {
-    expect(isValidSuitCssProperty('--Button-icon-size', 'Button')).toBe(true)
+  test('rejects wrong component names', () => {
+    expect(isValidCustomProperty('--Wrong-color', 'Button')).toBe(false)
+    expect(isValidCustomProperty('--button-color', 'Button')).toBe(false)
   })
+})
 
-  test('modifiers', () => {
+describe('isValidSuitCssProperty (strict SUIT CSS)', () => {
+  test('accepts basic valid patterns', () => {
+    expect(isValidSuitCssProperty('--Button-color', 'Button')).toBe(true)
+    expect(isValidSuitCssProperty('--Button-icon-size', 'Button')).toBe(true)
     expect(isValidSuitCssProperty('--Button--primary-color', 'Button')).toBe(
       true,
     )
-  })
-
-  test('states', () => {
     expect(isValidSuitCssProperty('--Button-onHover-color', 'Button')).toBe(
       true,
     )
   })
 
-  test('complex combinations', () => {
-    expect(
-      isValidSuitCssProperty('--Button-icon-onHover-color', 'Button'),
-    ).toBe(true)
-    expect(
-      isValidSuitCssProperty(
-        '--Button--primary-onHover-backgroundColor',
-        'Button',
-      ),
-    ).toBe(true)
-  })
-})
-
-describe('invalid patterns', () => {
-  test('wrong component name', () => {
-    expect(isValidSuitCssProperty('--Wrong-color', 'Button')).toBe(false)
-  })
-
-  test('malformed properties', () => {
+  test('rejects what default function accepts', () => {
     expect(isValidSuitCssProperty('--Button', 'Button')).toBe(false)
-    expect(isValidSuitCssProperty('--Button-', 'Button')).toBe(false)
-    expect(isValidSuitCssProperty('--ButtonColor', 'Button')).toBe(false)
-  })
-
-  test('case violations', () => {
     expect(isValidSuitCssProperty('--Button-Color', 'Button')).toBe(false)
     expect(isValidSuitCssProperty('--Button-Icon-size', 'Button')).toBe(false)
-  })
-
-  test('invalid syntax', () => {
+    expect(isValidSuitCssProperty('--Button-123', 'Button')).toBe(false)
     expect(isValidSuitCssProperty('--Button---primary-color', 'Button')).toBe(
       false,
     )
-  })
-})
-
-describe('different component names', () => {
-  test('validates component name matching', () => {
-    expect(
-      isValidSuitCssProperty('--UserProfile-avatar-size', 'UserProfile'),
-    ).toBe(true)
-    expect(isValidSuitCssProperty('--Button-color', 'UserProfile')).toBe(false)
+    expect(isValidSuitCssProperty('--Button--', 'Button')).toBe(false)
   })
 })
 
 describe('custom configuration', () => {
   test('accepts custom regex pattern', () => {
     const underscorePattern = /^_[a-z][a-zA-Z]*$/
-
     expect(
       isValidCustomProperty('--Button_color', 'Button', {
         pattern: underscorePattern,
       }),
     ).toBe(true)
   })
+
+  test('rejects custom pattern when it does not match', () => {
+    const underscorePattern = /^_[a-z][a-zA-Z]*$/
+    expect(
+      isValidCustomProperty('--Button-color', 'Button', {
+        pattern: underscorePattern,
+      }),
+    ).toBe(false)
+  })
 })

src/validate.ts

@@ -11,11 +11,13 @@ export function isValidCustomProperty(
     return false
   }
 
-  const afterComponent = property.slice(`--${componentName}`.length)
+  const {pattern} = config
 
-  const pattern =
-    config.pattern ||
-    /^(?:-[a-z][a-zA-Z]*)*(?:--[a-z][a-zA-Z]*)*(?:-on[A-Z][a-zA-Z]*)*-[a-z][a-zA-Z]*$/
+  if (!pattern) {
+    return true
+  }
+
+  const afterComponent = property.slice(`--${componentName}`.length)
 
   return pattern.test(afterComponent)
 }
@@ -24,5 +26,11 @@ export function isValidSuitCssProperty(
   property: string,
   componentName: string,
 ) {
-  return isValidCustomProperty(property, componentName)
+  /**
+   * SUITCSS: --ComponentName[-descendant|--modifier][-onState]-(cssProperty|variableName)
+   */
+  const pattern =
+    /^(?:-[a-z][a-zA-Z]*)*(?:--[a-z][a-zA-Z]*)*(?:-on[A-Z][a-zA-Z]*)*-[a-z][a-zA-Z]*$/
+
+  return isValidCustomProperty(property, componentName, {pattern})
 }