feat(Lightning CSS): added plugin (#69)

* feat(lightningcss): added plugin

* refactor: pnpm audit fix

* refactor: another solution

* chore: let's ignore this phrase

* refactor: replaced Buffer

* refactor: further optimized the tests

* refactor: further optimized the fixtures

* refactor: optimized fixtures

* Revert "refactor: further optimized the fixtures"

This reverts commit 1c8d7e1.

* refactor: further optimizations

* docs: further optimizations

* refactor: looks much better now

* docs: updated

* refactor: corrected the plugin name

* refactor: added another comment to copilot instructions

* refactor: aligned output

* Create afraid-ways-judge.md

* Update packages/lightningcss-plugin-if-function/README.md

* feat: added missing license file

* refactor: further optimizations

* docs: added Lightning CSS plugin

* Update afraid-ways-judge.md

* Update .github/copilot-instructions.md

* refactor: we only need the named output

* refactor: updated pnpm lock file

* refactor: optimization

* Apply suggestions from code review

* refactor: optimized the tests

* refactor: optimizations

* refactor: further optimizations

* docs: updated contents by fixtures

* refactor: further optimizations

* refactor: updated docs

* refactor: simplification

* refactor: updated docs

* Apply suggestions from code review

Author: mfranzke

.changeset/afraid-ways-judge.md

@@ -0,0 +1,5 @@
+---
+"lightningcss-plugin-if-function": patch
+---
+
+refactor: further optimizations

.github/copilot-instructions.md

@@ -51,6 +51,8 @@ Note: Unlike using @media/@supports/@container rules, which just ignore their co
 
 - `packages/css-if-polyfill/` - Main JavaScript polyfill
 - `packages/postcss-if-function/` - PostCSS plugin for build-time transformation
+- `packages/lightningcss-plugin-if-function/` - Lightning CSS plugin for build-time transformation
+- `packages/stylelint-config-if-function/` - Stylelint configuration for linting CSS if() usage
 
 ### Key Files
 
@@ -134,6 +136,7 @@ When working with CSS if() functions, always follow the official WCAG specificat
 3. **Always** run the full test suite including browser validation
 4. **Always** update documentation when changing public APIs
 5. **Always** bear in mind that the developer's main job is to read, not write, code. Therefore, avoid unnecessary complexity, abbreviations and short forms of parameters, for example in CLI usage.
-6. **Consider** performance impact on large stylesheets and DOM trees
+6. **Always** try to avoid setting up separate fixtures for each output (Polyfill, PostCSS plugin or Lightning CSS plugin) and use the same fixture for all of them if possible. If there are any differences, try changing the fixture so that it can be used for all of them. For example, change the colour values in the fixture so that they produce the same output.
+7. **Consider** performance impact on large stylesheets and DOM trees
 
 This project aims to provide a complete, specification-compliant implementation of CSS if() functionality for browsers that don't yet support it natively.

.github/workflows/ci.yml

@@ -82,6 +82,7 @@ jobs:
           path: |
             packages/css-if-polyfill/dist
             packages/postcss-if-function/dist
+            packages/lightningcss-plugin-if-function/dist
             packages/stylelint-config-if-function/dist
           retention-days: 30
 

.github/workflows/default.yml

@@ -99,6 +99,7 @@ jobs:
           path: |
             packages/css-if-polyfill/coverage/
             packages/postcss-if-function/coverage/
+            packages/lightningcss-plugin-if-function/coverage/
             packages/stylelint-config-if-function/coverage/
           retention-days: 30
 

.github/workflows/quality.yml

@@ -57,6 +57,7 @@ jobs:
           path: |
             packages/css-if-polyfill/coverage/
             packages/postcss-if-function/coverage/
+            packages/lightningcss-plugin-if-function/coverage/
             packages/stylelint-config-if-function/coverage/
           retention-days: 30
 

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
-	"editor.formatOnSave": true
+	"editor.formatOnSave": true,
+	"cSpell.words": ["lightningcss"]
 }

README.md

