@plumeria/eslint-plugin 16.5.0 → 17.0.1

package/README.md

@@ -7,7 +7,7 @@ Below are the available rules and the recommended configuration.
 
 The `plugin:@plumeria/recommended` config enables the following:
 
-- `@plumeria/style-name-requires-import`: **error**
+- `@plumeria/props-require-import`: **error**
 - `@plumeria/no-combinator`: **error**
 - `@plumeria/no-destructure`: **error**
 - `@plumeria/no-inline-object`: **error**
@@ -27,11 +27,49 @@ import plumeria from '@plumeria/eslint-plugin';
 export default [plumeria.configs.recommended];
 ```
 
+## Configuring the styling prop
+
+Both `props-require-import` and `no-mixed-styling-props` need to know which JSX
+prop carries styles. It is `styleName` unless you changed it, so most projects
+configure nothing.
+
+If you did rename it — via `styleProp` on `withPlumeria` or on the unplugin
+options — tell the plugin the same name. ESLint cannot read it from your bundler
+config, so set it once in `settings` and every rule picks it up:
+
+```js
+import plumeria from '@plumeria/eslint-plugin';
+
+export default [
+  plumeria.configs.recommended,
+  {
+    settings: {
+      plumeria: { styleProp: 'sx' },
+    },
+  },
+];
+```
+
+A single rule can override that if you need it to:
+
+```js
+{
+  rules: {
+    '@plumeria/no-mixed-styling-props': ['error', { styleProp: 'sx' }],
+  },
+}
+```
+
+The name must match whatever the loader or unplugin was given. If they disagree,
+the lint rules report against a prop the compiler never transforms.
+
 ## Rules
 
-### style-name-requires-import
+### props-require-import
 
-Disallow styleName prop in files without a @plumeria/core import.
+Disallow the styling prop in files without a `@plumeria/core` import.
+
+Accepts `{ styleProp }`; see [Configuring the styling prop](#configuring-the-styling-prop).
 
 ### no-combinator
 
@@ -56,7 +94,9 @@ Disallow invalid selector inside `css.create()` and `css.keyframes()` and `css.v
 
 ### no-mixed-styling-props
 
