Merge pull request #186 from tailwindcss/options-master

Add "prefix" and "important" options to config

Author: adamwathan

__tests__/applyClassPrefix.test.js

@@ -0,0 +1,18 @@
+import postcss from 'postcss'
+import applyClassPrefix from '../src/util/applyClassPrefix'
+
+test('it prefixes classes with the provided prefix', () => {
+  const input = postcss.parse(`
+    .foo { color: red; }
+    .apple, .pear { color: green; }
+  `)
+
+  const expected = `
+    .tw-foo { color: red; }
+    .tw-apple, .tw-pear { color: green; }
+  `
+
+  const result = applyClassPrefix(input, 'tw-').toResult()
+  expect(result.css).toEqual(expected)
+  expect(result.warnings().length).toBe(0)
+})

src/lib/generateUtilities.js

@@ -1,4 +1,6 @@
 import _ from 'lodash'
+import postcss from 'postcss'
+import applyClassPrefix from '../util/applyClassPrefix'
 import backgroundColors from '../generators/backgroundColors'
 import backgroundPositions from '../generators/backgroundPositions'
 import backgroundSize from '../generators/backgroundSize'
@@ -39,50 +41,61 @@ import zIndex from '../generators/zIndex'
 
 export default function(config) {
   return function(css) {
-    const options = config()
+    const unwrappedConfig = config()
 
     css.walkAtRules('tailwind', atRule => {
       if (atRule.params === 'utilities') {
-        const utilities = _.flatten([
-          lists(options),
-          forms(options),
-          textSizes(options),
-          textWeights(options),
-          textFonts(options),
-          textColors(options),
-          textLeading(options),
-          textTracking(options),
-          textAlign(options),
-          textWrap(options),
-          textStyle(options),
-          verticalAlign(options),
-          backgroundColors(options),
-          backgroundPositions(options),
-          backgroundSize(options),
-          borderStylesReset(options),
-          borderWidths(options),
-          borderColors(options),
-          borderStyles(options),
-          rounded(options),
-          display(options),
-          position(options),
-          overflow(options),
-          sizing(options),
-          spacing(options),
-          shadows(options),
-          flex(options),
-          floats(options),
-          visibility(options),
-          zIndex(options),
-          opacity(options),
-          userSelect(options),
-          pointerEvents(options),
-          resize(options),
-          cursor(options),
-        ])
+        const utilities = postcss.root({
+          nodes: _.flatten([
+            lists(unwrappedConfig),
+            forms(unwrappedConfig),
+            textSizes(unwrappedConfig),
+            textWeights(unwrappedConfig),
+            textFonts(unwrappedConfig),
+            textColors(unwrappedConfig),
+            textLeading(unwrappedConfig),
+            textTracking(unwrappedConfig),
+            textAlign(unwrappedConfig),
+            textWrap(unwrappedConfig),
+            textStyle(unwrappedConfig),
+            verticalAlign(unwrappedConfig),
+            backgroundColors(unwrappedConfig),
+            backgroundPositions(unwrappedConfig),
+            backgroundSize(unwrappedConfig),
+            borderStylesReset(unwrappedConfig),
+            borderWidths(unwrappedConfig),
+            borderColors(unwrappedConfig),
+            borderStyles(unwrappedConfig),
+            rounded(unwrappedConfig),
+            display(unwrappedConfig),
+            position(unwrappedConfig),
+            overflow(unwrappedConfig),
+            sizing(unwrappedConfig),
+            spacing(unwrappedConfig),
+            shadows(unwrappedConfig),
+            flex(unwrappedConfig),
+            floats(unwrappedConfig),
+            visibility(unwrappedConfig),
+            zIndex(unwrappedConfig),
+            opacity(unwrappedConfig),
+            userSelect(unwrappedConfig),
+            pointerEvents(unwrappedConfig),
+            resize(unwrappedConfig),
+            cursor(unwrappedConfig),
+          ]),
+        })
 
-        atRule.before(container(options))
-        atRule.before(responsive(utilities))
+        if (_.get(unwrappedConfig, 'options.important', false)) {
+          utilities.walkDecls(decl => (decl.important = true))
+        }
+
+        const tailwindClasses = postcss.root({
+          nodes: [...container(unwrappedConfig), responsive(utilities)],
+        })
+
+        applyClassPrefix(tailwindClasses, _.get(unwrappedConfig, 'options.prefix', ''))
+
+        atRule.before(tailwindClasses)
         atRule.remove()
       }
     })

src/util/applyClassPrefix.js

@@ -0,0 +1,6 @@
+export default function(css, prefix) {
+  css.walkRules(rule => {
+    rule.selectors = rule.selectors.map(selector => `.${prefix}${selector.slice(1)}`)
+  })
+  return css
+}

src/util/responsive.js

@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import postcss from 'postcss'
 import cloneNodes from './cloneNodes'
 
@@ -6,5 +7,5 @@ export default function responsive(rules) {
     .atRule({
       name: 'responsive',
     })
-    .append(cloneNodes(rules))
+    .append(cloneNodes(_.isArray(rules) ? rules : rules.nodes))
 }