fix: ensure component name is validated correctly

Author: simonsmith

src/index.test.ts

@@ -222,7 +222,7 @@ describe('rule implementation', () => {
     accept: [
       {
         description: 'works with the default option',
-        code: `.button { --Component: red; }`,
+        code: `.button { --Component-something: red; }`,
       },
     ],
   })

src/validate.test.ts

@@ -6,19 +6,28 @@ describe('isValidCustomProperty (default)', () => {
     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('rejects bare component name without suffix', () => {
+    expect(isValidCustomProperty('--Button', 'Button')).toBe(false)
+    expect(isValidCustomProperty('--Button-', 'Button')).toBe(false)
+  })
+
+  test('rejects component name not followed by hyphen', () => {
+    expect(isValidCustomProperty('--Buttonsdfs-color', 'Button')).toBe(false)
+    expect(isValidCustomProperty('--Buttonextra', 'Button')).toBe(false)
+  })
+
   test('rejects wrong component names', () => {
     expect(isValidCustomProperty('--Wrong-color', 'Button')).toBe(false)
     expect(isValidCustomProperty('--button-color', 'Button')).toBe(false)
   })
 })
 
-describe('isValidSuitCssProperty (strict SUIT CSS)', () => {
+describe('isValidSuitCssProperty', () => {
   test('accepts basic valid patterns', () => {
     expect(isValidSuitCssProperty('--Button-color', 'Button')).toBe(true)
     expect(isValidSuitCssProperty('--Button-icon-size', 'Button')).toBe(true)

src/validate.ts

@@ -12,13 +12,14 @@ export function isValidCustomProperty(
   }
 
   const {pattern} = config
+  const afterComponent = property.slice(`--${componentName}`.length)
 
+  // ensures the component has a hyphen at the end and that we also have
+  // some text there, just `--Component: red` is not allowed
   if (!pattern) {
-    return true
+    return afterComponent.startsWith('-') && afterComponent.length > 1
   }
 
-  const afterComponent = property.slice(`--${componentName}`.length)
-
   return pattern.test(afterComponent)
 }