Merge pull request #38 from mertasan/case-sensitive

Add uppercase support to keys

Author: mertasan

.github/workflows/tests.yml

@@ -19,24 +19,30 @@ jobs:
         node-version: [12, 14, 16]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Use Node ${{ matrix.node-version }}
         uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node-version }}
 
+      - name: Get npm cache directory
+        id: npm-cache-dir
+        run: |
+          echo "::set-output name=dir::$(npm config get cache)"
+
       - name: Use cached node_modules
-        id: cache-tests
-        uses: actions/cache@v2
+        id: npm-cache
+        uses: actions/cache@v3
         with:
-          path: node_modules
-          key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }}-tests
+          path: ${{ steps.npm-cache-dir.outputs.dir }}
+          key: ${{ runner.os }}-node-${{ matrix.node-version }}-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
-            nodeModules-
+            ${{ runner.os }}-node-${{ matrix.node-version }}-
+            ${{ runner.os }}-node-
 
       - name: Install dependencies
-        if: steps.cache-tests.outputs.cache-hit != 'true'
+        if: steps.npm-cache.outputs.cache-hit != 'true'
         run: npm install
         env:
           CI: true

__tests__/issues.test.js

@@ -114,3 +114,42 @@ test('issue 25', async () => {
     "
   `)
 })
+
+test('issue 37', async () => {
+  expect(
+    await utils.diffOnly({
+      content: [utils.content()],
+      darkMode: 'class',
+      theme: {
+        variables: {
+          DEFAULT: {
+            ONE: 'red',
+            TWO: {
+              DEFAULT: 'black',
+              FOObar: 'green',
+              THREE: {
+                FOUR: 'white',
+                five: 'blue',
+              },
+            },
+          },
+        },
+      },
+
+      plugins: [tailwindcssVariables()],
+    })
+  ).toMatchInlineSnapshot(`
+    "
+
+      
+      + :root {
+      +   --ONE: red;
+      +   --TWO: black;
+      +   --TWO-FOObar: green;
+      +   --TWO-THREE-FOUR: white;
+      +   --TWO-THREE-five: blue
+      + }
+
+    "
+  `)
+})

examples/color-variable-helper/package.json

@@ -9,7 +9,7 @@
     "@mertasan/tailwindcss-variables": "latest",
     "autoprefixer": "^10.4.0",
     "postcss": "^8.4.4",
-    "tailwindcss": "^3.0.0"
+    "tailwindcss": "^3.0.11"
   },
   "license": "MIT"
 }

examples/dark-custom-selector/package.json

@@ -9,7 +9,7 @@
     "@mertasan/tailwindcss-variables": "latest",
     "autoprefixer": "^10.4.0",
     "postcss": "^8.4.4",
-    "tailwindcss": "^3.0.0"
+    "tailwindcss": "^3.0.11"
   },
   "license": "MIT"
 }

examples/dark-with-class-to-root/package.json

@@ -9,7 +9,7 @@
     "@mertasan/tailwindcss-variables": "latest",
     "autoprefixer": "^10.4.0",
     "postcss": "^8.4.4",
-    "tailwindcss": "^3.0.0"
+    "tailwindcss": "^3.0.11"
   },
   "license": "MIT"
 }

examples/dark-with-class/package.json

@@ -9,7 +9,7 @@
     "@mertasan/tailwindcss-variables": "latest",
     "autoprefixer": "^10.4.0",
     "postcss": "^8.4.4",
-    "tailwindcss": "^3.0.0"
+    "tailwindcss": "^3.0.11"
   },
   "license": "MIT"
 }

examples/dark-with-media/package.json

@@ -9,7 +9,7 @@
     "@mertasan/tailwindcss-variables": "latest",
     "autoprefixer": "^10.4.0",
     "postcss": "^8.4.4",
-    "tailwindcss": "^3.0.0"
+    "tailwindcss": "^3.0.11"
   },
   "license": "MIT"
 }

examples/prefix/package.json

@@ -9,7 +9,7 @@
     "@mertasan/tailwindcss-variables": "latest",
     "autoprefixer": "^10.4.0",
     "postcss": "^8.4.4",
-    "tailwindcss": "^3.0.0"
+    "tailwindcss": "^3.0.11"
   },
   "license": "MIT"
 }

examples/simple/package.json

@@ -9,7 +9,7 @@
     "@mertasan/tailwindcss-variables": "latest",
     "autoprefixer": "^10.4.0",
     "postcss": "^8.4.4",
-    "tailwindcss": "^3.0.0"
+    "tailwindcss": "^3.0.11"
   },
   "license": "MIT"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mertasan/tailwindcss-variables",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Easily create css variables without the need for a css file!",
   "main": "src/index.js",
   "license": "GPL-3.0-or-later",
@@ -48,7 +48,7 @@
     "postcss-import": "^14.1.0",
     "prettier": "^2.5.0",
     "snapshot-diff": "^0.9.0",
-    "tailwindcss": "^3.0.0"
+    "tailwindcss": "^3.0.11"
   },
   "peerDependencies": {
     "autoprefixer": "^10.0.2",

src/utils.js

@@ -42,10 +42,10 @@ const formatVariableKey = (key) => {
   if (key === 'DEFAULT') {
     return ''
   }
-  key = key.toLowerCase()
+  key = key.toString()
   return key
     .replace(/_/g, '-')
-    .replace(/[^a-z0-9\-]+/gi, '')
+    .replace(/[^a-zA-Z0-9\-]+/gi, '')
     .replace('---', '--')
 }