Skip to content

Commit d717015

Browse files
mfranzkeCopilot
mfranzke
and
Copilot
authored
refactor: extracted code examples (#32)
* refactor: extracted code examples * refactor: we need to update the documentation on any css code changes * refactor: updated css examples * Revert "refactor: updated css examples" This reverts commit 4ae5db6. * Update test/fixtures/multiple-separate-functions.input.css Co-authored-by: Copilot <[email protected]> * Update test/fixtures/basic-style.input.css Co-authored-by: Copilot <[email protected]> * refactor: syntax * Update TEST_FIXTURES.md * docs: simplification * refactor: simplifications * Update TEST_CENTRALIZATION_SUMMARY.md * refactor: hardened the tests * Apply suggestions from code review * refactor: generalize * refactor: removed redundant file * refactor: we need to ignore those files, as they are including new CSS syntax * Update docs/refactoring/TEST_CENTRALIZATION_SUMMARY.md --------- Co-authored-by: Copilot <[email protected]>
1 parent e518307 commit d717015

30 files changed

+1106
-193
lines changed

‎.config/.lintstagedrc.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
22
"*.md": "markdownlint --config .config/.markdown-lint.yml --fix",
3+
"test/fixtures/*.css": "npm run build:docs",
34
"*.{js,ts,tsx,jsx,mjs,cjs}": "npm run lint:xo -- --fix"
45
}

