From e572dc645a74ea0eb7e2962f5fda078b4265541d Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 7 Jun 2023 15:56:32 +0200 Subject: [PATCH] Bump `lightningcss` dependency (#11388) * bump `lightningcss` * allow for non-standard selector combinators such as `::deep` * just use Prettier when comparing CSS results We were using 2 different engines where the stable one was not using Lightning CSS and the Oxide one was using Lightning CSS. To ensure that we didn't have to rewrite every single test expectation, the `toMatchFormattedCss` parsed both the actual and expected value using Lightning CSS (to make the result similar), then it used Prettier to make it... pretty. Right now we _only_ use Lightning CSS, which means that we can drop the additional lightningcss format step and just use Prettier on both the actual and expected values. Pretty also only prettifies the CSS, it doesn't rewrite it. E.g.: `@media (min-width: 768px)` will not be optimized to `@media (width >= 768px)`, that's something that Lightning CSS does for us. This will require some changes in our test output, but it will be consistent afterwards because there won't be hidden transformation steps anymore. Because up until now it could be that the actual result was `color: black` but the tests showed `color: #000` (because it is shorter). This change will reflect reality. * update tests based on previous commit * only use `toMatchFormattedCss` instead of `toMatchCss` They both do the exact same thing right now. While `toMatchCss` is shorter, `toMatchFormattedCss` makes a bit more sense since we are comparing the Prettier results. * update integration tests --- .../content-resolution/tests/content.test.js | 28 +- integrations/parcel/tests/integration.test.js | 10 +- .../postcss-cli/tests/integration.test.js | 13 +- .../rollup-sass/tests/integration.test.js | 4 +- integrations/rollup/tests/integration.test.js | 6 +- .../tailwindcss-cli/tests/cli.test.js | 16 +- .../tailwindcss-cli/tests/integration.test.js | 6 - integrations/vite/tests/integration.test.js | 11 +- .../webpack-4/tests/integration.test.js | 4 +- .../webpack-5/tests/integration.test.js | 4 +- jest/customMatchers.js | 56 +-- package-lock.json | 476 +++++++++--------- package.json | 2 +- src/plugin.js | 3 + tests/apply.test.js | 104 ++-- tests/arbitrary-properties.test.js | 2 +- tests/arbitrary-values.test.css | 6 +- tests/arbitrary-values.test.js | 2 +- tests/arbitrary-variants.test.js | 8 +- tests/basic-usage.test.css | 16 +- tests/basic-usage.test.js | 3 - tests/blocklist.test.js | 2 +- tests/collapse-adjacent-rules.test.js | 10 +- tests/collapse-duplicate-declarations.test.js | 5 - tests/containerPlugin.test.js | 60 +-- tests/custom-plugins.test.js | 38 +- tests/custom-separator.test.js | 2 +- tests/customConfig.test.js | 16 +- tests/detect-nesting.test.js | 2 +- tests/evaluateTailwindFunctions.test.js | 192 ++++--- tests/experimental.test.js | 16 +- tests/import-syntax.test.js | 12 +- tests/important-boolean.test.js | 12 +- tests/important-modifier-prefix.test.js | 14 +- tests/important-modifier.test.js | 18 +- tests/important-selector.test.js | 26 +- tests/kitchen-sink.test.js | 72 +-- tests/match-utilities.test.js | 26 +- tests/match-variants.test.js | 62 +-- tests/min-max-screen-variants.test.js | 70 +-- tests/modify-selectors.test.js | 6 +- tests/negative-prefix.test.js | 34 +- tests/oxide-svelte.test.css | 2 +- tests/parseObjectStyles.test.js | 64 +-- tests/plugins/divide.test.js | 10 +- tests/plugins/fontFamily.test.js | 8 +- tests/plugins/fontSize.test.js | 12 +- tests/postcss-plugins/nesting/index.test.js | 23 +- tests/prefix.test.js | 14 +- tests/raw-content.test.css | 14 +- tests/resolve-defaults-at-rules.test.js | 6 +- tests/responsive-and-variants-atrules.test.js | 2 +- tests/screenAtRule.test.js | 2 +- tests/source-maps.test.js | 32 +- tests/space-utilities.test.js | 4 +- tests/syntax-svelte.test.js | 8 +- tests/tailwind-screens.test.js | 4 +- tests/variant-grouping.test.skip.js | 10 +- tests/variants.test.css | 108 +++- tests/variants.test.js | 46 +- 60 files changed, 908 insertions(+), 936 deletions(-) diff --git a/integrations/content-resolution/tests/content.test.js b/integrations/content-resolution/tests/content.test.js index a4db09f1b..baf9a3543 100644 --- a/integrations/content-resolution/tests/content.test.js +++ b/integrations/content-resolution/tests/content.test.js @@ -60,7 +60,7 @@ it('looks in the CWD by default', async () => { let result = await build({ cwd: path.resolve(__dirname, '..') }) - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .content-\[real-static-positive\] { --tw-content: real-static-positive; content: var(--tw-content); @@ -69,7 +69,7 @@ it('looks in the CWD by default', async () => { result = await build({ cwd: path.resolve(__dirname, '../src') }) - expect(result.css).toMatchCss(``) + expect(result.css).toMatchFormattedCss(``) }) it('looks in the CWD for non-config-relative paths', async () => { @@ -88,7 +88,7 @@ it('looks in the CWD for non-config-relative paths', async () => { let result = await build({ cwd: path.resolve(__dirname, '..') }) - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .content-\[real-static-positive\] { --tw-content: real-static-positive; content: var(--tw-content); @@ -97,7 +97,7 @@ it('looks in the CWD for non-config-relative paths', async () => { result = await build({ cwd: path.resolve(__dirname, '../src') }) - expect(result.css).toMatchCss(``) + expect(result.css).toMatchFormattedCss(``) }) it('can look for content files relative to the config', async () => { @@ -113,12 +113,12 @@ it('can look for content files relative to the config', async () => { // Here `./real` doesn't exist next to the config in the root directory let result = await build({ cwd: path.resolve(__dirname, '..') }) - expect(result.css).toMatchCss(css``) + expect(result.css).toMatchFormattedCss(css``) // But here it `./real` does exist next to the config in the `./src` directory! result = await build({ cwd: path.resolve(__dirname, '../src') }) - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .content-\[real-static-positive\] { --tw-content: real-static-positive; content: var(--tw-content); @@ -143,7 +143,7 @@ it('it handles ignored globs correctly when not relative to the config', async ( let result = await build({ cwd: path.resolve(__dirname, '..') }) - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .content-\[real-dynamic-positive\] { --tw-content: real-dynamic-positive; content: var(--tw-content); @@ -157,7 +157,7 @@ it('it handles ignored globs correctly when not relative to the config', async ( // But here it `./real` does exist next to the config in the `./src` directory! result = await build({ cwd: path.resolve(__dirname, '../src') }) - expect(result.css).toMatchCss(``) + expect(result.css).toMatchFormattedCss(``) }) it('it handles ignored globs correctly when relative to the config', async () => { @@ -177,12 +177,12 @@ it('it handles ignored globs correctly when relative to the config', async () => let result = await build({ cwd: path.resolve(__dirname, '..') }) - expect(result.css).toMatchCss(``) + expect(result.css).toMatchFormattedCss(``) // But here it `./real` does exist next to the config in the `./src` directory! result = await build({ cwd: path.resolve(__dirname, '../src') }) - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .content-\[real-dynamic-positive\] { --tw-content: real-dynamic-positive; content: var(--tw-content); @@ -215,7 +215,7 @@ it('it can resolve symlinks for files when not relative to the config', async () let result = await build({ cwd: path.resolve(__dirname, '..') }) - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .content-\[real-dynamic-positive\] { --tw-content: real-dynamic-positive; content: var(--tw-content); @@ -237,7 +237,7 @@ it('it can resolve symlinks for files when not relative to the config', async () // But here it `./real` does exist next to the config in the `./src` directory! result = await build({ cwd: path.resolve(__dirname, '../src') }) - expect(result.css).toMatchCss(``) + expect(result.css).toMatchFormattedCss(``) }) it('it can resolve symlinks for files when relative to the config', async () => { @@ -261,12 +261,12 @@ it('it can resolve symlinks for files when relative to the config', async () => let result = await build({ cwd: path.resolve(__dirname, '..') }) - expect(result.css).toMatchCss(``) + expect(result.css).toMatchFormattedCss(``) // But here it `./real` does exist next to the config in the `./src` directory! result = await build({ cwd: path.resolve(__dirname, '../src') }) - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .content-\[real-dynamic-positive\] { --tw-content: real-dynamic-positive; content: var(--tw-content); diff --git a/integrations/parcel/tests/integration.test.js b/integrations/parcel/tests/integration.test.js index 15b007ac9..36ebe1bf0 100644 --- a/integrations/parcel/tests/integration.test.js +++ b/integrations/parcel/tests/integration.test.js @@ -263,7 +263,7 @@ describe('watcher', () => { .font-bold { font-weight: 700; } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:font-medium { font-weight: 500; } @@ -301,7 +301,7 @@ describe('watcher', () => { .font-bold { font-weight: bold; } - @media (min-width: 800px) { + @media (width >= 800px) { .md\:font-medium { font-weight: 500; } @@ -352,11 +352,11 @@ describe('watcher', () => { expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss( css` - /* prettier-ignore */ .btn { - border-radius: .25rem; - padding: .25rem .5rem; + border-radius: 0.25rem; + padding: 0.25rem 0.5rem; } + .font-bold { font-weight: 700; } diff --git a/integrations/postcss-cli/tests/integration.test.js b/integrations/postcss-cli/tests/integration.test.js index cd8d2a904..1144ab59d 100644 --- a/integrations/postcss-cli/tests/integration.test.js +++ b/integrations/postcss-cli/tests/integration.test.js @@ -137,7 +137,7 @@ describe('watcher', () => { .font-bold { font-weight: 700; } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:font-medium { font-weight: 500; } @@ -174,7 +174,7 @@ describe('watcher', () => { .font-bold { font-weight: bold; } - @media (min-width: 800px) { + @media (width >= 800px) { .md\:font-medium { font-weight: 500; } @@ -247,12 +247,11 @@ describe('watcher', () => { expect(await readOutputFile('main.css')).toIncludeCss( css` - /* prettier-ignore */ .btn { - border-radius: 0.25rem; - z-index: 0; - padding: 0.25rem 0.5rem; - } + z-index: 0; + border-radius: 0.25rem; + padding: 0.25rem 0.5rem; + } .font-bold { font-weight: 700; } diff --git a/integrations/rollup-sass/tests/integration.test.js b/integrations/rollup-sass/tests/integration.test.js index 90a3831ff..f4702b951 100644 --- a/integrations/rollup-sass/tests/integration.test.js +++ b/integrations/rollup-sass/tests/integration.test.js @@ -136,7 +136,7 @@ describe('watcher', () => { .font-bold { font-weight: 700; } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:font-medium { font-weight: 500; } @@ -173,7 +173,7 @@ describe('watcher', () => { .font-bold { font-weight: bold; } - @media (min-width: 800px) { + @media (width >= 800px) { .md\:font-medium { font-weight: 500; } diff --git a/integrations/rollup/tests/integration.test.js b/integrations/rollup/tests/integration.test.js index 970d985f8..5ebd91ba8 100644 --- a/integrations/rollup/tests/integration.test.js +++ b/integrations/rollup/tests/integration.test.js @@ -224,7 +224,7 @@ describe('watcher', () => { .font-bold { font-weight: 700; } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:font-medium { font-weight: 500; } @@ -261,7 +261,7 @@ describe('watcher', () => { .font-bold { font-weight: bold; } - @media (min-width: 800px) { + @media (width >= 800px) { .md\:font-medium { font-weight: 500; } @@ -334,8 +334,8 @@ describe('watcher', () => { expect(await readOutputFile('index.css')).toIncludeCss( css` .btn { - border-radius: 0.25rem; z-index: 0; + border-radius: 0.25rem; padding: 0.25rem 0.5rem; } .font-bold { diff --git a/integrations/tailwindcss-cli/tests/cli.test.js b/integrations/tailwindcss-cli/tests/cli.test.js index 0ae5e056f..7647c6639 100644 --- a/integrations/tailwindcss-cli/tests/cli.test.js +++ b/integrations/tailwindcss-cli/tests/cli.test.js @@ -150,7 +150,7 @@ describe('Build command', () => { theme: { extend: { fontWeight: { - bold: 'BOLD', + bold: 'bold', }, }, }, @@ -171,7 +171,7 @@ describe('Build command', () => { expect(await readOutputFile('main.css')).toIncludeCss( css` .font-bold { - font-weight: BOLD; + font-weight: bold; } ` ) @@ -231,11 +231,8 @@ describe('Build command', () => { } .btn-after { + padding: 0.25rem 0.5rem; display: flex; - padding-left: 0.5rem; - padding-right: 0.5rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; } ` ) @@ -281,11 +278,8 @@ describe('Build command', () => { } .btn-after { + padding: 0.25rem 0.5rem; display: flex; - padding-left: 0.5rem; - padding-right: 0.5rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; } ` ) @@ -437,7 +431,7 @@ describe('Build command', () => { css` @media (min-width: 768px) { .md\:something-cool { - color: blue; + color: #00f; } } ` diff --git a/integrations/tailwindcss-cli/tests/integration.test.js b/integrations/tailwindcss-cli/tests/integration.test.js index c72728dd6..ce02e7fdd 100644 --- a/integrations/tailwindcss-cli/tests/integration.test.js +++ b/integrations/tailwindcss-cli/tests/integration.test.js @@ -884,7 +884,6 @@ describe('watcher', () => { expect(await readOutputFile('main.css')).not.toIncludeCss( css` .underline { - -webkit-text-decoration-line: underline; text-decoration-line: underline; } ` @@ -898,7 +897,6 @@ describe('watcher', () => { expect(await readOutputFile('main.css')).toIncludeCss( css` .underline { - -webkit-text-decoration-line: underline; text-decoration-line: underline; } ` @@ -938,7 +936,6 @@ describe('watcher', () => { expect(await readOutputFile('main.css')).not.toIncludeCss( css` .underline { - -webkit-text-decoration-line: underline; text-decoration-line: underline; } ` @@ -952,7 +949,6 @@ describe('watcher', () => { expect(await readOutputFile('main.css')).toIncludeCss( css` .underline { - -webkit-text-decoration-line: underline; text-decoration-line: underline; } ` @@ -1037,7 +1033,6 @@ describe('watcher', () => { } .underline { - -webkit-text-decoration-line: underline; text-decoration-line: underline; } ` @@ -1082,7 +1077,6 @@ describe('watcher', () => { } .underline { - -webkit-text-decoration-line: underline; text-decoration-line: underline; } ` diff --git a/integrations/vite/tests/integration.test.js b/integrations/vite/tests/integration.test.js index cb106ac59..90ec78ccc 100644 --- a/integrations/vite/tests/integration.test.js +++ b/integrations/vite/tests/integration.test.js @@ -255,7 +255,7 @@ describe('watcher', () => { .font-bold { font-weight: 700; } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:font-medium { font-weight: 500; } @@ -292,7 +292,7 @@ describe('watcher', () => { .font-bold { font-weight: bold; } - @media (min-width: 800px) { + @media (width >= 800px) { .md\:font-medium { font-weight: 500; } @@ -373,12 +373,9 @@ describe('watcher', () => { expect(await fetchCSS()).toIncludeCss( css` .btn { - border-radius: 0.25rem; z-index: 0; - padding-left: 0.5rem; - padding-right: 0.5rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; + border-radius: 0.25rem; + padding: 0.25rem 0.5rem; } .font-bold { font-weight: 700; diff --git a/integrations/webpack-4/tests/integration.test.js b/integrations/webpack-4/tests/integration.test.js index ae7011edd..e962a5402 100644 --- a/integrations/webpack-4/tests/integration.test.js +++ b/integrations/webpack-4/tests/integration.test.js @@ -225,7 +225,7 @@ describe('watcher', () => { .font-bold { font-weight: 700; } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:font-medium { font-weight: 500; } @@ -263,7 +263,7 @@ describe('watcher', () => { .font-bold { font-weight: bold; } - @media (min-width: 800px) { + @media (width >= 800px) { .md\:font-medium { font-weight: 500; } diff --git a/integrations/webpack-5/tests/integration.test.js b/integrations/webpack-5/tests/integration.test.js index c1f0a0629..487012c4b 100644 --- a/integrations/webpack-5/tests/integration.test.js +++ b/integrations/webpack-5/tests/integration.test.js @@ -225,7 +225,7 @@ describe('watcher', () => { .font-bold { font-weight: 700; } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:font-medium { font-weight: 500; } @@ -263,7 +263,7 @@ describe('watcher', () => { .font-bold { font-weight: bold; } - @media (min-width: 800px) { + @media (width >= 800px) { .md\:font-medium { font-weight: 500; } diff --git a/jest/customMatchers.js b/jest/customMatchers.js index 9b1c6b6d0..ad0b61ef1 100644 --- a/jest/customMatchers.js +++ b/jest/customMatchers.js @@ -1,6 +1,5 @@ const prettier = require('prettier') const { diff } = require('jest-diff') -const lightningcss = require('lightningcss') const log = require('../src/util/log').default let warn @@ -22,46 +21,7 @@ function formatPrettier(input) { } function format(input) { - try { - return lightningcss - .transform({ - filename: 'input.css', - code: Buffer.from(input), - minify: false, - targets: { chrome: 106 << 16 }, - drafts: { - nesting: true, - customMedia: true, - }, - }) - .code.toString('utf8') - } catch (err) { - try { - // Lightning CSS is pretty strict, so it will fail for `@media screen(md) {}` for example, - // in that case we can fallback to prettier since it doesn't really care. However if an - // actual syntax error is made, then we still want to show the proper error. - return formatPrettier(input.replace(/\n/g, '')) - } catch { - let lines = err.source.split('\n') - let e = new Error( - [ - 'Error formatting using Lightning CSS:', - '', - ...[ - '```css', - ...lines.slice(Math.max(err.loc.line - 3, 0), err.loc.line), - ' '.repeat(err.loc.column - 1) + '^-- ' + err.toString(), - ...lines.slice(err.loc.line, err.loc.line + 2), - '```', - ], - ].join('\n') - ) - if (Error.captureStackTrace) { - Error.captureStackTrace(e, toMatchFormattedCss) - } - throw e - } - } + return formatPrettier(input).replace(/\n{2,}/g, '\n') } function toMatchFormattedCss(received = '', argument = '') { @@ -86,10 +46,7 @@ function toMatchFormattedCss(received = '', argument = '') { ) } : () => { - let actual = formatPrettier(formattedReceived).replace(/\n\n/g, '\n') - let expected = formatPrettier(formattedArgument).replace(/\n\n/g, '\n') - - let diffString = diff(expected, actual, { + let diffString = diff(formattedArgument, formattedArgument, { expand: this.expand, }) @@ -98,8 +55,8 @@ function toMatchFormattedCss(received = '', argument = '') { '\n\n' + (diffString && diffString.includes('- Expect') ? `Difference:\n\n${diffString}` - : `Expected: ${this.utils.printExpected(expected)}\n` + - `Received: ${this.utils.printReceived(actual)}`) + : `Expected: ${this.utils.printExpected(formattedArgument)}\n` + + `Received: ${this.utils.printReceived(formattedReceived)}`) ) } @@ -107,13 +64,10 @@ function toMatchFormattedCss(received = '', argument = '') { } expect.extend({ - // Compare two CSS strings with all whitespace removed - // This is probably naive but it's fast and works well enough. - toMatchCss: toMatchFormattedCss, toMatchFormattedCss: toMatchFormattedCss, toIncludeCss(received, argument) { let options = { - comment: 'stripped(received).includes(stripped(argument))', + comment: 'formatCSS(received).includes(formatCSS(argument))', isNot: this.isNot, promise: this.promise, } diff --git a/package-lock.json b/package-lock.json index 6c5e428ec..057500410 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,7 @@ "glob-parent": "^6.0.2", "is-glob": "^4.0.3", "jiti": "^1.18.2", - "lightningcss": "^1.18.0", + "lightningcss": "^1.21.0", "lilconfig": "^2.1.0", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", @@ -46,7 +46,7 @@ }, "devDependencies": { "@swc/cli": "^0.1.62", - "@swc/core": "^1.3.56", + "@swc/core": "^1.3.62", "@swc/jest": "^0.2.26", "@swc/register": "^0.1.10", "concurrently": "^8.0.1", @@ -3967,9 +3967,9 @@ } }, "node_modules/@swc/core": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.57.tgz", - "integrity": "sha512-gAT80hOVeK5qoi+BRlgXWgJYI9cbQn2oi05A09Tvb6vjFgBsr9SlQGNZB9uMlcXRXspkZFf9l3yyWRtT4we3Yw==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.62.tgz", + "integrity": "sha512-J58hWY+/G8vOr4J6ZH9hLg0lMSijZtqIIf4HofZezGog/pVX6sJyBJ40dZ1ploFkDIlWTWvJyqtpesBKS73gkQ==", "dev": true, "hasInstallScript": true, "engines": { @@ -3980,16 +3980,16 @@ "url": "https://opencollective.com/swc" }, "optionalDependencies": { - "@swc/core-darwin-arm64": "1.3.57", - "@swc/core-darwin-x64": "1.3.57", - "@swc/core-linux-arm-gnueabihf": "1.3.57", - "@swc/core-linux-arm64-gnu": "1.3.57", - "@swc/core-linux-arm64-musl": "1.3.57", - "@swc/core-linux-x64-gnu": "1.3.57", - "@swc/core-linux-x64-musl": "1.3.57", - "@swc/core-win32-arm64-msvc": "1.3.57", - "@swc/core-win32-ia32-msvc": "1.3.57", - "@swc/core-win32-x64-msvc": "1.3.57" + "@swc/core-darwin-arm64": "1.3.62", + "@swc/core-darwin-x64": "1.3.62", + "@swc/core-linux-arm-gnueabihf": "1.3.62", + "@swc/core-linux-arm64-gnu": "1.3.62", + "@swc/core-linux-arm64-musl": "1.3.62", + "@swc/core-linux-x64-gnu": "1.3.62", + "@swc/core-linux-x64-musl": "1.3.62", + "@swc/core-win32-arm64-msvc": "1.3.62", + "@swc/core-win32-ia32-msvc": "1.3.62", + "@swc/core-win32-x64-msvc": "1.3.62" }, "peerDependencies": { "@swc/helpers": "^0.5.0" @@ -4001,9 +4001,9 @@ } }, "node_modules/@swc/core-darwin-arm64": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.57.tgz", - "integrity": "sha512-lhAK9kF/ppZdNTdaxJl2gE0bXubzQXTgxB2Xojme/1sbOipaLTskBbJ3FLySChpmVOzD0QSCTiW8w/dmQxqNIQ==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.62.tgz", + "integrity": "sha512-MmGilibITz68LEje6vJlKzc2gUUSgzvB3wGLSjEORikTNeM7P8jXVxE4A8fgZqDeudJUm9HVWrxCV+pHDSwXhA==", "cpu": [ "arm64" ], @@ -4017,9 +4017,9 @@ } }, "node_modules/@swc/core-darwin-x64": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.57.tgz", - "integrity": "sha512-jsTDH8Et/xdOM/ZCNvtrT6J8FT255OrMhEDvHZQZTgoky4oW/3FHUfji4J2FE97gitJqNJI8MuNuiGq81pIJRw==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.62.tgz", + "integrity": "sha512-Xl93MMB3sCWVlYWuQIB+v6EQgzoiuQYK5tNt9lsHoIEVu2zLdkQjae+5FUHZb1VYqCXIiWcULFfVz0R4Sjb7JQ==", "cpu": [ "x64" ], @@ -4033,9 +4033,9 @@ } }, "node_modules/@swc/core-linux-arm-gnueabihf": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.57.tgz", - "integrity": "sha512-MZv3fwcCmppbwfCWaE8cZvzbXOjX7n5SEC1hF2lgItTqp4S04dFk1iX50jKr6xS6xSLlRBPqDxwZH0sBpHaEuA==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.62.tgz", + "integrity": "sha512-nJsp6O7kCtAjTTMcIjVB0g5y1JNiYAa5q630eiwrnaHUusEFoANDdORI3Z9vXeikMkng+6yIv9/V8Rb093xLjQ==", "cpu": [ "arm" ], @@ -4049,9 +4049,9 @@ } }, "node_modules/@swc/core-linux-arm64-gnu": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.57.tgz", - "integrity": "sha512-wUeqa/qbkOEGl6TaDQZZL7txrQXs1vL7ERjPYhi9El+ywacFY/rTW2pK5DqaNk2eulVnLhbbNjsE1OMGSEWGkQ==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.62.tgz", + "integrity": "sha512-XGsV93vpUAopDt5y6vPwbK1Nc/MlL55L77bAZUPIiosWD1cWWPHNtNSpriE6+I+JiMHe0pqtfS/SSTk6ZkFQVw==", "cpu": [ "arm64" ], @@ -4065,9 +4065,9 @@ } }, "node_modules/@swc/core-linux-arm64-musl": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.57.tgz", - "integrity": "sha512-pZfp1B9XfH7ZhDKFjr4qbyM093zU2Ri0IZq2M2A4W9q92+Ivy8oEIqw+gSRO3jwMDqRMEtFD49YuFhkJQakxdA==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.62.tgz", + "integrity": "sha512-ESUmJjSlTTkoBy9dMG49opcNn8BmviqStMhwyeD1G8XRnmRVCZZgoBOKdvCXmJhw8bQXDhZumeaTUB+OFUKVXg==", "cpu": [ "arm64" ], @@ -4081,9 +4081,9 @@ } }, "node_modules/@swc/core-linux-x64-gnu": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.57.tgz", - "integrity": "sha512-dvtQnv07NikV+CJ+9PYJ3fqphSigzfvSUH6wRCmb5OzLDDLFnPLMrEO0pGeURvdIWCOhngcHF252C1Hl5uFSzA==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.62.tgz", + "integrity": "sha512-wnHJkt3ZBrax3SFnUHDcncG6mrSg9ZZjMhQV9Mc3JL1x1s1Gy9rGZCoBNnV/BUZWTemxIBcQbANRSDut/WO+9A==", "cpu": [ "x64" ], @@ -4097,9 +4097,9 @@ } }, "node_modules/@swc/core-linux-x64-musl": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.57.tgz", - "integrity": "sha512-1TKCSngyQxpzwBYDzF5MrEfYRDhlzt/GN1ZqlSnsJIPGkABOWZxYDvWJuMrkASdIztn3jSTPU2ih7rR7YQ8IIw==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.62.tgz", + "integrity": "sha512-9oRbuTC/VshB66Rgwi3pTq3sPxSTIb8k9L1vJjES+dDMKa29DAjPtWCXG/pyZ00ufpFZgkGEuAHH5uqUcr1JQg==", "cpu": [ "x64" ], @@ -4113,9 +4113,9 @@ } }, "node_modules/@swc/core-win32-arm64-msvc": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.57.tgz", - "integrity": "sha512-HvBYFyf4uBua/jyTrcFLKcq8SIbKVYfz2qWsbgSAZvuQPZvDC1XhN5EDH2tPZmT97F0CJx3fltH5nli6XY1/EQ==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.62.tgz", + "integrity": "sha512-zv14vlF2VRrxS061XkfzGjCYnOrEo5glKJjLK5PwUKysIoVrx/L8nAbFxjkX5cObdlyoqo+ekelyBPAO+4bS0w==", "cpu": [ "arm64" ], @@ -4129,9 +4129,9 @@ } }, "node_modules/@swc/core-win32-ia32-msvc": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.57.tgz", - "integrity": "sha512-PS8AtK9e6Rp97S0ek9W5VCZNCbDaHBUasiJUmaYqRVCq/Mn6S7eQlhd0iUDnjsagigQtoCRgMUzkVknd1tarsQ==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.62.tgz", + "integrity": "sha512-8MC/PZQSsOP2iA/81tAfNRqMWyEqTS/8zKUI67vPuLvpx6NAjRn3E9qBv7iFqH79iqZNzqSMo3awnLrKZyFbcw==", "cpu": [ "ia32" ], @@ -4145,9 +4145,9 @@ } }, "node_modules/@swc/core-win32-x64-msvc": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.57.tgz", - "integrity": "sha512-A6aX/Rpp0v3g7Spf3LSwR+ivviH8x+1xla612KLZmlc0yymWt9BMd3CmBkzyRBr2e41zGCrkf6tra6wgtCbAwA==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.62.tgz", + "integrity": "sha512-GJSmUJ95HKHZXAxiuPUmrcm/S3ivQvEzXhOZaIqYBIwUsm02vFZkClsV7eIKzWjso1t0+I/8MjrnUNaSWqh1rQ==", "cpu": [ "x64" ], @@ -10378,9 +10378,9 @@ } }, "node_modules/lightningcss": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.18.0.tgz", - "integrity": "sha512-uk10tNxi5fhZqU93vtYiQgx/8a9f0Kvtj5AXIm+VlOXY+t/DWDmCZWJEkZJmmALgvbS6aAW8or+Kq85eJ6TDTw==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.21.0.tgz", + "integrity": "sha512-HDznZexdDMvC98c79vRE+oW5vFncTlLjJopzK4azReOilq6n4XIscCMhvgiXkstYMM/dCe6FJw0oed06ck8AtA==", "dependencies": { "detect-libc": "^1.0.3" }, @@ -10392,20 +10392,20 @@ "url": "https://opencollective.com/parcel" }, "optionalDependencies": { - "lightningcss-darwin-arm64": "1.18.0", - "lightningcss-darwin-x64": "1.18.0", - "lightningcss-linux-arm-gnueabihf": "1.18.0", - "lightningcss-linux-arm64-gnu": "1.18.0", - "lightningcss-linux-arm64-musl": "1.18.0", - "lightningcss-linux-x64-gnu": "1.18.0", - "lightningcss-linux-x64-musl": "1.18.0", - "lightningcss-win32-x64-msvc": "1.18.0" + "lightningcss-darwin-arm64": "1.21.0", + "lightningcss-darwin-x64": "1.21.0", + "lightningcss-linux-arm-gnueabihf": "1.21.0", + "lightningcss-linux-arm64-gnu": "1.21.0", + "lightningcss-linux-arm64-musl": "1.21.0", + "lightningcss-linux-x64-gnu": "1.21.0", + "lightningcss-linux-x64-musl": "1.21.0", + "lightningcss-win32-x64-msvc": "1.21.0" } }, "node_modules/lightningcss-darwin-arm64": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.18.0.tgz", - "integrity": "sha512-OqjydwtiNPgdH1ByIjA1YzqvDG/OMR6L3LPN6wRl1729LB0y4Mik7L06kmZaTb+pvUHr+NmDd2KCwnlrQ4zO3w==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.21.0.tgz", + "integrity": "sha512-WcJmVmbNUnCbUqqXV46ZsriFtWJujcPkn+w2cu4R+EgpXuibyTP/gzahmX0gc4RYQxTz2zXIeGx4cF2gr8fLwA==", "cpu": [ "arm64" ], @@ -10422,9 +10422,9 @@ } }, "node_modules/lightningcss-darwin-x64": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.18.0.tgz", - "integrity": "sha512-mNiuPHj89/JHZmJMp+5H8EZSt6EL5DZRWJ31O6k3DrLLnRIQjXuXdDdN8kP7LoIkeWI5xvyD60CsReJm+YWYAw==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.21.0.tgz", + "integrity": "sha512-xHwMHfcTIHX6fY4YQimI1V/KcbozoNVeKMncZzrp/3NAj0sp3ktxobCj1e0sGqVJMUMaHu/SWvt0mS8jAIhkYw==", "cpu": [ "x64" ], @@ -10441,9 +10441,9 @@ } }, "node_modules/lightningcss-linux-arm-gnueabihf": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.18.0.tgz", - "integrity": "sha512-S+25JjI6601HiAVoTDXW6SqH+E94a+FHA7WQqseyNHunOgVWKcAkNEc2LJvVxgwTq6z41sDIb9/M3Z9wa9lk4A==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.21.0.tgz", + "integrity": "sha512-rk1cr+C2IA1QHvh0QJAPXsQ2vrwCksms7fgfaw43RIERBWa6EEM5p0/1CWhdZ5zrl9veUdY6NRaNGRJjJL0iLw==", "cpu": [ "arm" ], @@ -10460,9 +10460,9 @@ } }, "node_modules/lightningcss-linux-arm64-gnu": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.18.0.tgz", - "integrity": "sha512-JSqh4+21dCgBecIQUet35dtE4PhhSEMyqe3y0ZNQrAJQ5kyUPSQHiw81WXnPJcOSTTpG0TyMLiC8K//+BsFGQA==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.21.0.tgz", + "integrity": "sha512-JkOG8K2Y4m5MeP3DlaHOgGDDtHbhbJcN8JcizFN0snUIIru1qxYNWPhAQsEwysuTRY9aANP0nScZJkALpcYmgA==", "cpu": [ "arm64" ], @@ -10479,9 +10479,9 @@ } }, "node_modules/lightningcss-linux-arm64-musl": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.18.0.tgz", - "integrity": "sha512-2FWHa8iUhShnZnqhn2wfIcK5adJat9hAAaX7etNsoXJymlliDIOFuBQEsba2KBAZSM4QqfQtvRdR7m8i0I7ybQ==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.21.0.tgz", + "integrity": "sha512-4Zx51DbR41neTFMs28CI9cZpX/mF5Urc6pChTio5nZhrz6FC1pRGiwxNJ+G15a/YPvRmPmvQd3Mz1N4WEgbj2A==", "cpu": [ "arm64" ], @@ -10498,9 +10498,9 @@ } }, "node_modules/lightningcss-linux-x64-gnu": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.18.0.tgz", - "integrity": "sha512-plCPGQJtDZHcLVKVRLnQVF2XRsIC32WvuJhQ7fJ7F6BV98b/VZX0OlX05qUaOESD9dCDHjYSfxsgcvOKgCWh7A==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.21.0.tgz", + "integrity": "sha512-PN33pPK/O3b4qMfWcJ2eis7NLqEkyW2NEh9X4rWfJrBtOnSbgafuYUuEtO5Ylu+dL3oUKc5usB07FGeil3RzeA==", "cpu": [ "x64" ], @@ -10517,9 +10517,9 @@ } }, "node_modules/lightningcss-linux-x64-musl": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.18.0.tgz", - "integrity": "sha512-na+BGtVU6fpZvOHKhnlA0XHeibkT3/46nj6vLluG3kzdJYoBKU6dIl7DSOk++8jv4ybZyFJ0aOFMMSc8g2h58A==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.21.0.tgz", + "integrity": "sha512-S51OT7TRfS5x8aN/8frv/JSXCGm+11VuhM4WCiTqDPjhHUDWd8nwiN/7s5juiwrlrpOxb5UKq21EKDrISoGQpw==", "cpu": [ "x64" ], @@ -10536,9 +10536,9 @@ } }, "node_modules/lightningcss-win32-x64-msvc": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.18.0.tgz", - "integrity": "sha512-5qeAH4RMNy2yMNEl7e5TI6upt/7xD2ZpHWH4RkT8iJ7/6POS5mjHbXWUO9Q1hhDhqkdzGa76uAdMzEouIeCyNw==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.21.0.tgz", + "integrity": "sha512-yW6/ZDJAHrSWtRltH1tr2I+2sn374gK2yclc44HMfpxfjIYgXMUkzqstalloMUQpZFR6M0ltXo5/tuLWoBydGQ==", "cpu": [ "x64" ], @@ -18323,90 +18323,90 @@ } }, "@swc/core": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.57.tgz", - "integrity": "sha512-gAT80hOVeK5qoi+BRlgXWgJYI9cbQn2oi05A09Tvb6vjFgBsr9SlQGNZB9uMlcXRXspkZFf9l3yyWRtT4we3Yw==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.62.tgz", + "integrity": "sha512-J58hWY+/G8vOr4J6ZH9hLg0lMSijZtqIIf4HofZezGog/pVX6sJyBJ40dZ1ploFkDIlWTWvJyqtpesBKS73gkQ==", "dev": true, "requires": { - "@swc/core-darwin-arm64": "1.3.57", - "@swc/core-darwin-x64": "1.3.57", - "@swc/core-linux-arm-gnueabihf": "1.3.57", - "@swc/core-linux-arm64-gnu": "1.3.57", - "@swc/core-linux-arm64-musl": "1.3.57", - "@swc/core-linux-x64-gnu": "1.3.57", - "@swc/core-linux-x64-musl": "1.3.57", - "@swc/core-win32-arm64-msvc": "1.3.57", - "@swc/core-win32-ia32-msvc": "1.3.57", - "@swc/core-win32-x64-msvc": "1.3.57" + "@swc/core-darwin-arm64": "1.3.62", + "@swc/core-darwin-x64": "1.3.62", + "@swc/core-linux-arm-gnueabihf": "1.3.62", + "@swc/core-linux-arm64-gnu": "1.3.62", + "@swc/core-linux-arm64-musl": "1.3.62", + "@swc/core-linux-x64-gnu": "1.3.62", + "@swc/core-linux-x64-musl": "1.3.62", + "@swc/core-win32-arm64-msvc": "1.3.62", + "@swc/core-win32-ia32-msvc": "1.3.62", + "@swc/core-win32-x64-msvc": "1.3.62" } }, "@swc/core-darwin-arm64": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.57.tgz", - "integrity": "sha512-lhAK9kF/ppZdNTdaxJl2gE0bXubzQXTgxB2Xojme/1sbOipaLTskBbJ3FLySChpmVOzD0QSCTiW8w/dmQxqNIQ==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.62.tgz", + "integrity": "sha512-MmGilibITz68LEje6vJlKzc2gUUSgzvB3wGLSjEORikTNeM7P8jXVxE4A8fgZqDeudJUm9HVWrxCV+pHDSwXhA==", "dev": true, "optional": true }, "@swc/core-darwin-x64": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.57.tgz", - "integrity": "sha512-jsTDH8Et/xdOM/ZCNvtrT6J8FT255OrMhEDvHZQZTgoky4oW/3FHUfji4J2FE97gitJqNJI8MuNuiGq81pIJRw==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.62.tgz", + "integrity": "sha512-Xl93MMB3sCWVlYWuQIB+v6EQgzoiuQYK5tNt9lsHoIEVu2zLdkQjae+5FUHZb1VYqCXIiWcULFfVz0R4Sjb7JQ==", "dev": true, "optional": true }, "@swc/core-linux-arm-gnueabihf": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.57.tgz", - "integrity": "sha512-MZv3fwcCmppbwfCWaE8cZvzbXOjX7n5SEC1hF2lgItTqp4S04dFk1iX50jKr6xS6xSLlRBPqDxwZH0sBpHaEuA==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.62.tgz", + "integrity": "sha512-nJsp6O7kCtAjTTMcIjVB0g5y1JNiYAa5q630eiwrnaHUusEFoANDdORI3Z9vXeikMkng+6yIv9/V8Rb093xLjQ==", "dev": true, "optional": true }, "@swc/core-linux-arm64-gnu": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.57.tgz", - "integrity": "sha512-wUeqa/qbkOEGl6TaDQZZL7txrQXs1vL7ERjPYhi9El+ywacFY/rTW2pK5DqaNk2eulVnLhbbNjsE1OMGSEWGkQ==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.62.tgz", + "integrity": "sha512-XGsV93vpUAopDt5y6vPwbK1Nc/MlL55L77bAZUPIiosWD1cWWPHNtNSpriE6+I+JiMHe0pqtfS/SSTk6ZkFQVw==", "dev": true, "optional": true }, "@swc/core-linux-arm64-musl": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.57.tgz", - "integrity": "sha512-pZfp1B9XfH7ZhDKFjr4qbyM093zU2Ri0IZq2M2A4W9q92+Ivy8oEIqw+gSRO3jwMDqRMEtFD49YuFhkJQakxdA==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.62.tgz", + "integrity": "sha512-ESUmJjSlTTkoBy9dMG49opcNn8BmviqStMhwyeD1G8XRnmRVCZZgoBOKdvCXmJhw8bQXDhZumeaTUB+OFUKVXg==", "dev": true, "optional": true }, "@swc/core-linux-x64-gnu": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.57.tgz", - "integrity": "sha512-dvtQnv07NikV+CJ+9PYJ3fqphSigzfvSUH6wRCmb5OzLDDLFnPLMrEO0pGeURvdIWCOhngcHF252C1Hl5uFSzA==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.62.tgz", + "integrity": "sha512-wnHJkt3ZBrax3SFnUHDcncG6mrSg9ZZjMhQV9Mc3JL1x1s1Gy9rGZCoBNnV/BUZWTemxIBcQbANRSDut/WO+9A==", "dev": true, "optional": true }, "@swc/core-linux-x64-musl": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.57.tgz", - "integrity": "sha512-1TKCSngyQxpzwBYDzF5MrEfYRDhlzt/GN1ZqlSnsJIPGkABOWZxYDvWJuMrkASdIztn3jSTPU2ih7rR7YQ8IIw==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.62.tgz", + "integrity": "sha512-9oRbuTC/VshB66Rgwi3pTq3sPxSTIb8k9L1vJjES+dDMKa29DAjPtWCXG/pyZ00ufpFZgkGEuAHH5uqUcr1JQg==", "dev": true, "optional": true }, "@swc/core-win32-arm64-msvc": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.57.tgz", - "integrity": "sha512-HvBYFyf4uBua/jyTrcFLKcq8SIbKVYfz2qWsbgSAZvuQPZvDC1XhN5EDH2tPZmT97F0CJx3fltH5nli6XY1/EQ==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.62.tgz", + "integrity": "sha512-zv14vlF2VRrxS061XkfzGjCYnOrEo5glKJjLK5PwUKysIoVrx/L8nAbFxjkX5cObdlyoqo+ekelyBPAO+4bS0w==", "dev": true, "optional": true }, "@swc/core-win32-ia32-msvc": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.57.tgz", - "integrity": "sha512-PS8AtK9e6Rp97S0ek9W5VCZNCbDaHBUasiJUmaYqRVCq/Mn6S7eQlhd0iUDnjsagigQtoCRgMUzkVknd1tarsQ==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.62.tgz", + "integrity": "sha512-8MC/PZQSsOP2iA/81tAfNRqMWyEqTS/8zKUI67vPuLvpx6NAjRn3E9qBv7iFqH79iqZNzqSMo3awnLrKZyFbcw==", "dev": true, "optional": true }, "@swc/core-win32-x64-msvc": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.57.tgz", - "integrity": "sha512-A6aX/Rpp0v3g7Spf3LSwR+ivviH8x+1xla612KLZmlc0yymWt9BMd3CmBkzyRBr2e41zGCrkf6tra6wgtCbAwA==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.62.tgz", + "integrity": "sha512-GJSmUJ95HKHZXAxiuPUmrcm/S3ivQvEzXhOZaIqYBIwUsm02vFZkClsV7eIKzWjso1t0+I/8MjrnUNaSWqh1rQ==", "dev": true, "optional": true }, @@ -23528,67 +23528,67 @@ } }, "lightningcss": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.18.0.tgz", - "integrity": "sha512-uk10tNxi5fhZqU93vtYiQgx/8a9f0Kvtj5AXIm+VlOXY+t/DWDmCZWJEkZJmmALgvbS6aAW8or+Kq85eJ6TDTw==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.21.0.tgz", + "integrity": "sha512-HDznZexdDMvC98c79vRE+oW5vFncTlLjJopzK4azReOilq6n4XIscCMhvgiXkstYMM/dCe6FJw0oed06ck8AtA==", "requires": { "detect-libc": "^1.0.3", - "lightningcss-darwin-arm64": "1.18.0", - "lightningcss-darwin-x64": "1.18.0", - "lightningcss-linux-arm-gnueabihf": "1.18.0", - "lightningcss-linux-arm64-gnu": "1.18.0", - "lightningcss-linux-arm64-musl": "1.18.0", - "lightningcss-linux-x64-gnu": "1.18.0", - "lightningcss-linux-x64-musl": "1.18.0", - "lightningcss-win32-x64-msvc": "1.18.0" + "lightningcss-darwin-arm64": "1.21.0", + "lightningcss-darwin-x64": "1.21.0", + "lightningcss-linux-arm-gnueabihf": "1.21.0", + "lightningcss-linux-arm64-gnu": "1.21.0", + "lightningcss-linux-arm64-musl": "1.21.0", + "lightningcss-linux-x64-gnu": "1.21.0", + "lightningcss-linux-x64-musl": "1.21.0", + "lightningcss-win32-x64-msvc": "1.21.0" } }, "lightningcss-darwin-arm64": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.18.0.tgz", - "integrity": "sha512-OqjydwtiNPgdH1ByIjA1YzqvDG/OMR6L3LPN6wRl1729LB0y4Mik7L06kmZaTb+pvUHr+NmDd2KCwnlrQ4zO3w==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.21.0.tgz", + "integrity": "sha512-WcJmVmbNUnCbUqqXV46ZsriFtWJujcPkn+w2cu4R+EgpXuibyTP/gzahmX0gc4RYQxTz2zXIeGx4cF2gr8fLwA==", "optional": true }, "lightningcss-darwin-x64": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.18.0.tgz", - "integrity": "sha512-mNiuPHj89/JHZmJMp+5H8EZSt6EL5DZRWJ31O6k3DrLLnRIQjXuXdDdN8kP7LoIkeWI5xvyD60CsReJm+YWYAw==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.21.0.tgz", + "integrity": "sha512-xHwMHfcTIHX6fY4YQimI1V/KcbozoNVeKMncZzrp/3NAj0sp3ktxobCj1e0sGqVJMUMaHu/SWvt0mS8jAIhkYw==", "optional": true }, "lightningcss-linux-arm-gnueabihf": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.18.0.tgz", - "integrity": "sha512-S+25JjI6601HiAVoTDXW6SqH+E94a+FHA7WQqseyNHunOgVWKcAkNEc2LJvVxgwTq6z41sDIb9/M3Z9wa9lk4A==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.21.0.tgz", + "integrity": "sha512-rk1cr+C2IA1QHvh0QJAPXsQ2vrwCksms7fgfaw43RIERBWa6EEM5p0/1CWhdZ5zrl9veUdY6NRaNGRJjJL0iLw==", "optional": true }, "lightningcss-linux-arm64-gnu": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.18.0.tgz", - "integrity": "sha512-JSqh4+21dCgBecIQUet35dtE4PhhSEMyqe3y0ZNQrAJQ5kyUPSQHiw81WXnPJcOSTTpG0TyMLiC8K//+BsFGQA==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.21.0.tgz", + "integrity": "sha512-JkOG8K2Y4m5MeP3DlaHOgGDDtHbhbJcN8JcizFN0snUIIru1qxYNWPhAQsEwysuTRY9aANP0nScZJkALpcYmgA==", "optional": true }, "lightningcss-linux-arm64-musl": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.18.0.tgz", - "integrity": "sha512-2FWHa8iUhShnZnqhn2wfIcK5adJat9hAAaX7etNsoXJymlliDIOFuBQEsba2KBAZSM4QqfQtvRdR7m8i0I7ybQ==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.21.0.tgz", + "integrity": "sha512-4Zx51DbR41neTFMs28CI9cZpX/mF5Urc6pChTio5nZhrz6FC1pRGiwxNJ+G15a/YPvRmPmvQd3Mz1N4WEgbj2A==", "optional": true }, "lightningcss-linux-x64-gnu": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.18.0.tgz", - "integrity": "sha512-plCPGQJtDZHcLVKVRLnQVF2XRsIC32WvuJhQ7fJ7F6BV98b/VZX0OlX05qUaOESD9dCDHjYSfxsgcvOKgCWh7A==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.21.0.tgz", + "integrity": "sha512-PN33pPK/O3b4qMfWcJ2eis7NLqEkyW2NEh9X4rWfJrBtOnSbgafuYUuEtO5Ylu+dL3oUKc5usB07FGeil3RzeA==", "optional": true }, "lightningcss-linux-x64-musl": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.18.0.tgz", - "integrity": "sha512-na+BGtVU6fpZvOHKhnlA0XHeibkT3/46nj6vLluG3kzdJYoBKU6dIl7DSOk++8jv4ybZyFJ0aOFMMSc8g2h58A==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.21.0.tgz", + "integrity": "sha512-S51OT7TRfS5x8aN/8frv/JSXCGm+11VuhM4WCiTqDPjhHUDWd8nwiN/7s5juiwrlrpOxb5UKq21EKDrISoGQpw==", "optional": true }, "lightningcss-win32-x64-msvc": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.18.0.tgz", - "integrity": "sha512-5qeAH4RMNy2yMNEl7e5TI6upt/7xD2ZpHWH4RkT8iJ7/6POS5mjHbXWUO9Q1hhDhqkdzGa76uAdMzEouIeCyNw==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.21.0.tgz", + "integrity": "sha512-yW6/ZDJAHrSWtRltH1tr2I+2sn374gK2yclc44HMfpxfjIYgXMUkzqstalloMUQpZFR6M0ltXo5/tuLWoBydGQ==", "optional": true }, "lilconfig": { @@ -26360,7 +26360,7 @@ "requires": { "@alloc/quick-lru": "^5.2.0", "@swc/cli": "^0.1.62", - "@swc/core": "^1.3.56", + "@swc/core": "^1.3.62", "@swc/jest": "^0.2.26", "@swc/register": "^0.1.10", "@tailwindcss/integrations-content-resolution": "file:integrations/content-resolution", @@ -26388,7 +26388,7 @@ "jest": "^29.5.0", "jest-diff": "^29.5.0", "jiti": "^1.18.2", - "lightningcss": "^1.18.0", + "lightningcss": "^1.21.0", "lilconfig": "^2.1.0", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", @@ -28709,90 +28709,90 @@ } }, "@swc/core": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.57.tgz", - "integrity": "sha512-gAT80hOVeK5qoi+BRlgXWgJYI9cbQn2oi05A09Tvb6vjFgBsr9SlQGNZB9uMlcXRXspkZFf9l3yyWRtT4we3Yw==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.62.tgz", + "integrity": "sha512-J58hWY+/G8vOr4J6ZH9hLg0lMSijZtqIIf4HofZezGog/pVX6sJyBJ40dZ1ploFkDIlWTWvJyqtpesBKS73gkQ==", "dev": true, "requires": { - "@swc/core-darwin-arm64": "1.3.57", - "@swc/core-darwin-x64": "1.3.57", - "@swc/core-linux-arm-gnueabihf": "1.3.57", - "@swc/core-linux-arm64-gnu": "1.3.57", - "@swc/core-linux-arm64-musl": "1.3.57", - "@swc/core-linux-x64-gnu": "1.3.57", - "@swc/core-linux-x64-musl": "1.3.57", - "@swc/core-win32-arm64-msvc": "1.3.57", - "@swc/core-win32-ia32-msvc": "1.3.57", - "@swc/core-win32-x64-msvc": "1.3.57" + "@swc/core-darwin-arm64": "1.3.62", + "@swc/core-darwin-x64": "1.3.62", + "@swc/core-linux-arm-gnueabihf": "1.3.62", + "@swc/core-linux-arm64-gnu": "1.3.62", + "@swc/core-linux-arm64-musl": "1.3.62", + "@swc/core-linux-x64-gnu": "1.3.62", + "@swc/core-linux-x64-musl": "1.3.62", + "@swc/core-win32-arm64-msvc": "1.3.62", + "@swc/core-win32-ia32-msvc": "1.3.62", + "@swc/core-win32-x64-msvc": "1.3.62" } }, "@swc/core-darwin-arm64": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.57.tgz", - "integrity": "sha512-lhAK9kF/ppZdNTdaxJl2gE0bXubzQXTgxB2Xojme/1sbOipaLTskBbJ3FLySChpmVOzD0QSCTiW8w/dmQxqNIQ==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.62.tgz", + "integrity": "sha512-MmGilibITz68LEje6vJlKzc2gUUSgzvB3wGLSjEORikTNeM7P8jXVxE4A8fgZqDeudJUm9HVWrxCV+pHDSwXhA==", "dev": true, "optional": true }, "@swc/core-darwin-x64": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.57.tgz", - "integrity": "sha512-jsTDH8Et/xdOM/ZCNvtrT6J8FT255OrMhEDvHZQZTgoky4oW/3FHUfji4J2FE97gitJqNJI8MuNuiGq81pIJRw==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.62.tgz", + "integrity": "sha512-Xl93MMB3sCWVlYWuQIB+v6EQgzoiuQYK5tNt9lsHoIEVu2zLdkQjae+5FUHZb1VYqCXIiWcULFfVz0R4Sjb7JQ==", "dev": true, "optional": true }, "@swc/core-linux-arm-gnueabihf": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.57.tgz", - "integrity": "sha512-MZv3fwcCmppbwfCWaE8cZvzbXOjX7n5SEC1hF2lgItTqp4S04dFk1iX50jKr6xS6xSLlRBPqDxwZH0sBpHaEuA==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.62.tgz", + "integrity": "sha512-nJsp6O7kCtAjTTMcIjVB0g5y1JNiYAa5q630eiwrnaHUusEFoANDdORI3Z9vXeikMkng+6yIv9/V8Rb093xLjQ==", "dev": true, "optional": true }, "@swc/core-linux-arm64-gnu": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.57.tgz", - "integrity": "sha512-wUeqa/qbkOEGl6TaDQZZL7txrQXs1vL7ERjPYhi9El+ywacFY/rTW2pK5DqaNk2eulVnLhbbNjsE1OMGSEWGkQ==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.62.tgz", + "integrity": "sha512-XGsV93vpUAopDt5y6vPwbK1Nc/MlL55L77bAZUPIiosWD1cWWPHNtNSpriE6+I+JiMHe0pqtfS/SSTk6ZkFQVw==", "dev": true, "optional": true }, "@swc/core-linux-arm64-musl": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.57.tgz", - "integrity": "sha512-pZfp1B9XfH7ZhDKFjr4qbyM093zU2Ri0IZq2M2A4W9q92+Ivy8oEIqw+gSRO3jwMDqRMEtFD49YuFhkJQakxdA==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.62.tgz", + "integrity": "sha512-ESUmJjSlTTkoBy9dMG49opcNn8BmviqStMhwyeD1G8XRnmRVCZZgoBOKdvCXmJhw8bQXDhZumeaTUB+OFUKVXg==", "dev": true, "optional": true }, "@swc/core-linux-x64-gnu": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.57.tgz", - "integrity": "sha512-dvtQnv07NikV+CJ+9PYJ3fqphSigzfvSUH6wRCmb5OzLDDLFnPLMrEO0pGeURvdIWCOhngcHF252C1Hl5uFSzA==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.62.tgz", + "integrity": "sha512-wnHJkt3ZBrax3SFnUHDcncG6mrSg9ZZjMhQV9Mc3JL1x1s1Gy9rGZCoBNnV/BUZWTemxIBcQbANRSDut/WO+9A==", "dev": true, "optional": true }, "@swc/core-linux-x64-musl": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.57.tgz", - "integrity": "sha512-1TKCSngyQxpzwBYDzF5MrEfYRDhlzt/GN1ZqlSnsJIPGkABOWZxYDvWJuMrkASdIztn3jSTPU2ih7rR7YQ8IIw==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.62.tgz", + "integrity": "sha512-9oRbuTC/VshB66Rgwi3pTq3sPxSTIb8k9L1vJjES+dDMKa29DAjPtWCXG/pyZ00ufpFZgkGEuAHH5uqUcr1JQg==", "dev": true, "optional": true }, "@swc/core-win32-arm64-msvc": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.57.tgz", - "integrity": "sha512-HvBYFyf4uBua/jyTrcFLKcq8SIbKVYfz2qWsbgSAZvuQPZvDC1XhN5EDH2tPZmT97F0CJx3fltH5nli6XY1/EQ==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.62.tgz", + "integrity": "sha512-zv14vlF2VRrxS061XkfzGjCYnOrEo5glKJjLK5PwUKysIoVrx/L8nAbFxjkX5cObdlyoqo+ekelyBPAO+4bS0w==", "dev": true, "optional": true }, "@swc/core-win32-ia32-msvc": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.57.tgz", - "integrity": "sha512-PS8AtK9e6Rp97S0ek9W5VCZNCbDaHBUasiJUmaYqRVCq/Mn6S7eQlhd0iUDnjsagigQtoCRgMUzkVknd1tarsQ==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.62.tgz", + "integrity": "sha512-8MC/PZQSsOP2iA/81tAfNRqMWyEqTS/8zKUI67vPuLvpx6NAjRn3E9qBv7iFqH79iqZNzqSMo3awnLrKZyFbcw==", "dev": true, "optional": true }, "@swc/core-win32-x64-msvc": { - "version": "1.3.57", - "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.57.tgz", - "integrity": "sha512-A6aX/Rpp0v3g7Spf3LSwR+ivviH8x+1xla612KLZmlc0yymWt9BMd3CmBkzyRBr2e41zGCrkf6tra6wgtCbAwA==", + "version": "1.3.62", + "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.62.tgz", + "integrity": "sha512-GJSmUJ95HKHZXAxiuPUmrcm/S3ivQvEzXhOZaIqYBIwUsm02vFZkClsV7eIKzWjso1t0+I/8MjrnUNaSWqh1rQ==", "dev": true, "optional": true }, @@ -33914,67 +33914,67 @@ } }, "lightningcss": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.18.0.tgz", - "integrity": "sha512-uk10tNxi5fhZqU93vtYiQgx/8a9f0Kvtj5AXIm+VlOXY+t/DWDmCZWJEkZJmmALgvbS6aAW8or+Kq85eJ6TDTw==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.21.0.tgz", + "integrity": "sha512-HDznZexdDMvC98c79vRE+oW5vFncTlLjJopzK4azReOilq6n4XIscCMhvgiXkstYMM/dCe6FJw0oed06ck8AtA==", "requires": { "detect-libc": "^1.0.3", - "lightningcss-darwin-arm64": "1.18.0", - "lightningcss-darwin-x64": "1.18.0", - "lightningcss-linux-arm-gnueabihf": "1.18.0", - "lightningcss-linux-arm64-gnu": "1.18.0", - "lightningcss-linux-arm64-musl": "1.18.0", - "lightningcss-linux-x64-gnu": "1.18.0", - "lightningcss-linux-x64-musl": "1.18.0", - "lightningcss-win32-x64-msvc": "1.18.0" + "lightningcss-darwin-arm64": "1.21.0", + "lightningcss-darwin-x64": "1.21.0", + "lightningcss-linux-arm-gnueabihf": "1.21.0", + "lightningcss-linux-arm64-gnu": "1.21.0", + "lightningcss-linux-arm64-musl": "1.21.0", + "lightningcss-linux-x64-gnu": "1.21.0", + "lightningcss-linux-x64-musl": "1.21.0", + "lightningcss-win32-x64-msvc": "1.21.0" } }, "lightningcss-darwin-arm64": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.18.0.tgz", - "integrity": "sha512-OqjydwtiNPgdH1ByIjA1YzqvDG/OMR6L3LPN6wRl1729LB0y4Mik7L06kmZaTb+pvUHr+NmDd2KCwnlrQ4zO3w==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.21.0.tgz", + "integrity": "sha512-WcJmVmbNUnCbUqqXV46ZsriFtWJujcPkn+w2cu4R+EgpXuibyTP/gzahmX0gc4RYQxTz2zXIeGx4cF2gr8fLwA==", "optional": true }, "lightningcss-darwin-x64": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.18.0.tgz", - "integrity": "sha512-mNiuPHj89/JHZmJMp+5H8EZSt6EL5DZRWJ31O6k3DrLLnRIQjXuXdDdN8kP7LoIkeWI5xvyD60CsReJm+YWYAw==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.21.0.tgz", + "integrity": "sha512-xHwMHfcTIHX6fY4YQimI1V/KcbozoNVeKMncZzrp/3NAj0sp3ktxobCj1e0sGqVJMUMaHu/SWvt0mS8jAIhkYw==", "optional": true }, "lightningcss-linux-arm-gnueabihf": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.18.0.tgz", - "integrity": "sha512-S+25JjI6601HiAVoTDXW6SqH+E94a+FHA7WQqseyNHunOgVWKcAkNEc2LJvVxgwTq6z41sDIb9/M3Z9wa9lk4A==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.21.0.tgz", + "integrity": "sha512-rk1cr+C2IA1QHvh0QJAPXsQ2vrwCksms7fgfaw43RIERBWa6EEM5p0/1CWhdZ5zrl9veUdY6NRaNGRJjJL0iLw==", "optional": true }, "lightningcss-linux-arm64-gnu": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.18.0.tgz", - "integrity": "sha512-JSqh4+21dCgBecIQUet35dtE4PhhSEMyqe3y0ZNQrAJQ5kyUPSQHiw81WXnPJcOSTTpG0TyMLiC8K//+BsFGQA==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.21.0.tgz", + "integrity": "sha512-JkOG8K2Y4m5MeP3DlaHOgGDDtHbhbJcN8JcizFN0snUIIru1qxYNWPhAQsEwysuTRY9aANP0nScZJkALpcYmgA==", "optional": true }, "lightningcss-linux-arm64-musl": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.18.0.tgz", - "integrity": "sha512-2FWHa8iUhShnZnqhn2wfIcK5adJat9hAAaX7etNsoXJymlliDIOFuBQEsba2KBAZSM4QqfQtvRdR7m8i0I7ybQ==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.21.0.tgz", + "integrity": "sha512-4Zx51DbR41neTFMs28CI9cZpX/mF5Urc6pChTio5nZhrz6FC1pRGiwxNJ+G15a/YPvRmPmvQd3Mz1N4WEgbj2A==", "optional": true }, "lightningcss-linux-x64-gnu": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.18.0.tgz", - "integrity": "sha512-plCPGQJtDZHcLVKVRLnQVF2XRsIC32WvuJhQ7fJ7F6BV98b/VZX0OlX05qUaOESD9dCDHjYSfxsgcvOKgCWh7A==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.21.0.tgz", + "integrity": "sha512-PN33pPK/O3b4qMfWcJ2eis7NLqEkyW2NEh9X4rWfJrBtOnSbgafuYUuEtO5Ylu+dL3oUKc5usB07FGeil3RzeA==", "optional": true }, "lightningcss-linux-x64-musl": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.18.0.tgz", - "integrity": "sha512-na+BGtVU6fpZvOHKhnlA0XHeibkT3/46nj6vLluG3kzdJYoBKU6dIl7DSOk++8jv4ybZyFJ0aOFMMSc8g2h58A==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.21.0.tgz", + "integrity": "sha512-S51OT7TRfS5x8aN/8frv/JSXCGm+11VuhM4WCiTqDPjhHUDWd8nwiN/7s5juiwrlrpOxb5UKq21EKDrISoGQpw==", "optional": true }, "lightningcss-win32-x64-msvc": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.18.0.tgz", - "integrity": "sha512-5qeAH4RMNy2yMNEl7e5TI6upt/7xD2ZpHWH4RkT8iJ7/6POS5mjHbXWUO9Q1hhDhqkdzGa76uAdMzEouIeCyNw==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.21.0.tgz", + "integrity": "sha512-yW6/ZDJAHrSWtRltH1tr2I+2sn374gK2yclc44HMfpxfjIYgXMUkzqstalloMUQpZFR6M0ltXo5/tuLWoBydGQ==", "optional": true }, "lilconfig": { diff --git a/package.json b/package.json index 0558edd3d..df3995be3 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "glob-parent": "^6.0.2", "is-glob": "^4.0.3", "jiti": "^1.18.2", - "lightningcss": "^1.18.0", + "lightningcss": "^1.21.0", "lilconfig": "^2.1.0", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", diff --git a/src/plugin.js b/src/plugin.js index 3c62c1913..849d95e2a 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -63,6 +63,9 @@ module.exports = function tailwindcss(configOrPath) { nesting: true, customMedia: true, }, + nonStandard: { + deepSelectorCombinator: true, + }, }) let code = transformed.code.toString() diff --git a/tests/apply.test.js b/tests/apply.test.js index 6f3abd2a9..e7627fb13 100644 --- a/tests/apply.test.js +++ b/tests/apply.test.js @@ -181,12 +181,12 @@ test('@apply', () => { .variants:focus { font-weight: 500; } - @media (min-width: 1024px) { + @media (width >= 1024px) { .variants { font-weight: 300; } } - @media (min-width: 1280px) { + @media (width >= 1280px) { .variants:focus { font-weight: 900; } @@ -197,12 +197,12 @@ test('@apply', () => { .only-variants:focus { font-weight: 500; } - @media (min-width: 1024px) { + @media (width >= 1024px) { .only-variants { font-weight: 300; } } - @media (min-width: 1280px) { + @media (width >= 1280px) { .only-variants:focus { font-weight: 900; } @@ -210,7 +210,7 @@ test('@apply', () => { .group:hover .apply-group-variant { text-align: center; } - @media (min-width: 1024px) { + @media (width >= 1024px) { .group:hover .apply-group-variant { text-align: left; } @@ -221,7 +221,7 @@ test('@apply', () => { :is(.dark .apply-dark-variant:hover) { text-align: right; } - @media (min-width: 1024px) { + @media (width >= 1024px) { :is(.dark .apply-dark-variant) { text-align: left; } @@ -230,12 +230,12 @@ test('@apply', () => { .apply-custom-utility:hover { custom: stuff; } - @media (min-width: 1024px) { + @media (width >= 1024px) { .apply-custom-utility { custom: stuff; } } - @media (min-width: 1280px) { + @media (width >= 1280px) { .apply-custom-utility:focus { custom: stuff; } @@ -255,7 +255,7 @@ test('@apply', () => { .selectors-variants:active { text-align: right; } - @media (min-width: 1024px) { + @media (width >= 1024px) { .multiple-variants:focus, .selectors-variants:focus { text-align: left; @@ -265,7 +265,7 @@ test('@apply', () => { .group:hover .selectors-group { text-align: center; } - @media (min-width: 1024px) { + @media (width >= 1024px) { .group:hover .multiple-group, .group:hover .selectors-group { text-align: left; @@ -321,15 +321,12 @@ test('@apply', () => { .recursive-apply-a { font-weight: 900; } - @media (min-width: 640px) { + @media (width >= 640px) { .recursive-apply-a { font-weight: 100; } } - .recursive-apply-b { - font-weight: 900; - } - @media (min-width: 640px) { + @media (width >= 640px) { .recursive-apply-b { font-weight: 100; } @@ -337,23 +334,17 @@ test('@apply', () => { .recursive-apply-b { font-weight: 600; } - @media (min-width: 768px) { + @media (width >= 768px) { .recursive-apply-b { font-weight: 200; } } - .recursive-apply-c { - font-weight: 900; - } - @media (min-width: 640px) { + @media (width >= 640px) { .recursive-apply-c { font-weight: 100; } } - .recursive-apply-c { - font-weight: 600; - } - @media (min-width: 768px) { + @media (width >= 768px) { .recursive-apply-c { font-weight: 200; } @@ -361,7 +352,7 @@ test('@apply', () => { .recursive-apply-c { font-weight: 700; } - @media (min-width: 1024px) { + @media (width >= 1024px) { .recursive-apply-c { font-weight: 300; } @@ -378,13 +369,13 @@ test('@apply', () => { padding-left: 0.5rem; padding-right: 0.5rem; } - @media (min-width: 1024px) { + @media (width >= 1024px) { .add-sibling-properties { padding-left: 2.5rem; padding-right: 2.5rem; } } - @media (min-width: 1280px) { + @media (width >= 1280px) { .add-sibling-properties:focus { padding-left: 0.25rem; padding-right: 0.25rem; @@ -399,13 +390,13 @@ test('@apply', () => { font-size: 1.5rem; line-height: 2rem; } - @media (min-width: 640px) { + @media (width >= 640px) { h1 { font-size: 1.875rem; line-height: 2.25rem; } } - @media (min-width: 1024px) { + @media (width >= 1024px) { h1 { font-size: 1.5rem; line-height: 2rem; @@ -415,13 +406,13 @@ test('@apply', () => { font-size: 1.5rem; line-height: 2rem; } - @media (min-width: 1024px) { + @media (width >= 1024px) { h2 { font-size: 1.5rem; line-height: 2rem; } } - @media (min-width: 640px) { + @media (width >= 640px) { h2 { font-size: 1.5rem; line-height: 2rem; @@ -710,27 +701,27 @@ test('@applying classes from outside a @layer respects the source order', async .container { width: 100%; } - @media (min-width: 640px) { + @media (width >= 640px) { .container { max-width: 640px; } } - @media (min-width: 768px) { + @media (width >= 768px) { .container { max-width: 768px; } } - @media (min-width: 1024px) { + @media (width >= 1024px) { .container { max-width: 1024px; } } - @media (min-width: 1280px) { + @media (width >= 1280px) { .container { max-width: 1280px; } } - @media (min-width: 1536px) { + @media (width >= 1536px) { .container { max-width: 1536px; } @@ -1442,10 +1433,8 @@ describe('multiple instances', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` .a { - color: red; - --tw-text-opacity: 1; - color: rgb(34 197 94 / var(--tw-text-opacity)); color: #00f; + --tw-text-opacity: 1; text-decoration: underline; } .b { @@ -1478,13 +1467,13 @@ describe('multiple instances', () => { font-size: 1.25rem; line-height: 1.75rem; } - @media (min-width: 1024px) { + @media (width >= 1024px) { h2 { font-size: 1.875rem; line-height: 2.25rem; } } - @media (min-width: 640px) { + @media (width >= 640px) { h2 { font-size: 1.5rem; line-height: 2rem; @@ -1683,7 +1672,6 @@ it('should be possible to use apply in plugins', async () => { color: red; } .b { - color: red; color: #00f; } `) @@ -1754,7 +1742,7 @@ it('apply + layer utilities + selector variants (like group) + important selecto let result = await run(input, config) expect(result.css).toMatchFormattedCss(css` - #myselector :is(.custom-utility) { + #myselector .custom-utility { font-weight: 400; } #myselector :is(.group:hover .custom-utility) { @@ -1883,17 +1871,14 @@ it('can apply joined classes when using elements', async () => { .bar.foo { color: green; } - header:nth-of-type(2n + 1).bar { + header:nth-of-type(odd).bar { color: red; } - header.bar:nth-of-type(2n + 1) { - color: green; - } + header.bar:nth-of-type(odd), header.bar:after, main.bar, main.foo, footer.foo { - color: red; color: green; } `) @@ -2031,9 +2016,9 @@ it('pseudo elements inside apply are moved outside of :is() or :has()', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - :is(.dark .foo)::before, - :is([dir='rtl'] :is(.dark .bar))::before, - :is([dir='rtl'] :is(.dark .baz:hover))::before { + :is(.dark .foo):before, + :is([dir='rtl'] :is(.dark .bar)):before, + :is([dir='rtl'] :is(.dark .baz:hover)):before { background-color: #000; } :is([dir='rtl'] :is(.dark .qux))::file-selector-button:hover { @@ -2055,7 +2040,7 @@ it('pseudo elements inside apply are moved outside of :is() or :has()', () => { }) }) -test.skip('::ng-deep, ::deep, ::v-deep pseudo elements are left alone', () => { +test('::ng-deep, ::deep, ::v-deep pseudo elements are left alone', () => { let config = { darkMode: 'class', content: [ @@ -2079,22 +2064,11 @@ test.skip('::ng-deep, ::deep, ::v-deep pseudo elements are left alone', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ::ng-deep .foo .bar { - font-weight: 700; - } - ::v-deep .foo .bar { - font-weight: 700; - } + ::ng-deep .foo .bar, + ::v-deep .foo .bar, ::deep .foo .bar { font-weight: 700; } `) }) }) - -// TODO: Oxide -// 1. `::ng-deep` is deprecated -// 2. `::deep` and `::v-deep` are non-standard -// 3. They all use invalid selector syntax that Lightning CSS does not support -// It may be enough for Oxide to not support it at all -test.todo('::ng-deep, ::deep, ::v-deep pseudo elements are left alone') diff --git a/tests/arbitrary-properties.test.js b/tests/arbitrary-properties.test.js index 17f0bcf1f..c9ae197b9 100644 --- a/tests/arbitrary-properties.test.js +++ b/tests/arbitrary-properties.test.js @@ -75,7 +75,7 @@ test('arbitrary properties with modifiers', () => { expect(result.css).toMatchFormattedCss(css` ${defaults} @media (prefers-color-scheme: dark) { - @media (min-width: 1024px) { + @media (width >= 1024px) { .dark\:lg\:hover\:\[paint-order\:markers\]:hover { paint-order: markers; } diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css index 32646e5ff..3b70e9363 100644 --- a/tests/arbitrary-values.test.css +++ b/tests/arbitrary-values.test.css @@ -185,7 +185,7 @@ min-width: 3.23rem; } .min-w-\[calc\(1-\(\(12-3\)\*0\.5\)\)\] { - min-width: -3.5px; + min-width: -3.5; } .min-w-\[calc\(1-\(var\(--something\)\*0\.5\)\)\] { min-width: calc(1 - (var(--something) * 0.5)); @@ -682,7 +682,7 @@ background-image: linear-gradient(to left, rgb(var(--green)), blue); } .bg-\[repeating-conic-gradient\(\#F8F9FA_0\%_25\%\,_white_0\%_50\%\)\] { - background-image: repeating-conic-gradient(#f8f9fa 0% 25%, white 0% 50%); + background-image: repeating-conic-gradient(#f8f9fa 0% 25%, #fff 0% 50%); } .bg-\[url\(\'\/path-to-image\.png\'\)\] { background-image: url('/path-to-image.png'); @@ -1110,7 +1110,7 @@ --tw-content: attr(content-before); content: var(--tw-content); } -@media (min-width: 1024px) { +@media (width >= 1024px) { .lg\:grid-cols-\[200px\,repeat\(auto-fill\,minmax\(15\%\,100px\)\)\,300px\] { grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px; } diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js index 923607517..1949e863a 100644 --- a/tests/arbitrary-values.test.js +++ b/tests/arbitrary-values.test.js @@ -605,7 +605,7 @@ it('should support underscores in arbitrary modifiers', () => { return expect(result.css).toMatchFormattedCss(css` .text-lg\/\[calc\(50px_\*_2\)\] { font-size: 1.125rem; - line-height: calc(50px * 2); + line-height: 100px; } `) }) diff --git a/tests/arbitrary-variants.test.js b/tests/arbitrary-variants.test.js index c49376139..da69272f1 100644 --- a/tests/arbitrary-variants.test.js +++ b/tests/arbitrary-variants.test.js @@ -64,7 +64,7 @@ test('arbitrary variants with modifiers', () => { expect(result.css).toMatchFormattedCss(css` ${defaults} @media (prefers-color-scheme: dark) { - @media (min-width: 1024px) { + @media (width >= 1024px) { .dark\:lg\:hover\:\[\&\>\*\]\:underline > :hover { text-decoration-line: underline; } @@ -120,7 +120,7 @@ test('arbitrary variants are sorted after other variants', () => { .underline { text-decoration-line: underline; } - @media (min-width: 1024px) { + @media (width >= 1024px) { .lg\:underline { text-decoration-line: underline; } @@ -1149,7 +1149,7 @@ it('should output responsive variants + stacked variants in the right order', () return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-width: 1280px) { + @media (width >= 1280px) { .xl\:p-1 { padding: 0.25rem; } @@ -1160,7 +1160,7 @@ it('should output responsive variants + stacked variants in the right order', () .\[\&_ul\]\:flex-col ul { flex-direction: column; } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:\[\&_ul\]\:flex-row ul { flex-direction: row; } diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index 80c406bf6..6efad7540 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -53,37 +53,37 @@ .container { width: 100%; } -@media (min-width: 640px) { +@media (width >= 640px) { .container { max-width: 640px; } } -@media (min-width: 768px) { +@media (width >= 768px) { .container { max-width: 768px; } } -@media (min-width: 1024px) { +@media (width >= 1024px) { .container { max-width: 1024px; } } -@media (min-width: 1280px) { +@media (width >= 1280px) { .container { max-width: 1280px; } } -@media (min-width: 1536px) { +@media (width >= 1536px) { .container { max-width: 1536px; } } .sr-only { - width: 1px; - height: 1px; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; + width: 1px; + height: 1px; margin: -1px; padding: 0; position: absolute; @@ -196,7 +196,7 @@ display: none; } .aspect-square { - aspect-ratio: 1 / 1; + aspect-ratio: 1; } .aspect-video { aspect-ratio: 16 / 9; diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js index c34ba8aee..9115cacd0 100644 --- a/tests/basic-usage.test.js +++ b/tests/basic-usage.test.js @@ -457,9 +457,6 @@ it('does not produce duplicate output when seeing variants preceding a wildcard return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - * { - color: #00f; - } .combined, * { color: red; diff --git a/tests/blocklist.test.js b/tests/blocklist.test.js index e9915350f..78958ca0c 100644 --- a/tests/blocklist.test.js +++ b/tests/blocklist.test.js @@ -27,7 +27,7 @@ it('can block classes matched literally', () => { .my-custom-class { color: red; } - @media (min-width: 640px) { + @media (width >= 640px) { .sm\:hover\:text-sm:hover { font-size: 0.875rem; line-height: 1.25rem; diff --git a/tests/collapse-adjacent-rules.test.js b/tests/collapse-adjacent-rules.test.js index 69c471686..b0f668157 100644 --- a/tests/collapse-adjacent-rules.test.js +++ b/tests/collapse-adjacent-rules.test.js @@ -106,7 +106,7 @@ test('collapse adjacent rules', () => { font-weight: 700; } } - @media (min-width: 768px) { + @media (width >= 768px) { .some-apply-thing { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); @@ -114,7 +114,7 @@ test('collapse adjacent rules', () => { } } @supports (foo: bar) { - @media (min-width: 768px) { + @media (width >= 768px) { .some-apply-thing { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); @@ -122,7 +122,7 @@ test('collapse adjacent rules', () => { } } } - @media (min-width: 640px) { + @media (width >= 640px) { .sm\:text-center { text-align: center; } @@ -130,7 +130,7 @@ test('collapse adjacent rules', () => { font-weight: 700; } } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:text-center { text-align: center; } @@ -138,7 +138,7 @@ test('collapse adjacent rules', () => { font-weight: 700; } } - @media (min-width: 1024px) { + @media (width >= 1024px) { .lg\:text-center { text-align: center; } diff --git a/tests/collapse-duplicate-declarations.test.js b/tests/collapse-duplicate-declarations.test.js index dc8834b74..c75cc81dc 100644 --- a/tests/collapse-duplicate-declarations.test.js +++ b/tests/collapse-duplicate-declarations.test.js @@ -75,7 +75,6 @@ it('should not collapse duplicate declarations with the different units', () => return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` .example { - height: 100px; height: 50%; } `) @@ -107,8 +106,6 @@ it('should collapse the duplicate declarations with the same unit, but leave the return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` .example { - height: 200px; - height: 100%; height: 30vh; } `) @@ -166,8 +163,6 @@ it('should work on a real world example', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` .h-available { - height: 100%; - height: 100vh; height: -webkit-fill-available; } `) diff --git a/tests/containerPlugin.test.js b/tests/containerPlugin.test.js index 4b334e90c..8db24fe8a 100644 --- a/tests/containerPlugin.test.js +++ b/tests/containerPlugin.test.js @@ -8,27 +8,27 @@ test('options are not required', () => { .container { width: 100%; } - @media (min-width: 640px) { + @media (width >= 640px) { .container { max-width: 640px; } } - @media (min-width: 768px) { + @media (width >= 768px) { .container { max-width: 768px; } } - @media (min-width: 1024px) { + @media (width >= 1024px) { .container { max-width: 1024px; } } - @media (min-width: 1280px) { + @media (width >= 1280px) { .container { max-width: 1280px; } } - @media (min-width: 1536px) { + @media (width >= 1536px) { .container { max-width: 1536px; } @@ -52,12 +52,12 @@ test('screens can be passed explicitly', () => { .container { width: 100%; } - @media (min-width: 400px) { + @media (width >= 400px) { .container { max-width: 400px; } } - @media (min-width: 500px) { + @media (width >= 500px) { .container { max-width: 500px; } @@ -81,12 +81,12 @@ test('screens are ordered ascending by min-width', () => { .container { width: 100%; } - @media (min-width: 400px) { + @media (width >= 400px) { .container { max-width: 400px; } } - @media (min-width: 500px) { + @media (width >= 500px) { .container { max-width: 500px; } @@ -114,12 +114,12 @@ test('screens are deduplicated by min-width', () => { .container { width: 100%; } - @media (min-width: 576px) { + @media (width >= 576px) { .container { max-width: 576px; } } - @media (min-width: 768px) { + @media (width >= 768px) { .container { max-width: 768px; } @@ -145,27 +145,27 @@ test('the container can be centered by default', () => { margin-left: auto; margin-right: auto; } - @media (min-width: 640px) { + @media (width >= 640px) { .container { max-width: 640px; } } - @media (min-width: 768px) { + @media (width >= 768px) { .container { max-width: 768px; } } - @media (min-width: 1024px) { + @media (width >= 1024px) { .container { max-width: 1024px; } } - @media (min-width: 1280px) { + @media (width >= 1280px) { .container { max-width: 1280px; } } - @media (min-width: 1536px) { + @media (width >= 1536px) { .container { max-width: 1536px; } @@ -191,27 +191,27 @@ test('horizontal padding can be included by default', () => { padding-left: 2rem; padding-right: 2rem; } - @media (min-width: 640px) { + @media (width >= 640px) { .container { max-width: 640px; } } - @media (min-width: 768px) { + @media (width >= 768px) { .container { max-width: 768px; } } - @media (min-width: 1024px) { + @media (width >= 1024px) { .container { max-width: 1024px; } } - @media (min-width: 1280px) { + @media (width >= 1280px) { .container { max-width: 1280px; } } - @media (min-width: 1536px) { + @media (width >= 1536px) { .container { max-width: 1536px; } @@ -248,26 +248,26 @@ test('responsive horizontal padding can be included by default', () => { padding-left: 1rem; padding-right: 1rem; } - @media (min-width: 576px) { + @media (width >= 576px) { .container { max-width: 576px; padding-left: 2rem; padding-right: 2rem; } } - @media (min-width: 768px) { + @media (width >= 768px) { .container { max-width: 768px; } } - @media (min-width: 992px) { + @media (width >= 992px) { .container { max-width: 992px; padding-left: 4rem; padding-right: 4rem; } } - @media (min-width: 1200px) { + @media (width >= 1200px) { .container { max-width: 1200px; padding-left: 5rem; @@ -299,12 +299,12 @@ test('setting all options at once', () => { padding-left: 2rem; padding-right: 2rem; } - @media (min-width: 400px) { + @media (width >= 400px) { .container { max-width: 400px; } } - @media (min-width: 500px) { + @media (width >= 500px) { .container { max-width: 500px; } @@ -325,16 +325,16 @@ test('container can use variants', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-width: 1024px) { + @media (width >= 1024px) { .lg\:hover\:container:hover { width: 100%; } - @media (min-width: 400px) { + @media (width >= 400px) { .lg\:hover\:container:hover { max-width: 400px; } } - @media (min-width: 500px) { + @media (width >= 500px) { .lg\:hover\:container:hover { max-width: 500px; } diff --git a/tests/custom-plugins.test.js b/tests/custom-plugins.test.js index 0f45e9823..2c754d231 100644 --- a/tests/custom-plugins.test.js +++ b/tests/custom-plugins.test.js @@ -436,17 +436,17 @@ test('plugins can create components with media queries with object syntax', () = .custom-container { width: 100%; } - @media (min-width: 100px) { + @media (width >= 100px) { .custom-container { max-width: 100px; } } - @media (min-width: 200px) { + @media (width >= 200px) { .custom-container { max-width: 200px; } } - @media (min-width: 300px) { + @media (width >= 300px) { .custom-container { max-width: 300px; } @@ -497,7 +497,7 @@ test('media queries can be defined multiple times using objects-in-array syntax' .custom-container { width: 100%; } - @media (min-width: 100px) { + @media (width >= 100px) { .custom-container { max-width: 100px; } @@ -506,7 +506,7 @@ test('media queries can be defined multiple times using objects-in-array syntax' padding: 1rem 0.5rem; display: block; } - @media (min-width: 100px) { + @media (width >= 100px) { .btn { display: inline-block; } @@ -557,7 +557,7 @@ test('plugins can create nested rules', () => { .btn-blue:hover { background-color: #00008b; } - @media (min-width: 500px) { + @media (width >= 500px) { .btn-blue:hover { background-color: orange; } @@ -634,22 +634,22 @@ test('plugins can access the current config', () => { .custom-container { width: 100%; } - @media (min-width: 576px) { + @media (width >= 576px) { .custom-container { max-width: 576px; } } - @media (min-width: 768px) { + @media (width >= 768px) { .custom-container { max-width: 768px; } } - @media (min-width: 992px) { + @media (width >= 992px) { .custom-container { max-width: 992px; } } - @media (min-width: 1200px) { + @media (width >= 1200px) { .custom-container { max-width: 1200px; } @@ -1254,7 +1254,7 @@ test('plugins can be created using the `createPlugin` function', () => { .hover\:test-sm:hover { test-property: 1rem; } - @media (min-width: 400px) { + @media (width >= 400px) { .sm\:test-sm { test-property: 1rem; } @@ -1319,7 +1319,7 @@ test('plugins with extra options can be created using the `createPlugin.withOpti .hover\:banana-sm:hover { test-property: 1rem; } - @media (min-width: 400px) { + @media (width >= 400px) { .sm\:banana-sm { test-property: 1rem; } @@ -1356,7 +1356,7 @@ test('plugins should cache correctly', () => { .banana { position: absolute; } - @media (min-width: 400px) { + @media (width >= 400px) { .sm\:banana { position: absolute; } @@ -1367,15 +1367,15 @@ test('plugins should cache correctly', () => { .apple { position: absolute; } - @media (min-width: 400px) { + @media (width >= 400px) { .sm\:apple { position: absolute; } } ` - expect(result1.css).toMatchCss(expected1) - expect(result2.css).toMatchCss(expected2) + expect(result1.css).toMatchFormattedCss(expected1) + expect(result2.css).toMatchFormattedCss(expected2) } ) }) @@ -1436,7 +1436,7 @@ test('plugins created using `createPlugin.withOptions` do not need to be invoked .hover\:banana-sm:hover { test-property: 1rem; } - @media (min-width: 400px) { + @media (width >= 400px) { .sm\:banana-sm { test-property: 1rem; } @@ -1493,7 +1493,7 @@ test('the configFunction parameter is optional when using the `createPlugin.with .hover\:banana-sm:hover { test-property: 1px; } - @media (min-width: 400px) { + @media (width >= 400px) { .sm\:banana-sm { test-property: 1px; } @@ -1534,7 +1534,7 @@ test('keyframes are not escaped', () => { .foo-\[abc\] { animation: 1s infinite abc; } - @media (min-width: 768px) { + @media (width >= 768px) { @keyframes def { 25.001% { color: #000; diff --git a/tests/custom-separator.test.js b/tests/custom-separator.test.js index 3b1708dfb..715238d64 100644 --- a/tests/custom-separator.test.js +++ b/tests/custom-separator.test.js @@ -33,7 +33,7 @@ test('custom separator', () => { :is(.dark .dark_focus_text-left:focus) { text-align: left; } - @media (min-width: 768px) { + @media (width >= 768px) { .md_hover_text-right:hover { text-align: right; } diff --git a/tests/customConfig.test.js b/tests/customConfig.test.js index b8f459144..e6c6f79ca 100644 --- a/tests/customConfig.test.js +++ b/tests/customConfig.test.js @@ -12,7 +12,7 @@ test('it uses the values from the custom config file', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-width: 400px) { + @media (width >= 400px) { .mobile\:font-bold { font-weight: 700; } @@ -33,7 +33,7 @@ test('custom config can be passed as an object', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-width: 400px) { + @media (width >= 400px) { .mobile\:font-bold { font-weight: 700; } @@ -49,7 +49,7 @@ test('custom config path can be passed using `config` property in an object', () return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-width: 400px) { + @media (width >= 400px) { .mobile\:font-bold { font-weight: 700; } @@ -72,7 +72,7 @@ test('custom config can be passed under the `config` property', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-width: 400px) { + @media (width >= 400px) { .mobile\:font-bold { font-weight: 700; } @@ -97,7 +97,7 @@ test('tailwind.config.cjs is picked up by default', () => { return run('@tailwind utilities').then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-width: 400px) { + @media (width >= 400px) { .mobile\:font-bold { font-weight: 700; } @@ -123,7 +123,7 @@ test('tailwind.config.js is picked up by default', () => { return run('@tailwind utilities').then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-width: 400px) { + @media (width >= 400px) { .mobile\:font-bold { font-weight: 700; } @@ -149,7 +149,7 @@ test('tailwind.config.cjs is picked up by default when passing an empty object', return run('@tailwind utilities', {}).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-width: 400px) { + @media (width >= 400px) { .mobile\:font-bold { font-weight: 700; } @@ -175,7 +175,7 @@ test('tailwind.config.js is picked up by default when passing an empty object', return run('@tailwind utilities', {}).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-width: 400px) { + @media (width >= 400px) { .mobile\:font-bold { font-weight: 700; } diff --git a/tests/detect-nesting.test.js b/tests/detect-nesting.test.js index 08eeacf98..555a80129 100644 --- a/tests/detect-nesting.test.js +++ b/tests/detect-nesting.test.js @@ -88,7 +88,7 @@ it('should not warn when nesting a single rule inside a media query', () => { let input = css` @tailwind utilities; - @media (min-width: 768px) { + @media (width >= 768px) { .nested { } } diff --git a/tests/evaluateTailwindFunctions.test.js b/tests/evaluateTailwindFunctions.test.js index 52f1fed07..e6bf124b6 100644 --- a/tests/evaluateTailwindFunctions.test.js +++ b/tests/evaluateTailwindFunctions.test.js @@ -559,7 +559,7 @@ test('font sizes are retrieved without default line-heights or letter-spacing', }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(output) expect(result.warnings().length).toBe(0) }) }) @@ -571,12 +571,6 @@ test('outlines are retrieved without default outline-offset', () => { } ` - let output = css` - .element { - outline: 2px dotted #000; - } - ` - return run(input, { theme: { outline: { @@ -584,7 +578,11 @@ test('outlines are retrieved without default outline-offset', () => { }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(css` + .element { + outline: 2px dotted black; + } + `) expect(result.warnings().length).toBe(0) }) }) @@ -623,7 +621,7 @@ test('font-family values are retrieved without font-variation-settings', () => { }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(output) expect(result.warnings().length).toBe(0) }) }) @@ -650,7 +648,7 @@ test('font-variation-settings values can be retrieved', () => { }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(output) expect(result.warnings().length).toBe(0) }) }) @@ -675,7 +673,7 @@ test('font-family values are joined when an array', () => { }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(output) expect(result.warnings().length).toBe(0) }) }) @@ -714,7 +712,7 @@ test('font-family values are retrieved without font-feature-settings', () => { }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(output) expect(result.warnings().length).toBe(0) }) }) @@ -727,13 +725,6 @@ test('font-feature-settings values can be retrieved', () => { } ` - let output = css` - .heading { - font-feature-settings: 'cv11'; - font-family: Inter; - } - ` - return run(input, { theme: { fontFamily: { @@ -741,7 +732,12 @@ test('font-feature-settings values can be retrieved', () => { }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(css` + .heading { + font-family: Inter; + font-feature-settings: 'cv11'; + } + `) expect(result.warnings().length).toBe(0) }) }) @@ -753,12 +749,6 @@ test('box-shadow values are joined when an array', () => { } ` - let output = css` - .element { - box-shadow: 0 0 2px #000, 1px 2px 3px #fff; - } - ` - return run(input, { theme: { boxShadow: { @@ -766,7 +756,11 @@ test('box-shadow values are joined when an array', () => { }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(css` + .element { + box-shadow: 0 0 2px black, 1px 2px 3px white; + } + `) expect(result.warnings().length).toBe(0) }) }) @@ -791,7 +785,7 @@ test('transition-property values are joined when an array', () => { }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(output) expect(result.warnings().length).toBe(0) }) }) @@ -816,7 +810,7 @@ test('transition-duration values are joined when an array', () => { }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(output) expect(result.warnings().length).toBe(0) }) }) @@ -830,18 +824,16 @@ test('basic screen function calls are expanded', () => { } ` - let output = css` - @media (min-width: 600px) { - .foo { - color: red; - } - } - ` - return run(input, { theme: { screens: { sm: '600px' } }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(css` + @media (min-width: 600px) { + .foo { + color: red; + } + } + `) expect(result.warnings().length).toBe(0) }) }) @@ -866,7 +858,7 @@ test('screen function supports max-width screens', () => { return run(input, { theme: { screens: { sm: { max: '600px' } } }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(output) expect(result.warnings().length).toBe(0) }) }) @@ -880,18 +872,16 @@ test('screen function supports min-width screens', () => { } ` - let output = css` - @media (min-width: 600px) { - .foo { - color: red; - } - } - ` - return run(input, { theme: { screens: { sm: { min: '600px' } } }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(css` + @media (min-width: 600px) { + .foo { + color: red; + } + } + `) expect(result.warnings().length).toBe(0) }) }) @@ -905,18 +895,16 @@ test('screen function supports min-width and max-width screens', () => { } ` - let output = css` - @media (min-width: 600px) and (max-width: 700px) { - .foo { - color: red; - } - } - ` - return run(input, { theme: { screens: { sm: { min: '600px', max: '700px' } } }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(css` + @media (min-width: 600px) and (max-width: 700px) { + .foo { + color: red; + } + } + `) expect(result.warnings().length).toBe(0) }) }) @@ -941,7 +929,7 @@ test('screen function supports raw screens', () => { return run(input, { theme: { screens: { mono: { raw: 'monochrome' } } }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(output) expect(result.warnings().length).toBe(0) }) }) @@ -955,18 +943,16 @@ test('screen arguments can be quoted', () => { } ` - let output = css` - @media (min-width: 600px) { - .foo { - color: red; - } - } - ` - return run(input, { theme: { screens: { sm: '600px' } }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(css` + @media (min-width: 600px) { + .foo { + color: red; + } + } + `) expect(result.warnings().length).toBe(0) }) }) @@ -978,18 +964,16 @@ test('Theme function can extract alpha values for colors (1)', () => { } ` - let output = css` - .foo { - color: #3b82f680; - } - ` - return run(input, { theme: { colors: { blue: { 500: '#3b82f6' } }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(css` + .foo { + color: rgb(59 130 246 / 50%); + } + `) expect(result.warnings().length).toBe(0) }) }) @@ -1001,18 +985,16 @@ test('Theme function can extract alpha values for colors (2)', () => { } ` - let output = css` - .foo { - color: #3b82f680; - } - ` - return run(input, { theme: { colors: { blue: { 500: '#3b82f6' } }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(css` + .foo { + color: rgb(59 130 246 / 0.5); + } + `) expect(result.warnings().length).toBe(0) }) }) @@ -1035,7 +1017,7 @@ test('Theme function can extract alpha values for colors (3)', () => { colors: { blue: { 500: '#3b82f6' } }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(output) expect(result.warnings().length).toBe(0) }) }) @@ -1047,12 +1029,6 @@ test('Theme function can extract alpha values for colors (4)', () => { } ` - let output = css` - .foo { - color: #3c83f680; - } - ` - return run(input, { theme: { colors: { @@ -1060,7 +1036,11 @@ test('Theme function can extract alpha values for colors (4)', () => { }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(css` + .foo { + color: hsl(217 91% 60% / 50%); + } + `) expect(result.warnings().length).toBe(0) }) }) @@ -1072,12 +1052,6 @@ test('Theme function can extract alpha values for colors (5)', () => { } ` - let output = css` - .foo { - color: #3c83f680; - } - ` - return run(input, { theme: { colors: { @@ -1085,7 +1059,11 @@ test('Theme function can extract alpha values for colors (5)', () => { }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(css` + .foo { + color: hsl(217 91% 60% / 0.5); + } + `) expect(result.warnings().length).toBe(0) }) }) @@ -1110,7 +1088,7 @@ test('Theme function can extract alpha values for colors (6)', () => { }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(output) expect(result.warnings().length).toBe(0) }) }) @@ -1137,7 +1115,7 @@ test('Theme function can extract alpha values for colors (7)', () => { }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(output) expect(result.warnings().length).toBe(0) }) }) @@ -1168,7 +1146,7 @@ test('Theme function can extract alpha values for colors (8)', () => { }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(output) expect(result.warnings().length).toBe(0) }) }) @@ -1198,7 +1176,7 @@ test('Theme functions replace the alpha value placeholder even with no alpha pro }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(output) expect(result.warnings().length).toBe(0) }) }) @@ -1229,7 +1207,7 @@ test('Theme functions can reference values with slashes in brackets', () => { }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(output) expect(result.warnings().length).toBe(0) }) }) @@ -1254,7 +1232,7 @@ test('Theme functions with alpha value inside quotes', () => { }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(output) expect(result.warnings().length).toBe(0) }) }) @@ -1279,7 +1257,7 @@ test('Theme functions with alpha with quotes value around color only', () => { }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(output) expect(result.warnings().length).toBe(0) }) }) @@ -1312,7 +1290,7 @@ it('can find values with slashes in the theme key while still allowing for alpha }, }, }).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .foo00 { color: #050000; } @@ -1358,7 +1336,7 @@ describe('context dependent', () => { let result = await runFull('@tailwind utilities', configPath) // 1. On first run it should work because it's been removed from the class cache - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .underline { text-decoration-line: underline; } @@ -1370,7 +1348,7 @@ describe('context dependent', () => { // 3. The second run should work fine because it's been removed from the class cache result = await runFull('@tailwind utilities', configPath) - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .underline { text-decoration-line: underline; } @@ -1406,7 +1384,7 @@ describe('context dependent', () => { }, }, }).then((result) => { - expect(result.css).toMatchCss(output) + expect(result.css).toMatchFormattedCss(output) expect(result.warnings().length).toBe(0) }) }) diff --git a/tests/experimental.test.js b/tests/experimental.test.js index b3fa49185..b36141cb0 100644 --- a/tests/experimental.test.js +++ b/tests/experimental.test.js @@ -13,7 +13,7 @@ test('experimental universal selector improvements (box-shadow)', () => { ` return run(input, config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .shadow { --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; @@ -47,7 +47,7 @@ test('experimental universal selector improvements (pseudo hover)', () => { ` return run(input, config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .hover\:shadow { --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; @@ -81,7 +81,7 @@ test('experimental universal selector improvements (multiple classes: group)', ( ` return run(input, config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .group-hover\:shadow { --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; @@ -115,7 +115,7 @@ test('experimental universal selector improvements (child selectors: divide-y)', ` return run(input, config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .resize { resize: both; } @@ -141,7 +141,7 @@ test('experimental universal selector improvements (hover:divide-y)', () => { ` return run(input, config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .resize { resize: both; } @@ -168,14 +168,14 @@ test('experimental universal selector improvements (#app important)', () => { ` return run(input, config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .shadow { --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; } - #app :is(.resize) { + #app .resize { resize: both; } #app :is(.divide-y > :not([hidden]) ~ :not([hidden])) { @@ -183,7 +183,7 @@ test('experimental universal selector improvements (#app important)', () => { border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); } - #app :is(.shadow) { + #app .shadow { --tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); diff --git a/tests/import-syntax.test.js b/tests/import-syntax.test.js index 99f5163f7..a089cb955 100644 --- a/tests/import-syntax.test.js +++ b/tests/import-syntax.test.js @@ -40,27 +40,27 @@ test('using @import instead of @tailwind', () => { .container { width: 100%; } - @media (min-width: 640px) { + @media (width >= 640px) { .container { max-width: 640px; } } - @media (min-width: 768px) { + @media (width >= 768px) { .container { max-width: 768px; } } - @media (min-width: 1024px) { + @media (width >= 1024px) { .container { max-width: 1024px; } } - @media (min-width: 1280px) { + @media (width >= 1280px) { .container { max-width: 1280px; } } - @media (min-width: 1536px) { + @media (width >= 1536px) { .container { max-width: 1536px; } @@ -72,7 +72,7 @@ test('using @import instead of @tailwind', () => { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:hover\:text-center:hover { text-align: center; } diff --git a/tests/important-boolean.test.js b/tests/important-boolean.test.js index d66f21edc..de1eb3e3e 100644 --- a/tests/important-boolean.test.js +++ b/tests/important-boolean.test.js @@ -80,27 +80,27 @@ test('important boolean', () => { .container { width: 100%; } - @media (min-width: 640px) { + @media (width >= 640px) { .container { max-width: 640px; } } - @media (min-width: 768px) { + @media (width >= 768px) { .container { max-width: 768px; } } - @media (min-width: 1024px) { + @media (width >= 1024px) { .container { max-width: 1024px; } } - @media (min-width: 1280px) { + @media (width >= 1280px) { .container { max-width: 1280px; } } - @media (min-width: 1536px) { + @media (width >= 1536px) { .container { max-width: 1536px; } @@ -148,7 +148,7 @@ test('important boolean', () => { :is(.dark .dark\:focus\:text-left:focus) { text-align: left !important; } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:hover\:text-right:hover { text-align: right !important; } diff --git a/tests/important-modifier-prefix.test.js b/tests/important-modifier-prefix.test.js index 2c6a8bb62..370c09dc2 100644 --- a/tests/important-modifier-prefix.test.js +++ b/tests/important-modifier-prefix.test.js @@ -31,27 +31,27 @@ test('important modifier with prefix', () => { .\!tw-container { width: 100% !important; } - @media (min-width: 640px) { + @media (width >= 640px) { .\!tw-container { max-width: 640px !important; } } - @media (min-width: 768px) { + @media (width >= 768px) { .\!tw-container { max-width: 768px !important; } } - @media (min-width: 1024px) { + @media (width >= 1024px) { .\!tw-container { max-width: 1024px !important; } } - @media (min-width: 1280px) { + @media (width >= 1280px) { .\!tw-container { max-width: 1280px !important; } } - @media (min-width: 1536px) { + @media (width >= 1536px) { .\!tw-container { max-width: 1536px !important; } @@ -62,12 +62,12 @@ test('important modifier with prefix', () => { .hover\:\!tw-text-center:hover { text-align: center !important; } - @media (min-width: 1024px) { + @media (width >= 1024px) { .lg\:\!tw-opacity-50 { opacity: 0.5 !important; } } - @media (min-width: 1280px) { + @media (width >= 1280px) { .xl\:focus\:disabled\:\!tw-float-right:disabled:focus { float: right !important; } diff --git a/tests/important-modifier.test.js b/tests/important-modifier.test.js index c736951d0..44b07fbfd 100644 --- a/tests/important-modifier.test.js +++ b/tests/important-modifier.test.js @@ -53,27 +53,27 @@ test('important modifier', () => { .\!container { width: 100% !important; } - @media (min-width: 640px) { + @media (width >= 640px) { .\!container { max-width: 640px !important; } } - @media (min-width: 768px) { + @media (width >= 768px) { .\!container { max-width: 768px !important; } } - @media (min-width: 1024px) { + @media (width >= 1024px) { .\!container { max-width: 1024px !important; } } - @media (min-width: 1280px) { + @media (width >= 1280px) { .\!container { max-width: 1280px !important; } } - @media (min-width: 1536px) { + @media (width >= 1536px) { .\!container { max-width: 1536px !important; } @@ -94,12 +94,12 @@ test('important modifier', () => { .hover\:\!text-center:hover { text-align: center !important; } - @media (min-width: 1024px) { + @media (width >= 1024px) { .lg\:\!opacity-50 { opacity: 0.5 !important; } } - @media (min-width: 1280px) { + @media (width >= 1280px) { .xl\:focus\:disabled\:\!float-right:disabled:focus { float: right !important; } @@ -137,9 +137,7 @@ test('the important modifier works on utilities using :where()', () => { :where(.\!btn) { background-color: #00f !important; } - :where(.btn) { - background-color: #00f; - } + :where(.btn), :where(.hover\:btn:hover) { background-color: #00f; } diff --git a/tests/important-selector.test.js b/tests/important-selector.test.js index a5399bdf7..b9dc92b3a 100644 --- a/tests/important-selector.test.js +++ b/tests/important-selector.test.js @@ -78,27 +78,27 @@ test('important selector', () => { .container { width: 100%; } - @media (min-width: 640px) { + @media (width >= 640px) { .container { max-width: 640px; } } - @media (min-width: 768px) { + @media (width >= 768px) { .container { max-width: 768px; } } - @media (min-width: 1024px) { + @media (width >= 1024px) { .container { max-width: 1024px; } } - @media (min-width: 1280px) { + @media (width >= 1280px) { .container { max-width: 1280px; } } - @media (min-width: 1536px) { + @media (width >= 1536px) { .container { max-width: 1536px; } @@ -123,10 +123,10 @@ test('important selector', () => { transform: rotate(360deg); } } - #app :is(.animate-spin) { + #app .animate-spin { animation: 1s linear infinite spin; } - #app :is(.font-bold) { + #app .font-bold { font-weight: 700; } .custom-util { @@ -135,11 +135,11 @@ test('important selector', () => { #app :is(.group:hover .group-hover\:focus-within\:text-left:focus-within) { text-align: left; } - #app :is(:is([dir='rtl'] .rtl\:active\:text-center:active)) { + #app :is([dir='rtl'] .rtl\:active\:text-center:active) { text-align: center; } @media (prefers-reduced-motion: no-preference) { - #app :is(.motion-safe\:hover\:text-center:hover) { + #app .motion-safe\:hover\:text-center:hover { text-align: center; } } @@ -147,11 +147,11 @@ test('important selector', () => { content: var(--tw-content); text-decoration-line: underline; } - #app :is(:is(.dark .dark\:focus\:text-left:focus)) { + #app :is(.dark .dark\:focus\:text-left:focus) { text-align: left; } - @media (min-width: 768px) { - #app :is(.md\:hover\:text-right:hover) { + @media (width >= 768px) { + #app .md\:hover\:text-right:hover { text-align: right; } } @@ -186,7 +186,7 @@ test('pseudo-elements are appended after the `:is()`', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` ${defaults} - #app :is(.dark .dark\:before\:flex)::before { + #app :is(.dark .dark\:before\:flex):before { content: var(--tw-content); display: flex; } diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js index 8f4b7cae2..2763db668 100644 --- a/tests/kitchen-sink.test.js +++ b/tests/kitchen-sink.test.js @@ -243,7 +243,7 @@ test('it works', () => { Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; } - @media (min-width: 1024px) { + @media (width >= 1024px) { .screen-test { color: purple; } @@ -261,7 +261,7 @@ test('it works', () => { .apply-test:hover:focus { font-weight: 700; } - @media (min-width: 640px) { + @media (width >= 640px) { .apply-test { --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity)); @@ -274,27 +274,27 @@ test('it works', () => { .apply-components { width: 100%; } - @media (min-width: 640px) { + @media (width >= 640px) { .apply-components { max-width: 640px; } } - @media (min-width: 768px) { + @media (width >= 768px) { .apply-components { max-width: 768px; } } - @media (min-width: 1024px) { + @media (width >= 1024px) { .apply-components { max-width: 1024px; } } - @media (min-width: 1280px) { + @media (width >= 1280px) { .apply-components { max-width: 1280px; } } - @media (min-width: 1536px) { + @media (width >= 1536px) { .apply-components { max-width: 1536px; } @@ -311,7 +311,7 @@ test('it works', () => { .apply-with-existing:hover { font-weight: 400; } - @media (min-width: 640px) { + @media (width >= 640px) { .apply-with-existing:hover { --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity)); @@ -344,7 +344,7 @@ test('it works', () => { --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity)); } - @media (min-width: 640px) { + @media (width >= 640px) { @media (prefers-reduced-motion: no-preference) { .group:active .crazy-example:focus { opacity: 0.1; @@ -365,27 +365,27 @@ test('it works', () => { .container { width: 100%; } - @media (min-width: 640px) { + @media (width >= 640px) { .container { max-width: 640px; } } - @media (min-width: 768px) { + @media (width >= 768px) { .container { max-width: 768px; } } - @media (min-width: 1024px) { + @media (width >= 1024px) { .container { max-width: 1024px; } } - @media (min-width: 1280px) { + @media (width >= 1280px) { .container { max-width: 1280px; } } - @media (min-width: 1536px) { + @media (width >= 1536px) { .container { max-width: 1536px; } @@ -580,86 +580,86 @@ test('it works', () => { .hover\:container:hover { width: 100%; } - @media (min-width: 640px) { + @media (width >= 640px) { .hover\:container:hover { max-width: 640px; } } - @media (min-width: 768px) { + @media (width >= 768px) { .hover\:container:hover { max-width: 768px; } } - @media (min-width: 1024px) { + @media (width >= 1024px) { .hover\:container:hover { max-width: 1024px; } } - @media (min-width: 1280px) { + @media (width >= 1280px) { .hover\:container:hover { max-width: 1280px; } } - @media (min-width: 1536px) { + @media (width >= 1536px) { .hover\:container:hover { max-width: 1536px; } } - @media (min-width: 640px) { + @media (width >= 640px) { .sm\:container { width: 100%; } - @media (min-width: 640px) { + @media (width >= 640px) { .sm\:container { max-width: 640px; } } - @media (min-width: 768px) { + @media (width >= 768px) { .sm\:container { max-width: 768px; } } - @media (min-width: 1024px) { + @media (width >= 1024px) { .sm\:container { max-width: 1024px; } } - @media (min-width: 1280px) { + @media (width >= 1280px) { .sm\:container { max-width: 1280px; } } - @media (min-width: 1536px) { + @media (width >= 1536px) { .sm\:container { max-width: 1536px; } } } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:container { width: 100%; } - @media (min-width: 640px) { + @media (width >= 640px) { .md\:container { max-width: 640px; } } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:container { max-width: 768px; } } - @media (min-width: 1024px) { + @media (width >= 1024px) { .md\:container { max-width: 1024px; } } - @media (min-width: 1280px) { + @media (width >= 1280px) { .md\:container { max-width: 1280px; } } - @media (min-width: 1536px) { + @media (width >= 1536px) { .md\:container { max-width: 1536px; } @@ -743,7 +743,7 @@ test('it works', () => { :is(.dark .dark\:custom-util) { background: #abcdef; } - @media (min-width: 640px) { + @media (width >= 640px) { .sm\:text-center { text-align: center; } @@ -761,7 +761,7 @@ test('it works', () => { } } } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:text-center { text-align: center; } @@ -791,18 +791,18 @@ test('it works', () => { background: #abcdef !important; } } - @media (min-width: 640px) { + @media (width >= 640px) { .md\:sm\:text-center { text-align: center; } } } - @media (min-width: 1280px) and (max-width: 1535px) { + @media (width >= 1280px) and (width <= 1535px) { .range\:text-right { text-align: right; } } - @media (min-width: 640px) and (max-width: 767px), (max-width: 868px) { + @media (width >= 640px) and (width <= 767px), (width <= 868px) { .multi\:text-left { text-align: left; } diff --git a/tests/match-utilities.test.js b/tests/match-utilities.test.js index 41ef29a29..a9705b021 100644 --- a/tests/match-utilities.test.js +++ b/tests/match-utilities.test.js @@ -194,7 +194,7 @@ test('matching utilities with a basic configured value', () => { } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .test-foo { value: value_foo; } @@ -224,7 +224,7 @@ test('matching utilities with an arbitrary value and configured modifier', () => } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .test-\[foo\]\/bar { value: foo; modifier: configured_bar; @@ -256,7 +256,7 @@ test('matching utilities with an configured value and an arbitrary modifier (raw } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .test-foo\/\[bar\] { value: configured_foo; modifier: [bar]; @@ -288,7 +288,7 @@ test('matching utilities with an configured value and an arbitrary modifier (non } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .test-foo\/\[bar\] { value: configured_foo; modifier: bar; @@ -322,7 +322,7 @@ test('matching utilities with an configured value and a configured modifier', () } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .test-foo\/bar { value: configured_foo; modifier: configured_bar; @@ -351,7 +351,7 @@ test('matching utilities with an arbitrary value and an arbitrary modifier (raw) } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .test-\[foo\]\/\[bar\] { value: foo; modifier: [bar]; @@ -380,7 +380,7 @@ test('matching utilities with an arbitrary value and an arbitrary modifier (non- } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .test-\[foo\]\/\[bar\] { value: foo; modifier: bar; @@ -411,7 +411,7 @@ test('matching utilities with a lookup value that looks like an arbitrary value } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .test-\[foo\]\/\[bar\] { value: hello; } @@ -442,7 +442,7 @@ test('matching utilities with a lookup value that looks like an arbitrary value } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .test-\[foo\]\/\[bar\] { value: hello; } @@ -473,7 +473,7 @@ test('matching utilities with a lookup value that looks like an arbitrary value } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .test-\[foo\]\/\[bar\] { value: hello; } @@ -503,7 +503,7 @@ test('matching utilities with a lookup value that looks like an arbitrary value } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .test-\[foo\]\/bar { value: hello; } @@ -533,7 +533,7 @@ test('matching utilities with a lookup value that looks like a configured value } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .test-foo\/\[bar\] { value: hello; } @@ -564,7 +564,7 @@ test('matching utilities with a lookup value that does not match the configured } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .test-foo { value: not-a-percentage; } diff --git a/tests/match-variants.test.js b/tests/match-variants.test.js index 2923b10c0..0c9034eee 100644 --- a/tests/match-variants.test.js +++ b/tests/match-variants.test.js @@ -244,12 +244,12 @@ it('should be possible to sort variants', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-width: 500px) { + @media (width >= 500px) { .testmin-\[500px\]\:underline { text-decoration-line: underline; } } - @media (min-width: 700px) { + @media (width >= 700px) { .testmin-\[700px\]\:italic { font-style: italic; } @@ -290,17 +290,17 @@ it('should be possible to compare arbitrary variants and hardcoded variants', () return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-width: 500px) { + @media (width >= 500px) { .testmin-\[500px\]\:italic { font-style: italic; } } - @media (min-width: 600px) { + @media (width >= 600px) { .testmin-example\:italic { font-style: italic; } } - @media (min-width: 700px) { + @media (width >= 700px) { .testmin-\[700px\]\:italic { font-style: italic; } @@ -351,25 +351,25 @@ it('should be possible to sort stacked arbitrary variants correctly', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-width: 100px) { - @media (max-width: 400px) { + @media (width >= 100px) { + @media (width <= 400px) { .testmin-\[100px\]\:testmax-\[400px\]\:underline { text-decoration-line: underline; } } - @media (max-width: 350px) { + @media (width <= 350px) { .testmin-\[100px\]\:testmax-\[350px\]\:underline { text-decoration-line: underline; } } - @media (max-width: 300px) { + @media (width <= 300px) { .testmin-\[100px\]\:testmax-\[300px\]\:underline { text-decoration-line: underline; } } } - @media (min-width: 150px) { - @media (max-width: 400px) { + @media (width >= 150px) { + @media (width <= 400px) { .testmin-\[150px\]\:testmax-\[400px\]\:underline { text-decoration-line: underline; } @@ -415,8 +415,8 @@ it('should maintain sort from other variants, if sort functions of arbitrary var return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-width: 100px) { - @media (max-width: 200px) { + @media (width >= 100px) { + @media (width <= 200px) { .testmin-\[100px\]\:testmax-\[200px\]\:hover\:underline:hover, .testmin-\[100px\]\:testmax-\[200px\]\:focus\:underline:focus { text-decoration-line: underline; @@ -464,25 +464,25 @@ it('should sort arbitrary variants left to right (1)', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-width: 100px) { - @media (max-width: 400px) { + @media (width >= 100px) { + @media (width <= 400px) { .testmin-\[100px\]\:testmax-\[400px\]\:underline { text-decoration-line: underline; } } - @media (max-width: 300px) { + @media (width <= 300px) { .testmin-\[100px\]\:testmax-\[300px\]\:underline { text-decoration-line: underline; } } } - @media (min-width: 200px) { - @media (max-width: 400px) { + @media (width >= 200px) { + @media (width <= 400px) { .testmin-\[200px\]\:testmax-\[400px\]\:underline { text-decoration-line: underline; } } - @media (max-width: 300px) { + @media (width <= 300px) { .testmin-\[200px\]\:testmax-\[300px\]\:underline { text-decoration-line: underline; } @@ -529,26 +529,26 @@ it('should sort arbitrary variants left to right (2)', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (max-width: 400px) { - @media (min-width: 100px) { + @media (width <= 400px) { + @media (width >= 100px) { .testmax-\[400px\]\:testmin-\[100px\]\:underline { text-decoration-line: underline; } } - @media (min-width: 200px) { + @media (width >= 200px) { .testmax-\[400px\]\:testmin-\[200px\]\:underline { text-decoration-line: underline; } } } - @media (max-width: 300px) { - @media (min-width: 100px) { + @media (width <= 300px) { + @media (width >= 100px) { .testmax-\[300px\]\:testmin-\[100px\]\:underline { text-decoration-line: underline; } } - @media (min-width: 200px) { + @media (width >= 200px) { .testmax-\[300px\]\:testmin-\[200px\]\:underline { text-decoration-line: underline; } @@ -603,28 +603,28 @@ it('should guarantee that we are not passing values from other variants to the w return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-width: 100px) { - @media (max-width: 400px) { + @media (width >= 100px) { + @media (width <= 400px) { .testmin-\[100px\]\:testmax-\[400px\]\:underline { text-decoration-line: underline; } } - @media (max-width: 300px) { + @media (width <= 300px) { .testmin-\[100px\]\:testmax-\[300px\]\:underline { text-decoration-line: underline; } } } - @media (min-width: 200px) { - @media (max-width: 400px) { + @media (width >= 200px) { + @media (width <= 400px) { .testmin-\[200px\]\:testmax-\[400px\]\:underline { text-decoration-line: underline; } } - @media (max-width: 300px) { + @media (width <= 300px) { .testmin-\[200px\]\:testmax-\[300px\]\:underline { text-decoration-line: underline; } diff --git a/tests/min-max-screen-variants.test.js b/tests/min-max-screen-variants.test.js index beab47ac0..b6ea5d254 100644 --- a/tests/min-max-screen-variants.test.js +++ b/tests/min-max-screen-variants.test.js @@ -34,32 +34,32 @@ it('sorts min and max correctly relative to screens and each other', async () => .font-bold { font-weight: 700; } - @media (max-width: 800px) { + @media (width <= 800px) { .max-\[800px\]\:font-bold { font-weight: 700; } } - @media (max-width: 700px) { + @media (width <= 700px) { .max-\[700px\]\:font-bold { font-weight: 700; } } - @media (min-width: 640px) { + @media (width >= 640px) { .sm\:font-bold { font-weight: 700; } } - @media (min-width: 700px) { + @media (width >= 700px) { .min-\[700px\]\:font-bold { font-weight: 700; } } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:font-bold { font-weight: 700; } } - @media (min-width: 800px) { + @media (width >= 800px) { .min-\[800px\]\:font-bold { font-weight: 700; } @@ -95,12 +95,12 @@ it('works when using min variants screens config is empty and variants all use t .font-bold { font-weight: 700; } - @media (min-width: 700px) { + @media (width >= 700px) { .min-\[700px\]\:font-bold { font-weight: 700; } } - @media (min-width: 800px) { + @media (width >= 800px) { .min-\[800px\]\:font-bold { font-weight: 700; } @@ -136,12 +136,12 @@ it('works when using max variants screens config is empty and variants all use t .font-bold { font-weight: 700; } - @media (max-width: 800px) { + @media (width <= 800px) { .max-\[800px\]\:font-bold { font-weight: 700; } } - @media (max-width: 700px) { + @media (width <= 700px) { .max-\[700px\]\:font-bold { font-weight: 700; } @@ -176,32 +176,32 @@ it('converts simple min-width screens for max variant', () => { .font-bold { font-weight: 700; } - @media not all and (min-width: 1024px) { + @media not all and (width >= 1024px) { .max-lg\:font-bold { font-weight: 700; } } - @media (max-width: 700px) { + @media (width <= 700px) { .max-\[700px\]\:font-bold { font-weight: 700; } } - @media not all and (min-width: 640px) { + @media not all and (width >= 640px) { .max-sm\:font-bold { font-weight: 700; } } - @media (max-width: 300px) { + @media (width <= 300px) { .max-\[300px\]\:font-bold { font-weight: 700; } } - @media (min-width: 640px) { + @media (width >= 640px) { .sm\:font-bold { font-weight: 700; } } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:font-bold { font-weight: 700; } @@ -236,22 +236,22 @@ it('does not have keyed screens for min variant', () => { .font-bold { font-weight: 700; } - @media (min-width: 300px) { + @media (width >= 300px) { .min-\[300px\]\:font-bold { font-weight: 700; } } - @media (min-width: 640px) { + @media (width >= 640px) { .sm\:font-bold { font-weight: 700; } } - @media (min-width: 700px) { + @media (width >= 700px) { .min-\[700px\]\:font-bold { font-weight: 700; } } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:font-bold { font-weight: 700; } @@ -292,12 +292,12 @@ it('warns when using min variants with complex screen configs', async () => { .font-bold { font-weight: 700; } - @media (min-width: 640px) { + @media (width >= 640px) { .sm\:font-bold { font-weight: 700; } } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:font-bold { font-weight: 700; } @@ -336,12 +336,12 @@ it('warns when using min variants with simple configs containing mixed units', a .font-bold { font-weight: 700; } - @media (min-width: 640px) { + @media (width >= 640px) { .sm\:font-bold { font-weight: 700; } } - @media (min-width: 48rem) { + @media (width >= 48rem) { .md\:font-bold { font-weight: 700; } @@ -380,12 +380,12 @@ it('warns when using min variants with mixed units (with screens config)', async .font-bold { font-weight: 700; } - @media (min-width: 640px) { + @media (width >= 640px) { .sm\:font-bold { font-weight: 700; } } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:font-bold { font-weight: 700; } @@ -422,7 +422,7 @@ it('warns when using min variants with mixed units (with no screens config)', as .font-bold { font-weight: 700; } - @media (min-width: 700px) { + @media (width >= 700px) { .min-\[700px\]\:font-bold { font-weight: 700; } @@ -464,12 +464,12 @@ it('warns when using max variants with complex screen configs', async () => { .font-bold { font-weight: 700; } - @media (min-width: 640px) { + @media (width >= 640px) { .sm\:font-bold { font-weight: 700; } } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:font-bold { font-weight: 700; } @@ -508,12 +508,12 @@ it('warns when using max variants with simple configs containing mixed units', a .font-bold { font-weight: 700; } - @media (min-width: 640px) { + @media (width >= 640px) { .sm\:font-bold { font-weight: 700; } } - @media (min-width: 48rem) { + @media (width >= 48rem) { .md\:font-bold { font-weight: 700; } @@ -552,12 +552,12 @@ it('warns when using max variants with mixed units (with screens config)', async .font-bold { font-weight: 700; } - @media (min-width: 640px) { + @media (width >= 640px) { .sm\:font-bold { font-weight: 700; } } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:font-bold { font-weight: 700; } @@ -594,7 +594,7 @@ it('warns when using max variants with mixed units (with no screens config)', as .font-bold { font-weight: 700; } - @media (max-width: 700px) { + @media (width <= 700px) { .max-\[700px\]\:font-bold { font-weight: 700; } @@ -631,7 +631,7 @@ it('warns when using min and max variants with mixed units (with no screens conf .font-bold { font-weight: 700; } - @media (max-width: 700rem) { + @media (width <= 700rem) { .max-\[700rem\]\:font-bold { font-weight: 700; } diff --git a/tests/modify-selectors.test.js b/tests/modify-selectors.test.js index e6ce3cf14..aef52b8a4 100644 --- a/tests/modify-selectors.test.js +++ b/tests/modify-selectors.test.js @@ -69,7 +69,7 @@ test('modify selectors', () => { .foo .foo\:visited\:markdown:visited > p { margin-top: 12px; } - @media (min-width: 1024px) { + @media (width >= 1024px) { .foo .lg\:foo\:disabled\:markdown:disabled > p { margin-top: 12px; } @@ -78,12 +78,12 @@ test('modify selectors', () => { .foo .foo\:hover\:font-bold:hover { font-weight: 700; } - @media (min-width: 640px) { + @media (width >= 640px) { .foo .sm\:foo\:font-bold { font-weight: 700; } } - @media (min-width: 768px) { + @media (width >= 768px) { .foo .md\:foo\:focus\:font-bold:focus { font-weight: 700; } diff --git a/tests/negative-prefix.test.js b/tests/negative-prefix.test.js index 8b4949b1a..615558807 100644 --- a/tests/negative-prefix.test.js +++ b/tests/negative-prefix.test.js @@ -12,7 +12,7 @@ test('using a negative prefix with a negative scale value', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchCss(css` + return expect(result.css).toMatchFormattedCss(css` .-mt-2 { margin-top: -4px; } @@ -34,7 +34,7 @@ test('using a negative scale value with a plugin that does not support dynamic n } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchCss(css` + return expect(result.css).toMatchFormattedCss(css` .-opacity-50 { opacity: 0.5; } @@ -53,7 +53,7 @@ test('using a negative prefix without a negative scale value', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchCss(css` + return expect(result.css).toMatchFormattedCss(css` .-mt-5 { margin-top: -20px; } @@ -75,7 +75,7 @@ test('being an asshole', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchCss(css` + return expect(result.css).toMatchFormattedCss(css` .-mt-\[10px\] { margin-top: 55px; } @@ -94,7 +94,7 @@ test('being a real asshole', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchCss(css` + return expect(result.css).toMatchFormattedCss(css` .-mt-\[10px\] { margin-top: -55px; } @@ -113,7 +113,7 @@ test('a value that includes a variable', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchCss(css` + return expect(result.css).toMatchFormattedCss(css` .-mt-5 { margin-top: calc(var(--sizing-5) * -1); } @@ -135,7 +135,7 @@ test('a value that includes a calc', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchCss(css` + return expect(result.css).toMatchFormattedCss(css` .-mt-5 { margin-top: 156px; } @@ -159,7 +159,7 @@ test('a value that includes min/max/clamp functions', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchCss(css` + return expect(result.css).toMatchFormattedCss(css` .-mt-clamp { margin-top: calc(-1 * clamp(1rem, 100vh, 3rem)); } @@ -193,7 +193,7 @@ test('a keyword value', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchCss(css` + return expect(result.css).toMatchFormattedCss(css` .mt-auto { margin-top: auto; } @@ -212,7 +212,7 @@ test('a zero value', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchCss(css` + return expect(result.css).toMatchFormattedCss(css` .-mt-0, .mt-0 { margin-top: 0; @@ -232,7 +232,7 @@ test('a color', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchCss(css``) + return expect(result.css).toMatchFormattedCss(css``) }) }) @@ -242,7 +242,7 @@ test('arbitrary values', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchCss(css` + return expect(result.css).toMatchFormattedCss(css` .-mt-\[10px\] { margin-top: -10px; } @@ -261,7 +261,7 @@ test('negating a negative scale value', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchCss(css` + return expect(result.css).toMatchFormattedCss(css` .-mt-weird { margin-top: 15px; } @@ -280,7 +280,7 @@ test('negating a default value', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchCss(css` + return expect(result.css).toMatchFormattedCss(css` .-mt { margin-top: -15px; } @@ -300,7 +300,7 @@ test('using a negative prefix with a negative default scale value', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchCss(css` + return expect(result.css).toMatchFormattedCss(css` .-mt { margin-top: -4px; } @@ -323,7 +323,7 @@ test('negating a default value with a configured prefix', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchCss(css` + return expect(result.css).toMatchFormattedCss(css` .tw--mt { margin-top: -15px; } @@ -337,6 +337,6 @@ test('arbitrary value keywords should be ignored', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchCss(css``) + return expect(result.css).toMatchFormattedCss(css``) }) }) diff --git a/tests/oxide-svelte.test.css b/tests/oxide-svelte.test.css index ef36fec77..d4889d746 100644 --- a/tests/oxide-svelte.test.css +++ b/tests/oxide-svelte.test.css @@ -102,7 +102,7 @@ --tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } -@media (min-width: 1024px) { +@media (width >= 1024px) { .lg\:hover\:bg-blue-500:hover { --tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity)); diff --git a/tests/parseObjectStyles.test.js b/tests/parseObjectStyles.test.js index b823801ee..1771b58b7 100644 --- a/tests/parseObjectStyles.test.js +++ b/tests/parseObjectStyles.test.js @@ -7,7 +7,7 @@ function toCss(nodes) { } test('it parses simple single class definitions', () => { - const result = parseObjectStyles({ + let result = parseObjectStyles({ '.foobar': { backgroundColor: 'red', color: 'white', @@ -17,15 +17,15 @@ test('it parses simple single class definitions', () => { expect(toCss(result)).toMatchFormattedCss(css` .foobar { - color: #fff; background-color: red; + color: white; padding: 1rem; } `) }) test('it parses multiple class definitions', () => { - const result = parseObjectStyles({ + let result = parseObjectStyles({ '.foo': { backgroundColor: 'red', color: 'white', @@ -39,8 +39,8 @@ test('it parses multiple class definitions', () => { expect(toCss(result)).toMatchFormattedCss(css` .foo { - color: #fff; background-color: red; + color: white; padding: 1rem; } .bar { @@ -51,7 +51,7 @@ test('it parses multiple class definitions', () => { }) test('it parses nested pseudo-selectors', () => { - const result = parseObjectStyles({ + let result = parseObjectStyles({ '.foo': { backgroundColor: 'red', color: 'white', @@ -67,22 +67,22 @@ test('it parses nested pseudo-selectors', () => { expect(toCss(result)).toMatchFormattedCss(css` .foo { - color: #fff; background-color: red; + color: white; padding: 1rem; } .foo:hover { background-color: orange; } .foo:focus { - background-color: #00f; + background-color: blue; } `) }) test('it parses top-level media queries', () => { - const result = parseObjectStyles({ - '@media (min-width: 200px)': { + let result = parseObjectStyles({ + '@media (width >= 200px)': { '.foo': { backgroundColor: 'orange', }, @@ -90,7 +90,7 @@ test('it parses top-level media queries', () => { }) expect(toCss(result)).toMatchFormattedCss(css` - @media (min-width: 200px) { + @media (width >= 200px) { .foo { background-color: orange; } @@ -99,12 +99,12 @@ test('it parses top-level media queries', () => { }) test('it parses nested media queries', () => { - const result = parseObjectStyles({ + let result = parseObjectStyles({ '.foo': { backgroundColor: 'red', color: 'white', padding: '1rem', - '@media (min-width: 200px)': { + '@media (width >= 200px)': { backgroundColor: 'orange', }, }, @@ -112,11 +112,11 @@ test('it parses nested media queries', () => { expect(toCss(result)).toMatchFormattedCss(css` .foo { - color: #fff; background-color: red; + color: white; padding: 1rem; } - @media (min-width: 200px) { + @media (width >= 200px) { .foo { background-color: orange; } @@ -125,7 +125,7 @@ test('it parses nested media queries', () => { }) test('it bubbles nested screen rules', () => { - const result = parseObjectStyles({ + let result = parseObjectStyles({ '.foo': { backgroundColor: 'red', color: 'white', @@ -138,8 +138,8 @@ test('it bubbles nested screen rules', () => { expect(toCss(result)).toMatchFormattedCss(css` .foo { - color: #fff; background-color: red; + color: white; padding: 1rem; } @screen sm { @@ -151,13 +151,13 @@ test('it bubbles nested screen rules', () => { }) test('it parses pseudo-selectors in nested media queries', () => { - const result = parseObjectStyles({ + let result = parseObjectStyles({ '.foo': { backgroundColor: 'red', color: 'white', padding: '1rem', '&:hover': { - '@media (min-width: 200px)': { + '@media (width >= 200px)': { backgroundColor: 'orange', }, }, @@ -166,11 +166,11 @@ test('it parses pseudo-selectors in nested media queries', () => { expect(toCss(result)).toMatchFormattedCss(css` .foo { - color: #fff; background-color: red; + color: white; padding: 1rem; } - @media (min-width: 200px) { + @media (width >= 200px) { .foo:hover { background-color: orange; } @@ -179,7 +179,7 @@ test('it parses pseudo-selectors in nested media queries', () => { }) test('it parses descendant selectors', () => { - const result = parseObjectStyles({ + let result = parseObjectStyles({ '.foo': { backgroundColor: 'red', color: 'white', @@ -192,8 +192,8 @@ test('it parses descendant selectors', () => { expect(toCss(result)).toMatchFormattedCss(css` .foo { - color: #fff; background-color: red; + color: white; padding: 1rem; } .foo .bar { @@ -203,7 +203,7 @@ test('it parses descendant selectors', () => { }) test('it parses nested multi-class selectors', () => { - const result = parseObjectStyles({ + let result = parseObjectStyles({ '.foo': { backgroundColor: 'red', color: 'white', @@ -216,8 +216,8 @@ test('it parses nested multi-class selectors', () => { expect(toCss(result)).toMatchFormattedCss(css` .foo { - color: #fff; background-color: red; + color: white; padding: 1rem; } .foo.bar { @@ -227,12 +227,12 @@ test('it parses nested multi-class selectors', () => { }) test('it parses nested multi-class selectors in media queries', () => { - const result = parseObjectStyles({ + let result = parseObjectStyles({ '.foo': { backgroundColor: 'red', color: 'white', padding: '1rem', - '@media (min-width: 200px)': { + '@media (width >= 200px)': { '&.bar': { backgroundColor: 'orange', }, @@ -242,11 +242,11 @@ test('it parses nested multi-class selectors in media queries', () => { expect(toCss(result)).toMatchFormattedCss(css` .foo { - color: #fff; background-color: red; + color: white; padding: 1rem; } - @media (min-width: 200px) { + @media (width >= 200px) { .foo.bar { background-color: orange; } @@ -255,7 +255,7 @@ test('it parses nested multi-class selectors in media queries', () => { }) test('it strips empty selectors when nesting', () => { - const result = parseObjectStyles({ + let result = parseObjectStyles({ '.foo': { '.bar': { backgroundColor: 'orange', @@ -271,7 +271,7 @@ test('it strips empty selectors when nesting', () => { }) test('it can parse an array of styles', () => { - const result = parseObjectStyles([ + let result = parseObjectStyles([ { '.foo': { backgroundColor: 'orange', @@ -297,13 +297,13 @@ test('it can parse an array of styles', () => { background-color: red; } .foo { - background-color: #00f; + background-color: blue; } `) }) test('custom properties preserve their case', () => { - const result = parseObjectStyles({ + let result = parseObjectStyles({ ':root': { '--colors-aColor-500': '0', }, diff --git a/tests/plugins/divide.test.js b/tests/plugins/divide.test.js index 37bd012ac..a5ffa826f 100644 --- a/tests/plugins/divide.test.js +++ b/tests/plugins/divide.test.js @@ -7,7 +7,7 @@ it('should add the divide styles for divide-y and a default border color', () => } return run('@tailwind base; @tailwind utilities;', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` ${defaults} .divide-y > :not([hidden]) ~ :not([hidden]) { @@ -26,7 +26,7 @@ it('should add the divide styles for divide-x and a default border color', () => } return run('@tailwind base; @tailwind utilities;', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` ${defaults} .divide-x > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; @@ -44,7 +44,7 @@ it('should add the divide styles for divide-y-reverse and a default border color } return run('@tailwind base; @tailwind utilities;', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` ${defaults} .divide-y-reverse > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 1; @@ -60,7 +60,7 @@ it('should add the divide styles for divide-x-reverse and a default border color } return run('@tailwind base; @tailwind utilities;', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` ${defaults} .divide-x-reverse > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 1; @@ -76,7 +76,7 @@ it('should only inject the base styles once if we use divide and border at the s } return run('@tailwind base; @tailwind utilities;', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` ${defaults} .divide-y > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 0; diff --git a/tests/plugins/fontFamily.test.js b/tests/plugins/fontFamily.test.js index f5718909d..c0c7aaceb 100644 --- a/tests/plugins/fontFamily.test.js +++ b/tests/plugins/fontFamily.test.js @@ -108,10 +108,10 @@ test('font-variation-settings can be provided when families are defined as a str } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchCss(` + expect(result.css).toMatchFormattedCss(css` .font-sans { + font-variation-settings: 'opsz' 32; font-family: Inter, sans-serif; - font-variation-settings: "opsz" 32; } `) }) @@ -128,10 +128,10 @@ test('font-variation-settings can be provided when families are defined as an ar } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchCss(` + expect(result.css).toMatchFormattedCss(css` .font-sans { + font-variation-settings: 'opsz' 32; font-family: Inter, sans-serif; - font-variation-settings: "opsz" 32; } `) }) diff --git a/tests/plugins/fontSize.test.js b/tests/plugins/fontSize.test.js index 32214650f..4b0099936 100644 --- a/tests/plugins/fontSize.test.js +++ b/tests/plugins/fontSize.test.js @@ -13,7 +13,7 @@ test('font-size utilities can include a default line-height', () => { } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .text-lg { font-size: 20px; line-height: 28px; @@ -42,7 +42,7 @@ test('font-size utilities can include a default letter-spacing', () => { } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .text-lg { letter-spacing: -0.02em; font-size: 20px; @@ -71,7 +71,7 @@ test('font-size utilities can include a default line-height and letter-spacing', } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .text-lg { letter-spacing: -0.02em; font-size: 20px; @@ -102,7 +102,7 @@ test('font-size utilities can include a font-weight', () => { } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .text-lg { font-size: 20px; font-weight: bold; @@ -147,7 +147,7 @@ test('font-size utilities can include a line-height modifier', () => { } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .text-\[13px\]\/6 { font-size: 13px; line-height: 24px; @@ -168,7 +168,7 @@ test('font-size utilities can include a line-height modifier', () => { font-size: 12px; line-height: 21px; } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:text-\[19px\]\/8 { font-size: 19px; line-height: 32px; diff --git a/tests/postcss-plugins/nesting/index.test.js b/tests/postcss-plugins/nesting/index.test.js index fe942a284..d2c339bf8 100644 --- a/tests/postcss-plugins/nesting/index.test.js +++ b/tests/postcss-plugins/nesting/index.test.js @@ -19,7 +19,7 @@ it('should be possible to load a custom nesting plugin', async () => { rule.selector += '-modified' }) }) - ).toMatchCss(css` + ).toMatchFormattedCss(css` .foo-modified { color: black; @media screen(md) { @@ -39,7 +39,7 @@ it('should be possible to load a custom nesting plugin by name (string) instead' } ` - expect(await run(input, 'postcss-nested')).toMatchCss(css` + expect(await run(input, 'postcss-nested')).toMatchFormattedCss(css` .foo { color: black; } @@ -62,7 +62,7 @@ it('should default to the bundled postcss-nested plugin (no options)', async () } ` - expect(await run(input)).toMatchCss(css` + expect(await run(input)).toMatchFormattedCss(css` .foo { color: black; } @@ -85,7 +85,7 @@ it('should default to the bundled postcss-nested plugin (empty options)', async } ` - expect(await run(input, {})).toMatchCss(css` + expect(await run(input, {})).toMatchFormattedCss(css` .foo { color: black; } @@ -108,7 +108,7 @@ it('should be possible to use postcss-nested plugin with options', async () => { } ` - expect(await run(input, postcssNested({ noIsPseudoSelector: true }))).toMatchCss(css` + expect(await run(input, postcssNested({ noIsPseudoSelector: true }))).toMatchFormattedCss(css` .foo { color: black; } @@ -131,7 +131,7 @@ test('@screen rules are replaced with media queries', async () => { } ` - expect(await run(input, postcssNested)).toMatchCss(css` + expect(await run(input, postcssNested)).toMatchFormattedCss(css` .foo { color: black; } @@ -154,7 +154,7 @@ test('@screen rules can work with `@apply`', async () => { } ` - expect(await run(input, postcssNested)).toMatchCss(css` + expect(await run(input, postcssNested)).toMatchFormattedCss(css` .foo { @apply bg-black; } @@ -172,7 +172,7 @@ test('nesting does not break downstream plugin visitors', async () => { .foo { color: black; } - @suppoerts (color: blue) { + @supports (color: blue) { .foo { color: blue; } @@ -186,15 +186,16 @@ test('nesting does not break downstream plugin visitors', async () => { let result = await run(input, plugins) - expect(result).toMatchCss(css` + expect(result).toMatchFormattedCss(css` .foo { - color: #000; + color: black; } - @suppoerts (color: blue) { + @supports (color: blue) { .foo { color: blue; } } + /* Comment */ `) expect(spyPlugin.spies.Once).toHaveBeenCalled() diff --git a/tests/prefix.test.js b/tests/prefix.test.js index c9c0e5f25..1306481e3 100644 --- a/tests/prefix.test.js +++ b/tests/prefix.test.js @@ -94,27 +94,27 @@ test('prefix', () => { .tw-container { width: 100%; } - @media (min-width: 640px) { + @media (width >= 640px) { .tw-container { max-width: 640px; } } - @media (min-width: 768px) { + @media (width >= 768px) { .tw-container { max-width: 768px; } } - @media (min-width: 1024px) { + @media (width >= 1024px) { .tw-container { max-width: 1024px; } } - @media (min-width: 1280px) { + @media (width >= 1280px) { .tw-container { max-width: 1280px; } } - @media (min-width: 1536px) { + @media (width >= 1536px) { .tw-container { max-width: 1536px; } @@ -168,7 +168,7 @@ test('prefix', () => { :is(.tw-dark .dark\:focus\:tw-text-left:focus) { text-align: left; } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:tw--ml-5 { margin-left: -1.25rem; } @@ -440,7 +440,7 @@ test('prefix with negative values and variants in the safelist', async () => { .hover\:tw--top-1:hover { top: -0.25rem; } - @media (min-width: 640px) { + @media (width >= 640px) { .sm\:hover\:-tw-top-1:hover, .sm\:hover\:tw--top-1:hover { top: -0.25rem; diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css index dba9f3194..f93deda00 100644 --- a/tests/raw-content.test.css +++ b/tests/raw-content.test.css @@ -1,37 +1,37 @@ .container { width: 100%; } -@media (min-width: 640px) { +@media (width >= 640px) { .container { max-width: 640px; } } -@media (min-width: 768px) { +@media (width >= 768px) { .container { max-width: 768px; } } -@media (min-width: 1024px) { +@media (width >= 1024px) { .container { max-width: 1024px; } } -@media (min-width: 1280px) { +@media (width >= 1280px) { .container { max-width: 1280px; } } -@media (min-width: 1536px) { +@media (width >= 1536px) { .container { max-width: 1536px; } } .sr-only { - width: 1px; - height: 1px; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; + width: 1px; + height: 1px; margin: -1px; padding: 0; position: absolute; diff --git a/tests/resolve-defaults-at-rules.test.js b/tests/resolve-defaults-at-rules.test.js index 1d80c780b..0ecb4cdc5 100644 --- a/tests/resolve-defaults-at-rules.test.js +++ b/tests/resolve-defaults-at-rules.test.js @@ -374,7 +374,7 @@ test('with apply', async () => { skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } - @media (min-width: 768px) { + @media (width >= 768px) { .media-queries { --tw-rotate: 45deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) @@ -506,7 +506,7 @@ test('with borders', async () => { --tw-border-opacity: 1; border-color: rgb(239 68 68 / var(--tw-border-opacity)); } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:border-2 { border-width: 2px; } @@ -559,7 +559,7 @@ test('with shadows', async () => { .ring-black\/25 { --tw-ring-color: #00000040; } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:shadow-xl { --tw-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a; --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), diff --git a/tests/responsive-and-variants-atrules.test.js b/tests/responsive-and-variants-atrules.test.js index 4d4a0f507..8eea80729 100644 --- a/tests/responsive-and-variants-atrules.test.js +++ b/tests/responsive-and-variants-atrules.test.js @@ -121,7 +121,7 @@ test('responsive and variants atrules', () => { .both-at-root { color: pink; } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:focus\:responsive-in-components:focus { color: #00f; } diff --git a/tests/screenAtRule.test.js b/tests/screenAtRule.test.js index b6f1723c3..af13b5ddf 100644 --- a/tests/screenAtRule.test.js +++ b/tests/screenAtRule.test.js @@ -39,7 +39,7 @@ test('it can generate media queries from configured screen sizes', () => { expect(result.css).toMatchFormattedCss(css` @media (min-width: 500px) { .banana { - color: #ff0; + color: yellow; } } @media (min-width: 750px) { diff --git a/tests/source-maps.test.js b/tests/source-maps.test.js index 1a99252f5..88aa59ded 100644 --- a/tests/source-maps.test.js +++ b/tests/source-maps.test.js @@ -43,23 +43,23 @@ test('apply generates source maps', async () => { expect(annotations).toMatchInlineSnapshot(` [ "2:4 -> 1:0", - "2:2-14 -> 2:2-14", - "3:2-13 -> 3:2-13", - "4:2-20 -> 4:2-20", - "5:2-23 -> 5:2-23", - "6:2-57 -> 6:2-57", + "2:2-20 -> 2:2-20", + "3:2-23 -> 3:2-23", + "4:2-57 -> 4:2-57", + "5:2-13 -> 5:2-13", + "6:2-14 -> 6:2-14", "7:0 -> 7:0", "7:4 -> 9:0", - "10:2-14 -> 10:2-14", - "11:2-13 -> 11:2-13", - "12:2-20 -> 12:2-20", - "13:2-57 -> 13:2-57", + "10:2-20 -> 10:2-20", + "11:2-57 -> 11:2-57", + "12:2-13 -> 12:2-13", + "13:2-14 -> 13:2-14", "14:0 -> 14:0", "13:6 -> 16:0", - "17:2-14 -> 17:2-14", - "18:2-13 -> 18:2-13", - "19:2-20 -> 19:2-20", - "20:2-53 -> 20:2-53", + "17:2-20 -> 17:2-20", + "18:2-53 -> 18:2-53", + "19:2-13 -> 19:2-13", + "20:2-14 -> 20:2-14", "21:0 -> 21:0", ] `) @@ -104,9 +104,9 @@ test('preflight + base have source maps', async () => { "21:2-11 -> 21:2-11", "22:0 -> 22:0", "2:4 -> 24:0", - "25:2-11 -> 25:2-11", - "26:2-16 -> 26:2-16", - "27:2-23 -> 27:2-23", + "25:2-16 -> 25:2-16", + "26:2-23 -> 26:2-23", + "27:2-11 -> 27:2-11", "28:0 -> 28:0", "2:4 -> 30:0", "31:2-35 -> 31:2-35", diff --git a/tests/space-utilities.test.js b/tests/space-utilities.test.js index fb027a337..194c63ce2 100644 --- a/tests/space-utilities.test.js +++ b/tests/space-utilities.test.js @@ -10,7 +10,7 @@ test('space-x uses non-logical properties', () => { } return run('@tailwind base; @tailwind utilities;', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` ${defaults} .space-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; @@ -31,7 +31,7 @@ test('space-x uses logical properties', () => { } return run('@tailwind base; @tailwind utilities;', config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` ${defaults} .space-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; diff --git a/tests/syntax-svelte.test.js b/tests/syntax-svelte.test.js index 8acd91a5b..d354eee42 100644 --- a/tests/syntax-svelte.test.js +++ b/tests/syntax-svelte.test.js @@ -15,12 +15,12 @@ test('it detects svelte based on the file extension', () => { ` return run(input, config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .bg-red-500 { --tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } - @media (min-width: 1024px) { + @media (width >= 1024px) { .lg\:hover\:bg-blue-500:hover { --tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity)); @@ -61,12 +61,12 @@ test('using raw with svelte extension', () => { ` return run(input, config).then((result) => { - expect(result.css).toMatchCss(css` + expect(result.css).toMatchFormattedCss(css` .bg-red-500 { --tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } - @media (min-width: 1024px) { + @media (width >= 1024px) { .lg\:hover\:bg-blue-500:hover { --tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity)); diff --git a/tests/tailwind-screens.test.js b/tests/tailwind-screens.test.js index 009c02bc3..91eb93c6e 100644 --- a/tests/tailwind-screens.test.js +++ b/tests/tailwind-screens.test.js @@ -19,7 +19,7 @@ test('class variants are inserted at `@tailwind variants`', async () => { .hover\:font-bold:hover { font-weight: 700; } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:font-bold { font-weight: 700; } @@ -50,7 +50,7 @@ test('`@tailwind screens` works as an alias for `@tailwind variants`', async () .hover\:font-bold:hover { font-weight: 700; } - @media (min-width: 768px) { + @media (width >= 768px) { .md\:font-bold { font-weight: 700; } diff --git a/tests/variant-grouping.test.skip.js b/tests/variant-grouping.test.skip.js index aba113783..156d4a5cf 100644 --- a/tests/variant-grouping.test.skip.js +++ b/tests/variant-grouping.test.skip.js @@ -38,7 +38,7 @@ it('should be possible to group variants', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-width: 768px) { + @media (width >= 768px) { .md\:\(underline\2c italic\) { font-style: italic; text-decoration-line: underline; @@ -97,7 +97,7 @@ it('should be possible to group multiple variants', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-width: 768px) { + @media (width >= 768px) { @media (prefers-color-scheme: dark) { .md\:dark\:\(underline\2c italic\) { font-style: italic; @@ -123,7 +123,7 @@ it('should be possible to group nested grouped variants', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-width: 768px) { + @media (width >= 768px) { .md\:\(underline\2c italic\2c hover\:\(uppercase\2c font-bold\)\) { font-style: italic; text-decoration-line: underline; @@ -155,7 +155,7 @@ it('should be possible to use nested multiple grouped variants', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-width: 768px) { + @media (width >= 768px) { .md\:\(text-black\2c dark\:\(text-white\2c hover\:focus\:text-gray-100\)\) { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); @@ -195,7 +195,7 @@ it('should be possible to mix and match nesting and different variant combinatio return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-width: 768px) { + @media (width >= 768px) { .md\:\[\&\>\*\]\:\(text-black\2c dark\:\(text-white\2c hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\=1\)\]\:text-gray-100\)\) diff --git a/tests/variants.test.css b/tests/variants.test.css index 2bb486303..57291001a 100644 --- a/tests/variants.test.css +++ b/tests/variants.test.css @@ -73,7 +73,7 @@ .first\:flex:first-child, .last\:flex:last-child, .only\:flex:only-child, -.odd\:flex:nth-child(2n + 1), +.odd\:flex:nth-child(odd), .even\:flex:nth-child(2n), .first-of-type\:flex:first-of-type, .last-of-type\:flex:last-of-type, @@ -84,8 +84,15 @@ .default\:flex:default, .checked\:flex:checked, .indeterminate\:flex:indeterminate, -.placeholder-shown\:flex:placeholder-shown, -.autofill\:flex:autofill, +.placeholder-shown\:flex:placeholder-shown { + display: flex; +} +.autofill\:flex:-webkit-autofill { + display: flex; +} +.autofill\:flex:autofill { + display: flex; +} .optional\:flex:optional, .required\:flex:required, .valid\:flex:valid, @@ -111,7 +118,88 @@ .group:first-child .group-first\:flex, .group:last-child .group-last\:flex, .group:only-child .group-only\:flex, -.group:nth-child(2n + 1) .group-odd\:flex, +.group:nth-child(odd) .group-odd\:flex, +.group:nth-child(2n) .group-even\:flex, +.group:first-of-type .group-first-of-type\:flex, +.group:last-of-type .group-last-of-type\:flex, +.group:only-of-type .group-only-of-type\:flex, +.group:visited .group-visited\:flex, +.group:target .group-target\:flex, +.group[open] .group-open\:flex, +.group:default .group-default\:flex, +.group:checked .group-checked\:flex, +.group:indeterminate .group-indeterminate\:flex, +.group:placeholder-shown .group-placeholder-shown\:flex, +.group:-webkit-autofill .group-autofill\:flex, +.group:optional .group-optional\:flex, +.group:required .group-required\:flex, +.group:valid .group-valid\:flex, +.group:invalid .group-invalid\:flex, +.group:in-range .group-in-range\:flex, +.group:out-of-range .group-out-of-range\:flex, +.group:read-only .group-read-only\:flex, +.group:empty .group-empty\:flex, +.group:focus-within .group-focus-within\:flex, +.group:hover .group-hover\:flex, +.group[open]:hover .group-open\:group-hover\:flex, +.group:focus .group-focus\:flex, +.group[open]:focus .group-open\:group-focus\:flex, +.group:focus:hover .group-focus\:group-hover\:flex, +.group:focus-visible .group-focus-visible\:flex, +.group:active .group-active\:flex, +.group:enabled .group-enabled\:flex, +.group:disabled .group-disabled\:flex, +.group:disabled:focus:hover .group-disabled\:group-focus\:group-hover\:flex, +.group:disabled:focus:hover .group-disabled\:group-focus\:group-hover\:first\:flex:first-child, +.peer:first-child ~ .peer-first\:flex, +.peer:last-child ~ .peer-last\:flex, +.peer:only-child ~ .peer-only\:flex, +.peer:nth-child(odd) ~ .peer-odd\:flex, +.peer:nth-child(2n) ~ .peer-even\:flex, +.peer:first-of-type ~ .peer-first-of-type\:flex, +.peer:last-of-type ~ .peer-last-of-type\:flex, +.peer:only-of-type ~ .peer-only-of-type\:flex, +.peer:visited ~ .peer-visited\:flex, +.peer:target ~ .peer-target\:flex, +.peer[open] ~ .peer-open\:flex, +.peer:default ~ .peer-default\:flex, +.peer:checked ~ .peer-checked\:flex, +.peer:indeterminate ~ .peer-indeterminate\:flex, +.peer:placeholder-shown ~ .peer-placeholder-shown\:flex, +.peer:-webkit-autofill ~ .peer-autofill\:flex, +.peer:optional ~ .peer-optional\:flex, +.peer:required ~ .peer-required\:flex, +.peer:valid ~ .peer-valid\:flex, +.peer:invalid ~ .peer-invalid\:flex, +.peer:in-range ~ .peer-in-range\:flex, +.peer:out-of-range ~ .peer-out-of-range\:flex, +.peer:read-only ~ .peer-read-only\:flex, +.peer:empty ~ .peer-empty\:flex, +.peer:focus-within ~ .peer-focus-within\:flex, +.peer:hover ~ .peer-hover\:flex, +.peer:focus ~ .peer-focus\:flex, +.peer:focus:hover ~ .peer-focus\:peer-hover\:flex, +.peer:focus-visible ~ .peer-focus-visible\:flex, +.peer:active ~ .peer-active\:flex, +.peer:enabled ~ .peer-enabled\:flex, +.peer:disabled ~ .peer-disabled\:flex, +.peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:flex, +.peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:first\:flex:first-child, +:-webkit-any([dir='ltr'] .ltr\:flex), +:-webkit-any([dir='rtl'] .rtl\:flex) { + display: flex; +} +.open\:hover\:flex:hover[open], +.focus\:flex:focus, +.focus\:hover\:flex:hover:focus, +.focus-visible\:flex:focus-visible, +.active\:flex:active, +.enabled\:flex:enabled, +.disabled\:flex:disabled, +.group:first-child .group-first\:flex, +.group:last-child .group-last\:flex, +.group:only-child .group-only\:flex, +.group:nth-child(odd) .group-odd\:flex, .group:nth-child(2n) .group-even\:flex, .group:first-of-type .group-first-of-type\:flex, .group:last-of-type .group-last-of-type\:flex, @@ -147,7 +235,7 @@ .peer:first-child ~ .peer-first\:flex, .peer:last-child ~ .peer-last\:flex, .peer:only-child ~ .peer-only\:flex, -.peer:nth-child(2n + 1) ~ .peer-odd\:flex, +.peer:nth-child(odd) ~ .peer-odd\:flex, .peer:nth-child(2n) ~ .peer-even\:flex, .peer:first-of-type ~ .peer-first-of-type\:flex, .peer:last-of-type ~ .peer-last-of-type\:flex, @@ -212,31 +300,31 @@ display: flex; } } -@media (min-width: 640px) { +@media (width >= 640px) { .sm\:flex, .sm\:active\:flex:active { display: flex; } } -@media (min-width: 768px) { +@media (width >= 768px) { .md\:flex, .group:focus .md\:group-focus\:flex { display: flex; } } -@media (min-width: 1024px) { +@media (width >= 1024px) { .lg\:flex, :is(.dark .lg\:dark\:flex) { display: flex; } } -@media (min-width: 1280px) { +@media (width >= 1280px) { .xl\:flex, :is(.dark .xl\:dark\:disabled\:flex:disabled) { display: flex; } } -@media (min-width: 1536px) { +@media (width >= 1536px) { .\32 xl\:flex { display: flex; } diff --git a/tests/variants.test.js b/tests/variants.test.js index f948e1b2f..1e88aa4e1 100644 --- a/tests/variants.test.js +++ b/tests/variants.test.js @@ -28,8 +28,8 @@ test('order matters and produces different behaviour', () => { content: [ { raw: html` -
-
+
+
`, }, ], @@ -37,11 +37,11 @@ test('order matters and produces different behaviour', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .file\:hover\:flex:hover::file-selector-button { - display: flex; + .file\:hover\:\[--value\:2\]:hover::file-selector-button { + --value: 2; } - .hover\:file\:flex::file-selector-button:hover { - display: flex; + .hover\:file\:\[--value\:1\]::file-selector-button:hover { + --value: 1; } `) }) @@ -318,7 +318,7 @@ test('custom addVariant with more complex media query params', () => { return run('@tailwind components;@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - @media screen and (max-width: 600px) { + @media screen and (width <= 600px) { .magic\:text-center { text-align: center; } @@ -491,7 +491,7 @@ it('should be possible to use responsive modifiers that are defined with special return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - @media (max-width: 399px) { + @media (width <= 399px) { .\ { return expect(result.css).toMatchFormattedCss(css` - @media (min-width: 640px) { + @media (width >= 640px) { .sm\:underline { text-decoration-line: underline; } @@ -538,31 +538,31 @@ it('variants for utilities should not be produced in a file without a utilities return run('@tailwind components', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - @media (min-width: 640px) { + @media (width >= 640px) { .sm\:container { width: 100%; } - @media (min-width: 640px) { + @media (width >= 640px) { .sm\:container { max-width: 640px; } } - @media (min-width: 768px) { + @media (width >= 768px) { .sm\:container { max-width: 768px; } } - @media (min-width: 1024px) { + @media (width >= 1024px) { .sm\:container { max-width: 1024px; } } - @media (min-width: 1280px) { + @media (width >= 1280px) { .sm\:container { max-width: 1280px; } } - @media (min-width: 1536px) { + @media (width >= 1536px) { .sm\:container { max-width: 1536px; } @@ -622,7 +622,7 @@ it('appends variants to the correct place when using postcss documents', () => { .underline { text-decoration-line: underline; } - @media (min-width: 640px) { + @media (width >= 640px) { .sm\:underline { text-decoration-line: underline; } @@ -654,7 +654,7 @@ it('variants support multiple, grouped selectors (html)', () => { return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - @media (min-width: 640px) { + @media (width >= 640px) { .sm\:base1 .foo, .sm\:base1 .bar, .sm\:base2 .bar .base2-foo { @@ -687,7 +687,7 @@ it('variants support multiple, grouped selectors (apply)', () => { return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - @media (min-width: 640px) { + @media (width >= 640px) { .baz .foo, .baz .bar { color: red; @@ -716,7 +716,7 @@ it('variants only picks the used selectors in a group (html)', () => { return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - @media (min-width: 640px) { + @media (width >= 640px) { .sm\:b { color: red; } @@ -747,7 +747,7 @@ it('variants only picks the used selectors in a group (apply)', () => { return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - @media (min-width: 640px) { + @media (width >= 640px) { .baz { color: red; } @@ -915,7 +915,7 @@ test('class inside pseudo-class function :has', () => { html:has(.hover\:foo:hover) { color: green; } - @media (min-width: 640px) { + @media (width >= 640px) { :where(.sm\:foo) { color: red; } @@ -995,7 +995,7 @@ test('variants with slashes in them work', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-aspect-ratio: 1 / 10) { + @media (aspect-ratio >= 1 / 10) { .ar-1\/10\:flex { display: flex; } @@ -1031,7 +1031,7 @@ test('variants with slashes support modifiers', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (min-aspect-ratio: 1 / 10) and (foo: 20) { + @media (aspect-ratio >= 1 / 10) and (foo: 20) { .ar-1\/10\/20\:flex { display: flex; }