archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #517 from tailwindcss/variant-plugin-flag

Browse Source 
Move plugin variant features behind experiment
This commit is contained in:
Adam Wathan 2018-07-12 01:59:48 +09:30 committed by GitHub
commit ee6340af4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 51 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
__tests__/variantsAtRule.test.js
View File

@ -143,7 +143,36 @@ test('it wraps the output in a responsive at-rule if responsive is included as a
})
})
test('variants are generated in the order specified', () => {
test('variants are generated in a fixed order regardless of the order specified by default', () => {
const input = `
@variants focus, active, hover, group-hover {
.banana { color: yellow; }
.chocolate { color: brown; }
}
`
const output = `
.banana { color: yellow; }
.chocolate { color: brown; }
.group:hover .group-hover\\:banana { color: yellow; }
.group:hover .group-hover\\:chocolate { color: brown; }
.hover\\:banana:hover { color: yellow; }
.hover\\:chocolate:hover { color: brown; }
.focus\\:banana:focus { color: yellow; }
.focus\\:chocolate:focus { color: brown; }
.active\\:banana:active { color: yellow; }
.active\\:chocolate:active { color: brown; }
`
return run(input, {
...config,
}).then(result => {
expect(result.css).toMatchCss(output)
expect(result.warnings().length).toBe(0)
})
})
test('if plugin variants are enabled, variants are generated in the order specified', () => {
const input = `
@variants focus, active, hover {
.banana { color: yellow; }
@ -162,13 +191,16 @@ test('variants are generated in the order specified', () => {
.hover\\:chocolate:hover { color: brown; }
`
return run(input).then(result => {
return run(input, {
...config,
experiments: { pluginVariants: true },
}).then(result => {
expect(result.css).toMatchCss(output)
expect(result.warnings().length).toBe(0)
})
})
test('plugin variants can modify rules using the raw PostCSS API', () => {
test('if plugin variants are enabled, plugin variants can modify rules using the raw PostCSS API', () => {
const input = `
@variants important {
.banana { color: yellow; }
@ -185,6 +217,7 @@ test('plugin variants can modify rules using the raw PostCSS API', () => {
return run(input, {
...config,
experiments: { pluginVariants: true },
plugins: [
...config.plugins,
function({ addVariant }) {
@ -204,7 +237,7 @@ test('plugin variants can modify rules using the raw PostCSS API', () => {
})
})
test('plugin variants can modify selectors with a simplified API', () => {
test('if plugin variants are enabled, plugin variants can modify selectors with a simplified API', () => {
const input = `
@variants first-child {
.banana { color: yellow; }
@ -221,6 +254,7 @@ test('plugin variants can modify selectors with a simplified API', () => {
return run(input, {
...config,
experiments: { pluginVariants: true },
plugins: [
...config.plugins,
function({ addVariant }) {
@ -237,7 +271,7 @@ test('plugin variants can modify selectors with a simplified API', () => {
})
})
test('plugin variants can wrap rules in another at-rule using the raw PostCSS API', () => {
test('if plugin variants are enabled, plugin variants can wrap rules in another at-rule using the raw PostCSS API', () => {
const input = `
@variants supports-grid {
.banana { color: yellow; }
@ -256,6 +290,7 @@ test('plugin variants can wrap rules in another at-rule using the raw PostCSS AP
return run(input, {
...config,
experiments: { pluginVariants: true },
plugins: [
...config.plugins,
function({ addVariant }) {

14
src/lib/substituteVariantsAtRules.js
View File

@ -39,9 +39,17 @@ export default function(config, { variantGenerators: pluginVariantGenerators })
atRule.before(atRule.clone().nodes)
_.forEach(_.without(variants, 'responsive'), variant => {
variantGenerators[variant](atRule, config)
})
if (_.get(config, 'experiments.pluginVariants', false)) {
_.forEach(_.without(variants, 'responsive'), variant => {
variantGenerators[variant](atRule, config)
})
} else {
_.forEach(['group-hover', 'hover', 'focus', 'active'], variant => {
if (variants.includes(variant)) {
variantGenerators[variant](atRule, config)
}
})
}
atRule.remove()
})