Merge pull request #6 from vtex-apps/fix/validatemodifier

Fix/validatemodifier

.prettierignore

@@ -0,0 +1 @@
+CHANGELOG.md

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Fixed
+- Also allow `-` on handle modfifiers.
 
 ## [0.3.0] - 2019-10-03
 ### Added

react/__tests__/applyModifiers.test.tsx

@@ -43,14 +43,14 @@ describe('applyModifier', () => {
         'vtex-app-2-x-handle vtex-app-2-x-handle--blockClass vtex-app-2-x-handle--ok vtex-app-2-x-handle--blockClass--ok'
       )
     })
-    it('should not apply a modifier with spaces or dashes', () => {
+    it('should not apply a modifier with spaces, should allow with dashes', () => {
       const handle = 'vtex-app-2-x-handle vtex-app-2-x-handle--blockClass'
       const modifiers = ['ok', 'test 1', 'test-2', 'test\t3', 'test\n4']
 
       const modified = applyModifiers(handle, modifiers)
 
       expect(modified).toBe(
-        'vtex-app-2-x-handle vtex-app-2-x-handle--blockClass vtex-app-2-x-handle--ok vtex-app-2-x-handle--blockClass--ok'
+        'vtex-app-2-x-handle vtex-app-2-x-handle--blockClass vtex-app-2-x-handle--ok vtex-app-2-x-handle--blockClass--ok  vtex-app-2-x-handle--test-2 vtex-app-2-x-handle--blockClass--test-2'
       )
     })
     it('should not apply a modifier if its empty', () => {

react/applyModifiers.ts

@@ -12,9 +12,9 @@ const validateModifier = (modifier: string) => {
     return false
   }
 
-  if (/[^A-z0-9]/.test(modifier)) {
+  if (/[^A-z0-9-]/.test(modifier)) {
     console.error(
-      `Invalid modifier on \`cssHandles.applyModifier\`. Modifiers should contain only letters and numbers`
+      `Invalid modifier on \`cssHandles.applyModifier\`. Modifiers should contain only letters, numbers or -`
     )
     return false
   }