diff --git a/__tests__/applyClassPrefix.test.js b/__tests__/applyClassPrefix.test.js new file mode 100644 index 000000000000..5f574fc64cf4 --- /dev/null +++ b/__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) +}) diff --git a/src/lib/generateUtilities.js b/src/lib/generateUtilities.js index 39f637b73e1f..689468037f4f 100644 --- a/src/lib/generateUtilities.js +++ b/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' @@ -38,49 +40,60 @@ import zIndex from '../generators/zIndex' export default function(config) { return function(css) { - const options = config() + let 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), - 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), + 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() } }) diff --git a/src/util/applyClassPrefix.js b/src/util/applyClassPrefix.js new file mode 100644 index 000000000000..502e5f02babf --- /dev/null +++ b/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 +} diff --git a/src/util/responsive.js b/src/util/responsive.js index 67c9056455ed..2d0a90636320 100644 --- a/src/util/responsive.js +++ b/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)) }