use postcss for parsing css

Author: itsMapleLeaf

package-lock.json

@@ -81,9 +81,9 @@
   },
   "dependencies": {
     "bluebird": "^3.5.1",
-    "css": "^2.2.4",
     "htmlparser2": "^3.9.2",
     "lodash": "^4.17.11",
+    "postcss": "^7.0.32",
     "request": "^2.88.0",
     "request-promise": "^4.2.1",
     "source-map-support": "^0.5.3",

package.json

@@ -1,28 +1,25 @@
-import * as css from "css";
+import * as postcss from 'postcss';
 import CssClassDefinition from "../../common/css-class-definition";
 
 export default class CssClassExtractor {
     /**
      * @description Extracts class names from CSS AST
      */
-    public static extract(ast: css.Stylesheet): CssClassDefinition[] {
+    public static extract(ast: postcss.Root): CssClassDefinition[] {
         const classNameRegex: RegExp = /[.]([\w-]+)/g;
 
         const definitions: CssClassDefinition[] = [];
 
         // go through each of the rules...
-        ast.stylesheet.rules.forEach((rule: css.Rule) => {
-            // ...of type rule
-            if (rule.type === "rule") {
-                // go through each of the selectors of the current rule
-                rule.selectors.forEach((selector: string) => {
-                    let item: RegExpExecArray = classNameRegex.exec(selector);
-                    while (item) {
-                        definitions.push(new CssClassDefinition(item[1]));
-                        item = classNameRegex.exec(selector);
-                    }
-                });
-            }
+        ast.walkRules((rule) => {
+            // go through each of the selectors of the current rule
+            rule.selectors.forEach((selector) => {
+                let item: RegExpExecArray = classNameRegex.exec(selector);
+                while (item) {
+                    definitions.push(new CssClassDefinition(item[1]));
+                    item = classNameRegex.exec(selector);
+                }
+            });
         });
 
         return definitions;

src/parse-engines/common/css-class-extractor.ts

@@ -1,5 +1,4 @@
-import * as css from "css";
-import * as vscode from "vscode";
+import * as postcss from 'postcss';
 import CssClassDefinition from "../../common/css-class-definition";
 import CssClassExtractor from "../common/css-class-extractor";
 import IParseEngine from "../common/parse-engine";
@@ -11,9 +10,9 @@ class CssParseEngine implements IParseEngine {
 
     public async parse(textDocument: ISimpleTextDocument): Promise<CssClassDefinition[]> {
         const code: string = textDocument.getText();
-        const codeAst: css.Stylesheet = css.parse(code);
-
-        return CssClassExtractor.extract(codeAst);
+        const result = await postcss().process(code);
+        if (!result.root) return [];
+        return CssClassExtractor.extract(result.root);
     }
 }
 

src/parse-engines/types/css-parse-engine.ts

@@ -1,8 +1,7 @@
 import * as Bluebird from "bluebird";
-import * as css from "css";
 import * as html from "htmlparser2";
+import * as postcss from 'postcss';
 import * as request from "request-promise";
-import * as vscode from "vscode";
 import CssClassDefinition from "../../common/css-class-definition";
 import CssClassExtractor from "../common/css-class-extractor";
 import IParseEngine from "../common/parse-engine";
@@ -42,7 +41,7 @@ class HtmlParseEngine implements IParseEngine {
             },
             ontext: (text: string) => {
                 if (tag === "style") {
-                    definitions.push(...CssClassExtractor.extract(css.parse(text)));
+                    definitions.push(...CssClassExtractor.extract(postcss().process(text).root));
                 }
             },
         });
@@ -52,7 +51,7 @@ class HtmlParseEngine implements IParseEngine {
 
         await Bluebird.map(urls, async (url) => {
             const content = await request.get(url);
-            definitions.push(...CssClassExtractor.extract(css.parse(content)));
+            definitions.push(...CssClassExtractor.extract(postcss().process(content).root));
         }, { concurrency: 10 });
 
         return definitions;