wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions
tailwindcss/tests/resolve-defaults-at-rules.test.js

771 lines
19 KiB
JavaScript
Raw Normal View History

JIT by default - move tests and make them consistent (#5374) * move `./tests/jit` to `./tests` * make tests consistent Abstracted a `run` function and some syntax highlighting helpers for `html`, `css` and `javascript`.
2021-09-03 13:48:16 +02:00
import { run, html, css } from './util/run'
Move defaults to their own always-on layer (#6500) Default's declarations are now processed and merged even when there is no tailwind base directive included in the stylesheet. Without this applying tailwind utilities in css modules would break if they relied on defaults rules. Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-12-14 12:21:38 -05:00
import { DEFAULTS_LAYER } from '../src/lib/expandTailwindAtRules'
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
test('basic utilities', async () => {
let config = {
JIT by default - move tests and make them consistent (#5374) * move `./tests/jit` to `./tests` * make tests consistent Abstracted a `run` function and some syntax highlighting helpers for `html`, `css` and `javascript`.
2021-09-03 13:48:16 +02:00
content: [{ raw: html`<div class="scale-x-110 rotate-3 skew-y-6"></div>` }],
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
corePlugins: ['transform', 'scale', 'rotate', 'skew'],
}
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
let input = css`
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
@tailwind base;
/* --- */
@tailwind utilities;
`
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
Enable optimize universal defaults by default (#5635) * enabled `optimizeUniversalDefaults` by default This PR is done in a way so that the default is set to `true`, but you can still disable it if it causes issues. In this case we do appreciate an issue in that case 😅. * update tests to use optimized universal selector * update integration tests * add dedicated tests for the optimized universal selector * improve minimumImpactSelector algorithm I think I cracked the algorithm, but I will probably need another pair of eyes on the subject. The current implementation works like this: Prerequisites: - The selector should already have been parsed using the selectorParser from 'postcss-selector-parser'. Algorithm: 1. Remove all of the pseudo classes from the list of nodes. 1.1. We do want to keep pseudo elements (E.g.: `::before`, `::first-line`, ...) 1.2. We do want to keep pseudo classes that contain nodes (E.g.: `:not(...)`) 2. Reverse the list of nodes. This will make it easier to search from the end to the start. For example `.group:hover .group-hover` should result in `.group-hover` not `.group`. 2.1. Find the index of the best match (class, id, attribute), and convert the node if required. (E.g.: `span#app` -> `#app` => `[id="app"]`) 2.2. Remove the rest of the selector that is not important anymore 2.3. Re-join the left-over nodes together * update tests using new algorithm * also look for `tag` types * take `tag` into account * simplify logic * add test to prove `rest.reverse()` in first case is required In case we don't find a match (idx === -1), we use `rest.reverse()`. However, it looks like you can just use `nodes` instead. This is not entirely true, because the `rest` variable will contain only the nodes that are not pseudo elements. `*:hover` would result in `*:hover` instead of just `*` * replace all nodes after > with a single universal selector
2021-10-06 17:45:26 +02:00
.rotate-3,
.skew-y-6,
.scale-x-110 {
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/* --- */
.rotate-3 {
--tw-rotate: 3deg;
transform: var(--tw-transform);
}
.skew-y-6 {
--tw-skew-y: 6deg;
transform: var(--tw-transform);
}
.scale-x-110 {
--tw-scale-x: 1.1;
transform: var(--tw-transform);
}
`)
})
})
test('with pseudo-class variants', async () => {
let config = {
Remove AOT (#5340) * make `jit` mode the default when no mode is specified * unify JIT and AOT codepaths * ensure `Object.entries` on undefined doesn't break It could be that sometimes you don't have values in your config (e.g.: `presets: []`), this in turn will break some plugins where we assume we have a value. * drop AOT specific tests These tests are all covered by JIT mode already and were AOT specific. * simplify tests, and add a few Some of the tests were written for AOT specifically, some were missing. We also updated the way we write those tests, essentially making Tailwind a blackbox, by testing against the final output. Now that JIT mode is the default, this is super fast because we only generate what is used, instead of partially testing in a 3MB file or building it all, then purging. * add some todo's to make sure we warn in a few cases * make `darkMode: 'media'`, the default This also includes moving dark mode tests to its own dedicated file. * remove PostCSS 7 compat mode * update CLI to be JIT-first * fix integration tests This is not a _real_ fix, but it does solve the broken test for now. * warn when using @responsive or @variants * remove the JIT preview warning * remove AOT-only code paths * remove all `mode: 'jit'` blocks Also remove `variants: {}` since they are not useful in `JIT` mode anymore. * drop unused dependencies * rename `purge` to `content` * remove static CDN builds * mark `--purge` as deprecated in the CLI This will still work, but a warning will be printed and it won't show up in the `--help` output. * cleanup nesting plugin We don't have to duplicate it anymore since there is no PostCSS 7 version anymore. * make sure integration tests run in band * cleanup folder structure * make sure nesting folder is available * simplify resolving of purge/content information
2021-09-01 17:13:59 +02:00
content: [
JIT by default - move tests and make them consistent (#5374) * move `./tests/jit` to `./tests` * make tests consistent Abstracted a `run` function and some syntax highlighting helpers for `html`, `css` and `javascript`.
2021-09-03 13:48:16 +02:00
{ raw: html`<div class="hover:scale-x-110 focus:rotate-3 hover:focus:skew-y-6"></div>` },
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
],
corePlugins: ['transform', 'scale', 'rotate', 'skew'],
}
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
let input = css`
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
@tailwind base;
/* --- */
@tailwind utilities;
`
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
Improve css expectations in tests (#5819) * use String.raw for css escapes This will allow us to write code like: ```css .mobile\:font-bold {} ``` Instead of ```css .mobile\\:font-bold {} ``` Which resembles "real" css way better in our tests. * use String.raw in integration tests as well
2021-10-18 12:08:48 +02:00
.hover\:scale-x-110,
.focus\:rotate-3,
.hover\:focus\:skew-y-6 {
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/* --- */
Improve css expectations in tests (#5819) * use String.raw for css escapes This will allow us to write code like: ```css .mobile\:font-bold {} ``` Instead of ```css .mobile\\:font-bold {} ``` Which resembles "real" css way better in our tests. * use String.raw in integration tests as well
2021-10-18 12:08:48 +02:00
.hover\:scale-x-110:hover {
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-scale-x: 1.1;
transform: var(--tw-transform);
}
Improve css expectations in tests (#5819) * use String.raw for css escapes This will allow us to write code like: ```css .mobile\:font-bold {} ``` Instead of ```css .mobile\\:font-bold {} ``` Which resembles "real" css way better in our tests. * use String.raw in integration tests as well
2021-10-18 12:08:48 +02:00
.focus\:rotate-3:focus {
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-rotate: 3deg;
transform: var(--tw-transform);
}
Improve css expectations in tests (#5819) * use String.raw for css escapes This will allow us to write code like: ```css .mobile\:font-bold {} ``` Instead of ```css .mobile\\:font-bold {} ``` Which resembles "real" css way better in our tests. * use String.raw in integration tests as well
2021-10-18 12:08:48 +02:00
.hover\:focus\:skew-y-6:focus:hover {
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-skew-y: 6deg;
transform: var(--tw-transform);
}
`)
})
})
test('with pseudo-element variants', async () => {
let config = {
JIT by default - move tests and make them consistent (#5374) * move `./tests/jit` to `./tests` * make tests consistent Abstracted a `run` function and some syntax highlighting helpers for `html`, `css` and `javascript`.
2021-09-03 13:48:16 +02:00
content: [{ raw: html`<div class="before:scale-x-110 after:rotate-3"></div>` }],
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
corePlugins: ['transform', 'scale', 'rotate', 'skew'],
}
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
let input = css`
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
@tailwind base;
/* --- */
@tailwind utilities;
`
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
Improve css expectations in tests (#5819) * use String.raw for css escapes This will allow us to write code like: ```css .mobile\:font-bold {} ``` Instead of ```css .mobile\\:font-bold {} ``` Which resembles "real" css way better in our tests. * use String.raw in integration tests as well
2021-10-18 12:08:48 +02:00
.before\:scale-x-110::before,
.after\:rotate-3::after {
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/* --- */
Improve css expectations in tests (#5819) * use String.raw for css escapes This will allow us to write code like: ```css .mobile\:font-bold {} ``` Instead of ```css .mobile\\:font-bold {} ``` Which resembles "real" css way better in our tests. * use String.raw in integration tests as well
2021-10-18 12:08:48 +02:00
.before\:scale-x-110::before {
Improve `before` and `after` variants (#5820) * remove unused `withRule` * ensure all ::before and ::after elements have content * update --tw-content for the content plugin * simplify `before` and `after` variants * update tests, to reflect changes * make new `format` and `wrap` API's private for now * allow returning a format string from `addVariant` callback * add `content: var(--tw-content)` for before/after variants * update tests to add `content: var(--tw-content)` * update changelog
2021-10-18 18:11:34 +02:00
content: var(--tw-content);
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-scale-x: 1.1;
transform: var(--tw-transform);
}
Improve css expectations in tests (#5819) * use String.raw for css escapes This will allow us to write code like: ```css .mobile\:font-bold {} ``` Instead of ```css .mobile\\:font-bold {} ``` Which resembles "real" css way better in our tests. * use String.raw in integration tests as well
2021-10-18 12:08:48 +02:00
.after\:rotate-3::after {
Improve `before` and `after` variants (#5820) * remove unused `withRule` * ensure all ::before and ::after elements have content * update --tw-content for the content plugin * simplify `before` and `after` variants * update tests, to reflect changes * make new `format` and `wrap` API's private for now * allow returning a format string from `addVariant` callback * add `content: var(--tw-content)` for before/after variants * update tests to add `content: var(--tw-content)` * update changelog
2021-10-18 18:11:34 +02:00
content: var(--tw-content);
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-rotate: 3deg;
transform: var(--tw-transform);
}
`)
})
})
test('with multi-class variants', async () => {
let config = {
JIT by default - move tests and make them consistent (#5374) * move `./tests/jit` to `./tests` * make tests consistent Abstracted a `run` function and some syntax highlighting helpers for `html`, `css` and `javascript`.
2021-09-03 13:48:16 +02:00
content: [{ raw: html`<div class="group-hover:scale-x-110 peer-focus:rotate-3"></div>` }],
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
corePlugins: ['transform', 'scale', 'rotate', 'skew'],
}
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
let input = css`
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
@tailwind base;
/* --- */
@tailwind utilities;
`
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
Improve css expectations in tests (#5819) * use String.raw for css escapes This will allow us to write code like: ```css .mobile\:font-bold {} ``` Instead of ```css .mobile\\:font-bold {} ``` Which resembles "real" css way better in our tests. * use String.raw in integration tests as well
2021-10-18 12:08:48 +02:00
.group-hover\:scale-x-110,
.peer-focus\:rotate-3 {
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/* --- */
Improve css expectations in tests (#5819) * use String.raw for css escapes This will allow us to write code like: ```css .mobile\:font-bold {} ``` Instead of ```css .mobile\\:font-bold {} ``` Which resembles "real" css way better in our tests. * use String.raw in integration tests as well
2021-10-18 12:08:48 +02:00
.group:hover .group-hover\:scale-x-110 {
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-scale-x: 1.1;
transform: var(--tw-transform);
}
Improve css expectations in tests (#5819) * use String.raw for css escapes This will allow us to write code like: ```css .mobile\:font-bold {} ``` Instead of ```css .mobile\\:font-bold {} ``` Which resembles "real" css way better in our tests. * use String.raw in integration tests as well
2021-10-18 12:08:48 +02:00
.peer:focus ~ .peer-focus\:rotate-3 {
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-rotate: 3deg;
transform: var(--tw-transform);
}
`)
})
})
test('with multi-class pseudo-element variants', async () => {
let config = {
Remove AOT (#5340) * make `jit` mode the default when no mode is specified * unify JIT and AOT codepaths * ensure `Object.entries` on undefined doesn't break It could be that sometimes you don't have values in your config (e.g.: `presets: []`), this in turn will break some plugins where we assume we have a value. * drop AOT specific tests These tests are all covered by JIT mode already and were AOT specific. * simplify tests, and add a few Some of the tests were written for AOT specifically, some were missing. We also updated the way we write those tests, essentially making Tailwind a blackbox, by testing against the final output. Now that JIT mode is the default, this is super fast because we only generate what is used, instead of partially testing in a 3MB file or building it all, then purging. * add some todo's to make sure we warn in a few cases * make `darkMode: 'media'`, the default This also includes moving dark mode tests to its own dedicated file. * remove PostCSS 7 compat mode * update CLI to be JIT-first * fix integration tests This is not a _real_ fix, but it does solve the broken test for now. * warn when using @responsive or @variants * remove the JIT preview warning * remove AOT-only code paths * remove all `mode: 'jit'` blocks Also remove `variants: {}` since they are not useful in `JIT` mode anymore. * drop unused dependencies * rename `purge` to `content` * remove static CDN builds * mark `--purge` as deprecated in the CLI This will still work, but a warning will be printed and it won't show up in the `--help` output. * cleanup nesting plugin We don't have to duplicate it anymore since there is no PostCSS 7 version anymore. * make sure integration tests run in band * cleanup folder structure * make sure nesting folder is available * simplify resolving of purge/content information
2021-09-01 17:13:59 +02:00
content: [
JIT by default - move tests and make them consistent (#5374) * move `./tests/jit` to `./tests` * make tests consistent Abstracted a `run` function and some syntax highlighting helpers for `html`, `css` and `javascript`.
2021-09-03 13:48:16 +02:00
{ raw: html`<div class="group-hover:before:scale-x-110 peer-focus:after:rotate-3"></div>` },
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
],
corePlugins: ['transform', 'scale', 'rotate', 'skew'],
}
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
let input = css`
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
@tailwind base;
/* --- */
@tailwind utilities;
`
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
Improve css expectations in tests (#5819) * use String.raw for css escapes This will allow us to write code like: ```css .mobile\:font-bold {} ``` Instead of ```css .mobile\\:font-bold {} ``` Which resembles "real" css way better in our tests. * use String.raw in integration tests as well
2021-10-18 12:08:48 +02:00
.group-hover\:before\:scale-x-110::before,
.peer-focus\:after\:rotate-3::after {
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/* --- */
Improve css expectations in tests (#5819) * use String.raw for css escapes This will allow us to write code like: ```css .mobile\:font-bold {} ``` Instead of ```css .mobile\\:font-bold {} ``` Which resembles "real" css way better in our tests. * use String.raw in integration tests as well
2021-10-18 12:08:48 +02:00
.group:hover .group-hover\:before\:scale-x-110::before {
Improve `before` and `after` variants (#5820) * remove unused `withRule` * ensure all ::before and ::after elements have content * update --tw-content for the content plugin * simplify `before` and `after` variants * update tests, to reflect changes * make new `format` and `wrap` API's private for now * allow returning a format string from `addVariant` callback * add `content: var(--tw-content)` for before/after variants * update tests to add `content: var(--tw-content)` * update changelog
2021-10-18 18:11:34 +02:00
content: var(--tw-content);
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-scale-x: 1.1;
transform: var(--tw-transform);
}
Improve css expectations in tests (#5819) * use String.raw for css escapes This will allow us to write code like: ```css .mobile\:font-bold {} ``` Instead of ```css .mobile\\:font-bold {} ``` Which resembles "real" css way better in our tests. * use String.raw in integration tests as well
2021-10-18 12:08:48 +02:00
.peer:focus ~ .peer-focus\:after\:rotate-3::after {
Improve `before` and `after` variants (#5820) * remove unused `withRule` * ensure all ::before and ::after elements have content * update --tw-content for the content plugin * simplify `before` and `after` variants * update tests, to reflect changes * make new `format` and `wrap` API's private for now * allow returning a format string from `addVariant` callback * add `content: var(--tw-content)` for before/after variants * update tests to add `content: var(--tw-content)` * update changelog
2021-10-18 18:11:34 +02:00
content: var(--tw-content);
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-rotate: 3deg;
transform: var(--tw-transform);
}
`)
})
})
test('with multi-class pseudo-element and pseudo-class variants', async () => {
let config = {
Remove AOT (#5340) * make `jit` mode the default when no mode is specified * unify JIT and AOT codepaths * ensure `Object.entries` on undefined doesn't break It could be that sometimes you don't have values in your config (e.g.: `presets: []`), this in turn will break some plugins where we assume we have a value. * drop AOT specific tests These tests are all covered by JIT mode already and were AOT specific. * simplify tests, and add a few Some of the tests were written for AOT specifically, some were missing. We also updated the way we write those tests, essentially making Tailwind a blackbox, by testing against the final output. Now that JIT mode is the default, this is super fast because we only generate what is used, instead of partially testing in a 3MB file or building it all, then purging. * add some todo's to make sure we warn in a few cases * make `darkMode: 'media'`, the default This also includes moving dark mode tests to its own dedicated file. * remove PostCSS 7 compat mode * update CLI to be JIT-first * fix integration tests This is not a _real_ fix, but it does solve the broken test for now. * warn when using @responsive or @variants * remove the JIT preview warning * remove AOT-only code paths * remove all `mode: 'jit'` blocks Also remove `variants: {}` since they are not useful in `JIT` mode anymore. * drop unused dependencies * rename `purge` to `content` * remove static CDN builds * mark `--purge` as deprecated in the CLI This will still work, but a warning will be printed and it won't show up in the `--help` output. * cleanup nesting plugin We don't have to duplicate it anymore since there is no PostCSS 7 version anymore. * make sure integration tests run in band * cleanup folder structure * make sure nesting folder is available * simplify resolving of purge/content information
2021-09-01 17:13:59 +02:00
content: [
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
{
JIT by default - move tests and make them consistent (#5374) * move `./tests/jit` to `./tests` * make tests consistent Abstracted a `run` function and some syntax highlighting helpers for `html`, `css` and `javascript`.
2021-09-03 13:48:16 +02:00
raw: html`<div
class="group-hover:hover:before:scale-x-110 peer-focus:focus:after:rotate-3"
></div>`,
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
},
],
corePlugins: ['transform', 'scale', 'rotate', 'skew'],
}
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
let input = css`
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
@tailwind base;
/* --- */
@tailwind utilities;
`
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
Improve css expectations in tests (#5819) * use String.raw for css escapes This will allow us to write code like: ```css .mobile\:font-bold {} ``` Instead of ```css .mobile\\:font-bold {} ``` Which resembles "real" css way better in our tests. * use String.raw in integration tests as well
2021-10-18 12:08:48 +02:00
.group-hover\:hover\:before\:scale-x-110::before,
.peer-focus\:focus\:after\:rotate-3::after {
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/* --- */
Enforce the order of pseudo elements (#6018) * enforce the order of some variants * update changelog * use better algorithm
2021-11-12 16:38:03 +01:00
.group:hover .group-hover\:hover\:before\:scale-x-110:hover::before {
Improve `before` and `after` variants (#5820) * remove unused `withRule` * ensure all ::before and ::after elements have content * update --tw-content for the content plugin * simplify `before` and `after` variants * update tests, to reflect changes * make new `format` and `wrap` API's private for now * allow returning a format string from `addVariant` callback * add `content: var(--tw-content)` for before/after variants * update tests to add `content: var(--tw-content)` * update changelog
2021-10-18 18:11:34 +02:00
content: var(--tw-content);
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-scale-x: 1.1;
transform: var(--tw-transform);
}
Enforce the order of pseudo elements (#6018) * enforce the order of some variants * update changelog * use better algorithm
2021-11-12 16:38:03 +01:00
.peer:focus ~ .peer-focus\:focus\:after\:rotate-3:focus::after {
Improve `before` and `after` variants (#5820) * remove unused `withRule` * ensure all ::before and ::after elements have content * update --tw-content for the content plugin * simplify `before` and `after` variants * update tests, to reflect changes * make new `format` and `wrap` API's private for now * allow returning a format string from `addVariant` callback * add `content: var(--tw-content)` for before/after variants * update tests to add `content: var(--tw-content)` * update changelog
2021-10-18 18:11:34 +02:00
content: var(--tw-content);
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-rotate: 3deg;
transform: var(--tw-transform);
}
`)
})
})
test('with apply', async () => {
let config = {
JIT by default - move tests and make them consistent (#5374) * move `./tests/jit` to `./tests` * make tests consistent Abstracted a `run` function and some syntax highlighting helpers for `html`, `css` and `javascript`.
2021-09-03 13:48:16 +02:00
content: [{ raw: html`<div class="foo"></div>` }],
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
corePlugins: ['transform', 'scale', 'rotate', 'skew'],
}
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
let input = css`
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
@tailwind base;
/* --- */
@tailwind utilities;
@layer utilities {
.foo {
@apply rotate-3;
}
}
.bar {
@apply before:scale-110;
}
.baz::before {
@apply rotate-45;
}
.whats ~ .next > span:hover {
@apply skew-x-6;
}
.media-queries {
@apply md:rotate-45;
}
.a,
.b,
.c {
@apply skew-y-3;
}
.a,
.b {
@apply rotate-45;
}
.a::before,
.b::after {
@apply rotate-90;
}
.recursive {
@apply foo;
}
`
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
Enable optimize universal defaults by default (#5635) * enabled `optimizeUniversalDefaults` by default This PR is done in a way so that the default is set to `true`, but you can still disable it if it causes issues. In this case we do appreciate an issue in that case 😅. * update tests to use optimized universal selector * update integration tests * add dedicated tests for the optimized universal selector * improve minimumImpactSelector algorithm I think I cracked the algorithm, but I will probably need another pair of eyes on the subject. The current implementation works like this: Prerequisites: - The selector should already have been parsed using the selectorParser from 'postcss-selector-parser'. Algorithm: 1. Remove all of the pseudo classes from the list of nodes. 1.1. We do want to keep pseudo elements (E.g.: `::before`, `::first-line`, ...) 1.2. We do want to keep pseudo classes that contain nodes (E.g.: `:not(...)`) 2. Reverse the list of nodes. This will make it easier to search from the end to the start. For example `.group:hover .group-hover` should result in `.group-hover` not `.group`. 2.1. Find the index of the best match (class, id, attribute), and convert the node if required. (E.g.: `span#app` -> `#app` => `[id="app"]`) 2.2. Remove the rest of the selector that is not important anymore 2.3. Re-join the left-over nodes together * update tests using new algorithm * also look for `tag` types * take `tag` into account * simplify logic * add test to prove `rest.reverse()` in first case is required In case we don't find a match (idx === -1), we use `rest.reverse()`. However, it looks like you can just use `nodes` instead. This is not entirely true, because the `rest` variable will contain only the nodes that are not pseudo elements. `*:hover` would result in `*:hover` instead of just `*` * replace all nodes after > with a single universal selector
2021-10-06 17:45:26 +02:00
.foo,
.bar::before,
.baz::before,
span,
.media-queries,
.a,
.b,
.c,
.a::before,
.b::after,
.recursive {
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/* --- */
.foo {
--tw-rotate: 3deg;
transform: var(--tw-transform);
}
.bar::before {
Improve `before` and `after` variants (#5820) * remove unused `withRule` * ensure all ::before and ::after elements have content * update --tw-content for the content plugin * simplify `before` and `after` variants * update tests, to reflect changes * make new `format` and `wrap` API's private for now * allow returning a format string from `addVariant` callback * add `content: var(--tw-content)` for before/after variants * update tests to add `content: var(--tw-content)` * update changelog
2021-10-18 18:11:34 +02:00
content: var(--tw-content);
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: var(--tw-transform);
}
.baz::before {
--tw-rotate: 45deg;
transform: var(--tw-transform);
}
.whats ~ .next > span:hover {
--tw-skew-x: 6deg;
transform: var(--tw-transform);
}
@media (min-width: 768px) {
.media-queries {
--tw-rotate: 45deg;
transform: var(--tw-transform);
}
}
.a,
.b,
.c {
--tw-skew-y: 3deg;
transform: var(--tw-transform);
}
.a,
.b {
--tw-rotate: 45deg;
transform: var(--tw-transform);
}
.a::before,
.b::after {
--tw-rotate: 90deg;
transform: var(--tw-transform);
}
.recursive {
--tw-rotate: 3deg;
transform: var(--tw-transform);
}
`)
})
})
Properly optimize universal defaults for legacy pseudo-element syntax (#5594)
2021-09-24 14:27:42 -04:00
test('legacy pseudo-element syntax is supported', async () => {
let config = {
experimental: { optimizeUniversalDefaults: true },
content: [{ raw: html`<div class="foo"></div>` }],
corePlugins: ['transform', 'scale', 'rotate', 'skew'],
}
let input = css`
@tailwind base;
/* --- */
@tailwind utilities;
.a:before {
@apply rotate-45;
}
.b:after {
@apply rotate-3;
}
.c:first-line {
@apply rotate-1;
}
.d:first-letter {
@apply rotate-6;
}
`
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.a:before,
.b:after,
.c:first-line,
.d:first-letter {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/* --- */
.a:before {
--tw-rotate: 45deg;
transform: var(--tw-transform);
}
.b:after {
--tw-rotate: 3deg;
transform: var(--tw-transform);
}
.c:first-line {
--tw-rotate: 1deg;
transform: var(--tw-transform);
}
.d:first-letter {
--tw-rotate: 6deg;
transform: var(--tw-transform);
}
`)
})
})
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
test('with borders', async () => {
let config = {
JIT by default - move tests and make them consistent (#5374) * move `./tests/jit` to `./tests` * make tests consistent Abstracted a `run` function and some syntax highlighting helpers for `html`, `css` and `javascript`.
2021-09-03 13:48:16 +02:00
content: [{ raw: html`<div class="border border-red-500 md:border-2"></div>` }],
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
corePlugins: ['borderWidth', 'borderColor', 'borderOpacity'],
}
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
let input = css`
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
@tailwind base;
/* --- */
@tailwind utilities;
`
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
Enable optimize universal defaults by default (#5635) * enabled `optimizeUniversalDefaults` by default This PR is done in a way so that the default is set to `true`, but you can still disable it if it causes issues. In this case we do appreciate an issue in that case 😅. * update tests to use optimized universal selector * update integration tests * add dedicated tests for the optimized universal selector * improve minimumImpactSelector algorithm I think I cracked the algorithm, but I will probably need another pair of eyes on the subject. The current implementation works like this: Prerequisites: - The selector should already have been parsed using the selectorParser from 'postcss-selector-parser'. Algorithm: 1. Remove all of the pseudo classes from the list of nodes. 1.1. We do want to keep pseudo elements (E.g.: `::before`, `::first-line`, ...) 1.2. We do want to keep pseudo classes that contain nodes (E.g.: `:not(...)`) 2. Reverse the list of nodes. This will make it easier to search from the end to the start. For example `.group:hover .group-hover` should result in `.group-hover` not `.group`. 2.1. Find the index of the best match (class, id, attribute), and convert the node if required. (E.g.: `span#app` -> `#app` => `[id="app"]`) 2.2. Remove the rest of the selector that is not important anymore 2.3. Re-join the left-over nodes together * update tests using new algorithm * also look for `tag` types * take `tag` into account * simplify logic * add test to prove `rest.reverse()` in first case is required In case we don't find a match (idx === -1), we use `rest.reverse()`. However, it looks like you can just use `nodes` instead. This is not entirely true, because the `rest` variable will contain only the nodes that are not pseudo elements. `*:hover` would result in `*:hover` instead of just `*` * replace all nodes after > with a single universal selector
2021-10-06 17:45:26 +02:00
.border,
Improve css expectations in tests (#5819) * use String.raw for css escapes This will allow us to write code like: ```css .mobile\:font-bold {} ``` Instead of ```css .mobile\\:font-bold {} ``` Which resembles "real" css way better in our tests. * use String.raw in integration tests as well
2021-10-18 12:08:48 +02:00
.md\:border-2 {
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-border-opacity: 1;
Update color parsing and formatting (#5442) * Replace `culori` with simple color parser * Use space-separated color syntax * Update default color values to use space-separated syntax * Update separator regex * Fix tests * add tests for the new `color` util Also slightly modified the `color` util itself to take `transparent` into account and also format every value as a string for consistency. Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-09-09 15:15:53 +01:00
border-color: rgb(229 231 235 / var(--tw-border-opacity));
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
}
/* --- */
.border {
border-width: 1px;
}
.border-red-500 {
--tw-border-opacity: 1;
Update color parsing and formatting (#5442) * Replace `culori` with simple color parser * Use space-separated color syntax * Update default color values to use space-separated syntax * Update separator regex * Fix tests * add tests for the new `color` util Also slightly modified the `color` util itself to take `transparent` into account and also format every value as a string for consistency. Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-09-09 15:15:53 +01:00
border-color: rgb(239 68 68 / var(--tw-border-opacity));
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
}
@media (min-width: 768px) {
Improve css expectations in tests (#5819) * use String.raw for css escapes This will allow us to write code like: ```css .mobile\:font-bold {} ``` Instead of ```css .mobile\\:font-bold {} ``` Which resembles "real" css way better in our tests. * use String.raw in integration tests as well
2021-10-18 12:08:48 +02:00
.md\:border-2 {
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
border-width: 2px;
}
}
`)
})
})
test('with shadows', async () => {
let config = {
JIT by default - move tests and make them consistent (#5374) * move `./tests/jit` to `./tests` * make tests consistent Abstracted a `run` function and some syntax highlighting helpers for `html`, `css` and `javascript`.
2021-09-03 13:48:16 +02:00
content: [{ raw: html`<div class="shadow md:shadow-xl ring-1 ring-black/25"></div>` }],
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
corePlugins: ['boxShadow', 'ringColor', 'ringWidth'],
}
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
let input = css`
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
@tailwind base;
/* --- */
@tailwind utilities;
`
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
Enable optimize universal defaults by default (#5635) * enabled `optimizeUniversalDefaults` by default This PR is done in a way so that the default is set to `true`, but you can still disable it if it causes issues. In this case we do appreciate an issue in that case 😅. * update tests to use optimized universal selector * update integration tests * add dedicated tests for the optimized universal selector * improve minimumImpactSelector algorithm I think I cracked the algorithm, but I will probably need another pair of eyes on the subject. The current implementation works like this: Prerequisites: - The selector should already have been parsed using the selectorParser from 'postcss-selector-parser'. Algorithm: 1. Remove all of the pseudo classes from the list of nodes. 1.1. We do want to keep pseudo elements (E.g.: `::before`, `::first-line`, ...) 1.2. We do want to keep pseudo classes that contain nodes (E.g.: `:not(...)`) 2. Reverse the list of nodes. This will make it easier to search from the end to the start. For example `.group:hover .group-hover` should result in `.group-hover` not `.group`. 2.1. Find the index of the best match (class, id, attribute), and convert the node if required. (E.g.: `span#app` -> `#app` => `[id="app"]`) 2.2. Remove the rest of the selector that is not important anymore 2.3. Re-join the left-over nodes together * update tests using new algorithm * also look for `tag` types * take `tag` into account * simplify logic * add test to prove `rest.reverse()` in first case is required In case we don't find a match (idx === -1), we use `rest.reverse()`. However, it looks like you can just use `nodes` instead. This is not entirely true, because the `rest` variable will contain only the nodes that are not pseudo elements. `*:hover` would result in `*:hover` instead of just `*` * replace all nodes after > with a single universal selector
2021-10-06 17:45:26 +02:00
.shadow,
Improve css expectations in tests (#5819) * use String.raw for css escapes This will allow us to write code like: ```css .mobile\:font-bold {} ``` Instead of ```css .mobile\\:font-bold {} ``` Which resembles "real" css way better in our tests. * use String.raw in integration tests as well
2021-10-18 12:08:48 +02:00
.md\:shadow-xl {
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
Add support for colored box shadows (#5979) * WIP * add box shadow parser * use box shadow parser * Update default shadows, add boxShadowColor key, add shadow datatype * Update tests * add `valid` flag to `boxShadow` parser Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-11-04 10:14:13 -04:00
--tw-shadow-colored: 0 0 #0000;
Enable optimize universal defaults by default (#5635) * enabled `optimizeUniversalDefaults` by default This PR is done in a way so that the default is set to `true`, but you can still disable it if it causes issues. In this case we do appreciate an issue in that case 😅. * update tests to use optimized universal selector * update integration tests * add dedicated tests for the optimized universal selector * improve minimumImpactSelector algorithm I think I cracked the algorithm, but I will probably need another pair of eyes on the subject. The current implementation works like this: Prerequisites: - The selector should already have been parsed using the selectorParser from 'postcss-selector-parser'. Algorithm: 1. Remove all of the pseudo classes from the list of nodes. 1.1. We do want to keep pseudo elements (E.g.: `::before`, `::first-line`, ...) 1.2. We do want to keep pseudo classes that contain nodes (E.g.: `:not(...)`) 2. Reverse the list of nodes. This will make it easier to search from the end to the start. For example `.group:hover .group-hover` should result in `.group-hover` not `.group`. 2.1. Find the index of the best match (class, id, attribute), and convert the node if required. (E.g.: `span#app` -> `#app` => `[id="app"]`) 2.2. Remove the rest of the selector that is not important anymore 2.3. Re-join the left-over nodes together * update tests using new algorithm * also look for `tag` types * take `tag` into account * simplify logic * add test to prove `rest.reverse()` in first case is required In case we don't find a match (idx === -1), we use `rest.reverse()`. However, it looks like you can just use `nodes` instead. This is not entirely true, because the `rest` variable will contain only the nodes that are not pseudo elements. `*:hover` would result in `*:hover` instead of just `*` * replace all nodes after > with a single universal selector
2021-10-06 17:45:26 +02:00
}
.ring-1 {
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
Update color parsing and formatting (#5442) * Replace `culori` with simple color parser * Use space-separated color syntax * Update default color values to use space-separated syntax * Update separator regex * Fix tests * add tests for the new `color` util Also slightly modified the `color` util itself to take `transparent` into account and also format every value as a string for consistency. Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-09-09 15:15:53 +01:00
--tw-ring-color: rgb(59 130 246 / 0.5);
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
Add support for colored box shadows (#5979) * WIP * add box shadow parser * use box shadow parser * Update default shadows, add boxShadowColor key, add shadow datatype * Update tests * add `valid` flag to `boxShadow` parser Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-11-04 10:14:13 -04:00
--tw-shadow-colored: 0 0 #0000;
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
}
/* --- */
.shadow {
Add support for colored box shadows (#5979) * WIP * add box shadow parser * use box shadow parser * Update default shadows, add boxShadowColor key, add shadow datatype * Update tests * add `valid` flag to `boxShadow` parser Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-11-04 10:14:13 -04:00
--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);
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.ring-1 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width))
var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
Improve css expectations in tests (#5819) * use String.raw for css escapes This will allow us to write code like: ```css .mobile\:font-bold {} ``` Instead of ```css .mobile\\:font-bold {} ``` Which resembles "real" css way better in our tests. * use String.raw in integration tests as well
2021-10-18 12:08:48 +02:00
.ring-black\/25 {
Update color parsing and formatting (#5442) * Replace `culori` with simple color parser * Use space-separated color syntax * Update default color values to use space-separated syntax * Update separator regex * Fix tests * add tests for the new `color` util Also slightly modified the `color` util itself to take `transparent` into account and also format every value as a string for consistency. Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-09-09 15:15:53 +01:00
--tw-ring-color: rgb(0 0 0 / 0.25);
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
}
@media (min-width: 768px) {
Improve css expectations in tests (#5819) * use String.raw for css escapes This will allow us to write code like: ```css .mobile\:font-bold {} ``` Instead of ```css .mobile\\:font-bold {} ``` Which resembles "real" css way better in our tests. * use String.raw in integration tests as well
2021-10-18 12:08:48 +02:00
.md\:shadow-xl {
Add support for colored box shadows (#5979) * WIP * add box shadow parser * use box shadow parser * Update default shadows, add boxShadowColor key, add shadow datatype * Update tests * add `valid` flag to `boxShadow` parser Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-11-04 10:14:13 -04:00
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
0 8px 10px -6px var(--tw-shadow-color);
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
}
`)
})
})
test('when no utilities that need the defaults are used', async () => {
let config = {
JIT by default - move tests and make them consistent (#5374) * move `./tests/jit` to `./tests` * make tests consistent Abstracted a `run` function and some syntax highlighting helpers for `html`, `css` and `javascript`.
2021-09-03 13:48:16 +02:00
content: [{ raw: html`<div class=""></div>` }],
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
corePlugins: ['transform', 'scale', 'rotate', 'skew'],
}
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
let input = css`
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
@tailwind base;
/* --- */
@tailwind utilities;
`
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
/* --- */
`)
})
})
test('when a utility uses defaults but they do not exist', async () => {
let config = {
JIT by default - move tests and make them consistent (#5374) * move `./tests/jit` to `./tests` * make tests consistent Abstracted a `run` function and some syntax highlighting helpers for `html`, `css` and `javascript`.
2021-09-03 13:48:16 +02:00
content: [{ raw: html`<div class="rotate-3"></div>` }],
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
corePlugins: ['rotate'],
}
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
let input = css`
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
@tailwind base;
/* --- */
@tailwind utilities;
`
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850) * WIP * run prettier * drop new lines in custom matcher Drop all newlines, let prettier handle everything for us. * add cache for the selector parser * add `@apply` tests for the universal optimizer * drop comments * initial replacements * WIP * WIP * MAKE IT WORK * Rename to resolveDefaultsAtRules * Update tests + defaults identifiers * Don't add @defaults in AOT mode Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-07-01 06:33:37 -04:00
/* --- */
.rotate-3 {
--tw-rotate: 3deg;
transform: var(--tw-transform);
}
`)
})
})
Try to use lowest impact selector when filling in defaults (#4866)
2021-07-01 17:18:46 -04:00
test('selectors are reduced to the lowest possible specificity', async () => {
let config = {
Improve experimental universal selector improvements (#5517) * add dedicated tests for the experimenal universal selector improvements * Add failing test * keep pseudo elements * re-add logic for special types (class, id, attribute) Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
2021-09-23 21:05:35 +02:00
experimental: 'all',
JIT by default - move tests and make them consistent (#5374) * move `./tests/jit` to `./tests` * make tests consistent Abstracted a `run` function and some syntax highlighting helpers for `html`, `css` and `javascript`.
2021-09-03 13:48:16 +02:00
content: [{ raw: html`<div class="foo"></div>` }],
Try to use lowest impact selector when filling in defaults (#4866)
2021-07-01 17:18:46 -04:00
corePlugins: [],
}
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
let input = css`
Try to use lowest impact selector when filling in defaults (#4866)
2021-07-01 17:18:46 -04:00
@defaults test {
--color: black;
}
/* --- */
.foo {
@defaults test;
background-color: var(--color);
}
#app {
@defaults test;
border-color: var(--color);
}
span#page {
@defaults test;
color: var(--color);
}
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
div[data-foo='bar']#other {
Try to use lowest impact selector when filling in defaults (#4866)
2021-07-01 17:18:46 -04:00
@defaults test;
fill: var(--color);
}
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
div[data-bar='baz'] {
Try to use lowest impact selector when filling in defaults (#4866)
2021-07-01 17:18:46 -04:00
@defaults test;
stroke: var(--color);
}
article {
@defaults test;
--article: var(--color);
}
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
div[data-foo='bar']#another::before {
Try to use lowest impact selector when filling in defaults (#4866)
2021-07-01 17:18:46 -04:00
@defaults test;
fill: var(--color);
}
`
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
Improve experimental universal selector improvements (#5517) * add dedicated tests for the experimenal universal selector improvements * Add failing test * keep pseudo elements * re-add logic for special types (class, id, attribute) Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
2021-09-23 21:05:35 +02:00
.foo,
[id='app'],
[id='page'],
[id='other'],
[data-bar='baz'],
article,
[id='another']::before {
Try to use lowest impact selector when filling in defaults (#4866)
2021-07-01 17:18:46 -04:00
--color: black;
}
/* --- */
.foo {
background-color: var(--color);
}
#app {
border-color: var(--color);
}
span#page {
color: var(--color);
}
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
div[data-foo='bar']#other {
Try to use lowest impact selector when filling in defaults (#4866)
2021-07-01 17:18:46 -04:00
fill: var(--color);
}
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
div[data-bar='baz'] {
Try to use lowest impact selector when filling in defaults (#4866)
2021-07-01 17:18:46 -04:00
stroke: var(--color);
}
article {
--article: var(--color);
}
Improve tests (#5108) * change specific selector to universal selector This is the commit that we could "undo" in the future if we need it again. * simplify `relative-purge-paths` test This test doesn't require the "reset" selector (whether it is super specific or universal) Simplified it so that it tests the relative purge config and nothing else. * added css tagged template literal helpers This allows prettier to format the string as CSS. This improves formatting and will improve future diffs. * drop tailwind headers in the sanity tests Every time we bump the Tailwind version, the sanity tests fail, because the current version is encoded in the fixture files. This will ensure that all of the contents is still checked and the header is skipped. The header will be tested against a regex to ensure that it is still there. This should be a small but nice QoL improvement, so that we don't have to think about updating those tests whenever we fix bugs or land new features.
2021-07-29 13:31:06 +02:00
div[data-foo='bar']#another::before {
Try to use lowest impact selector when filling in defaults (#4866)
2021-07-01 17:18:46 -04:00
fill: var(--color);
}
`)
})
})
Move defaults to their own always-on layer (#6500) Default's declarations are now processed and merged even when there is no tailwind base directive included in the stylesheet. Without this applying tailwind utilities in css modules would break if they relied on defaults rules. Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2021-12-14 12:21:38 -05:00
test('defaults without @tailwind base', () => {
let config = {
experimental: { optimizeUniversalDefaults: true },
content: [{ raw: html`<div class="scale-150"></div>` }],
corePlugins: { preflight: false },
[DEFAULTS_LAYER]: true,
}
// No @tailwind base directive means that we need to generate the defaults for each of the utility classes in that context
// These then get merged with the utilities generated by later passes but order is preserved
let input = css`
@tailwind components;
@tailwind utilities;
`
return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
.scale-150 {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
--tw-scale-x: 1.5;
--tw-scale-y: 1.5;
transform: var(--tw-transform);
}
`)
})
})
test('defaults and apply without @tailwind base', () => {
let config = {
experimental: { optimizeUniversalDefaults: true },
content: [{ raw: html`<div class="my-card"></div>` }],
corePlugins: { preflight: false },
[DEFAULTS_LAYER]: true,
}
// No @tailwind base directive means that we need to generate the defaults for each of the utility classes in that context
// These then get merged with the utilities generated by later passes but order is preserved
let input = css`
@tailwind components;
@tailwind utilities;
.my-card {
@apply scale-150;
}
`
return run(input, config).then((result) => {
return expect(result.css).toMatchFormattedCss(css`
.my-card {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
--tw-scale-x: 1.5;
--tw-scale-y: 1.5;
transform: var(--tw-transform);
}
`)
})
})
Reference in a new issue Copy permalink