Skip to content

Commit c2ee08c

Browse files
committed
WIP
1 parent 85d418c commit c2ee08c

36 files changed

+35
-613
lines changed

src/lib/expandTailwindAtRules.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -209,8 +209,6 @@ export default function expandTailwindAtRules(context) {
209209
// compiled in an isolated environment like CSS modules
210210
if (layerNodes.base) {
211211
layerNodes.base.after(cloneNodes([...defaultNodes], root.source))
212-
} else {
213-
root.prepend(cloneNodes([...defaultNodes], root.source))
214212
}
215213

216214
if (layerNodes.base) {

tests/animations.test.js

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { run, html, css, defaults } from './util/run'
1+
import { run, html, css } from './util/run'
22

33
test('basic', () => {
44
let config = {
@@ -15,7 +15,6 @@ test('basic', () => {
1515

1616
return run('@tailwind utilities', config).then((result) => {
1717
expect(result.css).toMatchFormattedCss(css`
18-
${defaults}
1918
@keyframes spin {
2019
to {
2120
transform: rotate(360deg);
@@ -69,7 +68,6 @@ test('custom', () => {
6968

7069
return run('@tailwind utilities', config).then((result) => {
7170
expect(result.css).toMatchFormattedCss(css`
72-
${defaults}
7371
@keyframes one {
7472
to {
7573
transform: rotate(360deg);
@@ -100,7 +98,6 @@ test('custom prefixed', () => {
10098

10199
return run('@tailwind utilities', config).then((result) => {
102100
expect(result.css).toMatchFormattedCss(css`
103-
${defaults}
104101
@keyframes tw-one {
105102
to {
106103
transform: rotate(360deg);
@@ -127,7 +124,6 @@ test('multiple', () => {
127124

128125
return run('@tailwind utilities', config).then((result) => {
129126
expect(result.css).toMatchFormattedCss(css`
130-
${defaults}
131127
@keyframes bounce {
132128
0%,
133129
100% {
@@ -169,7 +165,6 @@ test('multiple custom', () => {
169165

170166
return run('@tailwind utilities', config).then((result) => {
171167
expect(result.css).toMatchFormattedCss(css`
172-
${defaults}
173168
@keyframes one {
174169
to {
175170
transform: rotate(360deg);

tests/apply.test.css

Lines changed: 0 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,3 @@
1-
*,
2-
::before,
3-
::after {
4-
--tw-translate-x: 0;
5-
--tw-translate-y: 0;
6-
--tw-rotate: 0;
7-
--tw-skew-x: 0;
8-
--tw-skew-y: 0;
9-
--tw-scale-x: 1;
10-
--tw-scale-y: 1;
11-
--tw-pan-x: ;
12-
--tw-pan-y: ;
13-
--tw-pinch-zoom: ;
14-
--tw-scroll-snap-strictness: proximity;
15-
border-color: #e5e7eb;
16-
--tw-ordinal: ;
17-
--tw-slashed-zero: ;
18-
--tw-numeric-figure: ;
19-
--tw-numeric-spacing: ;
20-
--tw-numeric-fraction: ;
21-
--tw-ring-inset: ;
22-
--tw-ring-offset-width: 0px;
23-
--tw-ring-offset-color: #fff;
24-
--tw-ring-color: rgb(59 130 246 / 0.5);
25-
--tw-ring-offset-shadow: 0 0 #0000;
26-
--tw-ring-shadow: 0 0 #0000;
27-
--tw-shadow: 0 0 #0000;
28-
--tw-shadow-colored: 0 0 #0000;
29-
--tw-blur: ;
30-
--tw-brightness: ;
31-
--tw-contrast: ;
32-
--tw-grayscale: ;
33-
--tw-hue-rotate: ;
34-
--tw-invert: ;
35-
--tw-saturate: ;
36-
--tw-sepia: ;
37-
--tw-drop-shadow: ;
38-
--tw-backdrop-blur: ;
39-
--tw-backdrop-brightness: ;
40-
--tw-backdrop-contrast: ;
41-
--tw-backdrop-grayscale: ;
42-
--tw-backdrop-hue-rotate: ;
43-
--tw-backdrop-invert: ;
44-
--tw-backdrop-opacity: ;
45-
--tw-backdrop-saturate: ;
46-
--tw-backdrop-sepia: ;
47-
}
481
.basic-example {
492
border-radius: 0.375rem;
503
--tw-bg-opacity: 1;

tests/apply.test.js

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,6 @@ test('@apply classes from outside a @layer', async () => {
283283

284284
await run(input, config).then((result) => {
285285
return expect(result.css).toMatchFormattedCss(css`
286-
${defaults}
287286
.font-bold {
288287
font-weight: 700;
289288
}
@@ -351,7 +350,6 @@ test('@applying classes from outside a @layer respects the source order', async
351350

352351
await run(input, config).then((result) => {
353352
return expect(result.css).toMatchFormattedCss(css`
354-
${defaults}
355353
.baz {
356354
text-decoration-line: underline;
357355
text-decoration-line: none;
@@ -420,7 +418,6 @@ it('should remove duplicate properties when using apply with similar properties'
420418

421419
return run(input, config).then((result) => {
422420
expect(result.css).toMatchFormattedCss(css`
423-
${defaults}
424421
.foo {
425422
position: absolute;
426423
top: 50%;
@@ -464,7 +461,6 @@ it('should apply all the definitions of a class', () => {
464461

465462
return run(input, config).then((result) => {
466463
return expect(result.css).toMatchFormattedCss(css`
467-
${defaults}
468464
.foo {
469465
position: relative;
470466
--tw-aspect-w: 1;
@@ -546,7 +542,6 @@ it('should not throw when the selector is different (but contains the base parti
546542

547543
return run(input, config).then((result) => {
548544
expect(result.css).toMatchFormattedCss(css`
549-
${defaults}
550545
.bg-gray-500 {
551546
--tw-bg-opacity: 1;
552547
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -682,7 +677,6 @@ it('should be possible to apply user css', () => {
682677

683678
return run(input, config).then((result) => {
684679
return expect(result.css).toMatchFormattedCss(css`
685-
${defaults}
686680
.foo {
687681
color: red;
688682
}
@@ -754,7 +748,6 @@ it('should not apply unrelated siblings when applying something from within atru
754748

755749
return run(input, config).then((result) => {
756750
expect(result.css).toMatchFormattedCss(css`
757-
${defaults}
758751
.foo {
759752
font-weight: bold;
760753
color: green;
@@ -840,7 +833,6 @@ it('should be possible to apply a class from another rule with multiple selector
840833

841834
return run(input, config).then((result) => {
842835
return expect(result.css).toMatchFormattedCss(css`
843-
${defaults}
844836
.c {
845837
text-decoration-line: underline;
846838
}
@@ -871,7 +863,6 @@ it('should be possible to apply a class from another rule with multiple selector
871863

872864
return run(input, config).then((result) => {
873865
return expect(result.css).toMatchFormattedCss(css`
874-
${defaults}
875866
span,
876867
.b {
877868
text-decoration-line: underline;
@@ -906,7 +897,6 @@ it('should be possible to apply a class from another rule with multiple selector
906897

907898
return run(input, config).then((result) => {
908899
return expect(result.css).toMatchFormattedCss(css`
909-
${defaults}
910900
#a,
911901
.b {
912902
text-decoration-line: underline;
@@ -932,18 +922,8 @@ it('apply can emit defaults in isolated environments without @tailwind directive
932922
}
933923
`
934924

935-
// TODO: Do we want this to work?
936925
return run(input, config).then((result) => {
937926
return expect(result.css).toMatchFormattedCss(css`
938-
.foo {
939-
--tw-translate-x: 0;
940-
--tw-translate-y: 0;
941-
--tw-rotate: 0;
942-
--tw-skew-x: 0;
943-
--tw-skew-y: 0;
944-
--tw-scale-x: 1;
945-
--tw-scale-y: 1;
946-
}
947927
.foo:focus {
948928
--tw-rotate: 90deg;
949929
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))

tests/arbitrary-values.test.css

Lines changed: 0 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,3 @@
1-
*,
2-
::before,
3-
::after {
4-
--tw-translate-x: 0;
5-
--tw-translate-y: 0;
6-
--tw-rotate: 0;
7-
--tw-skew-x: 0;
8-
--tw-skew-y: 0;
9-
--tw-scale-x: 1;
10-
--tw-scale-y: 1;
11-
--tw-pan-x: ;
12-
--tw-pan-y: ;
13-
--tw-pinch-zoom: ;
14-
--tw-scroll-snap-strictness: proximity;
15-
border-color: #e5e7eb;
16-
--tw-ordinal: ;
17-
--tw-slashed-zero: ;
18-
--tw-numeric-figure: ;
19-
--tw-numeric-spacing: ;
20-
--tw-numeric-fraction: ;
21-
--tw-ring-inset: ;
22-
--tw-ring-offset-width: 0px;
23-
--tw-ring-offset-color: #fff;
24-
--tw-ring-color: rgb(59 130 246 / 0.5);
25-
--tw-ring-offset-shadow: 0 0 #0000;
26-
--tw-ring-shadow: 0 0 #0000;
27-
--tw-shadow: 0 0 #0000;
28-
--tw-shadow-colored: 0 0 #0000;
29-
--tw-blur: ;
30-
--tw-brightness: ;
31-
--tw-contrast: ;
32-
--tw-grayscale: ;
33-
--tw-hue-rotate: ;
34-
--tw-invert: ;
35-
--tw-saturate: ;
36-
--tw-sepia: ;
37-
--tw-drop-shadow: ;
38-
--tw-backdrop-blur: ;
39-
--tw-backdrop-brightness: ;
40-
--tw-backdrop-contrast: ;
41-
--tw-backdrop-grayscale: ;
42-
--tw-backdrop-hue-rotate: ;
43-
--tw-backdrop-invert: ;
44-
--tw-backdrop-opacity: ;
45-
--tw-backdrop-saturate: ;
46-
--tw-backdrop-sepia: ;
47-
}
481
.inset-\[11px\] {
492
top: 11px;
503
right: 11px;

tests/arbitrary-values.test.js

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import fs from 'fs'
22
import path from 'path'
33

4-
import { run, html, css, defaults } from './util/run'
4+
import { run, html, css } from './util/run'
55

66
test('arbitrary values', () => {
77
let config = {
@@ -27,7 +27,6 @@ it('should be possible to differentiate between decoration utilities', () => {
2727

2828
return run('@tailwind utilities', config).then((result) => {
2929
return expect(result.css).toMatchFormattedCss(css`
30-
${defaults}
3130
.decoration-\[\#ccc\] {
3231
text-decoration-color: #ccc;
3332
}
@@ -50,7 +49,6 @@ it('should support modifiers for arbitrary values that contain the separator', (
5049

5150
return run('@tailwind utilities', config).then((result) => {
5251
return expect(result.css).toMatchFormattedCss(css`
53-
${defaults}
5452
.hover\:bg-\[url\(\'https\:\/\/github\.com\/tailwindlabs\.png\'\)\]:hover {
5553
background-image: url('https://github.com/tailwindlabs.png');
5654
}
@@ -81,7 +79,6 @@ it('should support arbitrary values for various background utilities', () => {
8179

8280
return run('@tailwind utilities', config).then((result) => {
8381
return expect(result.css).toMatchFormattedCss(css`
84-
${defaults}
8582
.bg-red-500 {
8683
--tw-bg-opacity: 1;
8784
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
@@ -121,9 +118,7 @@ it('should not generate any css if an unknown typehint is used', () => {
121118
}
122119

123120
return run('@tailwind utilities', config).then((result) => {
124-
return expect(result.css).toMatchFormattedCss(css`
125-
${defaults}
126-
`)
121+
return expect(result.css).toMatchFormattedCss(css``)
127122
})
128123
})
129124

@@ -132,7 +127,6 @@ it('should handle unknown typehints', () => {
132127

133128
return run('@tailwind utilities', config).then((result) => {
134129
return expect(result.css).toMatchFormattedCss(css`
135-
${defaults}
136130
.w-\[length\:12px\] {
137131
width: 12px;
138132
}
@@ -145,10 +139,7 @@ it('should convert _ to spaces', () => {
145139
// into an issue with `\2c ` escapes. If we use `\2c ` then JS complains
146140
// about strict mode. But `\\2c ` is not what it expected.
147141
function css(templates) {
148-
return `
149-
${defaults}\n
150-
${templates.join('')}
151-
`
142+
return templates.join('')
152143
}
153144

154145
let config = {
@@ -253,7 +244,6 @@ it('should not convert escaped underscores with spaces', () => {
253244

254245
return run('@tailwind utilities', config).then((result) => {
255246
return expect(result.css).toMatchFormattedCss(css`
256-
${defaults}
257247
.content-\[\'snake\\_case\'\] {
258248
--tw-content: 'snake_case';
259249
content: var(--tw-content);
@@ -270,9 +260,7 @@ it('should warn and not generate if arbitrary values are ambiguous', () => {
270260
}
271261

272262
return run('@tailwind utilities', config).then((result) => {
273-
return expect(result.css).toMatchFormattedCss(css`
274-
${defaults}
275-
`)
263+
return expect(result.css).toMatchFormattedCss(css``)
276264
})
277265
})
278266

@@ -285,7 +273,6 @@ it('should support colons in URLs', () => {
285273

286274
return run('@tailwind utilities', config).then((result) => {
287275
return expect(result.css).toMatchFormattedCss(css`
288-
${defaults}
289276
.bg-\[url\(\'https\:\/\/www\.spacejam\.com\/1996\/img\/bg_stars\.gif\'\)\] {
290277
background-image: url('https://www.spacejam.com/1996/img/bg_stars.gif');
291278
}
@@ -302,7 +289,6 @@ it('should support unescaped underscores in URLs', () => {
302289

303290
return run('@tailwind utilities', config).then((result) => {
304291
return expect(result.css).toMatchFormattedCss(`
305-
${defaults}
306292
.bg-\\[url\\(\\'brown_potato\\.jpg\\'\\)\\2c _url\\(\\'red_tomato\\.png\\'\\)\\] {
307293
background-image: url('brown_potato.jpg'), url('red_tomato.png');
308294
}
@@ -323,7 +309,6 @@ it('should be possible to read theme values in arbitrary values (without quotes)
323309

324310
return run('@tailwind utilities', config).then((result) => {
325311
return expect(result.css).toMatchFormattedCss(css`
326-
${defaults}
327312
.w-\[theme\(spacing\.1\)\] {
328313
width: calc(1 * 0.25rem);
329314
}
@@ -347,7 +332,6 @@ it('should be possible to read theme values in arbitrary values (with quotes)',
347332

348333
return run('@tailwind utilities', config).then((result) => {
349334
return expect(result.css).toMatchFormattedCss(css`
350-
${defaults}
351335
.w-\[theme\(\'spacing\.1\'\)\] {
352336
width: calc(1 * 0.25rem);
353337
}

0 commit comments

Comments
 (0)