Merge pull request #58 from crswll/criswell/special-chars-in-names

Author: crswll

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-theme-swapper",
-  "version": "0.11.5",
+  "version": "0.12.0",
   "main": "src/index.js",
   "license": "MIT",
   "peerDependencies": {

src/utils.js

@@ -45,7 +45,11 @@ function flatten (
 }
 
 function getTailwindKeyName (keys) {
-  return keys.filter(key => key.toLowerCase() !== 'default').map(kebabCase).join('-')
+  return keys
+    .filter(key => key.toLowerCase() !== 'default')
+    .map(kebabCase)
+    .map(key => key.replace(/[^a-z0-9\-]/gi, '_'))
+    .join('-')
 }
 
 function toCustomPropertyValue (keys, value) {

test/index.test.js

@@ -19,6 +19,7 @@ const defaultTheme = {
   },
   spacing: {
     'fart': '69px',
+    '5.5': '550px',
   },
   borderRadius: {
     default: '5px',
@@ -104,6 +105,7 @@ postcss(tailwindcss({
         --colors-primary: #f00;
         --colors-primary-darker: #400;
         --spacing-fart: 69px;
+        --spacing-5_5: 550px;
         --border-radius: 5px;
         --font-family-sans: Font A, Font B, Font C;
         --font-size-sm: 12px;

test/utils.test.js

@@ -87,7 +87,13 @@ describe('getThemeAsCustomProps', () => {
       ringColor: { test: '#444' },
       fontSize: { base: '16px' },
       borderRadius: { default: '5px' },
-      fontFamily: { foo: ['a', 'b', '"C 4"'] },
+      spacing: {
+        5: '500px',
+        5.5: '550px',
+      },
+      fontFamily: {
+        foo: ['a', 'b', '"C 4"'],
+      },
     })
 
     expect(result).toEqual({
@@ -100,6 +106,8 @@ describe('getThemeAsCustomProps', () => {
       '--ring-color-test': '#444',
       '--font-size-base': '16px',
       '--border-radius': '5px',
+      '--spacing-5': '500px',
+      '--spacing-5_5': '550px',
       '--font-family-foo': 'a, b, "C 4"',
     })
   })
@@ -117,6 +125,10 @@ describe('getThemeAsCustomProps', () => {
         fontSize: {
           base: '1rem',
         },
+        spacing: {
+          5: '500px',
+          5.5: '550px',
+        },
       })
 
       expect(result).toEqual({
@@ -130,6 +142,10 @@ describe('getThemeAsCustomProps', () => {
         fontSize: {
           base: 'var(--font-size-base)',
         },
+        spacing: {
+          5: 'var(--spacing-5)',
+          5.5: 'var(--spacing-5_5)',
+        }
       })
     })
   })