@@ -9,7 +9,7 @@
 [![Open Source Love](https://badges.frapsoft.com/os/v3/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)
 [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](CODE-OF-CONDUCT.md)
 
-A modern JavaScript [polyfill](https://github.com/mfranzke/css-if-polyfill/tree/main/packages/css-if-polyfill), [PostCSS plugin](https://github.com/mfranzke/css-if-polyfill/tree/main/packages/postcss-if-function) and a [Stylelint plugin](https://github.com/mfranzke/css-if-polyfill/tree/main/packages/stylelint-config-if-function) (to extend to prevent lint false positives) for the [CSS `if()` function](https://developer.mozilla.org/en-US/docs/Web/CSS/if) with **hybrid build-time and runtime processing**. Transforms CSS `if()` functions to native `@media` and `@supports` rules where possible, with runtime fallback for dynamic conditions.
+A modern JavaScript [polyfill](https://github.com/mfranzke/css-if-polyfill/tree/main/packages/css-if-polyfill), [PostCSS plugin](https://github.com/mfranzke/css-if-polyfill/tree/main/packages/postcss-if-function), a [Lightning CSS plugin](https://github.com/mfranzke/css-if-polyfill/tree/main/packages/lightningcss-plugin-if-function) and a [Stylelint plugin](https://github.com/mfranzke/css-if-polyfill/tree/main/packages/stylelint-config-if-function) (to extend to prevent lint false positives) for the [CSS `if()` function](https://developer.mozilla.org/en-US/docs/Web/CSS/if) with **hybrid build-time and runtime processing**. Transforms CSS `if()` functions to native `@media` and `@supports` rules where possible, with runtime fallback for dynamic conditions.
 
 ## Contributing
 

docs/TEST_FIXTURES.md

@@ -12,7 +12,7 @@ This document demonstrates the centralized test fixture system that provides a s
 
 ```css
 .responsive {
-	width: if(media(max-width: 768px): 100%; else: 50%);
+	width: if(media(width <= 768px): 100%; else: 50%);
 }
 ```
 
@@ -22,7 +22,7 @@ This document demonstrates the centralized test fixture system that provides a s
 .responsive {
 	width: 50%;
 }
-@media (max-width: 768px) {
+@media (width <= 768px) {
 	.responsive {
 		width: 100%;
 	}
@@ -70,15 +70,15 @@ This document demonstrates the centralized test fixture system that provides a s
 
 ```css
 .test {
-	color: if(style(--theme): var(--primary) ; else: blue);
+	color: if(style(--theme): var(--primary) ; else: #00f);
 }
 ```
 
 **Expected Output:**
 
 ```css
 .test {
-	color: blue;
+	color: #00f;
 }
 ```
 
@@ -94,7 +94,7 @@ This document demonstrates the centralized test fixture system that provides a s
 
 ```css
 .example {
-	color: if(media(max-width: 768px): blue; else: red);
+	color: if(media(width <= 768px): #00f; else: red);
 	font-size: if(supports(display: grid): 1.2rem; else: 1rem);
 }
 ```
@@ -105,9 +105,9 @@ This document demonstrates the centralized test fixture system that provides a s
 .example {
 	color: red;
 }
-@media (max-width: 768px) {
+@media (width <= 768px) {
 	.example {
-		color: blue;
+		color: #00f;
 	}
 }
 .example {
@@ -174,7 +174,7 @@ This document demonstrates the centralized test fixture system that provides a s
 
 ```css
 .test {
-	color: if(media(min-width: 768px): blue; else: red);
+	color: if(media(width >= 768px): #00f; else: red);
 	background: if(style(--dark-mode): black; else: white);
 }
 ```
@@ -185,9 +185,9 @@ This document demonstrates the centralized test fixture system that provides a s
 .test {
 	color: red;
 }
-@media (min-width: 768px) {
+@media (width >= 768px) {
 	.test {
-		color: blue;
+		color: #00f;
 	}
 }
 .test {
@@ -207,9 +207,7 @@ This document demonstrates the centralized test fixture system that provides a s
 
 ```css
 .responsive {
-	width: if(
-		media((min-width: 768px) and (max-width: 1024px)): 50%; else: 100%
-	);
+	width: if(media((width >= 768px) and (width <= 1024px)): 50%; else: 100%);
 }
 ```
 
@@ -219,7 +217,7 @@ This document demonstrates the centralized test fixture system that provides a s
 .responsive {
 	width: 100%;
 }
-@media ((min-width: 768px) and (max-width: 1024px)) {
+@media (width >= 768px) and (width <= 1024px) {
 	.responsive {
 		width: 50%;
 	}
@@ -239,11 +237,11 @@ This document demonstrates the centralized test fixture system that provides a s
 ```css
 /* Header styles */
 .header {
-	background: blue;
+	background: #00f;
 }
 
 .conditional {
-	color: if(media(max-width: 768px): red; else: blue);
+	color: if(media(width <= 768px): red; else: #00f);
 }
 
 /* Footer styles */
@@ -257,12 +255,12 @@ This document demonstrates the centralized test fixture system that provides a s
 ```css
 /* Header styles */
 .header {
-	background: blue;
+	background: #00f;
 }
 .conditional {
-	color: blue;
+	color: #00f;
 }
-@media (max-width: 768px) {
+@media (width <= 768px) {
 	.conditional {
 		color: red;
 	}

docs/refactoring/TEST_CENTRALIZATION_SUMMARY.md

@@ -85,7 +85,7 @@ pnpm run build:docs  # Auto-generates docs from fixtures
 
 ```css
 .responsive {
-	width: if(media(max-width: 768px): 100%; else: 50%);
+	width: if(media(width <= 768px): 100%; else: 50%);
 }
 ```
 
@@ -95,7 +95,7 @@ pnpm run build:docs  # Auto-generates docs from fixtures
 .responsive {
 	width: 50%;
 }
-@media (max-width: 768px) {
+@media (width <= 768px) {
 	.responsive {
 		width: 100%;
 	}

package.json

@@ -34,7 +34,7 @@
     "dev": "pnpm --recursive run dev",
     "lint": "pnpm --parallel run '/^lint:[^:]*$/'",
     "lint:markdownlint": "markdownlint --config .config/.markdown-lint.yml **/*.md",
-    "lint:packages": "publint packages/css-if-polyfill && publint packages/postcss-if-function && publint packages/stylelint-config-if-function",
+    "lint:packages": "publint packages/css-if-polyfill && publint packages/postcss-if-function && publint packages/lightningcss-plugin-if-function && publint packages/stylelint-config-if-function",
     "lint:stylelint": "stylelint test/fixtures/*.input.css --config .config/.stylelintrc.json",
     "lint:stylelint:14": "npx stylelint@14 test/fixtures/*.input.css --config .config/.stylelintrc.older.json",
     "lint:stylelint:15": "npx stylelint@15 test/fixtures/*.input.css --config .config/.stylelintrc.older.json",
@@ -71,7 +71,8 @@
   },
   "pnpm": {
     "overrides": {
-      "@eslint/plugin-kit@<0.3.4": ">=0.3.4"
+      "@eslint/plugin-kit@<0.3.4": ">=0.3.4",
+      "tmp@<=0.2.3": ">=0.2.4"
     }
   }
 }