Skip to content

Commit f12c0e1

Browse files
RobinMalfaitRobinMalfait
authored
Improve css expectations in tests (tailwindlabs#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
`)

0 commit comments

Comments
 (0)