Skip to content

Commit 85d418c

Browse files
thecrypticacethecrypticace
committed
WIP
1 parent a077b35 commit 85d418c

9 files changed

+135
-59
lines changed

‎tests/apply.test.css

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,50 @@
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+
}
148
.basic-example {
249
border-radius: 0.375rem;
350
--tw-bg-opacity: 1;

‎tests/apply.test.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -645,7 +645,6 @@ it('rules with vendor prefixes are still separate when optimizing defaults rules
645645

646646
return run(input, config).then((result) => {
647647
return expect(result.css).toMatchFormattedCss(css`
648-
${defaults}
649648
[type='range']::-moz-range-thumb {
650649
border-color: #e5e7eb;
651650
}
@@ -804,7 +803,6 @@ it('should be possible to apply user css without tailwind directives', () => {
804803

805804
return run(input, config).then((result) => {
806805
return expect(result.css).toMatchFormattedCss(css`
807-
${defaults}
808806
.bop {
809807
color: red;
810808
}
@@ -842,6 +840,7 @@ it('should be possible to apply a class from another rule with multiple selector
842840

843841
return run(input, config).then((result) => {
844842
return expect(result.css).toMatchFormattedCss(css`
843+
${defaults}
845844
.c {
846845
text-decoration-line: underline;
847846
}
@@ -872,6 +871,7 @@ it('should be possible to apply a class from another rule with multiple selector
872871

873872
return run(input, config).then((result) => {
874873
return expect(result.css).toMatchFormattedCss(css`
874+
${defaults}
875875
span,
876876
.b {
877877
text-decoration-line: underline;
@@ -906,6 +906,7 @@ it('should be possible to apply a class from another rule with multiple selector
906906

907907
return run(input, config).then((result) => {
908908
return expect(result.css).toMatchFormattedCss(css`
909+
${defaults}
909910
#a,
910911
.b {
911912
text-decoration-line: underline;
@@ -934,7 +935,6 @@ it('apply can emit defaults in isolated environments without @tailwind directive
934935
// TODO: Do we want this to work?
935936
return run(input, config).then((result) => {
936937
return expect(result.css).toMatchFormattedCss(css`
937-
${defaults}
938938
.foo {
939939
--tw-translate-x: 0;
940940
--tw-translate-y: 0;

‎tests/basic-usage.test.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,9 @@ test('all plugins are executed that match a candidate', () => {
4646

4747
return run(input, config).then((result) => {
4848
expect(result.css).toMatchFormattedCss(css`
49-
${defaults}
49+
${defaults({
50+
defaultBorderColor: 'currentColor',
51+
})}
5052
.bg-green-light {
5153
--tw-bg-opacity: 1;
5254
background-color: rgb(0 128 0 / var(--tw-bg-opacity));
@@ -99,7 +101,9 @@ test('per-plugin colors with the same key can differ when using a custom colors
99101

100102
return run(input, config).then((result) => {
101103
expect(result.css).toMatchFormattedCss(css`
102-
${defaults}
104+
${defaults({
105+
defaultBorderColor: 'currentColor',
106+
})}
103107
.bg-theme {
104108
--tw-bg-opacity: 1;
105109
background-color: rgb(255 0 0 / var(--tw-bg-opacity));
@@ -130,6 +134,7 @@ it('fasly config values still work', () => {
130134

131135
return run(input, config).then((result) => {
132136
expect(result.css).toMatchFormattedCss(css`
137+
${defaults}
133138
.inset-0 {
134139
top: 0;
135140
right: 0;

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,9 @@ test('function colors are supported', async () => {
142142

143143
return run('@tailwind utilities', config).then((result) => {
144144
expect(result.css).toMatchFormattedCss(css`
145-
${defaults}
145+
${defaults({
146+
defaultBorderColor: 'currentColor',
147+
})}
146148
.bg-blue\/50 {
147149
background-color: rgba(var(--colors-blue), 0.5);
148150
}

‎tests/customConfig.test.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,10 @@ test('the default config can be removed by using an empty presets key in a prese
274274

275275
return run('@tailwind utilities', config).then((result) => {
276276
expect(result.css).toMatchFormattedCss(css`
277-
${defaults}
277+
${defaults({
278+
defaultBorderColor: 'currentColor',
279+
defaultRingColor: 'rgb(147 197 253 / 0.5)',
280+
})}
278281
.min-h-primary {
279282
min-height: 48px;
280283
}

‎tests/negative-prefix.test.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,9 @@ test('a color', () => {
208208

209209
return run('@tailwind utilities', config).then((result) => {
210210
return expect(result.css).toMatchCss(css`
211-
${defaults}
211+
${defaults({
212+
defaultBorderColor: 'currentColor',
213+
})}
212214
`)
213215
})
214216
})

‎tests/opacity.test.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,9 @@ test('colors defined as functions work when opacity plugins are disabled', () =>
7878

7979
return run('@tailwind utilities', config).then((result) => {
8080
expect(result.css).toMatchCss(css`
81-
${defaults}
81+
${defaults({
82+
defaultBorderColor: 'currentColor',
83+
})}
8284
.divide-primary > :not([hidden]) ~ :not([hidden]) {
8385
border-color: rgb(var(--color-primary));
8486
}

‎tests/plugins/gradientColorStops.test.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,9 @@ test('opacity variables are given to colors defined as closures', () => {
3232

3333
return run('@tailwind utilities', config).then((result) => {
3434
expect(result.css).toMatchFormattedCss(css`
35-
${defaults}
35+
${defaults({
36+
defaultBorderColor: 'currentColor',
37+
})}
3638
.from-primary {
3739
--tw-gradient-from: rgb(31, 31, 31);
3840
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31, 31, 31, 0));

‎tests/util/defaults.js

Lines changed: 62 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,64 @@
11
import { css } from './strings'
22

3-
export const defaults = css`
4-
*,
5-
::before,
6-
::after {
7-
--tw-translate-x: 0;
8-
--tw-translate-y: 0;
9-
--tw-rotate: 0;
10-
--tw-skew-x: 0;
11-
--tw-skew-y: 0;
12-
--tw-scale-x: 1;
13-
--tw-scale-y: 1;
14-
--tw-pan-x: ;
15-
--tw-pan-y: ;
16-
--tw-pinch-zoom: ;
17-
--tw-scroll-snap-strictness: proximity;
18-
border-color: #e5e7eb;
19-
--tw-ordinal: ;
20-
--tw-slashed-zero: ;
21-
--tw-numeric-figure: ;
22-
--tw-numeric-spacing: ;
23-
--tw-numeric-fraction: ;
24-
--tw-ring-inset: ;
25-
--tw-ring-offset-width: 0px;
26-
--tw-ring-offset-color: #fff;
27-
--tw-ring-color: rgb(59 130 246 / 0.5);
28-
--tw-ring-offset-shadow: 0 0 #0000;
29-
--tw-ring-shadow: 0 0 #0000;
30-
--tw-shadow: 0 0 #0000;
31-
--tw-shadow-colored: 0 0 #0000;
32-
--tw-blur: ;
33-
--tw-brightness: ;
34-
--tw-contrast: ;
35-
--tw-grayscale: ;
36-
--tw-hue-rotate: ;
37-
--tw-invert: ;
38-
--tw-saturate: ;
39-
--tw-sepia: ;
40-
--tw-drop-shadow: ;
41-
--tw-backdrop-blur: ;
42-
--tw-backdrop-brightness: ;
43-
--tw-backdrop-contrast: ;
44-
--tw-backdrop-grayscale: ;
45-
--tw-backdrop-hue-rotate: ;
46-
--tw-backdrop-invert: ;
47-
--tw-backdrop-opacity: ;
48-
--tw-backdrop-saturate: ;
49-
--tw-backdrop-sepia: ;
50-
}
51-
`
3+
/**
4+
* @param {object} param0
5+
* @param {string} [param0.defaultBorderColor]
6+
* @param {string} [param0.defaultRingColor]
7+
* @returns {string}
8+
*/
9+
export function defaults({
10+
defaultBorderColor = `#e5e7eb`,
11+
defaultRingColor = `rgb(59 130 246 / 0.5)`,
12+
} = {}) {
13+
return css`
14+
*,
15+
::before,
16+
::after {
17+
--tw-translate-x: 0;
18+
--tw-translate-y: 0;
19+
--tw-rotate: 0;
20+
--tw-skew-x: 0;
21+
--tw-skew-y: 0;
22+
--tw-scale-x: 1;
23+
--tw-scale-y: 1;
24+
--tw-pan-x: ;
25+
--tw-pan-y: ;
26+
--tw-pinch-zoom: ;
27+
--tw-scroll-snap-strictness: proximity;
28+
border-color: ${defaultBorderColor};
29+
--tw-ordinal: ;
30+
--tw-slashed-zero: ;
31+
--tw-numeric-figure: ;
32+
--tw-numeric-spacing: ;
33+
--tw-numeric-fraction: ;
34+
--tw-ring-inset: ;
35+
--tw-ring-offset-width: 0px;
36+
--tw-ring-offset-color: #fff;
37+
--tw-ring-color: ${defaultRingColor};
38+
--tw-ring-offset-shadow: 0 0 #0000;
39+
--tw-ring-shadow: 0 0 #0000;
40+
--tw-shadow: 0 0 #0000;
41+
--tw-shadow-colored: 0 0 #0000;
42+
--tw-blur: ;
43+
--tw-brightness: ;
44+
--tw-contrast: ;
45+
--tw-grayscale: ;
46+
--tw-hue-rotate: ;
47+
--tw-invert: ;
48+
--tw-saturate: ;
49+
--tw-sepia: ;
50+
--tw-drop-shadow: ;
51+
--tw-backdrop-blur: ;
52+
--tw-backdrop-brightness: ;
53+
--tw-backdrop-contrast: ;
54+
--tw-backdrop-grayscale: ;
55+
--tw-backdrop-hue-rotate: ;
56+
--tw-backdrop-invert: ;
57+
--tw-backdrop-opacity: ;
58+
--tw-backdrop-saturate: ;
59+
--tw-backdrop-sepia: ;
60+
}
61+
`
62+
}
63+
64+
defaults.toString = () => defaults()

0 commit comments

Comments
 (0)