Add custom separator support

Author: adamwathan

src/corePlugins/index.js

@@ -11,7 +11,7 @@ const {
 } = require('../pluginUtils')
 
 module.exports = {
-  pseudoClassVariants: function ({ jit: { config, theme, addUtilities, addVariant, e } }) {
+  pseudoClassVariants: function ({ config, theme, addVariant }) {
     let pseudoVariants = [
       ['first', 'first-child'],
       ['last', 'last-child'],
@@ -33,7 +33,7 @@ module.exports = {
       addVariant(
         variantName,
         transformAllClasses((className, { withPseudo }) => {
-          return withPseudo(`${variantName}:${className}`, state)
+          return withPseudo(`${variantName}${config('separator')}${className}`, state)
         })
       )
     }
@@ -46,24 +46,24 @@ module.exports = {
         groupVariantName,
         transformAllSelectors((selector) => {
           let variantSelector = updateAllClasses(selector, (className) => {
-            return `${groupVariantName}:${className}`
+            return `${groupVariantName}${config('separator')}${className}`
           })
 
           if (variantSelector === selector) {
             return null
           }
 
-          return `.group:${state} ${variantSelector}`
+          return `.group${config('separator')}${state} ${variantSelector}`
         })
       )
     }
   },
-  reducedMotionVariants: function ({ jit: { config, theme, addUtilities, addVariant, e } }) {
+  reducedMotionVariants: function ({ config, theme, addVariant }) {
     addVariant(
       'motion-safe',
       transformLastClasses(
         (className) => {
-          return `motion-safe:${className}`
+          return `motion-safe${config('separator')}${className}`
         },
         () => postcss.atRule({ name: 'media', params: '(prefers-reduced-motion: no-preference)' })
       )
@@ -73,34 +73,42 @@ module.exports = {
       'motion-reduce',
       transformLastClasses(
         (className) => {
-          return `motion-reduce:${className}`
+          return `motion-reduce${config('separator')}${className}`
         },
         () => postcss.atRule({ name: 'media', params: '(prefers-reduced-motion: reduce)' })
       )
     )
   },
-  directionVariants: function ({ jit: { config, theme, addUtilities, addVariant, e } }) {
+  directionVariants: function ({ config, theme, addVariant }) {
     addVariant(
       'ltr',
       transformAllSelectors(
-        (selector) => `[dir="ltr"] ${updateAllClasses(selector, (className) => `ltr:${className}`)}`
+        (selector) =>
+          `[dir="ltr"] ${updateAllClasses(
+            selector,
+            (className) => `ltr${config('separator')}${className}`
+          )}`
       )
     )
 
     addVariant(
       'rtl',
       transformAllSelectors(
-        (selector) => `[dir="rtl"] ${updateAllClasses(selector, (className) => `rtl:${className}`)}`
+        (selector) =>
+          `[dir="rtl"] ${updateAllClasses(
+            selector,
+            (className) => `rtl${config('separator')}${className}`
+          )}`
       )
     )
   },
-  darkVariants: function ({ jit: { config, theme, addUtilities, addVariant, e } }) {
-    if (config.darkMode === 'class') {
+  darkVariants: function ({ config, theme, addVariant }) {
+    if (config('darkMode') === 'class') {
       addVariant(
         'dark',
         transformAllSelectors((selector) => {
           let variantSelector = updateLastClasses(selector, (className) => {
-            return `dark:${className}`
+            return `dark${config('separator')}${className}`
           })
 
           if (variantSelector === selector) {
@@ -110,28 +118,28 @@ module.exports = {
           return `.dark ${variantSelector}`
         })
       )
-    } else if (config.darkMode === 'media') {
+    } else if (config('darkMode') === 'media') {
       addVariant(
         'dark',
         transformLastClasses(
           (className) => {
-            return `dark:${className}`
+            return `dark${config('separator')}${className}`
           },
           () => postcss.atRule({ name: 'media', params: '(prefers-color-scheme: dark)' })
         )
       )
     }
   },
-  screenVariants: function ({ jit: { config, theme, addUtilities, addVariant, e } }) {
-    for (let screen in theme.screens) {
-      let size = theme.screens[screen]
+  screenVariants: function ({ config, theme, addVariant }) {
+    for (let screen in theme('screens')) {
+      let size = theme('screens')[screen]
       let query = buildMediaQuery(size)
 
       addVariant(
         screen,
         transformLastClasses(
           (className) => {
-            return `${screen}:${className}`
+            return `${screen}${config('separator')}${className}`
           },
           () => postcss.atRule({ name: 'media', params: query })
         )

src/lib/generateRules.js

@@ -39,13 +39,13 @@ function* candidatePermutations(prefix, modifier = '') {
 // and `focus:hover:text-center` in the same project, but it doesn't feel
 // worth the complexity for that case.
 
-function applyVariant(variant, matches, { variantMap }) {
+function applyVariant(variant, matches, context) {
   if (matches.length === 0) {
     return matches
   }
 
-  if (variantMap.has(variant)) {
-    let [variantSort, applyThisVariant] = variantMap.get(variant)
+  if (context.variantMap.has(variant)) {
+    let [variantSort, applyThisVariant] = context.variantMap.get(variant)
     let result = []
 
     for (let [{ sort, layer, options }, rule] of matches) {
@@ -74,7 +74,11 @@ function applyVariant(variant, matches, { variantMap }) {
         return container
       }
 
-      let ruleWithVariant = applyThisVariant({ container, separator: ':', modifySelectors })
+      let ruleWithVariant = applyThisVariant({
+        container,
+        separator: context.tailwindConfig.separator,
+        modifySelectors,
+      })
 
       if (ruleWithVariant === null) {
         continue
@@ -137,7 +141,8 @@ function sortAgainst(toSort, against) {
 }
 
 function* resolveMatches(candidate, context) {
-  let [classCandidate, ...variants] = candidate.split(':').reverse()
+  let separator = context.tailwindConfig.separator
+  let [classCandidate, ...variants] = candidate.split(separator).reverse()
 
   // Strip prefix
   // md:hover:tw-bg-black

tests/02-custom-separator.test.css

@@ -0,0 +1,19 @@
+.group_hover .group-hover_focus-within_text-left:focus-within {
+  text-align: left;
+}
+[dir='rtl'] .rtl_active_text-center:active {
+  text-align: center;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .motion-safe_hover_text-center:hover {
+    text-align: center;
+  }
+}
+.dark .dark_focus_text-left:focus {
+  text-align: left;
+}
+@media (min-width: 768px) {
+  .md_hover_text-right:hover {
+    text-align: right;
+  }
+}

tests/02-custom-separator.test.html

@@ -0,0 +1,5 @@
+<div class="md_hover_text-right"></div>
+<div class="motion-safe_hover_text-center"></div>
+<div class="dark_focus_text-left"></div>
+<div class="group-hover_focus-within_text-left"></div>
+<div class="rtl_active_text-center"></div>

tests/02-custom-separator.test.js

@@ -0,0 +1,28 @@
+const postcss = require('postcss')
+const tailwind = require('../src/index.js')
+const fs = require('fs')
+const path = require('path')
+
+function run(input, config = {}) {
+  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+}
+
+test('custom separator', () => {
+  let config = {
+    darkMode: 'class',
+    purge: [path.resolve(__dirname, './02-custom-separator.test.html')],
+    separator: '_',
+    corePlugins: {},
+    theme: {},
+    plugins: [],
+  }
+
+  let css = `@tailwind utilities`
+
+  return run(css, config).then((result) => {
+    let expectedPath = path.resolve(__dirname, './02-custom-separator.test.css')
+    let expected = fs.readFileSync(expectedPath, 'utf8')
+
+    expect(result.css).toMatchCss(expected)
+  })
+})