From dac591198f5c8891a333c2c1b7f63b400ecf5590 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 2 Mar 2018 09:08:05 -0500 Subject: [PATCH] Provide a function for prefixing utilities in plugins --- ...ClassPrefix.test.js => prefixTree.test.js} | 6 ++--- __tests__/processPlugins.test.js | 25 +++++++++++++++++++ src/lib/substituteTailwindAtRules.js | 6 ++--- src/util/applyClassPrefix.js | 8 ------ src/util/prefixSelector.js | 5 ++++ src/util/prefixTree.js | 9 +++++++ src/util/processPlugins.js | 4 +++ 7 files changed, 49 insertions(+), 14 deletions(-) rename __tests__/{applyClassPrefix.test.js => prefixTree.test.js} (81%) delete mode 100644 src/util/applyClassPrefix.js create mode 100644 src/util/prefixSelector.js create mode 100644 src/util/prefixTree.js diff --git a/__tests__/applyClassPrefix.test.js b/__tests__/prefixTree.test.js similarity index 81% rename from __tests__/applyClassPrefix.test.js rename to __tests__/prefixTree.test.js index 3c36fac31..cd3029fb4 100644 --- a/__tests__/applyClassPrefix.test.js +++ b/__tests__/prefixTree.test.js @@ -1,5 +1,5 @@ import postcss from 'postcss' -import applyClassPrefix from '../src/util/applyClassPrefix' +import prefixTree from '../src/util/prefixTree' test('it prefixes classes with the provided prefix', () => { const input = postcss.parse(` @@ -12,7 +12,7 @@ test('it prefixes classes with the provided prefix', () => { .tw-apple, .tw-pear { color: green; } ` - const result = applyClassPrefix(input, 'tw-').toResult() + const result = prefixTree(input, 'tw-').toResult() expect(result.css).toEqual(expected) expect(result.warnings().length).toBe(0) }) @@ -36,7 +36,7 @@ test('it handles a function as the prefix', () => { return '' } - const result = applyClassPrefix(input, prefixFunc).toResult() + const result = prefixTree(input, prefixFunc).toResult() expect(result.css).toEqual(expected) expect(result.warnings().length).toBe(0) }) diff --git a/__tests__/processPlugins.test.js b/__tests__/processPlugins.test.js index 890ab4241..f65fb1e99 100644 --- a/__tests__/processPlugins.test.js +++ b/__tests__/processPlugins.test.js @@ -393,3 +393,28 @@ test('plugins can add multiple sets of utilities and components', () => { } `) }) + +test("plugins can apply the user's chosen prefix", () => { + const [, utilities] = processPlugins({ + plugins: [ + function({ rule, addUtilities, prefix }) { + addUtilities([ + rule(prefix('.skew-12deg'), { + transform: 'skewY(-12deg)', + }), + ]) + }, + ], + options: { + prefix: 'tw-', + }, + }) + + expect(css(utilities)).toMatchCss(` + @variants { + .tw-skew-12deg { + transform: skewY(-12deg) + } + } + `) +}) diff --git a/src/lib/substituteTailwindAtRules.js b/src/lib/substituteTailwindAtRules.js index a6f71e453..374017d95 100644 --- a/src/lib/substituteTailwindAtRules.js +++ b/src/lib/substituteTailwindAtRules.js @@ -2,7 +2,7 @@ import fs from 'fs' import postcss from 'postcss' import container from '../generators/container' import utilityModules from '../utilityModules' -import applyClassPrefix from '../util/applyClassPrefix' +import prefixTree from '../util/prefixTree' import generateModules from '../util/generateModules' import processPlugins from '../util/processPlugins' @@ -29,7 +29,7 @@ export default function(config) { nodes: pluginComponents, }) - applyClassPrefix(tailwindComponentTree, unwrappedConfig.options.prefix) + prefixTree(tailwindComponentTree, unwrappedConfig.options.prefix) tailwindComponentTree.walk(node => (node.source = atRule.source)) pluginComponentTree.walk(node => (node.source = atRule.source)) @@ -54,7 +54,7 @@ export default function(config) { nodes: pluginUtilities, }) - applyClassPrefix(tailwindUtilityTree, unwrappedConfig.options.prefix) + prefixTree(tailwindUtilityTree, unwrappedConfig.options.prefix) tailwindUtilityTree.walk(node => (node.source = atRule.source)) pluginUtilityTree.walk(node => (node.source = atRule.source)) diff --git a/src/util/applyClassPrefix.js b/src/util/applyClassPrefix.js deleted file mode 100644 index 1855fca91..000000000 --- a/src/util/applyClassPrefix.js +++ /dev/null @@ -1,8 +0,0 @@ -export default function(css, prefix) { - const getPrefix = typeof prefix === 'function' ? prefix : () => prefix - - css.walkRules(rule => { - rule.selectors = rule.selectors.map(selector => `.${getPrefix(selector)}${selector.slice(1)}`) - }) - return css -} diff --git a/src/util/prefixSelector.js b/src/util/prefixSelector.js new file mode 100644 index 000000000..a5133abe7 --- /dev/null +++ b/src/util/prefixSelector.js @@ -0,0 +1,5 @@ +export default function(prefix, selector) { + const getPrefix = typeof prefix === 'function' ? prefix : () => prefix + + return `.${getPrefix(selector)}${selector.slice(1)}` +} diff --git a/src/util/prefixTree.js b/src/util/prefixTree.js new file mode 100644 index 000000000..44499e9e6 --- /dev/null +++ b/src/util/prefixTree.js @@ -0,0 +1,9 @@ +import prefixSelector from './prefixSelector' + +export default function(css, prefix) { + css.walkRules(rule => { + rule.selectors = rule.selectors.map(selector => prefixSelector(prefix, selector)) + }) + + return css +} diff --git a/src/util/processPlugins.js b/src/util/processPlugins.js index 6e2f49238..d8fd1b616 100644 --- a/src/util/processPlugins.js +++ b/src/util/processPlugins.js @@ -1,6 +1,7 @@ import _ from 'lodash' import postcss from 'postcss' import escapeClassName from '../util/escapeClassName' +import prefixSelector from '../util/prefixSelector' import wrapWithVariants from '../util/wrapWithVariants' function defineRule(selector, properties) { @@ -41,6 +42,9 @@ export default function(config) { addComponents: components => { pluginComponents.push(...components) }, + prefix: selector => { + return prefixSelector(config.options.prefix, selector) + }, }) })