css-ast-parser 1.0.0 → 1.1.0

package/README.md

@@ -4,6 +4,7 @@ The goal of this project is to provide high performance CSS processing with mini
 Built using: custom parser, generator and AST walker (tokenization stage was intentionally removed for improving performance)
 
 ## Features
+Legacy browser support (autoprefixes for key properties, pseudo-elements, fullscreen, keyframes)
 Lightweight and fast parsing
 AST-based transformations
 Plugin system (similar to PostCSS/Babel)
@@ -13,23 +14,41 @@ Zero dependencies
 
 
 ## Installation
-Clone the repository
+
+You can install the package from npm:
+
+```bash
+npm install css-ast-parser
+```
+Or clone the repository for development:
+```bash
+git clone https://github.com/DragonDragging/CSSCustomAST.git
+cd CSSCustomAST
+npm install
+```
 
 ## Usage
 ```js
 const fs = require("fs");
+const { parse, generate, walk } = require("css-ast-parser");
 
-const { parse } = require("./src/parser");
-const { generate } = require("./src/generator");
-const { walk } = require("./src/walker");
-
+// Example plugin
 const plugins = [
-    require("./plugins/removeBackground")
+  () => ({
+    decl(node) {
+      if (node.prop === "background-color") {
+        node.remove();
+      }
+    },
+    rule(node) {
+      console.log("Rule:", node.selector);
+    }
+  })
 ];
 
 const css = fs.readFileSync("./input.css", "utf-8");
 
-const ast = parse(css);
+const ast = parse(css, { legacySupport: true, comments: false });
 walk(ast, plugins);
 
 const out = generate(ast);
@@ -41,13 +60,15 @@ fs.writeFileSync("./output.css", out);
 ## How It Works
 The processing pipeline:
 CSS -> parse() -> AST -> walk() -> generate() -> CSS
-parse -> converts CSS into AST
+parse -> converts CSS into AST (optionally applies legacy browser prefixes and removing comments)
 walk -> applies plugins and mutates AST
 generate -> converts AST back to CSS
 
 
 
 ## AST Structure
+"nodes" - array of child declarations or rules, may include legacy prefixed versions
+
 Example node:
 ```json
 {
@@ -98,7 +119,7 @@ path.isAtRule(name)
 
 ## Transformation Pipeline
 1. Read CSS
-2. Parse AST
+2. Parse AST (optionally apply legacy support and removing comments)
 3. Apply plugins
 4. Generate optimized CSS
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-ast-parser",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Fast CSS parser with AST transformations",
   "main": "src/index.js",
   "author": "DragonDragging",

package/src/parser.js

@@ -1,4 +1,6 @@
-function parse(css) {
+function parse(css, options = {}) {
+    const { comments = true, legacySupport = false } = options;
+
     let i = 0;
     const len = css.length;
 
@@ -63,6 +65,134 @@ function parse(css) {
         return clean(css.slice(start, i));
     }
 
+    // Legacy support helpers
+    const propPrefixes = {
+        "transform": ["-webkit-transform", "-ms-transform"],
+        "transition": ["-webkit-transition"],
+        "animation": ["-webkit-animation"],
+        "animation-name": ["-webkit-animation-name"],
+        "animation-duration": ["-webkit-animation-duration"],
+        "animation-timing-function": ["-webkit-animation-timing-function"],
+        "animation-delay": ["-webkit-animation-delay"],
+        "animation-iteration-count": ["-webkit-animation-iteration-count"],
+        "animation-direction": ["-webkit-animation-direction"],
+        "box-shadow": ["-webkit-box-shadow"],
+        "user-select": ["-webkit-user-select", "-moz-user-select", "-ms-user-select"],
+        "flex": ["-webkit-flex", "-ms-flexbox"],
+        "flex-direction": ["-webkit-flex-direction", "-ms-flex-direction"],
+        "flex-wrap": ["-webkit-flex-wrap", "-ms-flex-wrap"],
+        "justify-content": ["-webkit-justify-content", "-ms-flex-pack"],
+        "align-items": ["-webkit-align-items", "-ms-flex-align"],
+        "align-content": ["-webkit-align-content", "-ms-flex-line-pack"],
+        "appearance": ["-webkit-appearance", "-moz-appearance"],
+        "backface-visibility": ["-webkit-backface-visibility"],
+        "filter": ["-webkit-filter"],
+        "columns": ["-webkit-columns", "-moz-columns"],
+        "column-count": ["-webkit-column-count", "-moz-column-count"],
+        "column-gap": ["-webkit-column-gap", "-moz-column-gap"],
+        "border-radius": ["-webkit-border-radius", "-moz-border-radius"],
+        "box-sizing": ["-webkit-box-sizing", "-moz-box-sizing"],
+        "display": ["-webkit-box", "-ms-flexbox", "-webkit-flex", "flex"]
+    };
+    const pseudoMap = {
+        "::before": ":before",
+        "::after": ":after",
+        "::first-letter": ":first-letter",
+        "::first-line": ":first-line"
+    };
+    const fullscreenSel = [":fullscreen", ":-webkit-full-screen", ":-moz-full-screen", ":-ms-fullscreen"];
+    function cloneNode(n) {
+        return {
+            ...n,
+            nodes: n.nodes ? [...n.nodes] : []
+        };
+    }
+
+    // prefixes and pseudo mappings recursively
+    function applyLegacy(nodes) {
+        const out = [];
+
+        // collect exiting old version support elements
+        const seenSelectors = new Set();
+        const seenKeyframes = new Set();
+        for (let n of nodes) {
+            if (n.type === "rule" && fullscreenSel.includes(n.selector)) {
+                seenSelectors.add(n.selector);
+            }
+            if (n.type === "atrule" && n.name.endsWith("keyframes")) {
+                seenKeyframes.add(n.name);
+            }
+        }
+        for (let n of nodes) {
+            if (n.type === "rule") {
+                // pseudo-elements
+                for (const pseudo in pseudoMap) {
+                    if (n.selector.includes(pseudo)) {
+                        n.selector = n.selector.replace(new RegExp(pseudo, "g"), pseudoMap[pseudo]);
+                    }
+                }
+
+                // fullscreen handling
+                if (n.selector === ":fullscreen") {
+                    for (const sel of fullscreenSel) {
+                        if (!seenSelectors.has(sel)) {
+                            const clone = cloneNode(n);
+                            clone.selector = sel;
+                            out.push(clone);
+                            seenSelectors.add(sel);
+                        }
+                    }
+                    out.push(n);
+                } else {
+                    out.push(n);
+                }
+
+                // add property prefixes
+                const decls = [];
+                for (const d of n.nodes) {
+                    decls.push(d);
+                    if (propPrefixes[d.prop]) {
+                        for (const p of propPrefixes[d.prop]) {
+                            if (!decls.some(existing => existing.prop === p && existing.value === d.value)) {
+                                decls.push({
+                                    type: "decl",
+                                    prop: p,
+                                    value: d.value
+                                });
+                            }
+                        }
+                    }
+                }
+                n.nodes = decls;
+
+                // recurse on child nodes
+                for (const c of n.nodes) {
+                    if (c.nodes && c.nodes.length) {
+                        c.nodes = applyLegacy(c.nodes);
+                    }
+                }
+            } else if (n.type === "atrule" && n.nodes) {
+                // keyframes prefixes
+                if (n.name === "keyframes") {
+                    for (const pref of ["-webkit-", "-moz-"]) {
+                        const prefixedName = pref + n.name;
+                        if (!seenKeyframes.has(prefixedName)) {
+                            const clone = cloneNode(n);
+                            clone.name = prefixedName;
+                            out.push(clone);
+                            seenKeyframes.add(prefixedName);
+                        }
+                    }
+                }
+                n.nodes = applyLegacy(n.nodes);
+                out.push(n);
+            } else {
+                out.push(n);
+            }
+        }
+        return out;
+    }
+
     // parse declarations inside {}
     function parseDecls() {
         const nodes = [];
@@ -78,7 +208,7 @@ function parse(css) {
             }
 
             // comment
-            if (css[i] === "/" && css[i + 1] === "*") {
+            if (comments && css[i] === "/" && css[i + 1] === "*") {
                 nodes.push(readComment());
                 continue;
             }
@@ -119,7 +249,7 @@ function parse(css) {
             }
 
             // comment
-            if (css[i] === "/" && css[i + 1] === "*") {
+            if (comments && css[i] === "/" && css[i + 1] === "*") {
                 nodes.push(readComment());
                 continue;
             }
@@ -147,10 +277,7 @@ function parse(css) {
 
                 i++; // {
 
-                const children = declAtrules.has(name)
-                    ? parseDecls()
-                    : parseRules();
-
+                const children = declAtrules.has(name) ? parseDecls() : parseRules();
                 nodes.push({ type: "atrule", name, query, nodes: children });
                 continue;
             }
@@ -169,10 +296,16 @@ function parse(css) {
         return nodes;
     }
 
-    return {
+    const ast = {
         type: "stylesheet",
         nodes: parseRules()
     };
+
+    if (legacySupport) {
+        ast.nodes = applyLegacy(ast.nodes);
+    }
+
+    return ast;
 }
 
 module.exports = { parse };