Skip to content

Commit f12c0e1

Browse files
RobinMalfaitRobinMalfait
authored
Improve css expectations in tests (#5819)
* use String.raw for css escapes This will allow us to write code like: ```css .mobile\:font-bold {} ``` Instead of ```css .mobile\\:font-bold {} ``` Which resembles "real" css way better in our tests. * use String.raw in integration tests as well
1 parent 5809c4d commit f12c0e1

26 files changed

+154
-161
lines changed

‎integrations/parcel/tests/integration.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ describe.skip('watcher', () => {
115115
font-weight: 700;
116116
}
117117
@media (min-width: 768px) {
118-
.md\\:font-medium {
118+
.md\:font-medium {
119119
font-weight: 500;
120120
}
121121
}
@@ -153,7 +153,7 @@ describe.skip('watcher', () => {
153153
font-weight: bold;
154154
}
155155
@media (min-width: 800px) {
156-
.md\\:font-medium {
156+
.md\:font-medium {
157157
font-weight: 500;
158158
}
159159
}

‎integrations/postcss-cli/tests/integration.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ describe('watcher', () => {
9595
font-weight: 700;
9696
}
9797
@media (min-width: 768px) {
98-
.md\\:font-medium {
98+
.md\:font-medium {
9999
font-weight: 500;
100100
}
101101
}
@@ -132,7 +132,7 @@ describe('watcher', () => {
132132
font-weight: bold;
133133
}
134134
@media (min-width: 800px) {
135-
.md\\:font-medium {
135+
.md\:font-medium {
136136
font-weight: 500;
137137
}
138138
}

‎integrations/rollup/tests/integration.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch
9090
font-weight: 700;
9191
}
9292
@media (min-width: 768px) {
93-
.md\\:font-medium {
93+
.md\:font-medium {
9494
font-weight: 500;
9595
}
9696
}
@@ -127,7 +127,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch
127127
font-weight: bold;
128128
}
129129
@media (min-width: 800px) {
130-
.md\\:font-medium {
130+
.md\:font-medium {
131131
font-weight: 500;
132132
}
133133
}

‎integrations/syntax.js

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,2 @@
11
// Small helper to allow for css, html and JavaScript highlighting / formatting in most editors.
2-
function syntax(templates) {
3-
return templates.join('')
4-
}
5-
6-
module.exports = { css: syntax, html: syntax, javascript: syntax }
2+
module.exports = { css: String.raw, html: String.raw, javascript: String.raw }

‎integrations/tailwindcss-cli/tests/integration.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@ describe('watcher', () => {
188188
font-weight: 700;
189189
}
190190
@media (min-width: 768px) {
191-
.md\\:font-medium {
191+
.md\:font-medium {
192192
font-weight: 500;
193193
}
194194
}
@@ -225,7 +225,7 @@ describe('watcher', () => {
225225
font-weight: bold;
226226
}
227227
@media (min-width: 800px) {
228-
.md\\:font-medium {
228+
.md\:font-medium {
229229
font-weight: 500;
230230
}
231231
}

‎integrations/vite/tests/integration.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ describe('watcher', () => {
121121
font-weight: 700;
122122
}
123123
@media (min-width: 768px) {
124-
.md\\:font-medium {
124+
.md\:font-medium {
125125
font-weight: 500;
126126
}
127127
}
@@ -158,7 +158,7 @@ describe('watcher', () => {
158158
font-weight: bold;
159159
}
160160
@media (min-width: 800px) {
161-
.md\\:font-medium {
161+
.md\:font-medium {
162162
font-weight: 500;
163163
}
164164
}

‎integrations/webpack-4/tests/integration.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch
9191
font-weight: 700;
9292
}
9393
@media (min-width: 768px) {
94-
.md\\:font-medium {
94+
.md\:font-medium {
9595
font-weight: 500;
9696
}
9797
}
@@ -129,7 +129,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch
129129
font-weight: bold;
130130
}
131131
@media (min-width: 800px) {
132-
.md\\:font-medium {
132+
.md\:font-medium {
133133
font-weight: 500;
134134
}
135135
}

‎integrations/webpack-5/tests/integration.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch
9191
font-weight: 700;
9292
}
9393
@media (min-width: 768px) {
94-
.md\\:font-medium {
94+
.md\:font-medium {
9595
font-weight: 500;
9696
}
9797
}
@@ -129,7 +129,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch
129129
font-weight: bold;
130130
}
131131
@media (min-width: 800px) {
132-
.md\\:font-medium {
132+
.md\:font-medium {
133133
font-weight: 500;
134134
}
135135
}

‎tests/animations.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ test('basic', () => {
3030
opacity: 0;
3131
}
3232
}
33-
.hover\\:animate-ping:hover {
33+
.hover\:animate-ping:hover {
3434
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
3535
}
3636
@keyframes bounce {
@@ -44,7 +44,7 @@ test('basic', () => {
4444
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
4545
}
4646
}
47-
.group:hover .group-hover\\:animate-bounce {
47+
.group:hover .group-hover\:animate-bounce {
4848
animation: bounce 1s infinite;
4949
}
5050
`)

‎tests/arbitrary-values.test.js

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,24 +44,24 @@ it('should support arbitrary values for various background utilities', () => {
4444
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
4545
}
4646
47-
.bg-\\[\\#ff0000\\] {
47+
.bg-\[\#ff0000\] {
4848
--tw-bg-opacity: 1;
4949
background-color: rgb(255 0 0 / var(--tw-bg-opacity));
5050
}
5151
52-
.bg-\\[color\\:var\\(--bg-color\\)\\] {
52+
.bg-\[color\:var\(--bg-color\)\] {
5353
background-color: var(--bg-color);
5454
}
5555
5656
.bg-gradient-to-r {
5757
background-image: linear-gradient(to right, var(--tw-gradient-stops));
5858
}
5959
60-
.bg-\\[url\\(\\'\\/image-1-0\\.png\\'\\)\\] {
60+
.bg-\[url\(\'\/image-1-0\.png\'\)\] {
6161
background-image: url('/image-1-0.png');
6262
}
6363
64-
.bg-\\[url\\:var\\(--image-url\\)\\] {
64+
.bg-\[url\:var\(--image-url\)\] {
6565
background-image: var(--image-url);
6666
}
6767
`)
@@ -86,15 +86,22 @@ it('should handle unknown typehints', () => {
8686
let config = { content: [{ raw: html`<div class="w-[length:12px]"></div>` }] }
8787

8888
return run('@tailwind utilities', config).then((result) => {
89-
return expect(result.css).toMatchFormattedCss(`
90-
.w-\\[length\\:12px\\] {
89+
return expect(result.css).toMatchFormattedCss(css`
90+
.w-\[length\:12px\] {
9191
width: 12px;
9292
}
9393
`)
9494
})
9595
})
9696

9797
it('should convert _ to spaces', () => {
98+
// Using custom css function here, because otherwise with String.raw, we run
99+
// into an issue with `\2c ` escapes. If we use `\2c ` then JS complains
100+
// about strict mode. But `\\2c ` is not what it expected.
101+
function css(templates) {
102+
return templates.join('')
103+
}
104+
98105
let config = {
99106
content: [
100107
{
@@ -185,13 +192,13 @@ it('should convert _ to spaces', () => {
185192

186193
it('should not convert escaped underscores with spaces', () => {
187194
let config = {
188-
content: [{ raw: html` <div class="content-['snake\\_case']"></div> ` }],
195+
content: [{ raw: `<div class="content-['snake\\_case']"></div>` }],
189196
corePlugins: { preflight: false },
190197
}
191198

192199
return run('@tailwind utilities', config).then((result) => {
193200
return expect(result.css).toMatchFormattedCss(css`
194-
.content-\\[\\'snake\\\\_case\\'\\] {
201+
.content-\[\'snake\\_case\'\] {
195202
content: 'snake_case';
196203
}
197204
`)

‎tests/color-opacity-modifiers.test.js

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ test('basic color opacity modifier', async () => {
77

88
return run('@tailwind utilities', config).then((result) => {
99
expect(result.css).toMatchFormattedCss(css`
10-
.bg-red-500\\/50 {
10+
.bg-red-500\/50 {
1111
background-color: rgb(239 68 68 / 0.5);
1212
}
1313
`)
@@ -28,7 +28,7 @@ test('colors with slashes are matched first', async () => {
2828

2929
return run('@tailwind utilities', config).then((result) => {
3030
expect(result.css).toMatchFormattedCss(css`
31-
.bg-red-500\\/50 {
31+
.bg-red-500\/50 {
3232
--tw-bg-opacity: 1;
3333
background-color: rgb(255 0 0 / var(--tw-bg-opacity));
3434
}
@@ -43,7 +43,7 @@ test('arbitrary color opacity modifier', async () => {
4343

4444
return run('@tailwind utilities', config).then((result) => {
4545
expect(result.css).toMatchFormattedCss(css`
46-
.bg-red-500\\/\\[var\\(--opacity\\)\\] {
46+
.bg-red-500\/\[var\(--opacity\)\] {
4747
background-color: rgb(239 68 68 / var(--opacity));
4848
}
4949
`)
@@ -67,11 +67,9 @@ test('arbitrary color with opacity from scale', async () => {
6767
plugins: [],
6868
}
6969

70-
let css = `@tailwind utilities`
71-
72-
return run(css, config).then((result) => {
73-
expect(result.css).toMatchFormattedCss(`
74-
.bg-\\[wheat\\]\\/50 {
70+
return run('@tailwind utilities', config).then((result) => {
71+
expect(result.css).toMatchFormattedCss(css`
72+
.bg-\[wheat\]\/50 {
7573
background-color: rgb(245 222 179 / 0.5);
7674
}
7775
`)
@@ -85,11 +83,9 @@ test('arbitrary color with arbitrary opacity', async () => {
8583
plugins: [],
8684
}
8785

88-
let css = `@tailwind utilities`
89-
90-
return run(css, config).then((result) => {
91-
expect(result.css).toMatchFormattedCss(`
92-
.bg-\\[\\#bada55\\]\\/\\[0\\.2\\] {
86+
return run('@tailwind utilities', config).then((result) => {
87+
expect(result.css).toMatchFormattedCss(css`
88+
.bg-\[\#bada55\]\/\[0\.2\] {
9389
background-color: rgb(186 218 85 / 0.2);
9490
}
9591
`)
@@ -103,9 +99,7 @@ test('undefined theme color with opacity from scale', async () => {
10399
plugins: [],
104100
}
105101

106-
let css = `@tailwind utilities`
107-
108-
return run(css, config).then((result) => {
102+
return run('@tailwind utilities', config).then((result) => {
109103
expect(result.css).toMatchFormattedCss(``)
110104
})
111105
})
@@ -143,7 +137,7 @@ test('function colors are supported', async () => {
143137

144138
return run('@tailwind utilities', config).then((result) => {
145139
expect(result.css).toMatchFormattedCss(css`
146-
.bg-blue\\/50 {
140+
.bg-blue\/50 {
147141
background-color: rgba(var(--colors-blue), 0.5);
148142
}
149143
`)
@@ -171,14 +165,14 @@ test('utilities that support any type are supported', async () => {
171165

172166
return run('@tailwind utilities', config).then((result) => {
173167
expect(result.css).toMatchFormattedCss(css`
174-
.from-red-500\\/50 {
168+
.from-red-500\/50 {
175169
--tw-gradient-from: rgb(239 68 68 / 0.5);
176170
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(239 68 68 / 0));
177171
}
178-
.fill-red-500\\/25 {
172+
.fill-red-500\/25 {
179173
fill: rgb(239 68 68 / 0.25);
180174
}
181-
.placeholder-red-500\\/75::placeholder {
175+
.placeholder-red-500\/75::placeholder {
182176
color: rgb(239 68 68 / 0.75);
183177
}
184178
`)

‎tests/containerPlugin.test.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -326,16 +326,16 @@ test('container can use variants', () => {
326326
return run('@tailwind components', config).then((result) => {
327327
expect(result.css).toMatchFormattedCss(css`
328328
@media (min-width: 1024px) {
329-
.lg\\:hover\\:container:hover {
329+
.lg\:hover\:container:hover {
330330
width: 100%;
331331
}
332332
@media (min-width: 400px) {
333-
.lg\\:hover\\:container:hover {
333+
.lg\:hover\:container:hover {
334334
max-width: 400px;
335335
}
336336
}
337337
@media (min-width: 500px) {
338-
.lg\\:hover\\:container:hover {
338+
.lg\:hover\:container:hover {
339339
max-width: 500px;
340340
}
341341
}

0 commit comments

Comments
 (0)