@plumeria/eslint-plugin 17.0.0 → 18.0.0

package/README.md

@@ -30,7 +30,7 @@ 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
+prop carries styles. It is `classStyle` unless you changed it, so most projects
 configure nothing.
 
 If you did rename it — via `styleProp` on `withPlumeria` or on the unplugin
@@ -81,7 +81,7 @@ Disallow destructuring APIs.
 
 ### no-inline-object
 
-Disallow passing inline object to `styleName`, `css.use()` and `css.variants()`. Only compiled styles from `css.create()` are allowed.
+Disallow passing inline object to `classStyle`, `css.use()` and `css.variants()`. Only compiled styles from `css.create()` are allowed.
 
 ### no-inner-call
 
@@ -94,7 +94,7 @@ Disallow invalid selector inside `css.create()` and `css.keyframes()` and `css.v
 
 ### no-mixed-styling-props
 
-Disallow mixing the styling prop with `className` or `style`. `styleName` can handle both `className` and `style`.
+Disallow mixing the styling prop with `className` or `style`. `classStyle` can handle both `className` and `style`.
 
 Accepts `{ styleProp }`; see [Configuring the styling prop](#configuring-the-styling-prop).
 

package/dist/rules/no-inline-object.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.noInlineObject = void 0;
+const style_prop_1 = require("../util/style-prop");
 function isPlumeriaMemberCall(node, aliases, method) {
     const callee = node.callee;
     if (callee.type === 'MemberExpression') {
@@ -20,16 +21,17 @@ exports.noInlineObject = {
     meta: {
         type: 'problem',
         docs: {
-            description: 'Disallow inline objects in styleName and css.use',
+            description: 'Disallow inline objects in the styling prop and css.use',
         },
         messages: {
-            noInlineObjectInStyleName: 'Do not pass inline objects to styleName. It only accepts compiled styles from css.create().',
+            noInlineObjectInStyleProp: 'Do not pass inline objects to "{{prop}}". It only accepts compiled styles from css.create().',
             noInlineObjectInCssUse: 'Do not pass inline objects to css.use(). It only accepts compiled styles from css.create().',
             noInlineObjectInCssVariants: 'Do not pass inline objects to css.variants(). It only accepts compiled styles from css.create().',
         },
-        schema: [],
+        schema: style_prop_1.stylePropSchema,
     },
     create(context) {
+        const styleProp = (0, style_prop_1.resolveStyleProp)(context);
         const plumeriaAliases = {};
         return {
             ImportDeclaration(node) {
@@ -53,14 +55,15 @@ exports.noInlineObject = {
             },
             JSXAttribute(node) {
                 if (node.name.type === 'JSXIdentifier' &&
-                    node.name.name === 'styleName') {
+                    node.name.name === styleProp) {
                     const value = node.value;
                     if (value?.type === 'JSXExpressionContainer') {
                         const expr = value.expression;
                         if (expr.type === 'ObjectExpression') {
                             context.report({
                                 node: expr,
-                                messageId: 'noInlineObjectInStyleName',
+                                messageId: 'noInlineObjectInStyleProp',
+                                data: { prop: styleProp },
                             });
                         }
                         else if (expr.type === 'ArrayExpression') {
@@ -68,7 +71,8 @@ exports.noInlineObject = {
                                 if (el?.type === 'ObjectExpression') {
                                     context.report({
                                         node: el,
-                                        messageId: 'noInlineObjectInStyleName',
+                                        messageId: 'noInlineObjectInStyleProp',
+                                        data: { prop: styleProp },
                                     });
                                 }
                             });

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

@@ -1,5 +1,5 @@
 import type { Rule } from 'eslint';
-export declare const DEFAULT_STYLE_PROP = "styleName";
+export declare const DEFAULT_STYLE_PROP = "classStyle";
 export declare const stylePropSchema: {
     type: string;
     properties: {

package/dist/util/style-prop.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.stylePropSchema = exports.DEFAULT_STYLE_PROP = void 0;
 exports.resolveStyleProp = resolveStyleProp;
-exports.DEFAULT_STYLE_PROP = 'styleName';
+exports.DEFAULT_STYLE_PROP = 'classStyle';
 exports.stylePropSchema = [
     {
         type: 'object',

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/eslint-plugin",
-  "version": "17.0.0",
+  "version": "18.0.0",
   "description": "Plumeria ESLint plugin",
   "author": "Refirst 11",
   "license": "MIT",