Skip to content

Commit a6b019d

Browse files
mfranzkeCopilot
mfranzke
and
Copilot
authored
feat: added PostCSS plugin (#27)
* feat: added PostCSS plugin * Update packages/postcss-css-if/demo.js Co-authored-by: Copilot <[email protected]> * refactor: updated from main * refactor: renamed for clarity * refactor: further optimizations * refactor: further optimization * refactor: optimization * refactor: added license * refactor: optimization * docs: root README optimization * refactor: removed obsolete script * refactor: consolidated docs * Update package.json * refactor: regenerated package lock file * Create rich-zebras-agree.md * docs: optimized README * fix: code * refactor: corrected package version * refactor: corrected import * refactor: finalized * refactor: added missing script * refactor: not treating this as a module, but cjs * refactor: we need to call all workspaces * refactor: added missing dependencies * refactor: we don't need to create the performance tests at runtime * refactor: optimized the performance tests * refactor: rewritten code regarding the consolidated export * refactor: corrected path * refactor: do we actually need the try/catch ? * refactor: another try * refactor: we only need this build once * fix: path * refactor: corrected the path * refactor: renamed for clarity * Update package.json * Update README.md * Update README.md * refactor: let's remove this for the moment * refactor: corrected path * refactor: extracted site * Apply suggestions from code review * Update packages/postcss-if-function/README.md * refactor: removed redundant file * refactor: corrected syntax * Revert "refactor: let's remove this for the moment" This reverts commit 7ea5431. * refactor: renamed for clarity * refactor: not mixing named and default exports * refactor: corrected test cases and documentation regarding the syntax * docs: nevermind * test: we don't need this, as it's not based on the web standard * test: clarity * refactor: changed vendor * refactor(docs): optimized structure * Apply suggestions from code review * Update README.md * refactor: moved this file * docs: mentioning a possible future refactoring * Apply suggestions from code review * Update packages/postcss-if-function/test/plugin.test.js Co-authored-by: Copilot <[email protected]> * Apply suggestions from code review Co-authored-by: Copilot <[email protected]> --------- Co-authored-by: Copilot <[email protected]>
1 parent 4a45823 commit a6b019d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+2095
-900
lines changed

‎.changeset/rich-zebras-agree.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"css-if-polyfill": patch
3+
"postcss-if-function": minor
4+
---
5+
6+
feat: added PostCSS plugin

‎.github/pages/index.html

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>CSS if() Polyfill - Examples</title>
7+
<style>
8+
body {
9+
font-family:
10+
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
11+
sans-serif;
12+
max-width: 800px;
13+
margin: 0 auto;
14+
padding: 20px;
15+
line-height: 1.6;
16+
}
17+
.example-list {
18+
list-style: none;
19+
padding: 0;
20+
}
21+
.example-list li {
22+
margin: 10px 0;
23+
padding: 15px;
24+
border: 1px solid #ddd;
25+
border-radius: 5px;
26+
background: #f9f9f9;
27+
}
28+
.example-list a {
29+
text-decoration: none;
30+
color: #0066cc;
31+
font-weight: bold;
32+
}
33+
.example-list a:hover {
34+
text-decoration: underline;
35+
}
36+
.cdn-info {
37+
background: #e7f3ff;
38+
padding: 15px;
39+
border-radius: 5px;
40+
margin: 20px 0;
41+
}
42+
.cdn-info code {
43+
background: #f0f0f0;
44+
padding: 2px 4px;
45+
border-radius: 3px;
46+
}
47+
</style>
48+
</head>
49+
<body>
50+
<h1>CSS if() Polyfill - Live Examples</h1>
51+
52+
<p>
53+
This page showcases live examples of the CSS if() polyfill in
54+
action. Each example demonstrates different aspects of the
55+
polyfill's functionality.
56+
</p>
57+
58+
<div class="cdn-info">
59+
<h3>CDN Usage</h3>
60+
<p>You can include the polyfill directly from jsDelivr:</p>
61+
<code
62+
>https://cdn.jsdelivr.net/npm/css-if-polyfill/dist/index.modern.js</code
63+
>
64+
</div>
65+
66+
<h2>Available Examples</h2>
67+
<ul class="example-list">
68+
<li>
69+
<a href="examples/basic-examples.html">Basic Examples</a>
70+
<br /><small
71+
>Demonstrates basic if() syntax with style(), media(), and
72+
supports() conditions</small
73+
>
74+
</li>
75+
<li>
76+
<a href="examples/enhanced.html">Enhanced Features</a>
77+
<br /><small
78+
>Shows advanced usage patterns and edge cases</small
79+
>
80+
</li>
81+
<li>
82+
<a href="examples/multiple-conditions.html"
83+
>Multiple Conditions</a
84+
>
85+
<br /><small
86+
>Examples with multiple conditions within a single if()
87+
function</small
88+
>
89+
</li>
90+
<li>
91+
<a href="examples/advanced.html">Advanced Usage</a>
92+
<br /><small>Complex scenarios and real-world use cases</small>
93+
</li>
94+
<li>
95+
<a href="examples/media-query-tracking.html"
96+
>Media Query Tracking</a
97+
>
98+
<br /><small
99+
>Demonstrates automatic media query change detection and
100+
responsive updates</small
101+
>
102+
</li>
103+
</ul>
104+
105+
<h2>Project Information</h2>
106+
<p>
107+
<a href="https://github.com/mfranzke/css-if-polyfill"
108+
>View on GitHub</a
109+
>
110+
|
111+
<a href="https://www.npmjs.com/package/css-if-polyfill"
112+
>View on npm</a
113+
>
114+
</p>
115+
</body>
116+
</html>

‎.github/scripts/prepare-pages.sh

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
#!/bin/bash
2+
set -e
3+
4+
echo "Preparing GitHub Pages content..."
5+
6+
# Create pages directory
7+
mkdir -p _site
8+
9+
# Copy examples folder
10+
echo "Copying examples..."
11+
mkdir -p _site/examples
12+
cp -r examples/* _site/examples/
13+
14+
# Copy dist folder for example pages to access the scripts
15+
echo "Copying dist folder..."
16+
mkdir -p _site/dist
17+
cp -r packages/css-if-polyfill/dist/* _site/dist/
18+
19+
# Copy the index.html template
20+
echo "Copying index.html template..."
21+
cp .github/pages/index.html _site/index.html
22+
23+
# Update example files to use the built polyfill from dist
24+
echo "Updating example script references..."
25+
find _site -name "*.html" -not -name "index.html" -exec sed -i.bak 's|../src/index.js|./dist/index.modern.js|g' {} \;
26+
# Clean up backup files
27+
find _site -name "*.bak" -delete
28+
29+
echo "GitHub Pages content prepared in _site/"

‎.github/workflows/deploy-pages.yml

Lines changed: 1 addition & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -46,112 +46,7 @@ jobs:
4646
run: npm run build
4747

4848
- name: Prepare GitHub Pages content
49-
run: |
50-
# Create pages directory
51-
mkdir -p _site
52-
53-
# Copy examples folder
54-
mkdir -p _site/examples
55-
cp -r examples/* _site/examples/
56-
57-
# Copy dist folder for example pages to access the scripts
58-
mkdir -p _site/dist
59-
cp -r dist/* _site/dist/
60-
61-
# Create index.html that lists all examples
62-
cat > _site/index.html << 'EOF'
63-
<!DOCTYPE html>
64-
<html lang="en">
65-
<head>
66-
<meta charset="UTF-8">
67-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
68-
<title>CSS if() Polyfill - Examples</title>
69-
<style>
70-
body {
71-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
72-
max-width: 800px;
73-
margin: 0 auto;
74-
padding: 20px;
75-
line-height: 1.6;
76-
}
77-
.example-list {
78-
list-style: none;
79-
padding: 0;
80-
}
81-
.example-list li {
82-
margin: 10px 0;
83-
padding: 15px;
84-
border: 1px solid #ddd;
85-
border-radius: 5px;
86-
background: #f9f9f9;
87-
}
88-
.example-list a {
89-
text-decoration: none;
90-
color: #0066cc;
91-
font-weight: bold;
92-
}
93-
.example-list a:hover {
94-
text-decoration: underline;
95-
}
96-
.cdn-info {
97-
background: #e7f3ff;
98-
padding: 15px;
99-
border-radius: 5px;
100-
margin: 20px 0;
101-
}
102-
.cdn-info code {
103-
background: #f0f0f0;
104-
padding: 2px 4px;
105-
border-radius: 3px;
106-
}
107-
</style>
108-
</head>
109-
<body>
110-
<h1>CSS if() Polyfill - Live Examples</h1>
111-
112-
<p>This page showcases live examples of the CSS if() polyfill in action. Each example demonstrates different aspects of the polyfill's functionality.</p>
113-
114-
<div class="cdn-info">
115-
<h3>CDN Usage</h3>
116-
<p>You can include the polyfill directly from jsDelivr:</p>
117-
<code>https://cdn.jsdelivr.net/npm/css-if-polyfill/dist/index.modern.js</code>
118-
</div>
119-
120-
<h2>Available Examples</h2>
121-
<ul class="example-list">
122-
<li>
123-
<a href="examples/basic-examples.html">Basic Examples</a>
124-
<br><small>Demonstrates basic if() syntax with style(), media(), and supports() conditions</small>
125-
</li>
126-
<li>
127-
<a href="examples/enhanced.html">Enhanced Features</a>
128-
<br><small>Shows advanced usage patterns and edge cases</small>
129-
</li>
130-
<li>
131-
<a href="examples/multiple-conditions.html">Multiple Conditions</a>
132-
<br><small>Examples with multiple conditions within a single if() function</small>
133-
</li>
134-
<li>
135-
<a href="examples/advanced.html">Advanced Usage</a>
136-
<br><small>Complex scenarios and real-world use cases</small>
137-
</li>
138-
<li>
139-
<a href="examples/media-query-tracking.html">Media Query Tracking</a>
140-
<br><small>Demonstrates automatic media query change detection and responsive updates</small>
141-
</li>
142-
</ul>
143-
144-
<h2>Project Information</h2>
145-
<p>
146-
<a href="https://github.com/mfranzke/css-if-polyfill">View on GitHub</a> |
147-
<a href="https://www.npmjs.com/package/css-if-polyfill">View on npm</a>
148-
</p>
149-
</body>
150-
</html>
151-
EOF
152-
153-
# Update example files to use the built polyfill from dist
154-
find _site -name "*.html" -not -name "index.html" -exec sed -i 's|../src/index.js|./dist/index.modern.js|g' {} \;
49+
run: ./.github/scripts/prepare-pages.sh
15550

15651
- name: Setup GitHub Pages
15752
uses: actions/configure-pages@v5

‎.github/workflows/docs.yml

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,19 +59,19 @@ jobs:
5959
## ESM Import
6060
6161
```javascript
62-
import CSSIfPolyfill from 'css-if-polyfill';
62+
import { init } from 'css-if-polyfill';
6363
6464
// Initialize the polyfill
65-
CSSIfPolyfill.init();
65+
init();
6666
```
6767
6868
## CommonJS Require
6969
7070
```javascript
71-
const CSSIfPolyfill = require('css-if-polyfill');
71+
const { init } = require('css-if-polyfill');
7272
7373
// Initialize the polyfill
74-
CSSIfPolyfill.init();
74+
init();
7575
```
7676
7777
## API Reference

‎.github/workflows/performance-optimized.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ jobs:
4343
echo "### Performance Report" >> $GITHUB_STEP_SUMMARY
4444
echo "\`\`\`" >> $GITHUB_STEP_SUMMARY
4545
echo "Bundle sizes:" >> $GITHUB_STEP_SUMMARY
46-
ls -lh dist/ >> $GITHUB_STEP_SUMMARY
46+
ls -lh packages/css-if-polyfill/dist/ >> $GITHUB_STEP_SUMMARY
4747
echo "\`\`\`" >> $GITHUB_STEP_SUMMARY
4848
4949
- name: Comment performance results

0 commit comments

Comments
 (0)