Support CSS via PostCSS (#34)

README.md

@@ -9,6 +9,7 @@ A remark-lint rule to check language syntax in a code block.
 - JavaScript
 - JSON
 - YAML
+- CSS
 
 ## Install
 

index.js

@@ -2,36 +2,50 @@ import { lintRule } from "unified-lint-rule";
 import { visit } from "unist-util-visit";
 import { default as swc } from "@swc/core";
 import { default as yaml } from "js-yaml";
+import { default as postcss } from "postcss";
 
 const remarkLintCodeBlockSyntax = lintRule("remark-lint:code-block-syntax", codeSyntax);
 export default remarkLintCodeBlockSyntax;
 
 function codeSyntax(tree, file) {
-  const supportedLangs = ["js", "json", "yaml"];
+  const supportedLangs = ["js", "json", "yaml", "css"];
   const test = supportedLangs.map((lang) => ({ type: "code", lang: lang }));
 
   visit(tree, test, visitor);
 
   function visitor(node) {
-    switch (node.lang) {
+    const report = (reason, language) => {
+      file.message(`Invalid ${language}: ${reason}`, node);
+    };
+
+    const { lang, value } = node;
+
+    switch (lang) {
       case "js": {
-        const reason = checkJs(node.value);
+        const reason = checkJs(value);
         if (reason) {
-          file.message(`Invalid JavaScript: ${reason}`, node);
+          report(reason, "JavaScript");
         }
         break;
       }
       case "json": {
-        const reason = checkJson(node.value);
+        const reason = checkJson(value);
         if (reason) {
-          file.message(`Invalid JSON: ${reason}`, node);
+          report(reason, "JSON");
         }
         break;
       }
       case "yaml": {
-        const reason = checkYaml(node.value);
+        const reason = checkYaml(value);
         if (reason) {
-          file.message(`Invalid YAML: ${reason}`, node);
+          report(reason, "YAML");
+        }
+        break;
+      }
+      case "css": {
+        const reason = checkCss(value);
+        if (reason) {
+          report(reason, "CSS");
         }
         break;
       }
@@ -70,4 +84,13 @@ function codeSyntax(tree, file) {
       return e.message.split(/\r?\n/)[0];
     }
   }
+
+  function checkCss(code) {
+    try {
+      postcss.parse(code);
+      return null;
+    } catch (e) {
+      return e.message;
+    }
+  }
 }

index.test.js

@@ -69,8 +69,26 @@ describe("YAML", () => {
   });
 });
 
+describe("CSS", () => {
+  test("valid", () => {
+    expect(run("css", "a{}")).toEqual([]);
+  });
+
+  test("invalid", () => {
+    expect(run("css", "a{\n}}")).toEqual([
+      {
+        column: 1,
+        line: 1,
+        message: "Invalid CSS: <css input>:2:2: Unexpected }",
+        ruleId: "code-block-syntax",
+        source: "remark-lint",
+      },
+    ]);
+  });
+});
+
 describe("Unsupported languages", () => {
-  test("CSS", () => {
-    expect(run("css", "a{")).toEqual([]);
+  test("Ruby", () => {
+    expect(run("ruby", "a=")).toEqual([]);
   });
 });

package.json

@@ -23,6 +23,7 @@
   ],
   "scripts": {
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
+    "test:watch": "npm run test -- --watch",
     "lint": "npm run eslint && npm run prettier:check",
     "lint:fix": "npm run eslint:fix && npm run prettier:write",
     "eslint": "npx eslint --ignore-path=.gitignore .",
@@ -35,6 +36,7 @@
   "dependencies": {
     "@swc/core": "^1.2.171",
     "js-yaml": "^4.0.0",
+    "postcss": "^8.4.12",
     "unified-lint-rule": "^2.0.0",
     "unist-util-visit": "^4.0.0"
   },