Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve css expectations in tests #5819

Merged
merged 2 commits into from
Oct 18, 2021
Merged

Improve css expectations in tests #5819

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5d5024f
use String.raw for css escapes
RobinMalfait Oct 18, 2021
118c02d
use String.raw in integration tests as well
RobinMalfait Oct 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions integrations/parcel/tests/integration.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ describe.skip('watcher', () => {
font-weight: 700;
}
@media (min-width: 768px) {
.md\\:font-medium {
.md\:font-medium {
font-weight: 500;
}
}
Expand Down Expand Up @@ -153,7 +153,7 @@ describe.skip('watcher', () => {
font-weight: bold;
}
@media (min-width: 800px) {
.md\\:font-medium {
.md\:font-medium {
font-weight: 500;
}
}
Expand Down
4 changes: 2 additions & 2 deletions integrations/postcss-cli/tests/integration.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ describe('watcher', () => {
font-weight: 700;
}
@media (min-width: 768px) {
.md\\:font-medium {
.md\:font-medium {
font-weight: 500;
}
}
Expand Down Expand Up @@ -132,7 +132,7 @@ describe('watcher', () => {
font-weight: bold;
}
@media (min-width: 800px) {
.md\\:font-medium {
.md\:font-medium {
font-weight: 500;
}
}
Expand Down
4 changes: 2 additions & 2 deletions integrations/rollup/tests/integration.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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;
}
}
Expand Down
6 changes: 1 addition & 5 deletions integrations/syntax.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }
4 changes: 2 additions & 2 deletions integrations/tailwindcss-cli/tests/integration.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ describe('watcher', () => {
font-weight: 700;
}
@media (min-width: 768px) {
.md\\:font-medium {
.md\:font-medium {
font-weight: 500;
}
}
Expand Down Expand Up @@ -225,7 +225,7 @@ describe('watcher', () => {
font-weight: bold;
}
@media (min-width: 800px) {
.md\\:font-medium {
.md\:font-medium {
font-weight: 500;
}
}
Expand Down
4 changes: 2 additions & 2 deletions integrations/vite/tests/integration.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ describe('watcher', () => {
font-weight: 700;
}
@media (min-width: 768px) {
.md\\:font-medium {
.md\:font-medium {
font-weight: 500;
}
}
Expand Down Expand Up @@ -158,7 +158,7 @@ describe('watcher', () => {
font-weight: bold;
}
@media (min-width: 800px) {
.md\\:font-medium {
.md\:font-medium {
font-weight: 500;
}
}
Expand Down
4 changes: 2 additions & 2 deletions integrations/webpack-4/tests/integration.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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;
}
}
Expand Down
4 changes: 2 additions & 2 deletions integrations/webpack-5/tests/integration.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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;
}
}
Expand Down
4 changes: 2 additions & 2 deletions tests/animations.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
}
`)
Expand Down
23 changes: 15 additions & 8 deletions tests/arbitrary-values.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,24 +44,24 @@ 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);
}

.bg-gradient-to-r {
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);
}
`)
Expand All @@ -86,15 +86,22 @@ it('should handle unknown typehints', () => {
let config = { content: [{ raw: html`<div class="w-[length:12px]"></div>` }] }

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

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: [
{
Expand Down Expand Up @@ -185,13 +192,13 @@ it('should convert _ to spaces', () => {

it('should not convert escaped underscores with spaces', () => {
let config = {
content: [{ raw: html` <div class="content-['snake\\_case']"></div> ` }],
content: [{ raw: `<div class="content-['snake\\_case']"></div>` }],
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';
}
`)
Expand Down
34 changes: 14 additions & 20 deletions tests/color-opacity-modifiers.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
`)
Expand All @@ -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));
}
Expand All @@ -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));
}
`)
Expand All @@ -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);
}
`)
Expand All @@ -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);
}
`)
Expand All @@ -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(``)
})
})
Expand Down Expand Up @@ -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);
}
`)
Expand Down Expand Up @@ -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);
}
`)
Expand Down
6 changes: 3 additions & 3 deletions tests/containerPlugin.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down
Loading