@plumeria/eslint-plugin 19.14.3 → 19.15.0

package/dist/rules/no-destructure.js

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

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

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

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

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

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,6 +2109,19 @@ 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;
                 if (node.callee.type === 'MemberExpression') {
                     if (node.callee.object.type === 'Identifier' &&

package/package.json

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