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;
}