‎.prettierignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
package-lock.json
22
node_modules
33
dist
4+
# Ignore all files with new CSS syntax
5+
test/fixtures/*.input.css

‎docs/TEST_FIXTURES.md

Lines changed: 312 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,312 @@
1+
# CSS if() Polyfill Test Fixtures
2+
3+
This document demonstrates the centralized test fixture system that provides a single source of truth for CSS test cases across all test suites.
4+
5+
## Basic Media Query
6+
7+
<!-- FIXTURE: basic-media -->
8+
9+
<!-- Note: This content is automatically generated from test fixtures. Do not edit the code blocks directly - they will be overwritten during the build process. To modify test cases, edit the corresponding .input.css and .expected.css files in the test/fixtures/ directory -->
10+
11+
**Input CSS:**
12+
13+
```css
14+
.responsive {
15+
width: if(media(max-width: 768px): 100%; else: 50%);
16+
}
17+
```
18+
19+
**Expected Output:**
20+
21+
```css
22+
.responsive {
23+
width: 50%;
24+
}
25+
@media (max-width: 768px) {
26+
.responsive {
27+
width: 100%;
28+
}
29+
}
30+
```
31+
32+
<!-- /FIXTURE -->
33+
34+
## Basic Supports Query
35+
36+
<!-- FIXTURE: basic-supports -->
37+
38+
<!-- Note: This content is automatically generated from test fixtures. Do not edit the code blocks directly - they will be overwritten during the build process. To modify test cases, edit the corresponding .input.css and .expected.css files in the test/fixtures/ directory -->
39+
40+
**Input CSS:**
41+
42+
```css
43+
.grid {
44+
display: if(supports(display: grid): grid; else: block);
45+
}
46+
```
47+
48+
**Expected Output:**
49+
50+
```css
51+
.grid {
52+
display: block;
53+
}
54+
@supports (display: grid) {
55+
.grid {
56+
display: grid;
57+
}
58+
}
59+
```
60+
61+
<!-- /FIXTURE -->
62+
63+
## Basic Style Query (Runtime Processing)
64+
65+
<!-- FIXTURE: basic-style -->
66+
67+
<!-- Note: This content is automatically generated from test fixtures. Do not edit the code blocks directly - they will be overwritten during the build process. To modify test cases, edit the corresponding .input.css and .expected.css files in the test/fixtures/ directory -->
68+
69+
**Input CSS:**
70+
71+
```css
72+
.test {
73+
color: if(style(--theme): var(--primary) ; else: blue);
74+
}
75+
```
76+
77+
**Expected Output:**
78+
79+
```css
80+
.test {
81+
color: blue;
82+
}
83+
```
84+
85+
<!-- /FIXTURE -->
86+
87+
## Multiple Functions in One Rule
88+
89+
<!-- FIXTURE: multiple-functions-one-rule -->
90+
91+
<!-- Note: This content is automatically generated from test fixtures. Do not edit the code blocks directly - they will be overwritten during the build process. To modify test cases, edit the corresponding .input.css and .expected.css files in the test/fixtures/ directory -->
92+
93+
**Input CSS:**
94+
95+
```css
96+
.example {
97+
color: if(media(max-width: 768px): blue; else: red);
98+
font-size: if(supports(display: grid): 1.2rem; else: 1rem);
99+
}
100+
```
101+
102+
**Expected Output:**
103+
104+
```css
105+
.example {
106+
color: red;
107+
}
108+
@media (max-width: 768px) {
109+
.example {
110+
color: blue;
111+
}
112+
}
113+
.example {
114+
font-size: 1rem;
115+
}
116+
@supports (display: grid) {
117+
.example {
118+
font-size: 1.2rem;
119+
}
120+
}
121+
```
122+
123+
<!-- /FIXTURE -->
124+
125+
## Multiple Concatenated Conditions
126+
127+
<!-- FIXTURE: multiple-concatenated-conditions -->
128+
129+
<!-- Note: This content is automatically generated from test fixtures. Do not edit the code blocks directly - they will be overwritten during the build process. To modify test cases, edit the corresponding .input.css and .expected.css files in the test/fixtures/ directory -->
130+
131+
**Input CSS:**
132+
133+
```css
134+
.responsive {
135+
padding: if(
136+
media(width >= 1200px): 40px; media(width >= 768px): 30px;
137+
media(width >= 480px): 20px; else: 15px
138+
);
139+
}
140+
```
141+
142+
**Expected Output:**
143+
144+
```css
145+
.responsive {
146+
padding: 15px;
147+
}
148+
@media (width >= 480px) {
149+
.responsive {
150+
padding: 20px;
151+
}
152+
}
153+
@media (width >= 768px) {
154+
.responsive {
155+
padding: 30px;
156+
}
157+
}
158+
@media (width >= 1200px) {
159+
.responsive {
160+
padding: 40px;
161+
}
162+
}
163+
```
164+
165+
<!-- /FIXTURE -->
166+
167+
## Mixed Conditions (Build-time and Runtime)
168+
169+
<!-- FIXTURE: mixed-conditions -->
170+
171+
<!-- Note: This content is automatically generated from test fixtures. Do not edit the code blocks directly - they will be overwritten during the build process. To modify test cases, edit the corresponding .input.css and .expected.css files in the test/fixtures/ directory -->
172+
173+
**Input CSS:**
174+
175+
```css
176+
.test {
177+
color: if(media(min-width: 768px): blue; else: red);
178+
background: if(style(--dark-mode): black; else: white);
179+
}
180+
```
181+
182+
**Expected Output:**
183+
184+
```css
185+
.test {
186+
color: red;
187+
}
188+
@media (min-width: 768px) {
189+
.test {
190+
color: blue;
191+
}
192+
}
193+
.test {
194+
background: white;
195+
}
196+
```
197+
198+
<!-- /FIXTURE -->
199+
200+
## Complex Media Query
201+
202+
<!-- FIXTURE: complex-media-query -->
203+
204+
<!-- Note: This content is automatically generated from test fixtures. Do not edit the code blocks directly - they will be overwritten during the build process. To modify test cases, edit the corresponding .input.css and .expected.css files in the test/fixtures/ directory -->
205+
206+
**Input CSS:**
207+
208+
```css
209+
.responsive {
210+
width: if(
211+
media((min-width: 768px) and (max-width: 1024px)): 50%; else: 100%
212+
);
213+
}
214+
```
215+
216+
**Expected Output:**
217+
218+
```css
219+
.responsive {
220+
width: 100%;
221+
}
222+
@media ((min-width: 768px) and (max-width: 1024px)) {
223+
.responsive {
224+
width: 50%;
225+
}
226+
}
227+
```
228+
229+
<!-- /FIXTURE -->
230+
231+
## CSS with Comments Preserved
232+
233+
<!-- FIXTURE: with-comments -->
234+
235+
<!-- Note: This content is automatically generated from test fixtures. Do not edit the code blocks directly - they will be overwritten during the build process. To modify test cases, edit the corresponding .input.css and .expected.css files in the test/fixtures/ directory -->
236+
237+
**Input CSS:**
238+
239+
```css
240+
/* Header styles */
241+
.header {
242+
background: blue;
243+
}
244+
245+
.conditional {
246+
color: if(media(max-width: 768px): red; else: blue);
247+
}
248+
249+
/* Footer styles */
250+
.footer {
251+
background: gray;
252+
}
253+
```
254+
255+
**Expected Output:**
256+
257+
```css
258+
/* Header styles */
259+
.header {
260+
background: blue;
261+
}
262+
.conditional {
263+
color: blue;
264+
}
265+
@media (max-width: 768px) {
266+
.conditional {
267+
color: red;
268+
}
269+
}
270+
/* Footer styles */
271+
.footer {
272+
background: gray;
273+
}
274+
```
275+
276+
<!-- /FIXTURE -->
277+
278+
## CSS Without if() Functions
279+
280+
<!-- FIXTURE: no-if-functions -->
281+
282+
<!-- Note: This content is automatically generated from test fixtures. Do not edit the code blocks directly - they will be overwritten during the build process. To modify test cases, edit the corresponding .input.css and .expected.css files in the test/fixtures/ directory -->
283+
284+
**Input CSS:**
285+
286+
```css
287+
.normal {
288+
color: red;
289+
font-size: 1rem;
290+
}
291+
```
292+
293+
**Expected Output:**
294+
295+
```css
296+
.normal {
297+
color: red;
298+
font-size: 1rem;
299+
}
300+
```
301+
302+
<!-- /FIXTURE -->
303+
304+
---
305+
306+
**Note:** This content is automatically generated from test fixtures. Do not edit the code blocks directly - they will be overwritten during the build process. To modify test cases, edit the corresponding `.input.css` and `.expected.css` files in the `test/fixtures/` directory.
307+
308+
To regenerate this documentation, run:
309+
310+
```bash
311+
npm run build:docs
312+
```

0 commit comments

Comments
 (0)