e572dc645a
* bump `lightningcss` * allow for non-standard selector combinators such as `::deep` * just use Prettier when comparing CSS results We were using 2 different engines where the stable one was not using Lightning CSS and the Oxide one was using Lightning CSS. To ensure that we didn't have to rewrite every single test expectation, the `toMatchFormattedCss` parsed both the actual and expected value using Lightning CSS (to make the result similar), then it used Prettier to make it... pretty. Right now we _only_ use Lightning CSS, which means that we can drop the additional lightningcss format step and just use Prettier on both the actual and expected values. Pretty also only prettifies the CSS, it doesn't rewrite it. E.g.: `@media (min-width: 768px)` will not be optimized to `@media (width >= 768px)`, that's something that Lightning CSS does for us. This will require some changes in our test output, but it will be consistent afterwards because there won't be hidden transformation steps anymore. Because up until now it could be that the actual result was `color: black` but the tests showed `color: #000` (because it is shorter). This change will reflect reality. * update tests based on previous commit * only use `toMatchFormattedCss` instead of `toMatchCss` They both do the exact same thing right now. While `toMatchCss` is shorter, `toMatchFormattedCss` makes a bit more sense since we are comparing the Prettier results. * update integration tests
573 lines
12 KiB
JavaScript
573 lines
12 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] test-[8]/[9]"
|
|
></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',
|
|
'[8]/[9]': 'eightnine',
|
|
},
|
|
modifiers: 'any',
|
|
}
|
|
)
|
|
},
|
|
],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
`
|
|
|
|
let result = await run(input, config)
|
|
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.test {
|
|
color: default_null;
|
|
}
|
|
.test-1\/\[foo\] {
|
|
color: one_[foo];
|
|
}
|
|
.test-1\/foo {
|
|
color: onefoo_null;
|
|
}
|
|
.test-2\/foo {
|
|
color: two_foo;
|
|
}
|
|
.test-\[8\]\/\[9\] {
|
|
color: eightnine_null;
|
|
}
|
|
.test\/\[foo\] {
|
|
color: default_[foo];
|
|
}
|
|
.test\/foo {
|
|
color: default_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-1\/\[bar\] {
|
|
color: one_bar;
|
|
}
|
|
.test-1\/foo {
|
|
color: one_mewtwo;
|
|
}
|
|
.test\/\[bar\] {
|
|
color: default_bar;
|
|
}
|
|
.test\/foo {
|
|
color: default_mewtwo;
|
|
}
|
|
`)
|
|
})
|
|
|
|
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 a basic configured value', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="test-foo"></div>` }],
|
|
theme: {},
|
|
plugins: [
|
|
function ({ matchUtilities }) {
|
|
matchUtilities(
|
|
{
|
|
test: (value) => ({ value }),
|
|
},
|
|
{
|
|
values: {
|
|
foo: 'value_foo',
|
|
},
|
|
}
|
|
)
|
|
},
|
|
],
|
|
corePlugins: [],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.test-foo {
|
|
value: value_foo;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
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).toMatchFormattedCss(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).toMatchFormattedCss(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).toMatchFormattedCss(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).toMatchFormattedCss(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).toMatchFormattedCss(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).toMatchFormattedCss(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).toMatchFormattedCss(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).toMatchFormattedCss(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).toMatchFormattedCss(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).toMatchFormattedCss(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).toMatchFormattedCss(css`
|
|
.test-foo\/\[bar\] {
|
|
value: hello;
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('matching utilities with a lookup value that does not match the configured type', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="test-foo"></div>` }],
|
|
theme: {},
|
|
plugins: [
|
|
function ({ matchUtilities }) {
|
|
matchUtilities(
|
|
{
|
|
test: (value, { modifier }) => ({ value, modifier }),
|
|
},
|
|
{
|
|
values: {
|
|
foo: 'not-a-percentage',
|
|
},
|
|
type: ['percentage'],
|
|
}
|
|
)
|
|
},
|
|
],
|
|
corePlugins: [],
|
|
}
|
|
|
|
return run('@tailwind utilities', config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
.test-foo {
|
|
value: not-a-percentage;
|
|
}
|
|
`)
|
|
})
|
|
})
|