@plumeria/eslint-plugin 19.14.4 → 20.0.0

package/README.md

@@ -162,7 +162,7 @@ Accepts `{ styleProp }`; see [Configuring the styling prop](#configuring-the-sty
 
 ### no-unknown-css-properties
 
-Disallow unknown CSS properties in camelCase within `css.create`, `css.keyframes`, and `css.viewTransition`.
+Disallow unknown CSS properties in camelCase within `css.create`, `css.keyframes`, `css.viewTransition`, and `css.positionTry`. Inside `css.positionTry`, it also reports properties that `@position-try` does not accept.
 
 In `css.create`, a key that holds an object is reported with a hint that nested selectors start with `:`, `[` or `@`.
 
@@ -197,7 +197,7 @@ Validates CSS pseudo-classes and pseudo-elements inside `css.create()`. It check
 
 ### validate-at-rules
 
-Validates at-rules inside `css.create()`. It accepts `@media`, `@container`, `@supports`, `@layer`, and `@scope`, each with a prelude, whether or not a space separates it from the keyword, and supports validation of computed keys when TypeScript is available.
+Validates at-rules inside `css.create()`. It accepts `@media`, `@container`, and `@supports`, each with a prelude, whether or not a space separates it from the keyword, and `@starting-style` on its own, and supports validation of computed keys when TypeScript is available.
 
 ## Optional rules
 

package/dist/rules/expand-border-shorthands.js

@@ -41,6 +41,7 @@ exports.expandBorderShorthands = {
             },
             CallExpression(node) {
                 let isCssProperties = false;
+                let isPositionTry = false;
                 if (node.callee.type === 'MemberExpression') {
                     if (node.callee.object.type === 'Identifier' &&
                         plumeriaAliases[node.callee.object.name] === 'NAMESPACE') {
@@ -49,8 +50,10 @@ exports.expandBorderShorthands = {
                             : null;
                         if (propertyName === 'create' ||
                             propertyName === 'keyframes' ||
-                            propertyName === 'viewTransition') {
+                            propertyName === 'viewTransition' ||
+                            propertyName === 'positionTry') {
                             isCssProperties = true;
+                            isPositionTry = propertyName === 'positionTry';
                         }
                     }
                 }
@@ -58,13 +61,19 @@ exports.expandBorderShorthands = {
                     const aliasName = plumeriaAliases[node.callee.name];
                     if (aliasName === 'create' ||
                         aliasName === 'keyframes' ||
-                        aliasName === 'viewTransition') {
+                        aliasName === 'viewTransition' ||
+                        aliasName === 'positionTry') {
                         isCssProperties = true;
+                        isPositionTry = aliasName === 'positionTry';
                     }
                 }
                 if (isCssProperties) {
                     node.arguments.forEach((arg) => {
                         if (arg.type === 'ObjectExpression') {
+                            if (isPositionTry) {
+                                checkStyleObject(arg);
+                                return;
+                            }
                             arg.properties.forEach((prop) => {
                                 if (prop.type !== 'Property')
                                     return;

package/dist/rules/format-properties.js

@@ -140,6 +140,7 @@ exports.formatProperties = {
             },
             CallExpression(node) {
                 let isCssProperties = false;
+                let isPositionTry = false;
                 if (node.callee.type === 'MemberExpression') {
                     if (node.callee.object.type === 'Identifier' &&
                         plumeriaAliases[node.callee.object.name] === 'NAMESPACE') {
@@ -148,8 +149,10 @@ exports.formatProperties = {
                             : null;
                         if (propertyName === 'create' ||
                             propertyName === 'keyframes' ||
-                            propertyName === 'viewTransition') {
+                            propertyName === 'viewTransition' ||
+                            propertyName === 'positionTry') {
                             isCssProperties = true;
+                            isPositionTry = propertyName === 'positionTry';
                         }
                     }
                 }
@@ -157,13 +160,19 @@ exports.formatProperties = {
                     const alias = plumeriaAliases[node.callee.name];
                     if (alias === 'create' ||
                         alias === 'keyframes' ||
-                        alias === 'viewTransition') {
+                        alias === 'viewTransition' ||
+                        alias === 'positionTry') {
                         isCssProperties = true;
+                        isPositionTry = alias === 'positionTry';
                     }
                 }
                 if (isCssProperties) {
                     node.arguments.forEach((arg) => {
                         if (arg.type === 'ObjectExpression') {
+                            if (isPositionTry) {
+                                checkStyleObject(arg);
+                                return;
+                            }
                             arg.properties.forEach((prop) => {
                                 if (prop.type !== 'Property')
                                     return;

package/dist/rules/no-destructure.js

@@ -49,6 +49,8 @@ exports.noDestructure = {
                                     keyName === 'createTheme' ||
                                     keyName === 'keyframes' ||
                                     keyName === 'viewTransition' ||
+                                    keyName === 'positionTry' ||
+                                    keyName === 'varType' ||
                                     keyName === 'use') {
                                     context.report({
                                         node: prop,

package/dist/rules/no-inner-call.js

@@ -80,7 +80,9 @@ exports.noInnerCall = {
                         propertyName === 'createStatic' ||
                         propertyName === 'createTheme' ||
                         propertyName === 'keyframes' ||
-                        propertyName === 'viewTransition') {
+                        propertyName === 'viewTransition' ||
+                        propertyName === 'positionTry' ||
+                        propertyName === 'varType') {
                         context.report({
                             node,
                             messageId: 'noInnerCall',

package/dist/rules/no-mutable-binding.js

@@ -7,6 +7,8 @@ const STYLE_APIS = new Set([
     'createTheme',
     'keyframes',
     'viewTransition',
+    'positionTry',
+    'varType',
 ]);
 const isReference = (node, parent) => {
     if (!parent)

package/dist/rules/no-order-dependent-overlap.js

@@ -115,6 +115,7 @@ exports.noOrderDependentOverlap = {
             },
             CallExpression(node) {
                 let isCssProperties = false;
+                let isPositionTry = false;
                 if (node.callee.type === 'MemberExpression') {
                     if (node.callee.object.type === 'Identifier' &&
                         plumeriaAliases[node.callee.object.name] === 'NAMESPACE') {
@@ -123,8 +124,10 @@ exports.noOrderDependentOverlap = {
                             : null;
                         if (propertyName === 'create' ||
                             propertyName === 'keyframes' ||
-                            propertyName === 'viewTransition') {
+                            propertyName === 'viewTransition' ||
+                            propertyName === 'positionTry') {
                             isCssProperties = true;
+                            isPositionTry = propertyName === 'positionTry';
                         }
                     }
                 }
@@ -132,13 +135,19 @@ exports.noOrderDependentOverlap = {
                     const aliasName = plumeriaAliases[node.callee.name];
                     if (aliasName === 'create' ||
                         aliasName === 'keyframes' ||
-                        aliasName === 'viewTransition') {
+                        aliasName === 'viewTransition' ||
+                        aliasName === 'positionTry') {
                         isCssProperties = true;
+                        isPositionTry = aliasName === 'positionTry';
                     }
                 }
                 if (isCssProperties) {
                     node.arguments.forEach((arg) => {
                         if (arg.type === 'ObjectExpression') {
+                            if (isPositionTry) {
+                                checkStyleObject(arg);
+                                return;
+                            }
                             arg.properties.forEach((prop) => {
                                 if (prop.type !== 'Property')
                                     return;

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

@@ -5,15 +5,57 @@ const zss_engine_1 = require("zss-engine");
 const styleObject_1 = require("../util/styleObject");
 const cssPropertyData_1 = require("../util/cssPropertyData");
 const knownProperties = new Set(cssPropertyData_1.cssPropertyData);
+const positionTryProperties = new Set([
+    'position-anchor',
+    'position-area',
+    'inset',
+    'inset-block',
+    'inset-block-start',
+    'inset-block-end',
+    'inset-inline',
+    'inset-inline-start',
+    'inset-inline-end',
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'place-self',
+    'align-self',
+    'justify-self',
+    'inline-size',
+    'min-inline-size',
+    'max-inline-size',
+    'width',
+    'min-width',
+    'max-width',
+    'block-size',
+    'min-block-size',
+    'max-block-size',
+    'height',
+    'min-height',
+    'max-height',
+    'margin',
+    'margin-block',
+    'margin-block-start',
+    'margin-block-end',
+    'margin-inline',
+    'margin-inline-start',
+    'margin-inline-end',
+    'margin-top',
+    'margin-right',
+    'margin-bottom',
+    'margin-left',
+]);
 exports.noUnknownCssProperties = {
     meta: {
         type: 'problem',
         docs: {
-            description: 'Disallow unknown CSS properties in camelCase within css.create, css.keyframes, and css.viewTransition',
+            description: 'Disallow unknown CSS properties in camelCase within css.create, css.keyframes, css.viewTransition, and css.positionTry',
         },
         messages: {
             unknownProperty: "Unknown CSS property '{{ name }}'.",
             unknownNestedProperty: "Unknown CSS property '{{ name }}'. Nested selectors start with ':', '[' or '@'.",
+            positionTryProperty: "'{{ name }}' cannot be used in css.positionTry. @position-try only accepts inset, margin, sizing and self-alignment properties, positionAnchor and positionArea.",
         },
         schema: [],
     },
@@ -39,6 +81,7 @@ exports.noUnknownCssProperties = {
             },
             CallExpression(node) {
                 let isCssProperties = false;
+                let isPositionTry = false;
                 let isCreate = false;
                 if (node.callee.type === 'MemberExpression') {
                     if (node.callee.object.type === 'Identifier' &&
@@ -48,8 +91,10 @@ exports.noUnknownCssProperties = {
                             : null;
                         if (propertyName === 'create' ||
                             propertyName === 'keyframes' ||
-                            propertyName === 'viewTransition') {
+                            propertyName === 'viewTransition' ||
+                            propertyName === 'positionTry') {
                             isCssProperties = true;
+                            isPositionTry = propertyName === 'positionTry';
                             isCreate = propertyName === 'create';
                         }
                     }
@@ -58,14 +103,20 @@ exports.noUnknownCssProperties = {
                     const alias = plumeriaAliases[node.callee.name];
                     if (alias === 'create' ||
                         alias === 'keyframes' ||
-                        alias === 'viewTransition') {
+                        alias === 'viewTransition' ||
+                        alias === 'positionTry') {
                         isCssProperties = true;
+                        isPositionTry = alias === 'positionTry';
                         isCreate = alias === 'create';
                     }
                 }
                 if (isCssProperties) {
                     node.arguments.forEach((arg) => {
                         if (arg.type === 'ObjectExpression') {
+                            if (isPositionTry) {
+                                checkPositionTry(arg);
+                                return;
+                            }
                             arg.properties.forEach((prop) => {
                                 if (prop.type !== 'Property')
                                     return;
@@ -78,6 +129,38 @@ exports.noUnknownCssProperties = {
                 }
             },
         };
+        function checkPositionTry(node) {
+            node.properties.forEach((prop) => {
+                if (prop.type !== 'Property')
+                    return;
+                let keyName;
+                if (!prop.computed) {
+                    keyName =
+                        prop.key.type === 'Identifier'
+                            ? prop.key.name
+                            : String(prop.key.value);
+                }
+                else if (prop.key.type === 'Literal' &&
+                    typeof prop.key.value === 'string') {
+                    keyName = prop.key.value;
+                }
+                else {
+                    return;
+                }
+                const kebabName = (0, zss_engine_1.camelToKebabCase)(keyName);
+                if (positionTryProperties.has(kebabName))
+                    return;
+                context.report({
+                    node: prop.key,
+                    messageId: /^[:[@]|^--/.test(keyName) || knownProperties.has(kebabName)
+                        ? 'positionTryProperty'
+                        : 'unknownProperty',
+                    data: {
+                        name: keyName,
+                    },
+                });
+            });
+        }
         function checkStyleObject(node, isCreate) {
             node.properties.forEach((prop) => {
                 if (prop.type === 'Property') {

package/dist/rules/sort-properties.js

@@ -188,6 +188,7 @@ exports.sortProperties = {
             },
             CallExpression(node) {
                 let isCssProperties = false;
+                let isPositionTry = false;
                 if (node.callee.type === 'MemberExpression') {
                     if (node.callee.object.type === 'Identifier' &&
                         plumeriaAliases[node.callee.object.name] === 'NAMESPACE') {
@@ -196,8 +197,10 @@ exports.sortProperties = {
                             : null;
                         if (propertyName === 'create' ||
                             propertyName === 'keyframes' ||
-                            propertyName === 'viewTransition') {
+                            propertyName === 'viewTransition' ||
+                            propertyName === 'positionTry') {
                             isCssProperties = true;
+                            isPositionTry = propertyName === 'positionTry';
                         }
                     }
                 }
@@ -205,13 +208,19 @@ exports.sortProperties = {
                     const alias = plumeriaAliases[node.callee.name];
                     if (alias === 'create' ||
                         alias === 'keyframes' ||
-                        alias === 'viewTransition') {
+                        alias === 'viewTransition' ||
+                        alias === 'positionTry') {
                         isCssProperties = true;
+                        isPositionTry = alias === 'positionTry';
                     }
                 }
                 if (isCssProperties) {
                     node.arguments.forEach((arg) => {
                         if (arg.type === 'ObjectExpression') {
+                            if (isPositionTry) {
+                                checkStyleObject(arg);
+                                return;
+                            }
                             arg.properties.forEach((prop) => {
                                 if (prop.type !== 'Property')
                                     return;

package/dist/rules/validate-at-rules.js

@@ -4,14 +4,10 @@ exports.validateAtRules = void 0;
 exports.isValidAtRule = isValidAtRule;
 const styleObject_1 = require("../util/styleObject");
 const staticValue_1 = require("../util/staticValue");
-const VALID_AT_RULES = [
-    '@media',
-    '@container',
-    '@supports',
-    '@layer',
-    '@scope',
-];
+const VALID_AT_RULES = ['@media', '@container', '@supports'];
 function isValidAtRule(rule) {
+    if (rule === '@starting-style')
+        return true;
     return VALID_AT_RULES.some((keyword) => {
         if (!rule.startsWith(keyword))
             return false;

package/dist/rules/validate-values.js

@@ -899,34 +899,35 @@ function getFoldedValues(key) {
     foldedValueCache.set(key, folded);
     return folded;
 }
+const transformFunctionString = [
+    `matrix\\(${mathContentsString}\\)`,
+    `matrix3d\\(${mathContentsString}\\)`,
+    `perspective\\(${mathContentsString}\\)`,
+    `rotate\\(${mathContentsString}\\)`,
+    `rotate3d\\(${mathContentsString}\\)`,
+    `rotateX\\(${mathContentsString}\\)`,
+    `rotateY\\(${mathContentsString}\\)`,
+    `rotateZ\\(${mathContentsString}\\)`,
+    `scale\\(${mathContentsString}\\)`,
+    `scale3d\\(${mathContentsString}\\)`,
+    `scaleX\\(${mathContentsString}\\)`,
+    `scaleY\\(${mathContentsString}\\)`,
+    `scaleZ\\(${mathContentsString}\\)`,
+    `skew\\(${mathContentsString}\\)`,
+    `skewX\\(${mathContentsString}\\)`,
+    `skewY\\(${mathContentsString}\\)`,
+    `translate\\(${mathContentsString}\\)`,
+    `translate3d\\(${mathContentsString}\\)`,
+    `translateX\\(${mathContentsString}\\)`,
+    `translateY\\(${mathContentsString}\\)`,
+    `translateZ\\(${mathContentsString}\\)`,
+].join('|');
 function getValidator(key) {
     if (validatorCache.has(key))
         return validatorCache.get(key);
     let validator = null;
     const lvp = getLengthValuePattern(key);
-    const getTransformFunctions = () => [
-        `matrix\\(${mathContentsString}\\)`,
-        `matrix3d\\(${mathContentsString}\\)`,
-        `perspective\\(${mathContentsString}\\)`,
-        `rotate\\(${mathContentsString}\\)`,
-        `rotate3d\\(${mathContentsString}\\)`,
-        `rotateX\\(${mathContentsString}\\)`,
-        `rotateY\\(${mathContentsString}\\)`,
-        `rotateZ\\(${mathContentsString}\\)`,
-        `scale\\(${mathContentsString}\\)`,
-        `scale3d\\(${mathContentsString}\\)`,
-        `scaleX\\(${mathContentsString}\\)`,
-        `scaleY\\(${mathContentsString}\\)`,
-        `scaleZ\\(${mathContentsString}\\)`,
-        `skew\\(${mathContentsString}\\)`,
-        `skewX\\(${mathContentsString}\\)`,
-        `skewY\\(${mathContentsString}\\)`,
-        `translate\\(${mathContentsString}\\)`,
-        `translate3d\\(${mathContentsString}\\)`,
-        `translateX\\(${mathContentsString}\\)`,
-        `translateY\\(${mathContentsString}\\)`,
-        `translateZ\\(${mathContentsString}\\)`,
-    ].join('|');
+    const getTransformFunctions = () => transformFunctionString;
     const getGeometryBaseSet = () => 'content-box|padding-box|border-box|fill-box|stroke-box|view-box';
     if (['translate'].includes(key)) {
         const r = new RegExp(`^(${lvp}|${percentagePattern})(\\s(${lvp}|${percentagePattern}))?(\\s(${lvp}))?$`);
@@ -1848,6 +1849,109 @@ function getValidator(key) {
     validatorCache.set(key, validator);
     return validator;
 }
+const contextDependentUnits = [
+    'cap',
+    'ch',
+    'em',
+    'ex',
+    'ic',
+    'lh',
+    'rcap',
+    'rch',
+    'rem',
+    'rex',
+    'ric',
+    'rlh',
+    'cqw',
+    'cqh',
+    'cqi',
+    'cqb',
+    'cqmin',
+    'cqmax',
+];
+const contextDependentRegex = new RegExp(`(?:var\\(|[\\d.](?:${contextDependentUnits.join('|')})(?![a-zA-Z0-9_-]))`, 'i');
+const quotedStringRegex = new RegExp(stringString, 'g');
+const timeString = `${pureNumber}(?:ms|s)`;
+const resolutionString = `${pureNumber}(?:dpi|dpcm|dppx|x)`;
+const customIdentRegex = /^-?[a-zA-Z_][a-zA-Z0-9_-]*$/;
+const exactly = (pattern) => {
+    const r = new RegExp(`^(?:${pattern})$`);
+    return (v) => r.test(v);
+};
+const varTypeValidators = {
+    '<length>': exactly(`${lengthPattern}|${calcString}`),
+    '<number>': exactly(`${pureNumber}|${calcString}`),
+    '<integer>': exactly(`${pureInteger}|${calcString}`),
+    '<percentage>': exactly(`${percentagePattern}|${calcString}`),
+    '<length-percentage>': exactly(`${lengthPattern}|${percentagePattern}|${calcString}`),
+    '<angle>': exactly(`${pureAngle}|${calcString}`),
+    '<time>': exactly(`${timeString}|${calcString}`),
+    '<resolution>': exactly(`${resolutionString}|${calcString}`),
+    '<color>': isColor,
+    '<image>': exactly(`${urlString}|${gradientString}|${imageSetString}`),
+    '<url>': exactly(urlString),
+    '<string>': exactly(stringString),
+    '<custom-ident>': (v) => customIdentRegex.test(v) &&
+        !globalValues.includes(v.toLowerCase()) &&
+        v.toLowerCase() !== 'default',
+    '<transform-function>': exactly(transformFunctionString),
+    '<transform-list>': exactly(`(?:${transformFunctionString})(?:\\s+(?:${transformFunctionString}))*`),
+};
+function splitTopLevelSpaces(value) {
+    const parts = [];
+    let depth = 0;
+    let current = '';
+    for (const char of value) {
+        if (char === '(')
+            depth++;
+        else if (char === ')')
+            depth--;
+        if (depth === 0 && /\s/.test(char)) {
+            if (current)
+                parts.push(current);
+            current = '';
+        }
+        else {
+            current += char;
+        }
+    }
+    if (current)
+        parts.push(current);
+    return parts;
+}
+function matchesSyntaxComponent(component, value) {
+    const multiplier = /[+#]$/.test(component) ? component.slice(-1) : '';
+    const name = multiplier ? component.slice(0, -1) : component;
+    if (!name.startsWith('<'))
+        return multiplier ? null : value === name;
+    const validator = varTypeValidators[name];
+    if (!validator)
+        return null;
+    if (!multiplier)
+        return validator(value);
+    const items = multiplier === '+'
+        ? splitTopLevelSpaces(value)
+        : splitTopLevelCommas(value);
+    return items.every((item) => item !== '' && validator(item));
+}
+function checkInitialValue(syntax, value) {
+    const trimmedSyntax = syntax.trim();
+    if (trimmedSyntax === '*')
+        return null;
+    if (contextDependentRegex.test(value.replace(quotedStringRegex, ''))) {
+        return 'varTypeDependent';
+    }
+    const trimmedValue = value.trim();
+    let unknown = false;
+    for (const component of trimmedSyntax.split('|')) {
+        const result = matchesSyntaxComponent(component.trim(), trimmedValue);
+        if (result)
+            return null;
+        if (result === null)
+            unknown = true;
+    }
+    return unknown ? null : 'varTypeMismatch';
+}
 exports.validateValues = {
     meta: {
         type: 'problem',
@@ -1858,6 +1962,8 @@ exports.validateValues = {
             validateValue: "'{{key}}' has an invalid value '{{value}}'. Valid values: {{validValues}}",
             invalidPrimitive: "'{{key}}' cannot be assigned a {{type}} value ({{value}}). CSS properties require string or number values.",
             invalidNumber: "'{{key}}' does not accept numeric values. Expected a string value.",
+            varTypeMismatch: "css.varType initialValue '{{value}}' does not match the syntax '{{syntax}}'.",
+            varTypeDependent: "css.varType initialValue '{{value}}' depends on the font, a container or var(), so the browser drops the @property. Use a value that does not depend on where it is used.",
         },
         schema: [],
     },
@@ -1947,6 +2053,43 @@ exports.validateValues = {
                 }
             });
         }
+        function checkVarType(arg) {
+            if (!arg || arg.type !== 'ObjectExpression')
+                return;
+            let syntax = '*';
+            let initialValue = null;
+            for (const prop of arg.properties) {
+                if (prop.type !== 'Property' ||
+                    prop.computed ||
+                    prop.key.type !== 'Identifier') {
+                    continue;
+                }
+                if (prop.key.name === 'syntax') {
+                    if (prop.value.type !== 'Literal')
+                        return;
+                    if (typeof prop.value.value !== 'string')
+                        return;
+                    syntax = prop.value.value;
+                }
+                else if (prop.key.name === 'initialValue') {
+                    initialValue = prop.value;
+                }
+            }
+            if (!initialValue || initialValue.type !== 'Literal')
+                return;
+            const raw = initialValue.value;
+            if (typeof raw !== 'string' && typeof raw !== 'number')
+                return;
+            const value = String(raw);
+            const messageId = checkInitialValue(syntax, value);
+            if (messageId) {
+                context.report({
+                    node: initialValue,
+                    messageId,
+                    data: { value, syntax },
+                });
+            }
+        }
         return {
             ImportDeclaration(node) {
                 if (node.source.value === '@plumeria/core') {
@@ -1966,7 +2109,21 @@ exports.validateValues = {
                 }
             },
             CallExpression(node) {
+                const calleeName = node.callee.type === 'MemberExpression'
+                    ? node.callee.object.type === 'Identifier' &&
+                        plumeriaAliases[node.callee.object.name] === 'NAMESPACE' &&
+                        node.callee.property.type === 'Identifier'
+                        ? node.callee.property.name
+                        : null
+                    : node.callee.type === 'Identifier'
+                        ? plumeriaAliases[node.callee.name]
+                        : null;
+                if (calleeName === 'varType') {
+                    checkVarType(node.arguments[0]);
+                    return;
+                }
                 let isCssProperties = false;
+                let isPositionTry = false;
                 if (node.callee.type === 'MemberExpression') {
                     if (node.callee.object.type === 'Identifier' &&
                         plumeriaAliases[node.callee.object.name] === 'NAMESPACE') {
@@ -1975,8 +2132,10 @@ exports.validateValues = {
                             : null;
                         if (propertyName === 'create' ||
                             propertyName === 'keyframes' ||
-                            propertyName === 'viewTransition') {
+                            propertyName === 'viewTransition' ||
+                            propertyName === 'positionTry') {
                             isCssProperties = true;
+                            isPositionTry = propertyName === 'positionTry';
                         }
                     }
                 }
@@ -1984,14 +2143,20 @@ exports.validateValues = {
                     const alias = plumeriaAliases[node.callee.name];
                     if (alias === 'create' ||
                         alias === 'keyframes' ||
-                        alias === 'viewTransition') {
+                        alias === 'viewTransition' ||
+                        alias === 'positionTry') {
                         isCssProperties = true;
+                        isPositionTry = alias === 'positionTry';
                     }
                 }
                 if (!isCssProperties)
                     return;
                 node.arguments.forEach((arg) => {
                     if (arg.type === 'ObjectExpression') {
+                        if (isPositionTry) {
+                            checkStyleObject(arg);
+                            return;
+                        }
                         arg.properties.forEach((prop) => {
                             if (prop.type !== 'Property')
                                 return;

package/dist/util/propertyGroups.js

@@ -11,6 +11,14 @@ exports.propertyGroups = [
     {
         properties: [
             'position',
+            'positionAnchor',
+            'positionArea',
+            'positionTry',
+            'positionTryOrder',
+            'positionTryFallbacks',
+            'positionVisibility',
+            'anchorName',
+            'anchorScope',
             'inset',
             'insetBlock',
             'insetBlockStart',

package/dist/util/spellingRule.js

@@ -53,6 +53,7 @@ const createSpellingRule = (reject) => ({
             },
             CallExpression(node) {
                 let isCssProperties = false;
+                let isPositionTry = false;
                 if (node.callee.type === 'MemberExpression') {
                     if (node.callee.object.type === 'Identifier' &&
                         plumeriaAliases[node.callee.object.name] === 'NAMESPACE') {
@@ -61,8 +62,10 @@ const createSpellingRule = (reject) => ({
                             : null;
                         if (propertyName === 'create' ||
                             propertyName === 'keyframes' ||
-                            propertyName === 'viewTransition') {
+                            propertyName === 'viewTransition' ||
+                            propertyName === 'positionTry') {
                             isCssProperties = true;
+                            isPositionTry = propertyName === 'positionTry';
                         }
                     }
                 }
@@ -70,13 +73,19 @@ const createSpellingRule = (reject) => ({
                     const aliasName = plumeriaAliases[node.callee.name];
                     if (aliasName === 'create' ||
                         aliasName === 'keyframes' ||
-                        aliasName === 'viewTransition') {
+                        aliasName === 'viewTransition' ||
+                        aliasName === 'positionTry') {
                         isCssProperties = true;
+                        isPositionTry = aliasName === 'positionTry';
                     }
                 }
                 if (isCssProperties) {
                     node.arguments.forEach((arg) => {
                         if (arg.type === 'ObjectExpression') {
+                            if (isPositionTry) {
+                                checkStyleObject(arg);
+                                return;
+                            }
                             arg.properties.forEach((prop) => {
                                 if (prop.type !== 'Property')
                                     return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/eslint-plugin",
-  "version": "19.14.4",
+  "version": "20.0.0",
   "description": "Plumeria ESLint plugin",
   "author": "Refirst 11",
   "license": "MIT",
@@ -58,8 +58,8 @@
   },
   "dependencies": {
     "oxlint": "1.87.0",
-    "zss-engine": "2.10.0",
-    "@plumeria/compiler": "19.14.4"
+    "zss-engine": "3.0.1",
+    "@plumeria/compiler": "20.0.0"
   },
   "scripts": {
     "build": "rimraf dist && pnpm cjs",