Support custom modifiers with double dashes (#164)

Author: adamwathan

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) {

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));

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>

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: [