mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
96d4ce2516
* add prettier-plugin-tailwindcss This will use the prettier plugin in our tests as well, yay consistency! * ensure that both `group` and `peer` can't be used in `@apply` This was only configured for `group` * expose `sortClassList` on the context This function will be used by the `prettier-plugin-tailwindcss` plugin, this way the sorting happens within Tailwind CSS itself adn the `prettier-plugin-tailwindcss` plugin doesn't have to use internal / private APIs. The signature looks like this: ```ts function sortClassList(classes: string[]): string[] ``` E.g.: ```js let sortedClasses = context.sortClassList(['p-1', 'm-1', 'container']) ``` * update changelog * add sort test for utilities with the important modifier e.g.: `!p-4`
207 lines
5.6 KiB
JavaScript
207 lines
5.6 KiB
JavaScript
import { run, html, css } from './util/run'
|
|
|
|
test('experimental universal selector improvements (box-shadow)', () => {
|
|
let config = {
|
|
experimental: 'all',
|
|
content: [{ raw: html`<div class="resize shadow"></div>` }],
|
|
corePlugins: { preflight: false },
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind base;
|
|
@tailwind utilities;
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchCss(css`
|
|
.shadow {
|
|
--tw-ring-offset-shadow: 0 0 #0000;
|
|
--tw-ring-shadow: 0 0 #0000;
|
|
--tw-shadow: 0 0 #0000;
|
|
--tw-shadow-colored: 0 0 #0000;
|
|
}
|
|
|
|
.resize {
|
|
resize: both;
|
|
}
|
|
|
|
.shadow {
|
|
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
|
|
0 1px 2px -1px var(--tw-shadow-color);
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
|
var(--tw-shadow);
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('experimental universal selector improvements (pseudo hover)', () => {
|
|
let config = {
|
|
experimental: 'all',
|
|
content: [{ raw: html`<div class="resize hover:shadow"></div>` }],
|
|
corePlugins: { preflight: false },
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind base;
|
|
@tailwind utilities;
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchCss(css`
|
|
.hover\:shadow {
|
|
--tw-ring-offset-shadow: 0 0 #0000;
|
|
--tw-ring-shadow: 0 0 #0000;
|
|
--tw-shadow: 0 0 #0000;
|
|
--tw-shadow-colored: 0 0 #0000;
|
|
}
|
|
|
|
.resize {
|
|
resize: both;
|
|
}
|
|
|
|
.hover\:shadow:hover {
|
|
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
|
|
0 1px 2px -1px var(--tw-shadow-color);
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
|
var(--tw-shadow);
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('experimental universal selector improvements (multiple classes: group)', () => {
|
|
let config = {
|
|
experimental: 'all',
|
|
content: [{ raw: html`<div class="resize group-hover:shadow"></div>` }],
|
|
corePlugins: { preflight: false },
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind base;
|
|
@tailwind utilities;
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchCss(css`
|
|
.group-hover\:shadow {
|
|
--tw-ring-offset-shadow: 0 0 #0000;
|
|
--tw-ring-shadow: 0 0 #0000;
|
|
--tw-shadow: 0 0 #0000;
|
|
--tw-shadow-colored: 0 0 #0000;
|
|
}
|
|
|
|
.resize {
|
|
resize: both;
|
|
}
|
|
|
|
.group:hover .group-hover\:shadow {
|
|
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
|
|
0 1px 2px -1px var(--tw-shadow-color);
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
|
var(--tw-shadow);
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('experimental universal selector improvements (child selectors: divide-y)', () => {
|
|
let config = {
|
|
experimental: 'all',
|
|
content: [{ raw: html`<div class="resize divide-y"></div>` }],
|
|
corePlugins: { preflight: false },
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind base;
|
|
@tailwind utilities;
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchCss(css`
|
|
.resize {
|
|
resize: both;
|
|
}
|
|
|
|
.divide-y > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-divide-y-reverse: 0;
|
|
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
|
|
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('experimental universal selector improvements (hover:divide-y)', () => {
|
|
let config = {
|
|
experimental: 'all',
|
|
content: [{ raw: html`<div class="resize hover:divide-y"></div>` }],
|
|
corePlugins: { preflight: false },
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind base;
|
|
@tailwind utilities;
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchCss(css`
|
|
.resize {
|
|
resize: both;
|
|
}
|
|
|
|
.hover\:divide-y:hover > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-divide-y-reverse: 0;
|
|
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
|
|
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
|
|
}
|
|
`)
|
|
})
|
|
})
|
|
|
|
test('experimental universal selector improvements (#app important)', () => {
|
|
let config = {
|
|
experimental: 'all',
|
|
important: '#app',
|
|
content: [{ raw: html`<div class="resize divide-y shadow"></div>` }],
|
|
corePlugins: { preflight: false },
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind base;
|
|
@tailwind utilities;
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchCss(css`
|
|
.shadow {
|
|
--tw-ring-offset-shadow: 0 0 #0000;
|
|
--tw-ring-shadow: 0 0 #0000;
|
|
--tw-shadow: 0 0 #0000;
|
|
--tw-shadow-colored: 0 0 #0000;
|
|
}
|
|
|
|
#app .resize {
|
|
resize: both;
|
|
}
|
|
|
|
#app .divide-y > :not([hidden]) ~ :not([hidden]) {
|
|
--tw-divide-y-reverse: 0;
|
|
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
|
|
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
|
|
}
|
|
|
|
#app .shadow {
|
|
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
|
|
0 1px 2px -1px var(--tw-shadow-color);
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
|
var(--tw-shadow);
|
|
}
|
|
`)
|
|
})
|
|
})
|