Skip to content
This repository was archived by the owner on Apr 6, 2021. It is now read-only.

Commit f6ba638

Browse files
adamwathanadamwathan
committed
Add tests for existing @apply functionality
1 parent 3a8a18c commit f6ba638

File tree

3 files changed

+292
-0
lines changed

3 files changed

+292
-0
lines changed

‎tests/10-apply.test.css

+180
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
* {
2+
--tw-shadow: 0 0 #0000;
3+
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
4+
--tw-ring-offset-width: 0px;
5+
--tw-ring-offset-color: #fff;
6+
--tw-ring-color: rgba(59, 130, 246, 0.5);
7+
--tw-ring-offset-shadow: 0 0 #0000;
8+
--tw-ring-shadow: 0 0 #0000;
9+
}
10+
.basic-example {
11+
border-radius: 0.375rem;
12+
--tw-bg-opacity: 1;
13+
background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
14+
padding-top: 0.5rem;
15+
padding-bottom: 0.5rem;
16+
padding-left: 1rem;
17+
padding-right: 1rem;
18+
}
19+
.class-order {
20+
padding: 2rem;
21+
padding-top: 1.75rem;
22+
padding-bottom: 1.75rem;
23+
padding-left: 0.75rem;
24+
padding-right: 0.75rem;
25+
padding-right: 0.25rem;
26+
padding-top: 1rem;
27+
}
28+
.with-additional-properties {
29+
font-weight: 500;
30+
text-align: right;
31+
}
32+
.variants {
33+
font-weight: 600;
34+
}
35+
.variants:hover {
36+
font-weight: 700;
37+
}
38+
.variants:focus {
39+
font-weight: 500;
40+
}
41+
@media (min-width: 1024px) {
42+
.variants {
43+
font-weight: 300;
44+
}
45+
}
46+
@media (min-width: 1280px) {
47+
.variants:focus {
48+
font-weight: 900;
49+
}
50+
}
51+
.only-variants:hover {
52+
font-weight: 700;
53+
}
54+
.only-variants:focus {
55+
font-weight: 500;
56+
}
57+
@media (min-width: 1024px) {
58+
.only-variants {
59+
font-weight: 300;
60+
}
61+
}
62+
@media (min-width: 1280px) {
63+
.only-variants:focus {
64+
font-weight: 900;
65+
}
66+
}
67+
.group:hover .apply-group-variant {
68+
text-align: center;
69+
}
70+
@media (min-width: 1024px) {
71+
.group:hover .apply-group-variant {
72+
text-align: left;
73+
}
74+
}
75+
.dark .apply-dark-variant {
76+
text-align: center;
77+
}
78+
.dark .apply-dark-variant:hover {
79+
text-align: right;
80+
}
81+
@media (min-width: 1024px) {
82+
.dark .apply-dark-variant {
83+
text-align: left;
84+
}
85+
}
86+
.apply-custom-utility {
87+
custom: stuff;
88+
}
89+
.apply-custom-utility:hover {
90+
custom: stuff;
91+
}
92+
@media (min-width: 1024px) {
93+
.apply-custom-utility {
94+
custom: stuff;
95+
}
96+
}
97+
@media (min-width: 1280px) {
98+
.apply-custom-utility:focus {
99+
custom: stuff;
100+
}
101+
}
102+
.multiple,
103+
.selectors {
104+
border-radius: 0.375rem;
105+
--tw-bg-opacity: 1;
106+
background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
107+
padding-top: 0.5rem;
108+
padding-bottom: 0.5rem;
109+
padding-left: 1rem;
110+
padding-right: 1rem;
111+
}
112+
.multiple-variants:hover,
113+
.selectors-variants:hover {
114+
text-align: center;
115+
}
116+
.multiple-variants:active,
117+
.selectors-variants:active {
118+
text-align: right;
119+
}
120+
@media (min-width: 1024px) {
121+
.multiple-variants:focus,
122+
.selectors-variants:focus {
123+
text-align: left;
124+
}
125+
}
126+
.group:hover .multiple-group,
127+
.group:hover .selectors-group {
128+
text-align: center;
129+
}
130+
@media (min-width: 1024px) {
131+
.group:hover .multiple-group,
132+
.group:hover .selectors-group {
133+
text-align: left;
134+
}
135+
}
136+
/* TODO: This works but the generated CSS is unnecessarily verbose. */
137+
.complex-utilities {
138+
--tw-ordinal: var(--tw-empty, /*!*/ /*!*/);
139+
--tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/);
140+
--tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/);
141+
--tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/);
142+
--tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/);
143+
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
144+
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
145+
--tw-ordinal: var(--tw-empty, /*!*/ /*!*/);
146+
--tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/);
147+
--tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/);
148+
--tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/);
149+
--tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/);
150+
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
151+
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
152+
--tw-numeric-spacing: tabular-nums;
153+
--tw-ordinal: ordinal;
154+
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
155+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
156+
var(--tw-shadow);
157+
}
158+
.complex-utilities:hover {
159+
--tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
160+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
161+
var(--tw-shadow);
162+
}
163+
.complex-utilities:focus {
164+
--tw-ordinal: var(--tw-empty, /*!*/ /*!*/);
165+
--tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/);
166+
--tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/);
167+
--tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/);
168+
--tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/);
169+
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
170+
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
171+
--tw-numeric-fraction: diagonal-fractions;
172+
}
173+
.basic-nesting-parent {
174+
.basic-nesting-child {
175+
font-weight: 700;
176+
}
177+
.basic-nesting-child:hover {
178+
font-weight: 400;
179+
}
180+
}

