diff --git a/__tests__/prefixSelector.test.js b/__tests__/prefixSelector.test.js new file mode 100644 index 000000000..ae55d580e --- /dev/null +++ b/__tests__/prefixSelector.test.js @@ -0,0 +1,26 @@ +import prefix from '../src/util/prefixSelector' + +test('it prefixes classes with the provided prefix', () => { + expect(prefix('tw-', '.foo')).toEqual('.tw-foo') +}) + +test('it handles a function as the prefix', () => { + const prefixFunc = selector => { + return selector === '.foo' ? 'tw-' : '' + } + + expect(prefix(prefixFunc, '.foo')).toEqual('.tw-foo') + expect(prefix(prefixFunc, '.bar')).toEqual('.bar') +}) + +test('it properly prefixes selectors with non-standard characters', () => { + expect(prefix('tw-', '.hello\\:world')).toEqual('.tw-hello\\:world') + expect(prefix('tw-', '.foo\\/bar')).toEqual('.tw-foo\\/bar') + expect(prefix('tw-', '.wew\\.lad')).toEqual('.tw-wew\\.lad') +}) + +test('it prefixes all classes in a selector', () => { + expect(prefix('tw-', '.btn-blue .w-1\\/4 > h1.text-xl + a .bar')).toEqual( + '.tw-btn-blue .tw-w-1\\/4 > h1.tw-text-xl + a .tw-bar' + ) +}) diff --git a/__tests__/prefixTree.test.js b/__tests__/prefixTree.test.js deleted file mode 100644 index 877aade19..000000000 --- a/__tests__/prefixTree.test.js +++ /dev/null @@ -1,70 +0,0 @@ -import postcss from 'postcss' -import prefixTree from '../src/util/prefixTree' - -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 = prefixTree(input, 'tw-').toResult() - expect(result.css).toEqual(expected) - expect(result.warnings().length).toBe(0) -}) - -test('it handles a function as the prefix', () => { - const input = postcss.parse(` - .foo { color: red; } - .apple, .pear { color: green; } - `) - - const expected = ` - .tw-foo { color: red; } - .apple, .pear { color: green; } - ` - - const prefixFunc = selector => { - return selector === '.foo' ? 'tw-' : '' - } - - const result = prefixTree(input, prefixFunc).toResult() - expect(result.css).toEqual(expected) - expect(result.warnings().length).toBe(0) -}) - -test('it properly prefixes selectors with non-standard characters', () => { - const input = postcss.parse(` - .hello\\:world { color: blue; } - .foo\\/bar { color: green; } - .wew\\.lad { color: red; } - `) - - const expected = ` - .tw-hello\\:world { color: blue; } - .tw-foo\\/bar { color: green; } - .tw-wew\\.lad { color: red; } - ` - - const result = prefixTree(input, 'tw-').toResult() - expect(result.css).toEqual(expected) - expect(result.warnings().length).toBe(0) -}) - -test('it prefixes all classes in a selector', () => { - const input = postcss.parse(` - .btn-blue .w-1\\/4 > h1.text-xl + a .bar { color: red; } - `) - - const expected = ` - .tw-btn-blue .tw-w-1\\/4 > h1.tw-text-xl + a .tw-bar { color: red; } - ` - - const result = prefixTree(input, 'tw-').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 84b90950e..740bc0fcb 100644 --- a/__tests__/processPlugins.test.js +++ b/__tests__/processPlugins.test.js @@ -761,6 +761,44 @@ test("component declarations respect the 'prefix' option by default", () => { `) }) +test('all selectors in a rule are prefixed', () => { + const { utilities, components } = processPlugins( + [ + function({ addUtilities, addComponents }) { + addUtilities({ + '.rotate-90, .rotate-1\\/4': { + transform: 'rotate(90deg)', + }, + }) + addComponents({ + '.btn-blue, .btn-red': { + padding: '10px', + }, + }) + }, + ], + makeConfig({ + options: { + prefix: 'tw-', + }, + }) + ) + + expect(css(utilities)).toMatchCss(` + @variants { + .tw-rotate-90, .tw-rotate-1\\/4 { + transform: rotate(90deg) + } + } + `) + + expect(css(components)).toMatchCss(` + .tw-btn-blue, .tw-btn-red { + padding: 10px + } + `) +}) + test("component declarations can optionally ignore 'prefix' option", () => { const { components } = processPlugins( [ diff --git a/src/util/prefixTree.js b/src/util/prefixTree.js deleted file mode 100644 index 44499e9e6..000000000 --- a/src/util/prefixTree.js +++ /dev/null @@ -1,9 +0,0 @@ -import prefixSelector from './prefixSelector' - -export default function(css, prefix) { - css.walkRules(rule => { - rule.selectors = rule.selectors.map(selector => prefixSelector(prefix, selector)) - }) - - return css -}