@plumeria/eslint-plugin 19.9.0 → 19.10.0

package/README.md

@@ -8,6 +8,7 @@ Below are the available rules and the recommended configuration.
 The `plugin:@plumeria/recommended` config enables the following:
 
 - `@plumeria/custom-props-require-import`: **error**
+- `@plumeria/expand-border-shorthands`: **warn**
 - `@plumeria/no-combinator`: **error**
 - `@plumeria/no-destructure`: **error**
 - `@plumeria/no-inline-object`: **error**
@@ -82,6 +83,27 @@ the import.
 
 Accepts `{ styleProp }`; see [Configuring the styling prop](#configuring-the-styling-prop).
 
+### expand-border-shorthands
+
+Expands a border shorthand that bundles a width, a style and a color —
+`border`, `borderBlock`, `borderInline`, and the eight edge forms — into the
+three declarations it stands for. Those bundles are the only properties left
+that cross an axis shorthand without either containing the other, so expanding
+them turns the last unrankable pairs into ordinary shorthand-to-longhand ones.
+
+Fixable. A value it cannot split, such as `var(--edge)` or `inherit`, is
+reported without a fix: leaving it silent would let the expanded declarations
+elsewhere outrank it.
+
+```js
+borderTop: '1px solid red'
+// becomes
+borderTopWidth: '1px', borderTopStyle: 'solid', borderTopColor: 'red'
+```
+
+A shorthand resets what it omits, so `borderBlock: 'solid'` expands with
+`medium` and `currentcolor` written out.
+
 ### no-combinator
 
 Disallow combinators `>`, `+`, `~` and descendant combinator (space) unless inside functional pseudo-classes.
@@ -139,6 +161,8 @@ Accepts `{ styleProp }`; see [Configuring the styling prop](#configuring-the-sty
 
 Disallow unknown CSS properties in camelCase within `css.create`, `css.keyframes`, and `css.viewTransition`.
 
+In `css.create`, a key that holds an object is reported with a hint that nested selectors start with `:`, `[` or `@`.
+
 ### no-unresolved-composition
 
 A safety net for `css.use()`. Warns when its result is combined with other class names or passed to another function, or when a function key is passed to it. Pass every style to one `css.use()` call, and apply function keys to the styling prop.
@@ -174,8 +198,8 @@ Validates at-rules inside `css.create()`. It accepts `@media`, `@container`, `@s
 
 ## Optional rules
 
-These rules are not enabled by `plumeria.configs.recommended`. Enable only the
-policy or transformation that fits the project:
+These rules are not enabled by `plumeria.configs.recommended`. Enable the
+spelling policy that fits the project:
 
 ```js
 export default [
@@ -183,33 +207,11 @@ export default [
   {
     rules: {
       '@plumeria/no-logical-properties': 'warn',
-      '@plumeria/expand-border-shorthands': 'warn',
     },
   },
 ];
 ```
 
-### expand-border-shorthands
-
-Expands a border shorthand that bundles a width, a style and a color —
-`border`, `borderBlock`, `borderInline`, and the eight edge forms — into the
-three declarations it stands for. Those bundles are the only properties left
-that cross an axis shorthand without either containing the other, so expanding
-them turns the last unrankable pairs into ordinary shorthand-to-longhand ones.
-
-Fixable. A value it cannot split, such as `var(--edge)` or `inherit`, is
-reported without a fix: leaving it silent would let the expanded declarations
-elsewhere outrank it.
-
-```js
-borderTop: '1px solid red'
-// becomes
-borderTopWidth: '1px', borderTopStyle: 'solid', borderTopColor: 'red'
-```
-
-A shorthand resets what it omits, so `borderBlock: 'solid'` expands with
-`medium` and `currentcolor` written out.
-
 ### no-physical-properties / no-logical-properties
 
 Disallow one of the two names a property can carry, so a project writes edges
@@ -226,19 +228,24 @@ appears under one spelling only can never meet its other spelling on an element.
 A shorthand with no single counterpart, such as `borderBlockWidth`, is outside
 either rule and stays reported.
 
+The bundler plugins turn the matching rule on in the build lint as well:
+`withoutPhysicalProperties` runs `no-physical-properties`, and
+`withoutLogicalProperties` runs `no-logical-properties`, `{ sizes }` included.
+
 ## CLI (plumerialint)
 
 This package provides a CLI command, `plumerialint`, as a convenient way
 to run Plumeria's custom ESLint rules.
 
-It uses `oxlint` internally for fast linting with code snippets in output.
+It runs `oxlint`, which this package depends on, for fast linting with code
+snippets in output, so oxlint needs no separate install.
 
 ### Installation
 
 ```bash
-npm install -D @plumeria/eslint-plugin oxlint
+npm install -D @plumeria/eslint-plugin
 # or
-pnpm add -D @plumeria/eslint-plugin oxlint
+pnpm add -D @plumeria/eslint-plugin
 ```
 
 ### Usage
@@ -250,16 +257,6 @@ plumerialint
 The process exits with a non-zero status code if any errors or warnings are found,
 making it suitable for use in CI and build pipelines.
 
-Example usage in `package.json`:
-
-```json
-{
-  "scripts": {
-    "lint": "plumerialint"
-  }
-}
-```
-
 ### Aborting Builds on Lint Errors (Parallel Pipeline)
 
 You can run `plumerialint` in parallel with your build command (e.g. `next build` or `vite build`) using the `--` separator:
@@ -274,4 +271,4 @@ You can run `plumerialint` in parallel with your build command (e.g. `next build
 
 If `plumerialint` detects any styling errors or warnings, it will print the diagnostics, kill the build process immediately, and exit with a non-zero code. This avoids compiling when styling validation fails.
 
-**Note:** `oxlint` is required as `plumerialint` uses it internally.
+With `@plumeria/next-plugin` and `@plumeria/unplugin` (except on esbuild and Bun), this lint is integrated into the build by default, so it needs no setup. Pass `lint: false` to the plugin to build without it.

package/bin/oxlint.js

@@ -4,6 +4,11 @@ const { spawn } = require('child_process');
 const process = require('process');
 const path = require('path');
 const oxlintConfig = path.join(__dirname, '..', 'oxlint.json');
+const oxlintBin = path.join(
+  path.dirname(require.resolve('oxlint/package.json')),
+  'bin',
+  'oxlint',
+);
 
 const doubleDashIndex = process.argv.indexOf('--');
 let oxlintExtraArgs = [];
@@ -20,22 +25,22 @@ if (doubleDashIndex !== -1) {
   oxlintExtraArgs = process.argv.slice(2);
 }
 
-const oxlintArgs = ['-c', oxlintConfig, '--deny-warnings', ...oxlintExtraArgs];
+const oxlintArgs = [
+  oxlintBin,
+  '-c',
+  oxlintConfig,
+  '--deny-warnings',
+  '--no-error-on-unmatched-pattern',
+  ...oxlintExtraArgs,
+];
 
 function handleOxlintError(err) {
-  if (err.code === 'ENOENT') {
-    console.error('\n✖ oxlint is not installed.');
-    console.error('➡︎ plumerialint uses oxlint.');
-    console.error('✔ please install oxlint.\n');
-    process.exit(1);
-  } else {
-    console.error('Error running oxlint:', err.message);
-    process.exit(1);
-  }
+  console.error('Error running oxlint:', err.message);
+  process.exit(1);
 }
 
 if (!buildCommand) {
-  const child = spawn('oxlint', oxlintArgs, { stdio: 'inherit' });
+  const child = spawn(process.execPath, oxlintArgs, { stdio: 'inherit' });
   child.on('error', handleOxlintError);
   child.on('close', (code) => {
     process.exit(code || 0);
@@ -47,7 +52,7 @@ if (!buildCommand) {
   let buildCode = null;
   let aborted = false;
 
-  const oxlintChild = spawn('oxlint', oxlintArgs, { stdio: 'inherit' });
+  const oxlintChild = spawn(process.execPath, oxlintArgs, { stdio: 'inherit' });
 
   const fullBuildCommand =
     buildArgs.length > 0
@@ -57,6 +62,7 @@ if (!buildCommand) {
   const buildChild = spawn(fullBuildCommand, {
     stdio: 'inherit',
     shell: true,
+    env: { ...process.env, PLUMERIA_LINT_GUARD: '1' },
   });
 
   function abort(exitCode, failedSource) {

package/dist/guard.d.ts

@@ -0,0 +1,11 @@
+export declare const GUARD_ENV = "PLUMERIA_LINT_GUARD";
+type Spelling = boolean | {
+    sizes?: boolean;
+} | undefined;
+export interface SpellingOptions {
+    withoutLogicalProperties?: Spelling;
+    withoutPhysicalProperties?: Spelling;
+}
+export declare function spellingRules(options: SpellingOptions): Record<string, unknown>;
+export declare function startLintGuard(rules?: Record<string, unknown>): boolean;
+export {};

package/dist/guard.js

@@ -0,0 +1,105 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GUARD_ENV = void 0;
+exports.spellingRules = spellingRules;
+exports.startLintGuard = startLintGuard;
+const child_process_1 = require("child_process");
+const fs = __importStar(require("fs"));
+const os = __importStar(require("os"));
+const path = __importStar(require("path"));
+exports.GUARD_ENV = 'PLUMERIA_LINT_GUARD';
+const BASE_CONFIG = path.join(__dirname, '..', 'oxlint.json');
+function spellingRule(spelling) {
+    if (!spelling)
+        return undefined;
+    return typeof spelling === 'object' && spelling.sizes
+        ? ['error', { sizes: true }]
+        : 'error';
+}
+function spellingRules(options) {
+    const rules = {};
+    const logical = spellingRule(options.withoutLogicalProperties);
+    const physical = spellingRule(options.withoutPhysicalProperties);
+    if (logical)
+        rules['@plumeria/no-logical-properties'] = logical;
+    if (physical)
+        rules['@plumeria/no-physical-properties'] = physical;
+    return rules;
+}
+function lintConfig(rules) {
+    if (Object.keys(rules).length === 0)
+        return BASE_CONFIG;
+    const file = path.join(os.tmpdir(), `plumeria-oxlint-${process.pid}.json`);
+    fs.writeFileSync(file, JSON.stringify({ extends: [BASE_CONFIG], rules }));
+    return file;
+}
+function startLintGuard(rules = {}) {
+    if (process.env[exports.GUARD_ENV])
+        return false;
+    process.env[exports.GUARD_ENV] = '1';
+    const config = lintConfig(rules);
+    const child = (0, child_process_1.spawn)(process.execPath, [
+        path.join(path.dirname(require.resolve('oxlint/package.json')), 'bin', 'oxlint'),
+        '-c',
+        config,
+        '--deny-warnings',
+        '--no-error-on-unmatched-pattern',
+    ], { stdio: 'inherit' });
+    const exit = process.exit.bind(process);
+    let lintCode = null;
+    let pendingCode = null;
+    child.on('error', (error) => {
+        console.error(`\n✖ [plumeria] Could not run oxlint: ${error.message}`);
+        exit(1);
+    });
+    child.on('close', (code) => {
+        if (config !== BASE_CONFIG)
+            fs.rmSync(config, { force: true });
+        lintCode = code ?? 1;
+        if (lintCode !== 0) {
+            console.error('\n✖ [plumeria] Linting failed. Aborting build...');
+            return exit(lintCode);
+        }
+        if (pendingCode !== null)
+            exit(pendingCode);
+    });
+    process.exit = ((code) => {
+        if (lintCode !== null)
+            return exit(code);
+        pendingCode = code;
+    });
+    return true;
+}

package/dist/index.js

@@ -50,6 +50,7 @@ const configs = {
         },
         rules: {
             '@plumeria/custom-props-require-import': 'error',
+            '@plumeria/expand-border-shorthands': 'warn',
             '@plumeria/no-combinator': 'error',
             '@plumeria/no-destructure': 'error',
             '@plumeria/no-inline-object': 'error',

package/dist/rules/no-unknown-css-properties.js

@@ -13,6 +13,7 @@ exports.noUnknownCssProperties = {
         },
         messages: {
             unknownProperty: "Unknown CSS property '{{ name }}'.",
+            unknownNestedProperty: "Unknown CSS property '{{ name }}'. Nested selectors start with ':', '[' or '@'.",
         },
         schema: [],
     },
@@ -38,6 +39,7 @@ exports.noUnknownCssProperties = {
             },
             CallExpression(node) {
                 let isCssProperties = false;
+                let isCreate = false;
                 if (node.callee.type === 'MemberExpression') {
                     if (node.callee.object.type === 'Identifier' &&
                         plumeriaAliases[node.callee.object.name] === 'NAMESPACE') {
@@ -48,6 +50,7 @@ exports.noUnknownCssProperties = {
                             propertyName === 'keyframes' ||
                             propertyName === 'viewTransition') {
                             isCssProperties = true;
+                            isCreate = propertyName === 'create';
                         }
                     }
                 }
@@ -57,6 +60,7 @@ exports.noUnknownCssProperties = {
                         alias === 'keyframes' ||
                         alias === 'viewTransition') {
                         isCssProperties = true;
+                        isCreate = alias === 'create';
                     }
                 }
                 if (isCssProperties) {
@@ -67,18 +71,18 @@ exports.noUnknownCssProperties = {
                                     return;
                                 const style = (0, styleObject_1.styleObjectFromValue)(prop.value);
                                 if (style)
-                                    checkStyleObject(style);
+                                    checkStyleObject(style, isCreate);
                             });
                         }
                     });
                 }
             },
         };
-        function checkStyleObject(node) {
+        function checkStyleObject(node, isCreate) {
             node.properties.forEach((prop) => {
                 if (prop.type === 'Property') {
                     if (prop.value.type === 'ObjectExpression') {
-                        checkStyleObject(prop.value);
+                        checkStyleObject(prop.value, isCreate);
                     }
                     let isCheckable = false;
                     let keyName = '';
@@ -103,7 +107,9 @@ exports.noUnknownCssProperties = {
                             if (!knownProperties.has(kebabName)) {
                                 context.report({
                                     node: prop.key,
-                                    messageId: 'unknownProperty',
+                                    messageId: isCreate && prop.value.type === 'ObjectExpression'
+                                        ? 'unknownNestedProperty'
+                                        : 'unknownProperty',
                                     data: {
                                         name: keyName,
                                     },

package/oxlint.json

@@ -6,10 +6,12 @@
     }
   ],
   "plugins": [],
+  "categories": { "correctness": "off" },
   "ignorePatterns": ["**/*.svelte", "**/*.vue"],
 
   "rules": {
     "@plumeria/custom-props-require-import": "error",
+    "@plumeria/expand-border-shorthands": "warn",
     "@plumeria/no-combinator": "error",
     "@plumeria/no-destructure": "error",
     "@plumeria/no-inline-object": "error",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/eslint-plugin",
-  "version": "19.9.0",
+  "version": "19.10.0",
   "description": "Plumeria ESLint plugin",
   "author": "Refirst 11",
   "license": "MIT",
@@ -29,6 +29,10 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./guard": {
+      "types": "./dist/guard.d.ts",
+      "default": "./dist/guard.js"
+    },
     "./oxlint-plugin": "./oxlint-plugin.js"
   },
   "files": [
@@ -53,8 +57,9 @@
   },
   "dependencies": {
     "known-css-properties": "^0.37.0",
+    "oxlint": "1.87.0",
     "zss-engine": "2.9.1",
-    "@plumeria/compiler": "19.9.0"
+    "@plumeria/compiler": "19.10.0"
   },
   "scripts": {
     "build": "rimraf dist && pnpm cjs",