mfranzke · mfranzke · Jul 20, 2025 · Jul 19, 2025 · Jul 19, 2025 · Jul 19, 2025
diff --git a/.changeset/rich-zebras-agree.md b/.changeset/rich-zebras-agree.md
@@ -0,0 +1,6 @@
+---
+"css-if-polyfill": patch
+"postcss-if-function": minor
+---
+
+feat: added PostCSS plugin
diff --git a/.github/pages/index.html b/.github/pages/index.html
@@ -0,0 +1,116 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>CSS if() Polyfill - Examples</title>
+		<style>
+			body {
+				font-family:
+					-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+					sans-serif;
+				max-width: 800px;
+				margin: 0 auto;
+				padding: 20px;
+				line-height: 1.6;
+			}
+			.example-list {
+				list-style: none;
+				padding: 0;
+			}
+			.example-list li {
+				margin: 10px 0;
+				padding: 15px;
+				border: 1px solid #ddd;
+				border-radius: 5px;
+				background: #f9f9f9;
+			}
+			.example-list a {
+				text-decoration: none;
+				color: #0066cc;
+				font-weight: bold;
+			}
+			.example-list a:hover {
+				text-decoration: underline;
+			}
+			.cdn-info {
+				background: #e7f3ff;
+				padding: 15px;
+				border-radius: 5px;
+				margin: 20px 0;
+			}
+			.cdn-info code {
+				background: #f0f0f0;
+				padding: 2px 4px;
+				border-radius: 3px;
+			}
+		</style>
+	</head>
+	<body>
+		<h1>CSS if() Polyfill - Live Examples</h1>
+
+		<p>
+			This page showcases live examples of the CSS if() polyfill in
+			action. Each example demonstrates different aspects of the
+			polyfill's functionality.
+		</p>
+
+		<div class="cdn-info">
+			<h3>CDN Usage</h3>
+			<p>You can include the polyfill directly from jsDelivr:</p>
+			<code
+				>https://cdn.jsdelivr.net/npm/css-if-polyfill/dist/index.modern.js</code
+			>
+		</div>
+
+		<h2>Available Examples</h2>
+		<ul class="example-list">
+			<li>
+				<a href="examples/basic-examples.html">Basic Examples</a>
+				<br /><small
+					>Demonstrates basic if() syntax with style(), media(), and
+					supports() conditions</small
+				>
+			</li>
+			<li>
+				<a href="examples/enhanced.html">Enhanced Features</a>
+				<br /><small
+					>Shows advanced usage patterns and edge cases</small
+				>
+			</li>
+			<li>
+				<a href="examples/multiple-conditions.html"
+					>Multiple Conditions</a
+				>
+				<br /><small
+					>Examples with multiple conditions within a single if()
+					function</small
+				>
+			</li>
+			<li>
+				<a href="examples/advanced.html">Advanced Usage</a>
+				<br /><small>Complex scenarios and real-world use cases</small>
+			</li>
+			<li>
+				<a href="examples/media-query-tracking.html"
+					>Media Query Tracking</a
+				>
+				<br /><small
+					>Demonstrates automatic media query change detection and
+					responsive updates</small
+				>
+			</li>
+		</ul>
+
+		<h2>Project Information</h2>
+		<p>
+			<a href="https://github.com/mfranzke/css-if-polyfill"
+				>View on GitHub</a
+			>
+			|
+			<a href="https://www.npmjs.com/package/css-if-polyfill"
+				>View on npm</a
+			>
+		</p>
+	</body>
+</html>
diff --git a/.github/scripts/prepare-pages.sh b/.github/scripts/prepare-pages.sh
@@ -0,0 +1,29 @@
+#!/bin/bash
+set -e
+
+echo "Preparing GitHub Pages content..."
+
+# Create pages directory
+mkdir -p _site
+
+# Copy examples folder
+echo "Copying examples..."
+mkdir -p _site/examples
+cp -r examples/* _site/examples/
+
+# Copy dist folder for example pages to access the scripts
+echo "Copying dist folder..."
+mkdir -p _site/dist
+cp -r packages/css-if-polyfill/dist/* _site/dist/
+
+# Copy the index.html template
+echo "Copying index.html template..."
+cp .github/pages/index.html _site/index.html
+
+# Update example files to use the built polyfill from dist
+echo "Updating example script references..."
+find _site -name "*.html" -not -name "index.html" -exec sed -i.bak 's|../src/index.js|./dist/index.modern.js|g' {} \;
+# Clean up backup files
+find _site -name "*.bak" -delete
+
+echo "GitHub Pages content prepared in _site/"
diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml
@@ -46,112 +46,7 @@ jobs:
         run: npm run build
 
       - name: Prepare GitHub Pages content
-        run: |
-          # Create pages directory
-          mkdir -p _site
-
-          # Copy examples folder
-          mkdir -p _site/examples
-          cp -r examples/* _site/examples/
-
-          # Copy dist folder for example pages to access the scripts
-          mkdir -p _site/dist
-          cp -r dist/* _site/dist/
-
-          # Create index.html that lists all examples
-          cat > _site/index.html << 'EOF'
-          <!DOCTYPE html>
-          <html lang="en">
-          <head>
-              <meta charset="UTF-8">
-              <meta name="viewport" content="width=device-width, initial-scale=1.0">
-              <title>CSS if() Polyfill - Examples</title>
-              <style>
-                  body {
-                      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-                      max-width: 800px;
-                      margin: 0 auto;
-                      padding: 20px;
-                      line-height: 1.6;
-                  }
-                  .example-list {
-                      list-style: none;
-                      padding: 0;
-                  }
-                  .example-list li {
-                      margin: 10px 0;
-                      padding: 15px;
-                      border: 1px solid #ddd;
-                      border-radius: 5px;
-                      background: #f9f9f9;
-                  }
-                  .example-list a {
-                      text-decoration: none;
-                      color: #0066cc;
-                      font-weight: bold;
-                  }
-                  .example-list a:hover {
-                      text-decoration: underline;
-                  }
-                  .cdn-info {
-                      background: #e7f3ff;
-                      padding: 15px;
-                      border-radius: 5px;
-                      margin: 20px 0;
-                  }
-                  .cdn-info code {
-                      background: #f0f0f0;
-                      padding: 2px 4px;
-                      border-radius: 3px;
-                  }
-              </style>
-          </head>
-          <body>
-              <h1>CSS if() Polyfill - Live Examples</h1>
-
-              <p>This page showcases live examples of the CSS if() polyfill in action. Each example demonstrates different aspects of the polyfill's functionality.</p>
-
-              <div class="cdn-info">
-                  <h3>CDN Usage</h3>
-                  <p>You can include the polyfill directly from jsDelivr:</p>
-                  <code>https://cdn.jsdelivr.net/npm/css-if-polyfill/dist/index.modern.js</code>
-              </div>
-
-              <h2>Available Examples</h2>
-              <ul class="example-list">
-                  <li>
-                      <a href="examples/basic-examples.html">Basic Examples</a>
-                      <br><small>Demonstrates basic if() syntax with style(), media(), and supports() conditions</small>
-                  </li>
-                  <li>
-                      <a href="examples/enhanced.html">Enhanced Features</a>
-                      <br><small>Shows advanced usage patterns and edge cases</small>
-                  </li>
-                  <li>
-                      <a href="examples/multiple-conditions.html">Multiple Conditions</a>
-                      <br><small>Examples with multiple conditions within a single if() function</small>
-                  </li>
-                  <li>
-                      <a href="examples/advanced.html">Advanced Usage</a>
-                      <br><small>Complex scenarios and real-world use cases</small>
-                  </li>
-                  <li>
-                      <a href="examples/media-query-tracking.html">Media Query Tracking</a>
-                      <br><small>Demonstrates automatic media query change detection and responsive updates</small>
-                  </li>
-              </ul>
-
-              <h2>Project Information</h2>
-              <p>
-                  <a href="https://github.com/mfranzke/css-if-polyfill">View on GitHub</a> |
-                  <a href="https://www.npmjs.com/package/css-if-polyfill">View on npm</a>
-              </p>
-          </body>
-          </html>
-          EOF
-
-          # Update example files to use the built polyfill from dist
-          find _site -name "*.html" -not -name "index.html" -exec sed -i 's|../src/index.js|./dist/index.modern.js|g' {} \;
+        run: ./.github/scripts/prepare-pages.sh
 
       - name: Setup GitHub Pages
         uses: actions/configure-pages@v5

diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
@@ -59,19 +59,19 @@ jobs:
           ## ESM Import
 
           ```javascript
-          import CSSIfPolyfill from 'css-if-polyfill';
+          import { init } from 'css-if-polyfill';
 
           // Initialize the polyfill
-          CSSIfPolyfill.init();
+          init();
           ```
 
           ## CommonJS Require
 
           ```javascript
-          const CSSIfPolyfill = require('css-if-polyfill');
+          const { init } = require('css-if-polyfill');
 
           // Initialize the polyfill
-          CSSIfPolyfill.init();
+          init();
           ```
 
           ## API Reference

diff --git a/.github/workflows/performance-optimized.yml b/.github/workflows/performance-optimized.yml
@@ -43,7 +43,7 @@ jobs:
           echo "### Performance Report" >> $GITHUB_STEP_SUMMARY
           echo "\`\`\`" >> $GITHUB_STEP_SUMMARY
           echo "Bundle sizes:" >> $GITHUB_STEP_SUMMARY
-          ls -lh dist/ >> $GITHUB_STEP_SUMMARY
+          ls -lh packages/css-if-polyfill/dist/ >> $GITHUB_STEP_SUMMARY
           echo "\`\`\`" >> $GITHUB_STEP_SUMMARY
 
       - name: Comment performance results