Repository: tailwindlabs/tailwindcss-jit (js)

Issue:
dashes in theme key naming in Tailwind config
### What version of @tailwindcss/jit are you using?

v0.1.10

### What version of Node.js are you using?

v14.15.5

### What browser are you using?

Chrome, Brave

### What operating system are you using?

macOS

### Reproduction repository

this was a fun listen: https://www.youtube.com/watch?v=ez773teNFYA

We just recently switched to using the JIT compiler as our Tailwind engine, and started to run into the described issue.

Prior to switch to the JIT, the below (simplified) theme object in our Tailwind config file worked just fine.
```
theme: {
    extend: {
      backgroundImage: {
        'hero--home-1': "url('/images/homepage-1.jpg')"
      },
      colors: {
        'custom--color-0': '#614c3a'
      }
  }
```
After the switch, not so much. 
In the isolated case of `hero--home-1`, there wasn't any generated `bg-hero--home-1` class in our output CSS file -- though the project overall would build and run fine without any generated error or warning message.
In the isolated case of `custom--color-0`, the build process generates the following error message:
```
CssSyntaxError: /Users/dane/Documents/work/skipper/programs/marram_montauk/styles/global.css:68:9: The `text-custom--color-0` class does not exist. If `text-custom--color-0` is a custom class, make sure it is defined within a `@layer` directive.
    at Input.error (/Users/dane/Documents/work/skipper/programs/marram_montauk/node_modules/postcss/lib/input.js:121:16)
    at AtRule.error (/Users/dane/Documents/work/skipper/programs/marram_montauk/node_modules/postcss/lib/node.js:59:32)
    at processApply (/Users/dane/Documents/work/skipper/programs/marram_montauk/node_modules/@tailwindcss/jit/src/lib/expandApplyAtRules.js:158:23)
    at /Users/dane/Documents/work/skipper/programs/marram_montauk/node_modules/@tailwindcss/jit/src/lib/expandApplyAtRules.js:218:5
    at LazyResult.runOnRoot (/Users/dane/Documents/work/skipper/programs/marram_montauk/node_modules/postcss/lib/lazy-result.js:303:16)
    at LazyResult.runAsync (/Users/dane/Documents/work/skipper/programs/marram_montauk/node_modules/postcss/lib/lazy-result.js:355:26)
    at LazyResult.async (/Users/dane/Documents/work/skipper/programs/marram_montauk/node_modules/postcss/lib/lazy-result.js:205:30)
    at LazyResult.then (/Users/dane/Documents/work/skipper/programs/marram_montauk/node_modules/postcss/lib/lazy-result.js:190:17) {
  reason: 'The `text-custom--color-0` class does not exist. If `text-custom--color-0` is a custom class, make sure it is defined within a `@layer` directive.'
```

_However_, when I change our theme object keys such that the `--` are replaced by `-`, ala
```
theme: {
    extend: {
      backgroundImage: {
        'hero-home-1': "url('/images/homepage-1.jpg')"
      },
      colors: {
        'custom-color-0': '#614c3a'
      }
  }
```
Everything works well
Thank you!

Pull request:
Support custom modifiers with double dashes
Fixes #163 

Patch:
diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js
index 7c98014..6eaf9a7 100644
--- a/src/lib/generateRules.js
+++ b/src/lib/generateRules.js
@@ -16,25 +16,29 @@ function getClassNameFromSelector(selector) {
 // ['ring-offset-blue', '100']
 // ['ring-offset', 'blue-100']
 // ['ring', 'offset-blue-100']
-function* candidatePermutations(prefix, modifier = '') {
+function* candidatePermutations(candidate, lastIndex = Infinity) {
+  if (lastIndex < 0) {
+    return
+  }
+
   let dashIdx
 
-  if (modifier.endsWith(']')) {
-    dashIdx = prefix.lastIndexOf('[') - 1
+  if (candidate.endsWith(']')) {
+    dashIdx = candidate.lastIndexOf('[') - 1
   } else {
-    dashIdx = prefix.lastIndexOf('-')
+    dashIdx = candidate.lastIndexOf('-', lastIndex)
   }
 
   if (dashIdx < 0) {
     return
   }
 
-  modifier = [prefix.slice(dashIdx + 1), modifier].filter(Boolean).join('-')
-  prefix = prefix.slice(0, dashIdx)
+  let prefix = candidate.slice(0, dashIdx)
+  let modifier = candidate.slice(dashIdx + 1)
 
   yield [prefix, modifier]
 
-  yield* candidatePermutations(prefix, modifier)
+  yield* candidatePermutations(candidate, dashIdx - 1)
 }
 
 function applyPrefix(matches, context) {


Test patch:
diff --git a/tests/00-kitchen-sink.test.css b/tests/00-kitchen-sink.test.css
index d43ebaa..75f94f5 100644
--- a/tests/00-kitchen-sink.test.css
+++ b/tests/00-kitchen-sink.test.css
@@ -291,6 +291,9 @@ div {
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
+.bg-hero--home-1 {
+  background-image: url('/images/homepage-1.jpg');
+}
 .from-foo {
   --tw-gradient-from: #bada55;
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(186, 218, 85, 0));
diff --git a/tests/00-kitchen-sink.test.html b/tests/00-kitchen-sink.test.html
index 4366259..4d5ab82 100644
--- a/tests/00-kitchen-sink.test.html
+++ b/tests/00-kitchen-sink.test.html
@@ -39,6 +39,7 @@
     <div class="focus:hover:font-light"></div>
     <div class="first:pt-0"></div>
     <div class="container"></div>
+    <div class="bg-hero--home-1"></div>
     <div class="group-hover:opacity-100"></div>
     <div class="group-active:opacity-10"></div>
     <div class="sm:motion-safe:group-active:focus:opacity-10"></div>
diff --git a/tests/00-kitchen-sink.test.js b/tests/00-kitchen-sink.test.js
index 92b9e63..fdbe115 100644
--- a/tests/00-kitchen-sink.test.js
+++ b/tests/00-kitchen-sink.test.js
@@ -22,6 +22,9 @@ test('it works', () => {
         gradientColorStops: {
           foo: '#bada55',
         },
+        backgroundImage: {
+          'hero--home-1': "url('/images/homepage-1.jpg')",
+        },
       },
     },
     plugins: [