8b4471778b
* fix `foo-[abc]/[def]` not being handled correctly This commit does a bit of cleanup, it also ensures that we lookup `[abc]/[def]` in the `values` first, and if it doesn't exist, then we start parsing all the values out. We also ensure that `abc` and `def` are parsed out correctly for the correct type instead of dropping the rule altogether because we happen to end up with an `any` rule. TODO: we should further clean the whole type system because this should only be used to figure out what type an arbitrary value is and to find the corresponding plugin and that's it. One of the fixes is doing a crazy lookup and running a generator, even though we know it is a lookup value so we should be done with all the work anyways. * update changelog
506 lines
11 KiB
JavaScript
506 lines
11 KiB
JavaScript
import { run, html, css } from './util/run'
|
|
|
|
test('match utilities with modifiers', async () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<div class="test test/foo test-1/foo test-2/foo test/[foo] test-1/[foo]"></div> `,
|
|
},
|
|
],
|
|
corePlugins: { preflight: false },
|
|
|
|
plugins: [
|
|
({ matchUtilities }) => {
|
|
matchUtilities(
|
|
{
|
|
test: (value, { modifier }) => ({
|
|
color: `${value}_${modifier}`,
|
|
}),
|
|
},
|
|
{
|
|
values: {
|
|
DEFAULT: 'default',
|
|
bar: 'bar',
|
|
'1': 'one',
|
|
'2': 'two',
|
|
'1/foo': 'onefoo',
|
|
},
|
|
modifiers: 'any',
|
|
}
|
|
)
|
|
},
|
|
],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
`
|
|
|
|
let result = await run(input, config)
|
|
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.test {
|
|
color: default_null;
|
|
}
|
|
.test\/foo {
|
|
color: default_foo;
|
|
}
|
|
.test-1\/foo {
|
|
color: onefoo_null;
|
|
}
|
|
.test-2\/foo {
|
|
color: two_foo;
|
|
}
|
|
.test\/\[foo\] {
|
|
color: default_[foo];
|
|
}
|
|
.test-1\/\[foo\] {
|
|
color: one_[foo];
|
|
}
|
|
`)
|
|
})
|
|
|
|
test('match utilities with modifiers in the config', async () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<div class="test test/foo test-1/foo test/[bar] test-1/[bar]"></div> `,
|
|
},
|
|
],
|
|
corePlugins: { preflight: false },
|
|
|
|
plugins: [
|
|
({ matchUtilities }) => {
|
|
matchUtilities(
|
|
{
|
|
test: (value, { modifier }) => ({
|
|
color: `${value}_${modifier}`,
|
|
}),
|
|
},
|
|
{
|
|
values: {
|
|
DEFAULT: 'default',
|
|
bar: 'bar',
|
|
'1': 'one',
|
|
},
|
|
modifiers: {
|
|
foo: 'mewtwo',
|
|
},
|
|
}
|
|
)
|
|
},
|
|
],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
`
|
|
|
|
let result = await run(input, config)
|
|
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.test {
|
|
color: default_null;
|
|
}
|
|
.test\/foo {
|
|
color: default_mewtwo;
|
|
}
|
|
.test-1\/foo {
|
|
color: one_mewtwo;
|
|
}
|
|
.test\/\[bar\] {
|
|
color: default_bar;
|
|
}
|
|
.test-1\/\[bar\] {
|
|
color: one_bar;
|
|
}
|
|
`)
|
|
})
|
|
|
|
test('match utilities can omit utilities by returning null', async () => {
|
|
let config = {
|
|
content: [
|
|
{
|
|
raw: html`<div class="test test/good test/bad"></div> `,
|
|
},
|
|
],
|
|
corePlugins: { preflight: false },
|
|
|
|
plugins: [
|
|
({ matchUtilities }) => {
|
|
matchUtilities(
|
|
{
|
|
test: (value, { modifier }) =>
|
|
modifier === 'bad'
|
|
? null
|
|
: {
|
|
color: `${value}_${modifier}`,
|
|
},
|
|
},
|
|
{
|
|
values: {
|
|
DEFAULT: 'default',
|
|
bar: 'bar',
|
|
'1': 'one',
|
|
},
|
|
modifiers: 'any',
|
|
}
|
|
)
|
|
},
|
|
],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
`
|
|
|
|
let result = await run(input, config)
|
|
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.test {
|
|
color: default_null;
|
|
}
|
|
.test\/good {
|
|
color: default_good;
|
|
}
|
|
`)
|
|
})
|
|
|
|
test('matching utilities with an arbitrary value and configured modifier', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="test-[foo]/bar"></div>` }],
|
|
theme: {},
|
|
plugins: [
|
|
function ({ matchUtilities }) {
|
|
matchUtilities(
|
|
{
|
|
test: (value, { modifier }) => ({ value, modifier }),
|
|
},
|
|
{
|
|
modifiers: {
|
|
bar: 'configured_bar',
|
|
},
|
|
}
|
|
)
|
|
},
|
|
],
|
|
corePlugins: [],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchCss(css`
|
|
.test-\[foo\]\/bar {
|
|
value: foo;
|
|
modifier: configured_bar;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('matching utilities with an configured value and an arbitrary modifier (raw)', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="test-foo/[bar]"></div>` }],
|
|
theme: {},
|
|
plugins: [
|
|
function ({ matchUtilities }) {
|
|
matchUtilities(
|
|
{
|
|
test: (value, { modifier }) => ({ value, modifier }),
|
|
},
|
|
{
|
|
values: {
|
|
foo: 'configured_foo',
|
|
},
|
|
modifiers: 'any', // Raw `[value]`
|
|
}
|
|
)
|
|
},
|
|
],
|
|
corePlugins: [],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchCss(css`
|
|
.test-foo\/\[bar\] {
|
|
value: configured_foo;
|
|
modifier: [bar];
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('matching utilities with an configured value and an arbitrary modifier (non-raw)', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="test-foo/[bar]"></div>` }],
|
|
theme: {},
|
|
plugins: [
|
|
function ({ matchUtilities }) {
|
|
matchUtilities(
|
|
{
|
|
test: (value, { modifier }) => ({ value, modifier }),
|
|
},
|
|
{
|
|
values: {
|
|
foo: 'configured_foo',
|
|
},
|
|
modifiers: {},
|
|
}
|
|
)
|
|
},
|
|
],
|
|
corePlugins: [],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchCss(css`
|
|
.test-foo\/\[bar\] {
|
|
value: configured_foo;
|
|
modifier: bar;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('matching utilities with an configured value and a configured modifier', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="test-foo/bar"></div>` }],
|
|
theme: {},
|
|
plugins: [
|
|
function ({ matchUtilities }) {
|
|
matchUtilities(
|
|
{
|
|
test: (value, { modifier }) => ({ value, modifier }),
|
|
},
|
|
{
|
|
values: {
|
|
foo: 'configured_foo',
|
|
},
|
|
modifiers: {
|
|
bar: 'configured_bar',
|
|
},
|
|
}
|
|
)
|
|
},
|
|
],
|
|
corePlugins: [],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchCss(css`
|
|
.test-foo\/bar {
|
|
value: configured_foo;
|
|
modifier: configured_bar;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('matching utilities with an arbitrary value and an arbitrary modifier (raw)', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="test-[foo]/[bar]"></div>` }],
|
|
theme: {},
|
|
plugins: [
|
|
function ({ matchUtilities }) {
|
|
matchUtilities(
|
|
{
|
|
test: (value, { modifier }) => ({ value, modifier }),
|
|
},
|
|
{
|
|
modifiers: 'any',
|
|
}
|
|
)
|
|
},
|
|
],
|
|
corePlugins: [],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchCss(css`
|
|
.test-\[foo\]\/\[bar\] {
|
|
value: foo;
|
|
modifier: [bar];
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('matching utilities with an arbitrary value and an arbitrary modifier (non-raw)', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="test-[foo]/[bar]"></div>` }],
|
|
theme: {},
|
|
plugins: [
|
|
function ({ matchUtilities }) {
|
|
matchUtilities(
|
|
{
|
|
test: (value, { modifier }) => ({ value, modifier }),
|
|
},
|
|
{
|
|
modifiers: {},
|
|
}
|
|
)
|
|
},
|
|
],
|
|
corePlugins: [],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchCss(css`
|
|
.test-\[foo\]\/\[bar\] {
|
|
value: foo;
|
|
modifier: bar;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('matching utilities with a lookup value that looks like an arbitrary value and modifier', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="test-[foo]/[bar]"></div>` }],
|
|
theme: {},
|
|
plugins: [
|
|
function ({ matchUtilities }) {
|
|
matchUtilities(
|
|
{
|
|
test: (value, { modifier }) => ({ value, modifier }),
|
|
},
|
|
{
|
|
values: {
|
|
'[foo]/[bar]': 'hello',
|
|
},
|
|
}
|
|
)
|
|
},
|
|
],
|
|
corePlugins: [],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchCss(css`
|
|
.test-\[foo\]\/\[bar\] {
|
|
value: hello;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('matching utilities with a lookup value that looks like an arbitrary value and modifier (with modifiers = any)', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="test-[foo]/[bar]"></div>` }],
|
|
theme: {},
|
|
plugins: [
|
|
function ({ matchUtilities }) {
|
|
matchUtilities(
|
|
{
|
|
test: (value, { modifier }) => ({ value, modifier }),
|
|
},
|
|
{
|
|
values: {
|
|
'[foo]/[bar]': 'hello',
|
|
},
|
|
modifiers: 'any',
|
|
}
|
|
)
|
|
},
|
|
],
|
|
corePlugins: [],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchCss(css`
|
|
.test-\[foo\]\/\[bar\] {
|
|
value: hello;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('matching utilities with a lookup value that looks like an arbitrary value and modifier (with modifiers = {})', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="test-[foo]/[bar]"></div>` }],
|
|
theme: {},
|
|
plugins: [
|
|
function ({ matchUtilities }) {
|
|
matchUtilities(
|
|
{
|
|
test: (value, { modifier }) => ({ value, modifier }),
|
|
},
|
|
{
|
|
values: {
|
|
'[foo]/[bar]': 'hello',
|
|
},
|
|
modifiers: {},
|
|
}
|
|
)
|
|
},
|
|
],
|
|
corePlugins: [],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchCss(css`
|
|
.test-\[foo\]\/\[bar\] {
|
|
value: hello;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('matching utilities with a lookup value that looks like an arbitrary value and a configured modifier', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="test-[foo]/bar"></div>` }],
|
|
theme: {},
|
|
plugins: [
|
|
function ({ matchUtilities }) {
|
|
matchUtilities(
|
|
{
|
|
test: (value, { modifier }) => ({ value, modifier }),
|
|
},
|
|
{
|
|
values: {
|
|
'[foo]/bar': 'hello',
|
|
},
|
|
}
|
|
)
|
|
},
|
|
],
|
|
corePlugins: [],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchCss(css`
|
|
.test-\[foo\]\/bar {
|
|
value: hello;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('matching utilities with a lookup value that looks like a configured value and an arbitrary modifier', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="test-foo/[bar]"></div>` }],
|
|
theme: {},
|
|
plugins: [
|
|
function ({ matchUtilities }) {
|
|
matchUtilities(
|
|
{
|
|
test: (value, { modifier }) => ({ value, modifier }),
|
|
},
|
|
{
|
|
values: {
|
|
'foo/[bar]': 'hello',
|
|
},
|
|
}
|
|
)
|
|
},
|
|
],
|
|
corePlugins: [],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchCss(css`
|
|
.test-foo\/\[bar\] {
|
|
value: hello;
|
|
}
|
|
`)
|
|
})
|
|
})
|