‎tests/10-apply.test.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Title</title>
8+
<link rel="stylesheet" href="./tailwind.css" />
9+
</head>
10+
<body>
11+
<div class="basic-example"></div>
12+
<div class="class-order"></div>
13+
<div class="with-additional-properties"></div>
14+
<div class="variants"></div>
15+
<div class="only-variants"></div>
16+
<div class="apply-group-variant"></div>
17+
<div class="apply-dark-variant"></div>
18+
<div class="apply-custom-utility"></div>
19+
<div class="multiple selectors"></div>
20+
<div class="multiple-variants selectors-variants"></div>
21+
<div class="multiple-group selectors-group"></div>
22+
<div class="complex-utilities"></div>
23+
<div class="basic-nesting-parent">
24+
<div class="basic-nesting-child"></div>
25+
</div>
26+
</body>
27+
</html>

‎tests/10-apply.test.js

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
const postcss = require('postcss')
2+
const tailwind = require('../src/index.js')
3+
const fs = require('fs')
4+
const path = require('path')
5+
6+
function run(input, config = {}) {
7+
return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
8+
}
9+
10+
test('@apply', () => {
11+
let config = {
12+
darkMode: 'class',
13+
purge: [path.resolve(__dirname, './10-apply.test.html')],
14+
corePlugins: { preflight: false },
15+
theme: {},
16+
plugins: [],
17+
}
18+
19+
let css = `
20+
@tailwind base;
21+
@tailwind components;
22+
@tailwind utilities;
23+
24+
@layer components {
25+
.basic-example {
26+
@apply px-4 py-2 bg-blue-500 rounded-md;
27+
}
28+
.class-order {
29+
@apply pt-4 pr-1 px-3 py-7 p-8;
30+
}
31+
.with-additional-properties {
32+
font-weight: 500;
33+
@apply text-right;
34+
}
35+
.variants {
36+
@apply xl:focus:font-black hover:font-bold lg:font-light focus:font-medium font-semibold;
37+
}
38+
.only-variants {
39+
@apply xl:focus:font-black hover:font-bold lg:font-light focus:font-medium;
40+
}
41+
.apply-group-variant {
42+
@apply group-hover:text-center lg:group-hover:text-left;
43+
}
44+
.apply-dark-variant {
45+
@apply dark:text-center dark:hover:text-right lg:dark:text-left;
46+
}
47+
.apply-custom-utility {
48+
@apply custom-util hover:custom-util lg:custom-util xl:focus:custom-util;
49+
}
50+
.multiple, .selectors {
51+
@apply px-4 py-2 bg-blue-500 rounded-md;
52+
}
53+
.multiple-variants, .selectors-variants {
54+
@apply hover:text-center active:text-right lg:focus:text-left;
55+
}
56+
.multiple-group, .selectors-group {
57+
@apply group-hover:text-center lg:group-hover:text-left;
58+
}
59+
/* TODO: This works but the generated CSS is unnecessarily verbose. */
60+
.complex-utilities {
61+
@apply ordinal tabular-nums focus:diagonal-fractions shadow-lg hover:shadow-xl;
62+
}
63+
.basic-nesting-parent {
64+
.basic-nesting-child {
65+
@apply font-bold hover:font-normal;
66+
}
67+
}
68+
}
69+
70+
@layer utilities {
71+
.custom-util {
72+
custom: stuff;
73+
}
74+
}
75+
`
76+
77+
return run(css, config).then((result) => {
78+
let expectedPath = path.resolve(__dirname, './10-apply.test.css')
79+
let expected = fs.readFileSync(expectedPath, 'utf8')
80+
81+
expect(result.css).toMatchCss(expected)
82+
})
83+
})
84+
85+
// TODO: Test stuff that should throw

0 commit comments

Comments
 (0)