-Disallow mixing `styleName` with `className` or `style`. `styleName` can handle both `className` and `style`.
+Disallow mixing the styling prop with `className` or `style`. `styleName` can handle both `className` and `style`.
+
+Accepts `{ styleProp }`; see [Configuring the styling prop](#configuring-the-styling-prop).
 
 ### no-unknown-css-properties
 
@@ -71,8 +111,10 @@ Warns when object keys are defined but not used, mainly in component files.
 Automatically sorts CSS properties in the recommended order for consistency and maintainability.
 
 ### format-properties
+
 Automatically format for consistency and maintainability.
-- Formats a line into a multi-line.  
+
+- Formats a line into a multi-line.
 - Formats by filling in blank lines.
 
 ### validate-values
@@ -132,4 +174,3 @@ 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.
-

package/dist/index.js

@@ -1,5 +1,5 @@
 "use strict";
-const style_name_requires_import_1 = require("./rules/style-name-requires-import");
+const props_require_import_1 = require("./rules/props-require-import");
 const no_combinator_1 = require("./rules/no-combinator");
 const no_destructure_1 = require("./rules/no-destructure");
 const no_inline_object_1 = require("./rules/no-inline-object");
@@ -13,7 +13,7 @@ const format_properties_1 = require("./rules/format-properties");
 const validate_values_1 = require("./rules/validate-values");
 const validate_pseudos_1 = require("./rules/validate-pseudos");
 const rules = {
-    'style-name-requires-import': style_name_requires_import_1.styleNameRequiresImport,
+    'props-require-import': props_require_import_1.propsRequireImport,
     'no-combinator': no_combinator_1.noCombinator,
     'no-destructure': no_destructure_1.noDestructure,
     'no-inline-object': no_inline_object_1.noInlineObject,
@@ -35,7 +35,7 @@ const configs = {
             },
         },
         rules: {
-            '@plumeria/style-name-requires-import': 'error',
+            '@plumeria/props-require-import': 'error',
             '@plumeria/no-combinator': 'error',
             '@plumeria/no-destructure': 'error',
             '@plumeria/no-inline-object': 'error',

package/dist/rules/no-mixed-styling-props.js

@@ -1,32 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.noMixedStylingProps = void 0;
+const style_prop_1 = require("../util/style-prop");
 exports.noMixedStylingProps = {
     meta: {
         type: 'problem',
         docs: {
-            description: 'Disallow className and style props when styleName is present',
+            description: 'Disallow className and style props when the styling prop is present',
         },
         messages: {
-            noMixedStylingProps: '"styleName" handles both "className" and "style". Avoid mixing them.',
+            noMixedStylingProps: '"{{prop}}" handles both "className" and "style". Avoid mixing them.',
         },
-        schema: [],
+        schema: style_prop_1.stylePropSchema,
     },
     create(context) {
+        const styleProp = (0, style_prop_1.resolveStyleProp)(context);
+        const mixedProps = ['className', 'style'].filter((name) => name !== styleProp);
         return {
             JSXOpeningElement(node) {
                 const attributes = node.attributes;
-                const hasStyleName = attributes.some((attr) => attr.type === 'JSXAttribute' &&
+                const hasStyleProp = attributes.some((attr) => attr.type === 'JSXAttribute' &&
                     attr.name.type === 'JSXIdentifier' &&
-                    attr.name.name === 'styleName');
-                if (hasStyleName) {
+                    attr.name.name === styleProp);
+                if (hasStyleProp) {
                     for (const attr of attributes) {
                         if (attr.type === 'JSXAttribute' &&
                             attr.name.type === 'JSXIdentifier' &&
-                            (attr.name.name === 'className' || attr.name.name === 'style')) {
+                            mixedProps.includes(attr.name.name)) {
                             context.report({
                                 node: attr,
                                 messageId: 'noMixedStylingProps',
+                                data: { prop: styleProp },
                             });
                         }
                     }

package/dist/rules/props-require-import.d.ts

@@ -0,0 +1,2 @@
+import type { Rule } from 'eslint';
+export declare const propsRequireImport: Rule.RuleModule;

package/dist/rules/{style-name-requires-import.js → props-require-import.js}

@@ -1,21 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.styleNameRequiresImport = void 0;
-exports.styleNameRequiresImport = {
+exports.propsRequireImport = void 0;
+const style_prop_1 = require("../util/style-prop");
+exports.propsRequireImport = {
     meta: {
         type: 'problem',
         docs: {
-            description: 'Disallow styleName prop in files without a @plumeria/core import',
+            description: 'Disallow the styling prop in files without a @plumeria/core import',
         },
         fixable: 'code',
         messages: {
-            styleNameError: 'styleName requires importing "@plumeria/core".',
+            requiresImport: '{{prop}} requires importing "@plumeria/core".',
         },
-        schema: [],
+        schema: style_prop_1.stylePropSchema,
     },
     create(context) {
+        const styleProp = (0, style_prop_1.resolveStyleProp)(context);
         let hasPlumeriaImport = false;
-        const styleNameNodes = [];
+        const stylePropNodes = [];
         return {
             ImportDeclaration(node) {
                 const source = node.source.value;
@@ -24,16 +26,17 @@ exports.styleNameRequiresImport = {
                 }
             },
             JSXAttribute(node) {
-                if (node.name && node.name.name === 'styleName') {
-                    styleNameNodes.push(node);
+                if (node.name && node.name.name === styleProp) {
+                    stylePropNodes.push(node);
                 }
             },
             'Program:exit'() {
                 if (!hasPlumeriaImport) {
-                    styleNameNodes.forEach((node, index) => {
+                    stylePropNodes.forEach((node, index) => {
                         context.report({
                             node,
-                            messageId: 'styleNameError',
+                            messageId: 'requiresImport',
+                            data: { prop: styleProp },
                             fix(fixer) {
                                 if (index === 0) {
                                     return fixer.insertTextBefore(context.sourceCode.ast, 'import "@plumeria/core";\n');

package/dist/rules/validate-values.js

@@ -520,6 +520,27 @@ function isValidTextDecorationLine(value) {
         return false;
     });
 }
+function isValidContain(value) {
+    const singleValues = ['none', 'strict', 'content'];
+    const sizeValues = ['size', 'inline-size'];
+    const featureValues = ['layout', 'style', 'paint'];
+    const usedValues = new Set();
+    const trimmedValue = value.trim();
+    if (value !== trimmedValue)
+        return false;
+    const tokens = trimmedValue.split(/\s+/);
+    return tokens.every((token) => {
+        if (token.startsWith('var(') && varRegex.test(token))
+            return true;
+        if (singleValues.includes(token))
+            return tokens.length === 1;
+        if (sizeValues.includes(token))
+            return !usedValues.has('size') && usedValues.add('size');
+        if (featureValues.includes(token))
+            return !usedValues.has(token) && usedValues.add(token);
+        return false;
+    });
+}
 function isValidFontVariantEastAsian(value) {
     const fontVariantEastAsianRegex = new RegExp('^' +
         `(?:jis78|jis83|jis90|jis04|simplified|traditional|full-width|proportional-width|ruby|${varString})` +
@@ -1297,6 +1318,9 @@ function getValidator(key) {
         const r = new RegExp(`^(${urlString}|${gradientString}|${imageSetString}|${attrString}|${counterString}|${countersString}|${stringString})$`);
         validator = (v) => r.test(v);
     }
+    else if (['contain'].includes(key)) {
+        validator = isValidContain;
+    }
     else if (['columns'].includes(key)) {
         const r = new RegExp(`^(?:auto\\s*(?:auto|${lvp}|${numberPattern})?|${numberPattern}\\s*(?:auto|${lvp}|${numberPattern})?|${lvp}\\s*(?:auto|${lvp}|${numberPattern})?)$`);
         validator = (v) => r.test(v);

package/dist/util/style-prop.d.ts

@@ -0,0 +1,12 @@
+import type { Rule } from 'eslint';
+export declare const DEFAULT_STYLE_PROP = "styleName";
+export declare const stylePropSchema: {
+    type: string;
+    properties: {
+        styleProp: {
+            type: string;
+        };
+    };
+    additionalProperties: boolean;
+}[];
+export declare function resolveStyleProp(context: Rule.RuleContext): string;

package/dist/util/style-prop.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stylePropSchema = exports.DEFAULT_STYLE_PROP = void 0;
+exports.resolveStyleProp = resolveStyleProp;
+exports.DEFAULT_STYLE_PROP = 'styleName';
+exports.stylePropSchema = [
+    {
+        type: 'object',
+        properties: {
+            styleProp: { type: 'string' },
+        },
+        additionalProperties: false,
+    },
+];
+function resolveStyleProp(context) {
+    const fromRule = context.options?.[0]
+        ?.styleProp;
+    if (fromRule)
+        return fromRule;
+    const fromSettings = context.settings?.plumeria?.styleProp;
+    return fromSettings ?? exports.DEFAULT_STYLE_PROP;
+}

package/dist/util/validData.js

@@ -316,7 +316,16 @@ const validData = {
     columnSpan: ['none', 'all'],
     columnWidth: ['auto', 'max-content', 'min-content'],
     columns: [],
-    contain: ['none', 'strict', 'content'],
+    contain: [
+        'none',
+        'strict',
+        'content',
+        'size',
+        'inline-size',
+        'layout',
+        'style',
+        'paint',
+    ],
     containerType: ['size', 'inline-size', 'normal'],
     content: [
         'open-quote',

package/oxlint.json

@@ -9,7 +9,7 @@
   "ignorePatterns": ["**/*.svelte", "**/*.vue"],
 
   "rules": {
-    "@plumeria/style-name-requires-import": "error",
+    "@plumeria/props-require-import": "error",
     "@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": "16.5.0",
+  "version": "17.0.1",
   "description": "Plumeria ESLint plugin",
   "author": "Refirst 11",
   "license": "MIT",

package/dist/rules/style-name-requires-import.d.ts

@@ -1,2 +0,0 @@
-import type { Rule } from 'eslint';
-export declare const styleNameRequiresImport: Rule.RuleModule;