Add @prefix at-rule for prefixing classes

__tests__/prefixAtRule.test.js

@@ -0,0 +1,31 @@
+import postcss from 'postcss'
+import plugin from '../src/lib/substitutePrefixAtRules'
+
+function run(input, opts = () => {}) {
+  return postcss([plugin(opts)]).process(input)
+}
+
+test("it prefixes classes with the provided prefix", () => {
+  const input = `
+    .foo { color: red; }
+    @prefix 'tw-' {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+      .apple, .pear { color: green; }
+    }
+    .bar { color: blue; }
+  `
+
+  const output = `
+    .foo { color: red; }
+    .tw-banana { color: yellow; }
+    .tw-chocolate { color: brown; }
+    .tw-apple, .tw-pear { color: green; }
+    .bar { color: blue; }
+  `
+
+  return run(input).then(result => {
+    expect(result.css).toEqual(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})

src/index.js

@@ -9,6 +9,7 @@ import registerConfigAsDependency from './lib/registerConfigAsDependency'
 import substitutePreflightAtRule from './lib/substitutePreflightAtRule'
 import evaluateTailwindFunctions from './lib/evaluateTailwindFunctions'
 import generateUtilities from './lib/generateUtilities'
+import substitutePrefixAtRules from './lib/substitutePrefixAtRules'
 import substituteHoverableAtRules from './lib/substituteHoverableAtRules'
 import substituteFocusableAtRules from './lib/substituteFocusableAtRules'
 import substituteResponsiveAtRules from './lib/substituteResponsiveAtRules'
@@ -35,6 +36,7 @@ const plugin = postcss.plugin('tailwind', (config) => {
     substitutePreflightAtRule(lazyConfig),
     evaluateTailwindFunctions(lazyConfig),
     generateUtilities(lazyConfig),
+    substitutePrefixAtRules(lazyConfig),
     substituteHoverableAtRules(lazyConfig),
     substituteFocusableAtRules(lazyConfig),
     substituteResponsiveAtRules(lazyConfig),

src/lib/substitutePrefixAtRules.js

@@ -0,0 +1,20 @@
+import _ from 'lodash'
+import postcss from 'postcss'
+import cloneNodes from '../util/cloneNodes'
+
+export default function(config) {
+  return function (css) {
+    const options = config()
+
+    css.walkAtRules('prefix', atRule => {
+      const prefix = _.trim(atRule.params, `'"`)
+
+      atRule.walkRules(rule => {
+        rule.selectors = rule.selectors.map(selector => `.${prefix}${selector.slice(1)}`)
+      })
+
+      atRule.before(cloneNodes(atRule.nodes))
+      atRule.remove()
+    })
+  }
+}