feat: add css-baseline preset

README.md

@@ -76,8 +76,6 @@ module.exports = {
 
 ### `eslint.config.js` (Flat Config)
 
-> [!NOTE]
-> Flat Config support is experimental. The applicable rules and scope may have changed.
 
 Put it into your `eslint.config.js`
 
@@ -115,6 +113,8 @@ module.exports = [
   - Including `@cybozu/eslint-config/presets/typescript` and `@cybozu/eslint-config/presets/react`
 - `@cybozu/eslint-config/presets/es5`
   - or `@cybozu/eslint-config/flat/presets/es5` for Flat Config
+- `@cybozu/eslint-config/flat/presets/css-baseline` for Flat Config
+  - CSS baseline rules using `@eslint/css`
 
 ## Prettier Support
 

flat/lib/css-baseline.js

@@ -0,0 +1,32 @@
+const css = require("@eslint/css");
+
+/**
+ * @return { import("eslint").Linter.FlatConfig[] }
+ */
+module.exports = function cssBaseline() {
+  return [
+    {
+      plugins: {
+        css: css.default,
+      },
+      language: "css/css",
+      // the same error recovery algorithm as the browser
+      // https://eslint.org/blog/2025/02/eslint-css-support/#tolerant-parsing-support
+      languageOptions: {
+        tolerant: true,
+      },
+      rules: {
+        "css/no-duplicate-imports": "error",
+
+        // Lint CSS files to ensure they are using
+        // only Baseline Widely available features:
+        "css/use-baseline": [
+          "warn",
+          {
+            available: "widely",
+          },
+        ],
+      },
+    },
+  ];
+};

flat/presets/css-baseline.js

@@ -0,0 +1,6 @@
+const cssBaseline = require("../lib/css-baseline.js");
+
+/**
+ * @type { import("eslint").Linter.Config[] }
+ */
+module.exports = [{ files: ["**/*.css"] }, ...cssBaseline()];

package.json

@@ -28,6 +28,7 @@
   "author": "cybozu",
   "license": "MIT",
   "devDependencies": {
+    "@eslint/css": "^0.9.0",
     "@types/react": "^18.3.23",
     "eslint": "^9.19.0",
     "mocha": "^11.7.1",

test/fixtures/css-baseline/error.css

@@ -0,0 +1,22 @@
+/* CSS with duplicate imports and non-widely available features */
+
+/* duplicate imports are subject to error */
+@import url("styles.css");
+@import url("styles.css");
+
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  /* non-widely available warning */
+  container-type: inline-size;
+  /* non-widely available warning */
+  backdrop-filter: blur(10px);
+  aspect-ratio: 16/9;
+}
+
+.modern-feature {
+  /* non-widely available warning: oklch */
+  color: oklch(0.7 0.2 180);
+  /* non-widely available warning */
+  accent-color: blue;
+}

test/fixtures/css-baseline/ok.css

@@ -0,0 +1,14 @@
+/* Valid CSS using widely available features */
+.container {
+  display: flex;
+  margin: 10px;
+  padding: 20px;
+  background-color: #ffffff;
+  border-radius: 4px;
+}
+
+.button {
+  color: #000;
+  font-size: 16px;
+  text-align: center;
+}

test/flat/preset-css-baseline-test.js

@@ -0,0 +1,16 @@
+const assert = require("assert");
+const runLintWithFixturesFlat = require("../lib/runLintWithFixturesFlat");
+const cssBaseline = require("../../flat/presets/css-baseline");
+
+describe("flat preset css-baseline", () => {
+  it("should get expected errors and warnings", async () => {
+    const result = await runLintWithFixturesFlat("css-baseline", cssBaseline);
+    assert.deepStrictEqual(result, {
+      "ok.css": {},
+      "error.css": {
+        errors: ["css/no-duplicate-imports"],
+        warnings: ["css/use-baseline", "css/use-baseline", "css/use-baseline", "css/use-baseline"],
+      },
+    });
+  });
+});