diff --git a/integrations/parcel/tests/integration.test.js b/integrations/parcel/tests/integration.test.js index cece481b5..ec63199fe 100644 --- a/integrations/parcel/tests/integration.test.js +++ b/integrations/parcel/tests/integration.test.js @@ -115,7 +115,7 @@ describe.skip('watcher', () => { font-weight: 700; } @media (min-width: 768px) { - .md\\:font-medium { + .md\:font-medium { font-weight: 500; } } @@ -153,7 +153,7 @@ describe.skip('watcher', () => { font-weight: bold; } @media (min-width: 800px) { - .md\\:font-medium { + .md\:font-medium { font-weight: 500; } } diff --git a/integrations/postcss-cli/tests/integration.test.js b/integrations/postcss-cli/tests/integration.test.js index 5f5cac960..b1505ae63 100644 --- a/integrations/postcss-cli/tests/integration.test.js +++ b/integrations/postcss-cli/tests/integration.test.js @@ -95,7 +95,7 @@ describe('watcher', () => { font-weight: 700; } @media (min-width: 768px) { - .md\\:font-medium { + .md\:font-medium { font-weight: 500; } } @@ -132,7 +132,7 @@ describe('watcher', () => { font-weight: bold; } @media (min-width: 800px) { - .md\\:font-medium { + .md\:font-medium { font-weight: 500; } } diff --git a/integrations/rollup/tests/integration.test.js b/integrations/rollup/tests/integration.test.js index 0e52a2ec1..b57d5e6b9 100644 --- a/integrations/rollup/tests/integration.test.js +++ b/integrations/rollup/tests/integration.test.js @@ -90,7 +90,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch font-weight: 700; } @media (min-width: 768px) { - .md\\:font-medium { + .md\:font-medium { font-weight: 500; } } @@ -127,7 +127,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch font-weight: bold; } @media (min-width: 800px) { - .md\\:font-medium { + .md\:font-medium { font-weight: 500; } } diff --git a/integrations/syntax.js b/integrations/syntax.js index d266201b9..3354de5b0 100644 --- a/integrations/syntax.js +++ b/integrations/syntax.js @@ -1,6 +1,2 @@ // Small helper to allow for css, html and JavaScript highlighting / formatting in most editors. -function syntax(templates) { - return templates.join('') -} - -module.exports = { css: syntax, html: syntax, javascript: syntax } +module.exports = { css: String.raw, html: String.raw, javascript: String.raw } diff --git a/integrations/tailwindcss-cli/tests/integration.test.js b/integrations/tailwindcss-cli/tests/integration.test.js index 8b8578c80..1992c9cd5 100644 --- a/integrations/tailwindcss-cli/tests/integration.test.js +++ b/integrations/tailwindcss-cli/tests/integration.test.js @@ -188,7 +188,7 @@ describe('watcher', () => { font-weight: 700; } @media (min-width: 768px) { - .md\\:font-medium { + .md\:font-medium { font-weight: 500; } } @@ -225,7 +225,7 @@ describe('watcher', () => { font-weight: bold; } @media (min-width: 800px) { - .md\\:font-medium { + .md\:font-medium { font-weight: 500; } } diff --git a/integrations/vite/tests/integration.test.js b/integrations/vite/tests/integration.test.js index 17a5ebb6b..1069624e7 100644 --- a/integrations/vite/tests/integration.test.js +++ b/integrations/vite/tests/integration.test.js @@ -121,7 +121,7 @@ describe('watcher', () => { font-weight: 700; } @media (min-width: 768px) { - .md\\:font-medium { + .md\:font-medium { font-weight: 500; } } @@ -158,7 +158,7 @@ describe('watcher', () => { font-weight: bold; } @media (min-width: 800px) { - .md\\:font-medium { + .md\:font-medium { font-weight: 500; } } diff --git a/integrations/webpack-4/tests/integration.test.js b/integrations/webpack-4/tests/integration.test.js index 929a8bd74..c6d1a0232 100644 --- a/integrations/webpack-4/tests/integration.test.js +++ b/integrations/webpack-4/tests/integration.test.js @@ -91,7 +91,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch font-weight: 700; } @media (min-width: 768px) { - .md\\:font-medium { + .md\:font-medium { font-weight: 500; } } @@ -129,7 +129,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch font-weight: bold; } @media (min-width: 800px) { - .md\\:font-medium { + .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 58a1c2b19..3b586e075 100644 --- a/integrations/webpack-5/tests/integration.test.js +++ b/integrations/webpack-5/tests/integration.test.js @@ -91,7 +91,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch font-weight: 700; } @media (min-width: 768px) { - .md\\:font-medium { + .md\:font-medium { font-weight: 500; } } @@ -129,7 +129,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch font-weight: bold; } @media (min-width: 800px) { - .md\\:font-medium { + .md\:font-medium { font-weight: 500; } } diff --git a/tests/animations.test.js b/tests/animations.test.js index f167b3717..0a77a4c4e 100644 --- a/tests/animations.test.js +++ b/tests/animations.test.js @@ -30,7 +30,7 @@ test('basic', () => { opacity: 0; } } - .hover\\:animate-ping:hover { + .hover\:animate-ping:hover { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } @keyframes bounce { @@ -44,7 +44,7 @@ test('basic', () => { animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } - .group:hover .group-hover\\:animate-bounce { + .group:hover .group-hover\:animate-bounce { animation: bounce 1s infinite; } `) diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js index 7b0b455bf..f824d0545 100644 --- a/tests/arbitrary-values.test.js +++ b/tests/arbitrary-values.test.js @@ -44,12 +44,12 @@ it('should support arbitrary values for various background utilities', () => { background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } - .bg-\\[\\#ff0000\\] { + .bg-\[\#ff0000\] { --tw-bg-opacity: 1; background-color: rgb(255 0 0 / var(--tw-bg-opacity)); } - .bg-\\[color\\:var\\(--bg-color\\)\\] { + .bg-\[color\:var\(--bg-color\)\] { background-color: var(--bg-color); } @@ -57,11 +57,11 @@ it('should support arbitrary values for various background utilities', () => { background-image: linear-gradient(to right, var(--tw-gradient-stops)); } - .bg-\\[url\\(\\'\\/image-1-0\\.png\\'\\)\\] { + .bg-\[url\(\'\/image-1-0\.png\'\)\] { background-image: url('/image-1-0.png'); } - .bg-\\[url\\:var\\(--image-url\\)\\] { + .bg-\[url\:var\(--image-url\)\] { background-image: var(--image-url); } `) @@ -86,8 +86,8 @@ it('should handle unknown typehints', () => { let config = { content: [{ raw: html`
` }] } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchFormattedCss(` - .w-\\[length\\:12px\\] { + return expect(result.css).toMatchFormattedCss(css` + .w-\[length\:12px\] { width: 12px; } `) @@ -95,6 +95,13 @@ it('should handle unknown typehints', () => { }) it('should convert _ to spaces', () => { + // Using custom css function here, because otherwise with String.raw, we run + // into an issue with `\2c ` escapes. If we use `\2c ` then JS complains + // about strict mode. But `\\2c ` is not what it expected. + function css(templates) { + return templates.join('') + } + let config = { content: [ { @@ -185,13 +192,13 @@ it('should convert _ to spaces', () => { it('should not convert escaped underscores with spaces', () => { let config = { - content: [{ raw: html`
` }], + content: [{ raw: `
` }], corePlugins: { preflight: false }, } return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - .content-\\[\\'snake\\\\_case\\'\\] { + .content-\[\'snake\\_case\'\] { content: 'snake_case'; } `) diff --git a/tests/color-opacity-modifiers.test.js b/tests/color-opacity-modifiers.test.js index 18b0be92b..fa881ff95 100644 --- a/tests/color-opacity-modifiers.test.js +++ b/tests/color-opacity-modifiers.test.js @@ -7,7 +7,7 @@ test('basic color opacity modifier', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .bg-red-500\\/50 { + .bg-red-500\/50 { background-color: rgb(239 68 68 / 0.5); } `) @@ -28,7 +28,7 @@ test('colors with slashes are matched first', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .bg-red-500\\/50 { + .bg-red-500\/50 { --tw-bg-opacity: 1; background-color: rgb(255 0 0 / var(--tw-bg-opacity)); } @@ -43,7 +43,7 @@ test('arbitrary color opacity modifier', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .bg-red-500\\/\\[var\\(--opacity\\)\\] { + .bg-red-500\/\[var\(--opacity\)\] { background-color: rgb(239 68 68 / var(--opacity)); } `) @@ -67,11 +67,9 @@ test('arbitrary color with opacity from scale', async () => { plugins: [], } - let css = `@tailwind utilities` - - return run(css, config).then((result) => { - expect(result.css).toMatchFormattedCss(` - .bg-\\[wheat\\]\\/50 { + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .bg-\[wheat\]\/50 { background-color: rgb(245 222 179 / 0.5); } `) @@ -85,11 +83,9 @@ test('arbitrary color with arbitrary opacity', async () => { plugins: [], } - let css = `@tailwind utilities` - - return run(css, config).then((result) => { - expect(result.css).toMatchFormattedCss(` - .bg-\\[\\#bada55\\]\\/\\[0\\.2\\] { + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .bg-\[\#bada55\]\/\[0\.2\] { background-color: rgb(186 218 85 / 0.2); } `) @@ -103,9 +99,7 @@ test('undefined theme color with opacity from scale', async () => { plugins: [], } - let css = `@tailwind utilities` - - return run(css, config).then((result) => { + return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(``) }) }) @@ -143,7 +137,7 @@ test('function colors are supported', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .bg-blue\\/50 { + .bg-blue\/50 { background-color: rgba(var(--colors-blue), 0.5); } `) @@ -171,14 +165,14 @@ test('utilities that support any type are supported', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .from-red-500\\/50 { + .from-red-500\/50 { --tw-gradient-from: rgb(239 68 68 / 0.5); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(239 68 68 / 0)); } - .fill-red-500\\/25 { + .fill-red-500\/25 { fill: rgb(239 68 68 / 0.25); } - .placeholder-red-500\\/75::placeholder { + .placeholder-red-500\/75::placeholder { color: rgb(239 68 68 / 0.75); } `) diff --git a/tests/containerPlugin.test.js b/tests/containerPlugin.test.js index f2d19ec1e..51b7093b9 100644 --- a/tests/containerPlugin.test.js +++ b/tests/containerPlugin.test.js @@ -326,16 +326,16 @@ test('container can use variants', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` @media (min-width: 1024px) { - .lg\\:hover\\:container:hover { + .lg\:hover\:container:hover { width: 100%; } @media (min-width: 400px) { - .lg\\:hover\\:container:hover { + .lg\:hover\:container:hover { max-width: 400px; } } @media (min-width: 500px) { - .lg\\:hover\\:container:hover { + .lg\:hover\:container:hover { max-width: 500px; } } diff --git a/tests/custom-plugins.test.js b/tests/custom-plugins.test.js index 5fd8afd62..6b07157b2 100644 --- a/tests/custom-plugins.test.js +++ b/tests/custom-plugins.test.js @@ -586,7 +586,7 @@ test('plugins can create rules with escaped selectors', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .custom-top-1\\/4 { + .custom-top-1\/4 { top: 25%; } `) @@ -866,7 +866,7 @@ test('when important is a selector it scopes all selectors in a rule, even thoug return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` #app .custom-rotate-90, - #app .custom-rotate-1\\/4 { + #app .custom-rotate-1\/4 { transform: rotate(90deg); transform: rotate(90deg); } @@ -1110,7 +1110,7 @@ test('prefix will prefix all classes in a selector', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .tw-btn-blue .tw-w-1\\/4 > h1.tw-text-xl + a .tw-bar { + .tw-btn-blue .tw-w-1\/4 > h1.tw-text-xl + a .tw-bar { background-color: blue; } `) @@ -1251,11 +1251,11 @@ test('plugins can be created using the `createPlugin` function', () => { .test-lg { test-property: 3rem; } - .hover\\:test-sm:hover { + .hover\:test-sm:hover { test-property: 1rem; } @media (min-width: 400px) { - .sm\\:test-sm { + .sm\:test-sm { test-property: 1rem; } } @@ -1314,11 +1314,11 @@ test('plugins with extra options can be created using the `createPlugin.withOpti .banana-lg { test-property: 3rem; } - .hover\\:banana-sm:hover { + .hover\:banana-sm:hover { test-property: 1rem; } @media (min-width: 400px) { - .sm\\:banana-sm { + .sm\:banana-sm { test-property: 1rem; } } @@ -1356,7 +1356,7 @@ test('plugins should cache correctly', () => { } @media (min-width: 400px) { - .sm\\:banana { + .sm\:banana { position: absolute; } } @@ -1368,7 +1368,7 @@ test('plugins should cache correctly', () => { } @media (min-width: 400px) { - .sm\\:apple { + .sm\:apple { position: absolute; } } @@ -1431,11 +1431,11 @@ test('plugins created using `createPlugin.withOptions` do not need to be invoked .banana-lg { test-property: 3rem; } - .hover\\:banana-sm:hover { + .hover\:banana-sm:hover { test-property: 1rem; } @media (min-width: 400px) { - .sm\\:banana-sm { + .sm\:banana-sm { test-property: 1rem; } } @@ -1486,11 +1486,11 @@ test('the configFunction parameter is optional when using the `createPlugin.with .banana-lg { test-property: 3px; } - .hover\\:banana-sm:hover { + .hover\:banana-sm:hover { test-property: 1px; } @media (min-width: 400px) { - .sm\\:banana-sm { + .sm\:banana-sm { test-property: 1px; } } @@ -1528,7 +1528,7 @@ test('keyframes are not escaped', () => { } } - .foo-\\[abc\\] { + .foo-\[abc\] { animation: abc 1s infinite; } @@ -1539,7 +1539,7 @@ test('keyframes are not escaped', () => { } } - .md\\:foo-\\[def\\] { + .md\:foo-\[def\] { animation: def 1s infinite; } } diff --git a/tests/customConfig.test.js b/tests/customConfig.test.js index 23713a552..baea15d76 100644 --- a/tests/customConfig.test.js +++ b/tests/customConfig.test.js @@ -11,7 +11,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) { - .mobile\\:font-bold { + .mobile\:font-bold { font-weight: 700; } } @@ -32,7 +32,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) { - .mobile\\:font-bold { + .mobile\:font-bold { font-weight: 700; } } @@ -48,7 +48,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) { - .mobile\\:font-bold { + .mobile\:font-bold { font-weight: 700; } } @@ -71,7 +71,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) { - .mobile\\:font-bold { + .mobile\:font-bold { font-weight: 700; } } @@ -96,7 +96,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) { - .mobile\\:font-bold { + .mobile\:font-bold { font-weight: 700; } } @@ -122,7 +122,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) { - .mobile\\:font-bold { + .mobile\:font-bold { font-weight: 700; } } @@ -148,7 +148,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) { - .mobile\\:font-bold { + .mobile\:font-bold { font-weight: 700; } } @@ -174,7 +174,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) { - .mobile\\:font-bold { + .mobile\:font-bold { font-weight: 700; } } diff --git a/tests/dark-mode.test.js b/tests/dark-mode.test.js index 1aab1c85c..940339152 100644 --- a/tests/dark-mode.test.js +++ b/tests/dark-mode.test.js @@ -15,7 +15,7 @@ it('should be possible to use the darkMode "class" mode', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .dark .dark\\:font-bold { + .dark .dark\:font-bold { font-weight: 700; } `) @@ -38,7 +38,7 @@ it('should be possible to use the darkMode "media" mode', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` @media (prefers-color-scheme: dark) { - .dark\\:font-bold { + .dark\:font-bold { font-weight: 700; } } @@ -61,7 +61,7 @@ it('should default to the `media` mode when no mode is provided', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` @media (prefers-color-scheme: dark) { - .dark\\:font-bold { + .dark\:font-bold { font-weight: 700; } } @@ -85,7 +85,7 @@ it('should default to the `media` mode when mode is set to `false`', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` @media (prefers-color-scheme: dark) { - .dark\\:font-bold { + .dark\:font-bold { font-weight: 700; } } diff --git a/tests/experimental.test.js b/tests/experimental.test.js index 16d346555..2bd7b4da4 100644 --- a/tests/experimental.test.js +++ b/tests/experimental.test.js @@ -47,7 +47,7 @@ test('experimental universal selector improvements (pseudo hover)', () => { return run(input, config).then((result) => { expect(result.css).toMatchCss(css` - .hover\\:shadow { + .hover\:shadow { --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; @@ -57,7 +57,7 @@ test('experimental universal selector improvements (pseudo hover)', () => { resize: both; } - .hover\\:shadow:hover { + .hover\:shadow:hover { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); @@ -80,7 +80,7 @@ test('experimental universal selector improvements (multiple classes: group)', ( return run(input, config).then((result) => { expect(result.css).toMatchCss(css` - .group-hover\\:shadow { + .group-hover\:shadow { --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; @@ -90,7 +90,7 @@ test('experimental universal selector improvements (multiple classes: group)', ( resize: both; } - .group:hover .group-hover\\:shadow { + .group:hover .group-hover\:shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); @@ -145,7 +145,7 @@ test('experimental universal selector improvements (hover:divide-y)', () => { return run(input, config).then((result) => { expect(result.css).toMatchCss(css` - .hover\\:divide-y > * { + .hover\:divide-y > * { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); } @@ -154,7 +154,7 @@ test('experimental universal selector improvements (hover:divide-y)', () => { resize: both; } - .hover\\:divide-y:hover > :not([hidden]) ~ :not([hidden]) { + .hover\:divide-y:hover > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); diff --git a/tests/extractor-edge-cases.test.js b/tests/extractor-edge-cases.test.js index 01f780166..f94e31c12 100644 --- a/tests/extractor-edge-cases.test.js +++ b/tests/extractor-edge-cases.test.js @@ -9,7 +9,7 @@ test('PHP arrays', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .max-w-\\[16rem\\] { + .max-w-\[16rem\] { max-width: 16rem; } `) @@ -21,7 +21,7 @@ test('arbitrary values with quotes', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .content-\\[\\'hello\\]\\'\\] { + .content-\[\'hello\]\'\] { content: 'hello]'; } `) diff --git a/tests/layer-at-rules.test.js b/tests/layer-at-rules.test.js index 270fa1988..af5218c23 100644 --- a/tests/layer-at-rules.test.js +++ b/tests/layer-at-rules.test.js @@ -40,10 +40,10 @@ test('custom user-land utilities', () => { .align-banana { text-align: banana; } - .hover\\:align-banana:hover { + .hover\:align-banana:hover { text-align: banana; } - .focus\\:hover\\:align-chocolate:hover:focus { + .focus\:hover\:align-chocolate:hover:focus { text-align: chocolate; } `) diff --git a/tests/match-components.test.js b/tests/match-components.test.js index 9641dadca..f4e1f6aa2 100644 --- a/tests/match-components.test.js +++ b/tests/match-components.test.js @@ -47,16 +47,16 @@ it('should be possible to matchComponents', () => { --tw-shadow: 0 0 #0000; } - .card-\\[\\#0088cc\\] { + .card-\[\#0088cc\] { color: #0088cc; } - .card-\\[\\#0088cc\\] .card-header { + .card-\[\#0088cc\] .card-header { border-top-width: 3px; border-top-color: #0088cc; } - .card-\\[\\#0088cc\\] .card-footer { + .card-\[\#0088cc\] .card-footer { border-bottom-width: 3px; border-bottom-color: #0088cc; } @@ -75,16 +75,16 @@ it('should be possible to matchComponents', () => { var(--tw-shadow); } - .hover\\:card-\\[\\#f0f\\]:hover { + .hover\:card-\[\#f0f\]:hover { color: #f0f; } - .hover\\:card-\\[\\#f0f\\]:hover .card-header { + .hover\:card-\[\#f0f\]:hover .card-header { border-top-width: 3px; border-top-color: #f0f; } - .hover\\:card-\\[\\#f0f\\]:hover .card-footer { + .hover\:card-\[\#f0f\]:hover .card-footer { border-bottom-width: 3px; border-bottom-color: #f0f; } diff --git a/tests/negative-prefix.test.js b/tests/negative-prefix.test.js index 9f36cbf98..92e9e368f 100644 --- a/tests/negative-prefix.test.js +++ b/tests/negative-prefix.test.js @@ -76,7 +76,7 @@ test('being an asshole', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - .-mt-\\[10px\\] { + .-mt-\[10px\] { margin-top: 55px; } `) @@ -95,7 +95,7 @@ test('being a real asshole', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - .-mt-\\[10px\\] { + .-mt-\[10px\] { margin-top: -55px; } `) @@ -209,7 +209,7 @@ test('arbitrary values', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - .-mt-\\[10px\\] { + .-mt-\[10px\] { margin-top: -10px; } `) diff --git a/tests/parallel-variants.test.js b/tests/parallel-variants.test.js index ea9cd9964..e92bee89b 100644 --- a/tests/parallel-variants.test.js +++ b/tests/parallel-variants.test.js @@ -21,22 +21,22 @@ test('basic parallel variants', async () => { .font-normal { font-weight: 400; } - .test\\:font-bold *::test { + .test\:font-bold *::test { font-weight: 700; } - .test\\:font-medium *::test { + .test\:font-medium *::test { font-weight: 500; } - .hover\\:test\\:font-black *::test:hover { + .hover\:test\:font-black *::test:hover { font-weight: 900; } - .test\\:font-bold::test { + .test\:font-bold::test { font-weight: 700; } - .test\\:font-medium::test { + .test\:font-medium::test { font-weight: 500; } - .hover\\:test\\:font-black::test:hover { + .hover\:test\:font-black::test:hover { font-weight: 900; } `) diff --git a/tests/resolve-defaults-at-rules.test.js b/tests/resolve-defaults-at-rules.test.js index 1d93aa9b7..2e23ab149 100644 --- a/tests/resolve-defaults-at-rules.test.js +++ b/tests/resolve-defaults-at-rules.test.js @@ -61,9 +61,9 @@ test('with pseudo-class variants', async () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .hover\\:scale-x-110, - .focus\\:rotate-3, - .hover\\:focus\\:skew-y-6 { + .hover\:scale-x-110, + .focus\:rotate-3, + .hover\:focus\:skew-y-6 { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; @@ -76,15 +76,15 @@ test('with pseudo-class variants', async () => { scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } /* --- */ - .hover\\:scale-x-110:hover { + .hover\:scale-x-110:hover { --tw-scale-x: 1.1; transform: var(--tw-transform); } - .focus\\:rotate-3:focus { + .focus\:rotate-3:focus { --tw-rotate: 3deg; transform: var(--tw-transform); } - .hover\\:focus\\:skew-y-6:focus:hover { + .hover\:focus\:skew-y-6:focus:hover { --tw-skew-y: 6deg; transform: var(--tw-transform); } @@ -106,8 +106,8 @@ test('with pseudo-element variants', async () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .before\\:scale-x-110::before, - .after\\:rotate-3::after { + .before\:scale-x-110::before, + .after\:rotate-3::after { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; @@ -120,12 +120,12 @@ test('with pseudo-element variants', async () => { scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } /* --- */ - .before\\:scale-x-110::before { + .before\:scale-x-110::before { content: ''; --tw-scale-x: 1.1; transform: var(--tw-transform); } - .after\\:rotate-3::after { + .after\:rotate-3::after { content: ''; --tw-rotate: 3deg; transform: var(--tw-transform); @@ -148,8 +148,8 @@ test('with multi-class variants', async () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .group-hover\\:scale-x-110, - .peer-focus\\:rotate-3 { + .group-hover\:scale-x-110, + .peer-focus\:rotate-3 { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; @@ -162,11 +162,11 @@ test('with multi-class variants', async () => { scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } /* --- */ - .group:hover .group-hover\\:scale-x-110 { + .group:hover .group-hover\:scale-x-110 { --tw-scale-x: 1.1; transform: var(--tw-transform); } - .peer:focus ~ .peer-focus\\:rotate-3 { + .peer:focus ~ .peer-focus\:rotate-3 { --tw-rotate: 3deg; transform: var(--tw-transform); } @@ -190,8 +190,8 @@ test('with multi-class pseudo-element variants', async () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .group-hover\\:before\\:scale-x-110::before, - .peer-focus\\:after\\:rotate-3::after { + .group-hover\:before\:scale-x-110::before, + .peer-focus\:after\:rotate-3::after { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; @@ -204,12 +204,12 @@ test('with multi-class pseudo-element variants', async () => { scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } /* --- */ - .group:hover .group-hover\\:before\\:scale-x-110::before { + .group:hover .group-hover\:before\:scale-x-110::before { content: ''; --tw-scale-x: 1.1; transform: var(--tw-transform); } - .peer:focus ~ .peer-focus\\:after\\:rotate-3::after { + .peer:focus ~ .peer-focus\:after\:rotate-3::after { content: ''; --tw-rotate: 3deg; transform: var(--tw-transform); @@ -238,8 +238,8 @@ test('with multi-class pseudo-element and pseudo-class variants', async () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .group-hover\\:hover\\:before\\:scale-x-110::before, - .peer-focus\\:focus\\:after\\:rotate-3::after { + .group-hover\:hover\:before\:scale-x-110::before, + .peer-focus\:focus\:after\:rotate-3::after { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; @@ -252,12 +252,12 @@ test('with multi-class pseudo-element and pseudo-class variants', async () => { scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } /* --- */ - .group:hover .group-hover\\:hover\\:before\\:scale-x-110::before:hover { + .group:hover .group-hover\:hover\:before\:scale-x-110::before:hover { content: ''; --tw-scale-x: 1.1; transform: var(--tw-transform); } - .peer:focus ~ .peer-focus\\:focus\\:after\\:rotate-3::after:focus { + .peer:focus ~ .peer-focus\:focus\:after\:rotate-3::after:focus { content: ''; --tw-rotate: 3deg; transform: var(--tw-transform); @@ -485,7 +485,7 @@ test('with borders', async () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` .border, - .md\\:border-2 { + .md\:border-2 { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); } @@ -498,7 +498,7 @@ test('with borders', async () => { border-color: rgb(239 68 68 / var(--tw-border-opacity)); } @media (min-width: 768px) { - .md\\:border-2 { + .md\:border-2 { border-width: 2px; } } @@ -521,7 +521,7 @@ test('with shadows', async () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` .shadow, - .md\\:shadow-xl { + .md\:shadow-xl { --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; @@ -549,11 +549,11 @@ test('with shadows', async () => { var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } - .ring-black\\/25 { + .ring-black\/25 { --tw-ring-color: rgb(0 0 0 / 0.25); } @media (min-width: 768px) { - .md\\:shadow-xl { + .md\:shadow-xl { --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); diff --git a/tests/safelist.test.js b/tests/safelist.test.js index 6325cfad3..39b47e7ac 100644 --- a/tests/safelist.test.js +++ b/tests/safelist.test.js @@ -22,7 +22,7 @@ it('should safelist strings', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - .mt-\\[20px\\] { + .mt-\[20px\] { margin-top: 20px; } @@ -39,7 +39,7 @@ it('should safelist strings', () => { color: rgb(229 231 235 / var(--tw-text-opacity)); } - .hover\\:underline:hover { + .hover\:underline:hover { text-decoration: underline; } `) @@ -73,12 +73,12 @@ it('should safelist based on a pattern regex', () => { text-transform: uppercase; } - .hover\\:bg-red-100:hover { + .hover\:bg-red-100:hover { --tw-bg-opacity: 1; background-color: rgb(254 226 226 / var(--tw-bg-opacity)); } - .hover\\:bg-red-200:hover { + .hover\:bg-red-200:hover { --tw-bg-opacity: 1; background-color: rgb(254 202 202 / var(--tw-bg-opacity)); } @@ -122,12 +122,12 @@ it('should not generate duplicates', () => { text-transform: uppercase; } - .hover\\:bg-red-100:hover { + .hover\:bg-red-100:hover { --tw-bg-opacity: 1; background-color: rgb(254 226 226 / var(--tw-bg-opacity)); } - .hover\\:bg-red-200:hover { + .hover\:bg-red-200:hover { --tw-bg-opacity: 1; background-color: rgb(254 202 202 / var(--tw-bg-opacity)); } diff --git a/tests/tailwind-screens.test.js b/tests/tailwind-screens.test.js index b52edcad7..784bf40c7 100644 --- a/tests/tailwind-screens.test.js +++ b/tests/tailwind-screens.test.js @@ -18,11 +18,11 @@ test('class variants are inserted at `@tailwind variants`', async () => { .font-bold { font-weight: 700; } - .hover\\:font-bold:hover { + .hover\:font-bold:hover { font-weight: 700; } @media (min-width: 768px) { - .md\\:font-bold { + .md\:font-bold { font-weight: 700; } } @@ -51,11 +51,11 @@ test('`@tailwind screens` works as an alias for `@tailwind variants`', async () .font-bold { font-weight: 700; } - .hover\\:font-bold:hover { + .hover\:font-bold:hover { font-weight: 700; } @media (min-width: 768px) { - .md\\:font-bold { + .md\:font-bold { font-weight: 700; } } diff --git a/tests/util/run.js b/tests/util/run.js index 71c7fc4fe..528938540 100644 --- a/tests/util/run.js +++ b/tests/util/run.js @@ -10,10 +10,6 @@ export function run(input, config, plugin = tailwind) { }) } -function syntax(templates) { - return templates.join('') -} - -export let css = syntax -export let html = syntax -export let javascript = syntax +export let css = String.raw +export let html = String.raw +export let javascript = String.raw diff --git a/tests/variants.test.js b/tests/variants.test.js index f38c3919d..32c08b93f 100644 --- a/tests/variants.test.js +++ b/tests/variants.test.js @@ -38,12 +38,12 @@ test('order matters and produces different behaviour', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - .hover\\:file\\:bg-pink-600::file-selector-button:hover { + .hover\:file\:bg-pink-600::file-selector-button:hover { --tw-bg-opacity: 1; background-color: rgb(219 39 119 / var(--tw-bg-opacity)); } - .file\\:hover\\:bg-pink-600:hover::file-selector-button { + .file\:hover\:bg-pink-600:hover::file-selector-button { --tw-bg-opacity: 1; background-color: rgb(219 39 119 / var(--tw-bg-opacity)); } @@ -70,7 +70,7 @@ describe('custom advanced variants', () => { return run('@tailwind components;@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - :where(.prose-headings\\:text-center) :is(h1, h2, h3, h4) { + :where(.prose-headings\:text-center) :is(h1, h2, h3, h4) { text-align: center; } `) @@ -98,11 +98,11 @@ describe('custom advanced variants', () => { return run('@tailwind components;@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - :where(.hover\\:prose-headings\\:text-center) :is(h1, h2, h3, h4):hover { + :where(.hover\:prose-headings\:text-center) :is(h1, h2, h3, h4):hover { text-align: center; } - :where(.prose-headings\\:hover\\:text-center:hover) :is(h1, h2, h3, h4) { + :where(.prose-headings\:hover\:text-center:hover) :is(h1, h2, h3, h4) { text-align: center; } `) @@ -130,11 +130,11 @@ describe('custom advanced variants', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - .group:hover :where(.group-hover\\:prose-headings\\:text-center) :is(h1, h2, h3, h4) { + .group:hover :where(.group-hover\:prose-headings\:text-center) :is(h1, h2, h3, h4) { text-align: center; } - :where(.group:hover .prose-headings\\:group-hover\\:text-center) :is(h1, h2, h3, h4) { + :where(.group:hover .prose-headings\:group-hover\:text-center) :is(h1, h2, h3, h4) { text-align: center; } `) @@ -155,7 +155,7 @@ test('stacked peer variants', async () => { ` let expected = css` - .peer:disabled:focus:hover ~ .peer-disabled\\:peer-focus\\:peer-hover\\:border-blue-500 { + .peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:border-blue-500 { --tw-border-opacity: 1; border-color: rgb(59 130 246 / var(--tw-border-opacity)); } @@ -197,7 +197,7 @@ it('should properly handle keyframes with multiple variants', async () => { } } - .hover\\:animate-spin:hover { + .hover\:animate-spin:hover { animation: spin 1s linear infinite; } @@ -213,7 +213,7 @@ it('should properly handle keyframes with multiple variants', async () => { } } - .hover\\:animate-bounce:hover { + .hover\:animate-bounce:hover { animation: bounce 1s infinite; } @@ -223,7 +223,7 @@ it('should properly handle keyframes with multiple variants', async () => { } } - .focus\\:animate-spin:focus { + .focus\:animate-spin:focus { animation: spin 1s linear infinite; } @@ -239,7 +239,7 @@ it('should properly handle keyframes with multiple variants', async () => { } } - .focus\\:animate-bounce:focus { + .focus\:animate-bounce:focus { animation: bounce 1s infinite; } `) @@ -263,7 +263,7 @@ test('custom addVariant with nested media & format shorthand', () => { return expect(result.css).toMatchFormattedCss(css` @supports (hover: hover) { @media (print) { - .magic\\:text-center:disabled { + .magic\:text-center:disabled { text-align: center; } }