mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
007231fbfc
Not 100% convinced this is a net positive change, but I regret not having done things this way at the beginning.
In 0.x, we pass the `separator` and `className` values already escaped, so `:` comes through as `\:` for example, and `w-1/2` comes through as `w-1\/2`.
At first this sounds fine, less work for the plugin author right? But CSS escaping rules are kind of complicated and you have to escape characters differently depending on whether or not they are at the start of an identifier.
For example, it's totally fine for a class to contain a zero (`0` ), but it can't _start_ with a zero. For a class to start with a zero, it needs to be escaped like this: `\30 `
This means that as a general rule, trying to escape the individual segments of a class separately is a bad idea — you should escape the class as a whole so only the necessary escaping is applied. We break this rule when we pre-escape the separator and className for plugin authors who use the `modifySelectors` function.
We already require users to manually escape class names when they are using `addUtilities` or `addComponents`, so to me it feels more consistent for things to work this way and it's how they should have worked from day one.
Basically this code:
```js
function({ addVariant }) {
addVariant('first-child', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.first-child${separator}${className}:first-child`
})
})
},
```
...would need to be re-written like this if I merge this change:
```js
function({ addVariant, e }) {
addVariant('first-child', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(`first-child${separator}${className}`)}:first-child`
})
})
},
```
Although I think this is the right way for this to work, I hesitate because it's a breaking change that makes any variant plugins authored for 0.x incompatible with 1.x. It's an easy fix on the plugin author's part, but it's still annoying.
I'm leaning towards merging so I don't regret this even more later when the plugin ecosystem is a lot bigger. Anyone have any thoughts?
387 lines
10 KiB
JavaScript
387 lines
10 KiB
JavaScript
import postcss from 'postcss'
|
|
import plugin from '../src/lib/substituteVariantsAtRules'
|
|
import config from '../defaultConfig.stub.js'
|
|
import processPlugins from '../src/util/processPlugins'
|
|
|
|
function run(input, opts = config) {
|
|
return postcss([plugin(opts, processPlugins(opts.plugins, opts))]).process(input, {
|
|
from: undefined,
|
|
})
|
|
}
|
|
|
|
test('it can generate hover variants', () => {
|
|
const input = `
|
|
@variants hover {
|
|
.banana { color: yellow; }
|
|
.chocolate { color: brown; }
|
|
}
|
|
`
|
|
|
|
const output = `
|
|
.banana { color: yellow; }
|
|
.chocolate { color: brown; }
|
|
.hover\\:banana:hover { color: yellow; }
|
|
.hover\\:chocolate:hover { color: brown; }
|
|
`
|
|
|
|
return run(input).then(result => {
|
|
expect(result.css).toMatchCss(output)
|
|
expect(result.warnings().length).toBe(0)
|
|
})
|
|
})
|
|
|
|
test('it can generate active variants', () => {
|
|
const input = `
|
|
@variants active {
|
|
.banana { color: yellow; }
|
|
.chocolate { color: brown; }
|
|
}
|
|
`
|
|
|
|
const output = `
|
|
.banana { color: yellow; }
|
|
.chocolate { color: brown; }
|
|
.active\\:banana:active { color: yellow; }
|
|
.active\\:chocolate:active { color: brown; }
|
|
`
|
|
|
|
return run(input).then(result => {
|
|
expect(result.css).toMatchCss(output)
|
|
expect(result.warnings().length).toBe(0)
|
|
})
|
|
})
|
|
|
|
test('it can generate focus variants', () => {
|
|
const input = `
|
|
@variants focus {
|
|
.banana { color: yellow; }
|
|
.chocolate { color: brown; }
|
|
}
|
|
`
|
|
|
|
const output = `
|
|
.banana { color: yellow; }
|
|
.chocolate { color: brown; }
|
|
.focus\\:banana:focus { color: yellow; }
|
|
.focus\\:chocolate:focus { color: brown; }
|
|
`
|
|
|
|
return run(input).then(result => {
|
|
expect(result.css).toMatchCss(output)
|
|
expect(result.warnings().length).toBe(0)
|
|
})
|
|
})
|
|
|
|
test('it can generate focus-within variants', () => {
|
|
const input = `
|
|
@variants focus-within {
|
|
.banana { color: yellow; }
|
|
.chocolate { color: brown; }
|
|
}
|
|
`
|
|
|
|
const output = `
|
|
.banana { color: yellow; }
|
|
.chocolate { color: brown; }
|
|
.focus-within\\:banana:focus-within { color: yellow; }
|
|
.focus-within\\:chocolate:focus-within { color: brown; }
|
|
`
|
|
|
|
return run(input).then(result => {
|
|
expect(result.css).toMatchCss(output)
|
|
expect(result.warnings().length).toBe(0)
|
|
})
|
|
})
|
|
|
|
test('it can generate group-hover variants', () => {
|
|
const input = `
|
|
@variants 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; }
|
|
`
|
|
|
|
return run(input).then(result => {
|
|
expect(result.css).toMatchCss(output)
|
|
expect(result.warnings().length).toBe(0)
|
|
})
|
|
})
|
|
|
|
test('it can generate hover, active and focus variants', () => {
|
|
const input = `
|
|
@variants group-hover, hover, focus, active {
|
|
.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).then(result => {
|
|
expect(result.css).toMatchCss(output)
|
|
expect(result.warnings().length).toBe(0)
|
|
})
|
|
})
|
|
|
|
test('it can generate hover, active and focus variants for multiple classes in one rule', () => {
|
|
const input = `
|
|
@variants hover, focus, active {
|
|
.banana, .lemon { color: yellow; }
|
|
.chocolate, .coconut { color: brown; }
|
|
}
|
|
`
|
|
|
|
const output = `
|
|
.banana, .lemon { color: yellow; }
|
|
.chocolate, .coconut { color: brown; }
|
|
.hover\\:banana:hover, .hover\\:lemon:hover { color: yellow; }
|
|
.hover\\:chocolate:hover, .hover\\:coconut:hover { color: brown; }
|
|
.focus\\:banana:focus, .focus\\:lemon:focus { color: yellow; }
|
|
.focus\\:chocolate:focus, .focus\\:coconut:focus { color: brown; }
|
|
.active\\:banana:active, .active\\:lemon:active { color: yellow; }
|
|
.active\\:chocolate:active, .active\\:coconut:active { color: brown; }
|
|
`
|
|
|
|
return run(input).then(result => {
|
|
expect(result.css).toMatchCss(output)
|
|
expect(result.warnings().length).toBe(0)
|
|
})
|
|
})
|
|
|
|
test('it wraps the output in a responsive at-rule if responsive is included as a variant', () => {
|
|
const input = `
|
|
@variants responsive, hover, focus {
|
|
.banana { color: yellow; }
|
|
.chocolate { color: brown; }
|
|
}
|
|
`
|
|
|
|
const output = `
|
|
@responsive {
|
|
.banana { color: yellow; }
|
|
.chocolate { color: brown; }
|
|
.hover\\:banana:hover { color: yellow; }
|
|
.hover\\:chocolate:hover { color: brown; }
|
|
.focus\\:banana:focus { color: yellow; }
|
|
.focus\\:chocolate:focus { color: brown; }
|
|
}
|
|
`
|
|
|
|
return run(input).then(result => {
|
|
expect(result.css).toMatchCss(output)
|
|
expect(result.warnings().length).toBe(0)
|
|
})
|
|
})
|
|
|
|
test('variants are generated in the order specified', () => {
|
|
const input = `
|
|
@variants focus, active, hover {
|
|
.banana { color: yellow; }
|
|
.chocolate { color: brown; }
|
|
}
|
|
`
|
|
|
|
const output = `
|
|
.banana { color: yellow; }
|
|
.chocolate { color: brown; }
|
|
.focus\\:banana:focus { color: yellow; }
|
|
.focus\\:chocolate:focus { color: brown; }
|
|
.active\\:banana:active { color: yellow; }
|
|
.active\\:chocolate:active { color: brown; }
|
|
.hover\\:banana:hover { color: yellow; }
|
|
.hover\\:chocolate:hover { color: brown; }
|
|
`
|
|
|
|
return run(input, {
|
|
...config,
|
|
}).then(result => {
|
|
expect(result.css).toMatchCss(output)
|
|
expect(result.warnings().length).toBe(0)
|
|
})
|
|
})
|
|
|
|
test('the default variant can be generated in a specified position', () => {
|
|
const input = `
|
|
@variants focus, active, default, hover {
|
|
.banana { color: yellow; }
|
|
.chocolate { color: brown; }
|
|
}
|
|
`
|
|
|
|
const output = `
|
|
.focus\\:banana:focus { color: yellow; }
|
|
.focus\\:chocolate:focus { color: brown; }
|
|
.active\\:banana:active { color: yellow; }
|
|
.active\\:chocolate:active { color: brown; }
|
|
.banana { color: yellow; }
|
|
.chocolate { color: brown; }
|
|
.hover\\:banana:hover { color: yellow; }
|
|
.hover\\:chocolate:hover { color: brown; }
|
|
`
|
|
|
|
return run(input, {
|
|
...config,
|
|
}).then(result => {
|
|
expect(result.css).toMatchCss(output)
|
|
expect(result.warnings().length).toBe(0)
|
|
})
|
|
})
|
|
|
|
test('plugin variants can modify rules using the raw PostCSS API', () => {
|
|
const input = `
|
|
@variants important {
|
|
.banana { color: yellow; }
|
|
.chocolate { color: brown; }
|
|
}
|
|
`
|
|
|
|
const output = `
|
|
.banana { color: yellow; }
|
|
.chocolate { color: brown; }
|
|
.\\!banana { color: yellow !important; }
|
|
.\\!chocolate { color: brown !important; }
|
|
`
|
|
|
|
return run(input, {
|
|
...config,
|
|
plugins: [
|
|
...config.plugins,
|
|
function({ addVariant }) {
|
|
addVariant('important', ({ container }) => {
|
|
container.walkRules(rule => {
|
|
rule.selector = `.\\!${rule.selector.slice(1)}`
|
|
rule.walkDecls(decl => {
|
|
decl.important = true
|
|
})
|
|
})
|
|
})
|
|
},
|
|
],
|
|
}).then(result => {
|
|
expect(result.css).toMatchCss(output)
|
|
expect(result.warnings().length).toBe(0)
|
|
})
|
|
})
|
|
|
|
test('plugin variants can modify selectors with a simplified API', () => {
|
|
const input = `
|
|
@variants first-child {
|
|
.banana { color: yellow; }
|
|
.chocolate { color: brown; }
|
|
}
|
|
`
|
|
|
|
const output = `
|
|
.banana { color: yellow; }
|
|
.chocolate { color: brown; }
|
|
.first-child\\:banana:first-child { color: yellow; }
|
|
.first-child\\:chocolate:first-child { color: brown; }
|
|
`
|
|
|
|
return run(input, {
|
|
...config,
|
|
plugins: [
|
|
...config.plugins,
|
|
function({ addVariant, e }) {
|
|
addVariant('first-child', ({ modifySelectors, separator }) => {
|
|
modifySelectors(({ className }) => {
|
|
return `.${e(`first-child${separator}${className}`)}:first-child`
|
|
})
|
|
})
|
|
},
|
|
],
|
|
}).then(result => {
|
|
expect(result.css).toMatchCss(output)
|
|
expect(result.warnings().length).toBe(0)
|
|
})
|
|
})
|
|
|
|
test('plugin variants that use modify selectors need to manually escape the class name they are modifying', () => {
|
|
const input = `
|
|
@variants first-child {
|
|
.banana-1\\/2 { color: yellow; }
|
|
.chocolate-1\\.5 { color: brown; }
|
|
}
|
|
`
|
|
|
|
const output = `
|
|
.banana-1\\/2 { color: yellow; }
|
|
.chocolate-1\\.5 { color: brown; }
|
|
.first-child\\:banana-1\\/2:first-child { color: yellow; }
|
|
.first-child\\:chocolate-1\\.5:first-child { color: brown; }
|
|
`
|
|
|
|
return run(input, {
|
|
...config,
|
|
plugins: [
|
|
...config.plugins,
|
|
function({ addVariant, e }) {
|
|
addVariant('first-child', ({ modifySelectors, separator }) => {
|
|
modifySelectors(({ className }) => {
|
|
return `.${e(`first-child${separator}${className}`)}:first-child`
|
|
})
|
|
})
|
|
},
|
|
],
|
|
}).then(result => {
|
|
expect(result.css).toMatchCss(output)
|
|
expect(result.warnings().length).toBe(0)
|
|
})
|
|
})
|
|
|
|
test('plugin variants can wrap rules in another at-rule using the raw PostCSS API', () => {
|
|
const input = `
|
|
@variants supports-grid {
|
|
.banana { color: yellow; }
|
|
.chocolate { color: brown; }
|
|
}
|
|
`
|
|
|
|
const output = `
|
|
.banana { color: yellow; }
|
|
.chocolate { color: brown; }
|
|
@supports (display: grid) {
|
|
.supports-grid\\:banana { color: yellow; }
|
|
.supports-grid\\:chocolate { color: brown; }
|
|
}
|
|
`
|
|
|
|
return run(input, {
|
|
...config,
|
|
plugins: [
|
|
...config.plugins,
|
|
function({ addVariant, e }) {
|
|
addVariant('supports-grid', ({ container, separator }) => {
|
|
const supportsRule = postcss.atRule({ name: 'supports', params: '(display: grid)' })
|
|
supportsRule.nodes = container.nodes
|
|
container.nodes = [supportsRule]
|
|
supportsRule.walkRules(rule => {
|
|
rule.selector = `.${e(`supports-grid${separator}${rule.selector.slice(1)}`)}`
|
|
})
|
|
})
|
|
},
|
|
],
|
|
}).then(result => {
|
|
expect(result.css).toMatchCss(output)
|
|
expect(result.warnings().length).toBe(0)
|
|
})
|
|
})
|