@plumeria/eslint-plugin 19.12.0 → 19.12.1

package/dist/rules/validate-values.js

@@ -224,16 +224,21 @@ const anchorSizeProperties = [
     'minInlineSize',
     'maxInlineSize',
 ];
-const fitContentString = 'fit-content\\([^()]*\\)';
-const minString = 'min\\([^()]*\\)';
-const maxString = 'max\\([^()]*\\)';
-const minmaxString = 'minmax\\([^()]*\\)';
+const quotedString = `"[^"]*"|'[^']*'`;
+const nestedContents = (depth) => depth === 0
+    ? `(?:[^()"']|${quotedString})*`
+    : `(?:[^()"']|${quotedString}|\\(${nestedContents(depth - 1)}\\))*`;
+const mathContentsString = nestedContents(3);
+const fitContentString = `fit-content\\(${mathContentsString}\\)`;
+const minString = `min\\(${mathContentsString}\\)`;
+const maxString = `max\\(${mathContentsString}\\)`;
+const minmaxString = `minmax\\(${mathContentsString}\\)`;
 const dashedIdentString = '--[a-zA-Z_][a-zA-Z0-9_-]*';
 const cssVariablePlaceholder = '\u0001';
 const canonicalCssVariable = (index) => `var(--x${index})`;
 const varString = `(?:var\\(${dashedIdentString}(,\\s*[^\\)]+)?\\)|${cssVariablePlaceholder})`;
 const varRegex = new RegExp(`^(${varString})$`);
-const pureNumber = `(-?\\d+(\\.\\d+)?)`;
+const pureNumber = `(-?(?:\\d+(?:\\.\\d+)?|\\.\\d+))`;
 const numberPattern = `(${pureNumber}|${varString})`;
 const percentagePattern = `${pureNumber}%`;
 const pureInteger = `(-?\\d+)`;
@@ -241,13 +246,14 @@ const integerPattern = `(${pureInteger}|${varString})`;
 const lengthPattern = `0|${pureNumber}(?:${unitData_1.unitData.join('|')})`;
 const pureAngle = `${pureNumber}(deg|rad|grad|turn)`;
 const anglePattern = `(${pureAngle}|${varString})`;
-const calcString = 'calc\\(.*?\\)';
+const calcString = `calc\\(${mathContentsString}\\)`;
 const anchorString = 'anchor\\([^()]*\\)';
 const anchorSizeString = 'anchor-size\\([^()]*\\)';
-const clampString = 'clamp\\([^()]*\\)';
+const clampString = `clamp\\(${mathContentsString}\\)`;
+const steppedValueString = `(?:round|mod|rem)\\(${mathContentsString}\\)`;
+const absString = `abs\\(${mathContentsString}\\)`;
 const gradientString = '(?:repeating-)?(?:linear|radial|conic)-gradient\\(.*\\)';
 const urlString = `url\\([^\\)${cssVariablePlaceholder}]+\\)`;
-const imageSetString = 'image-set\\([^\\)]+\\)';
 const attrString = 'attr\\([^\\)]+\\)';
 const addString = `add\\(${integerPattern}\\)`;
 const counterString = 'counter\\([^\\)]+\\)';
@@ -255,20 +261,122 @@ const countersString = 'counters\\([^\\)]+\\)';
 const doubleQuoteString = '"[^"]*"';
 const singleQuoteString = "'[^']*'";
 const stringString = `(?:${doubleQuoteString}|${singleQuoteString})`;
-const functionContentsString = '(?=[^)]*[^\\s()])(?:[^()]|\\([^()]*\\))*';
+const functionContentsString = `(?=[^)]*[^\\s()])${mathContentsString}`;
 const repeatString = `repeat\\(${functionContentsString}\\)`;
+const imageSetString = `image-set\\(${functionContentsString}\\)`;
 const colorSpaces = 'srgb|srgb-linear|display-p3|a98-rgb|prophoto-rgb|rec2020|lab|oklab|xyz|xyz-d50|xyz-d65|hsl|hwb|lch|oklch';
 const hueModifiers = '(?:\\s+(?:shorter|longer|increasing|decreasing)\\s+hue)?';
 const colorSpacePattern = `in\\s+(?:${colorSpaces})${hueModifiers}`;
 const paletteMixString = `palette-mix\\(${colorSpacePattern},\\s*(?:(${dashedIdentString}|${varString}))(?:\\s+(${percentagePattern}|${varString}))?,\\s*(?:(${dashedIdentString}|${varString}))(?:\\s+(${percentagePattern}|${varString}))?\\)`;
-const colorMixString = `color-mix\\(${colorSpacePattern},\\s*(${colorData_1.colorValue}|${varString})(?:\\s+(${percentagePattern}|${varString}))?,\\s*(${colorData_1.colorValue}|${varString})(?:\\s+(${percentagePattern}|${varString}))?\\)`;
-const lightDarkValue = `${colorData_1.colorValue}|${colorMixString}|${varString}`;
-const lightDarkString = `light-dark\\((?:${lightDarkValue}),\\s*(?:${lightDarkValue})\\)`;
-const colorRegex = new RegExp(`^(${colorData_1.colorValue}|${colorMixString}|${lightDarkString}|${varString})$`);
+const colorFunctionPlaceholder = '\u0002';
+const relativeChannel = `(?:[a-z]+|${pureNumber}(?:%|deg|rad|grad|turn)?|${calcString}|${varString})`;
+const relativeChannelsRegex = new RegExp(`^${relativeChannel}(?:\\s+${relativeChannel}){2}(?:\\s*/\\s*${relativeChannel})?$`);
+const relativeColorSpaceRegex = new RegExp(`^(?:${colorData_1.colorSpaces}|${dashedIdentString})$`);
+const colorInterpolationRegex = new RegExp(`^${colorSpacePattern}$`);
+const mixPercentageRegex = new RegExp(`^(?:${percentagePattern}|${varString})$`);
+const colorFunctionSource = '(?<![\\w-])(color-mix|light-dark|rgba?|hsla?|hwb|lab|oklab|lch|oklch|color)\\(';
+const colorRegex = new RegExp(`^(${colorData_1.colorValue}|${varString}|${colorFunctionPlaceholder})$`);
 const colorSource = colorRegex.source.slice(1, -1);
-const imageRegex = new RegExp(`^(${gradientString}|${urlString})$`);
+function findClosingParenthesis(value, open) {
+    let depth = 0;
+    let quote = '';
+    for (let index = open; index < value.length; index++) {
+        const char = value[index];
+        if (quote) {
+            if (char === quote)
+                quote = '';
+        }
+        else if (char === '"' || char === "'") {
+            quote = char;
+        }
+        else if (char === '(') {
+            depth++;
+        }
+        else if (char === ')') {
+            depth--;
+            if (depth === 0)
+                return index;
+        }
+    }
+    return -1;
+}
+function splitTopLevelCommas(value) {
+    const parts = [];
+    let depth = 0;
+    let start = 0;
+    for (let index = 0; index < value.length; index++) {
+        const char = value[index];
+        if (char === '(')
+            depth++;
+        else if (char === ')')
+            depth--;
+        else if (char === ',' && depth === 0) {
+            parts.push(value.slice(start, index).trim());
+            start = index + 1;
+        }
+    }
+    parts.push(value.slice(start).trim());
+    return parts;
+}
+function isColor(value) {
+    return colorRegex.test(normalizeColorFunctions(value.trim()));
+}
+function isValidMixComponent(value) {
+    const parts = splitColorValues(value);
+    if (parts.length === 1)
+        return isColor(parts[0]);
+    if (parts.length !== 2)
+        return false;
+    if (mixPercentageRegex.test(parts[1]))
+        return isColor(parts[0]);
+    return mixPercentageRegex.test(parts[0]) && isColor(parts[1]);
+}
+function isValidColorFunction(name, args) {
+    if (name === 'color-mix') {
+        const parts = splitTopLevelCommas(args);
+        return (parts.length === 3 &&
+            colorInterpolationRegex.test(parts[0]) &&
+            isValidMixComponent(parts[1]) &&
+            isValidMixComponent(parts[2]));
+    }
+    if (name === 'light-dark') {
+        const parts = splitTopLevelCommas(args);
+        return parts.length === 2 && isColor(parts[0]) && isColor(parts[1]);
+    }
+    const tokens = splitColorValues(args.trim());
+    if (tokens[0] !== 'from' || tokens.length < 3 || !isColor(tokens[1])) {
+        return false;
+    }
+    const channels = tokens.slice(name === 'color' ? 3 : 2);
+    if (name === 'color' && !relativeColorSpaceRegex.test(tokens[2]))
+        return false;
+    return relativeChannelsRegex.test(channels.join(' '));
+}
+function normalizeColorFunctions(value) {
+    let normalized = '';
+    let cursor = 0;
+    const pattern = new RegExp(colorFunctionSource, 'g');
+    for (let match = pattern.exec(value); match; match = pattern.exec(value)) {
+        const name = match[1];
+        const open = match.index + name.length;
+        const close = findClosingParenthesis(value, open);
+        if (close === -1)
+            break;
+        const args = value.slice(open + 1, close);
+        const isComposite = name === 'color-mix' || name === 'light-dark' || /^\s*from\s/.test(args);
+        if (!isComposite)
+            continue;
+        if (isValidColorFunction(name, args)) {
+            normalized += value.slice(cursor, match.index) + colorFunctionPlaceholder;
+            cursor = close + 1;
+        }
+        pattern.lastIndex = close + 1;
+    }
+    return normalized + value.slice(cursor);
+}
+const imageRegex = new RegExp(`^(${gradientString}|${urlString}|${imageSetString})$`);
 const urlRegex = new RegExp(`^(${urlString})$`);
-const sliceValuePattern = '^(?:-?\\d+(?:\\.\\d+)?%?|fill)(?:\\s+(?:-?\\d+(?:\\.\\d+)?%?|fill)){0,3}$';
+const sliceValuePattern = '^(?:-?(?:\\d+(?:\\.\\d+)?|\\.\\d+)%?|fill)(?:\\s+(?:-?(?:\\d+(?:\\.\\d+)?|\\.\\d+)%?|fill)){0,3}$';
 const sliceRegex = new RegExp(`^(${sliceValuePattern})$`);
 const otherGroupProperties = [
     'fontWeight',
@@ -625,15 +733,15 @@ function isValidMultipleColorValues(value) {
 function splitColorValues(value) {
     const colors = [];
     const remaining = value.trim();
-    let inParentheses = false;
+    let depth = 0;
     let currentColor = '';
     for (let i = 0; i < remaining.length; i++) {
         const char = remaining[i];
         if (char === '(')
-            inParentheses = true;
+            depth++;
         else if (char === ')')
-            inParentheses = false;
-        if (char === ' ' && !inParentheses && currentColor.length > 0) {
+            depth--;
+        if (char === ' ' && depth === 0 && currentColor.length > 0) {
             colors.push(currentColor.trim());
             currentColor = '';
         }
@@ -779,7 +887,7 @@ function getLengthValuePattern(key) {
         (isBackgroundSize ? '|cover|contain' : '') +
         (isAnchor ? `|${anchorString}` : '') +
         (isAnchorSize ? `|${anchorSizeString}` : '') +
-        `|${calcString}|${clampString}|${minString}|${maxString}|${varString}`);
+        `|${calcString}|${clampString}|${minString}|${maxString}|${steppedValueString}|${absString}|${varString}`);
 }
 const validatorCache = new Map();
 const foldedValueCache = new Map();
@@ -797,27 +905,27 @@ function getValidator(key) {
     let validator = null;
     const lvp = getLengthValuePattern(key);
     const getTransformFunctions = () => [
-        'matrix\\([^\\)]+\\)',
-        'matrix3d\\([^\\)]+\\)',
-        'perspective\\([^\\)]+\\)',
-        'rotate\\([^\\)]+\\)',
-        'rotate3d\\([^\\)]+\\)',
-        'rotateX\\([^\\)]+\\)',
-        'rotateY\\([^\\)]+\\)',
-        'rotateZ\\([^\\)]+\\)',
-        'scale\\([^\\)]+\\)',
-        'scale3d\\([^\\)]+\\)',
-        'scaleX\\([^\\)]+\\)',
-        'scaleY\\([^\\)]+\\)',
-        'scaleZ\\([^\\)]+\\)',
-        'skew\\([^\\)]+\\)',
-        'skewX\\([^\\)]+\\)',
-        'skewY\\([^\\)]+\\)',
-        'translate\\([^\\)]+\\)',
-        'translate3d\\([^\\)]+\\)',
-        'translateX\\([^\\)]+\\)',
-        'translateY\\([^\\)]+\\)',
-        'translateZ\\([^\\)]+\\)',
+        `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 getGeometryBaseSet = () => 'content-box|padding-box|border-box|fill-box|stroke-box|view-box';
     if (['translate'].includes(key)) {
@@ -1479,7 +1587,7 @@ function getValidator(key) {
             const cleanValue = value.replace(/\s+/g, ' ').trim();
             if (!cleanValue)
                 return false;
-            const parts = cleanValue.split(' ');
+            const parts = splitColorValues(cleanValue);
             if (parts.length > 3)
                 return false;
             if (parts.length === 1)
@@ -1498,7 +1606,9 @@ function getValidator(key) {
         validator = isValidCursor;
     }
     else if (['content'].includes(key)) {
-        const r = new RegExp(`^(${urlString}|${gradientString}|${imageSetString}|${attrString}|${counterString}|${countersString}|${stringString})$`);
+        const contentItem = `${urlString}|${gradientString}|${imageSetString}|${attrString}|${counterString}|${countersString}|${stringString}|open-quote|close-quote|no-open-quote|no-close-quote|${varString}`;
+        const altItem = `${stringString}|${counterString}|${countersString}|${attrString}|${varString}`;
+        const r = new RegExp(`^(?:${contentItem})(?:\\s*(?:${contentItem}))*(?:\\s*/\\s*(?:${altItem})(?:\\s*(?:${altItem}))*)?$`);
         validator = (v) => r.test(v);
     }
     else if (['contain'].includes(key)) {
@@ -1522,7 +1632,7 @@ function getValidator(key) {
     else if (['background'].includes(key)) {
         const positionPattern = `(?:(?:top|bottom|center|left|right|${varString})(?:\\s+top|bottom|center|left|right|${varString})?)`;
         const sizePattern = `(?:\\s*/\\s*(?:cover|contain|(${lvp})( (?!\\s)(${lvp})){0,2}?))?`;
-        const flexibleLayerWithoutColor = `(?:(?:${positionPattern}${sizePattern})?|(?:${urlString}|${gradientString}|${varString}\\s*)?|(?:(?:repeat|space|round|no-repeat|repeatX|repeatY)\\s+)?|(?:scroll|fixed|local|${varString}\\s+)?|(?:border-box|padding-box|content-box|${varString}\\s+)?)`;
+        const flexibleLayerWithoutColor = `(?:(?:${positionPattern}${sizePattern})?|(?:${urlString}|${gradientString}|${imageSetString}|${varString}\\s*)?|(?:(?:repeat|space|round|no-repeat|repeatX|repeatY)\\s+)?|(?:scroll|fixed|local|${varString}\\s+)?|(?:border-box|padding-box|content-box|${varString}\\s+)?)`;
         const flexibleLayerWithColor = `(?:${flexibleLayerWithoutColor}\\s*)*(?:\\s*${colorSource})?`;
         const r = new RegExp(`^(?!\\s)(?=\\S)${flexibleLayerWithColor}(?:\\s*,\\s*${flexibleLayerWithColor})*$`);
         validator = (v) => r.test(v);
@@ -1555,7 +1665,7 @@ function getValidator(key) {
         validator = (v) => r.test(v);
     }
     else if (['backgroundImage'].includes(key)) {
-        const r = new RegExp(`^(${gradientString}|${urlString}|${varString}|none)(\\s*,\\s*(${gradientString}|${urlString}|${varString}|none))*$`);
+        const r = new RegExp(`^(${gradientString}|${urlString}|${imageSetString}|${varString}|none)(\\s*,\\s*(${gradientString}|${urlString}|${imageSetString}|${varString}|none))*$`);
         validator = (v) => r.test(v);
     }
     else if (['backgroundOrigin', 'backgroundClip'].includes(key)) {
@@ -1573,7 +1683,7 @@ function getValidator(key) {
     }
     else if (['backdropFilter', 'filter'].includes(key)) {
         const filterNumPattern = `(?:brightness|contrast|grayscale|invert|opacity|sepia|saturate)\\(\\s*${numberPattern}%?\\s*\\)`;
-        const blurPattern = `blur\\(\\s*(${lengthPattern}|${calcString}|${clampString}|${minString}|${maxString}|${varString})\\s*\\)`;
+        const blurPattern = `blur\\(\\s*(${lengthPattern}|${calcString}|${clampString}|${minString}|${maxString}|${steppedValueString}|${absString}|${varString})\\s*\\)`;
         const anglePatternFunc = `hue-rotate\\(\\s*${anglePattern}\\s*\\)`;
         const dropShadowPattern = `drop-shadow\\(\\s*(?:${varString}|(?:${colorSource}|${lvp})(?:\\s+(?:${colorSource}|${lvp})){2,3})\\s*\\)`;
         const r = new RegExp(`^((?:${filterNumPattern}|${blurPattern}|${anglePatternFunc}|${dropShadowPattern}|(?:${urlString}|${gradientString}|${varString}\\s*)?)\\s*)+$`);
@@ -1589,10 +1699,10 @@ function getValidator(key) {
             'step-start',
             'step-end',
         ].join('|');
-        const zeroToOne = '(0(\\.\\d+)?|1(\\.0+)?)';
+        const zeroToOne = '(0?\\.\\d+|0|1(\\.0+)?)';
         const bezierProgressPattern = `(?:${zeroToOne}|${varString})`;
         const cubicBezierPattern = `cubic-bezier\\(\\s*(?:${varString}|${bezierProgressPattern}\\s*,\\s*${numberPattern}\\s*,\\s*${bezierProgressPattern}\\s*,\\s*${numberPattern})\\s*\\)`;
-        const stopLengthPattern = `(?:-?\\d+(\\.\\d+)?%|${varString})`;
+        const stopLengthPattern = `(?:${percentagePattern}|${varString})`;
         const linearStopPattern = `${numberPattern}(?:\\s+${stopLengthPattern}){0,2}`;
         const linearPattern = `linear\\(\\s*(?:${varString}|${linearStopPattern}(?:\\s*,\\s*${linearStopPattern})*)\\s*\\)`;
         const positiveIntegerPattern = '[1-9]\\d*';
@@ -1818,7 +1928,9 @@ exports.validateValues = {
                 if (!globalValue)
                     return;
                 const validator = getValidator(key);
-                const accepts = (v) => !!validator && (validator(v) || validator(v.toLowerCase()));
+                const accepts = (v) => !!validator &&
+                    (validator(normalizeColorFunctions(v)) ||
+                        validator(normalizeColorFunctions(v.toLowerCase())));
                 if (validator && (!normalized || !accepts(normalized.value))) {
                     context.report({
                         node: property.value,

package/dist/util/colorData.d.ts

@@ -1,2 +1,3 @@
+declare const colorSpaces = "(?:srgb|srgb-linear|display-p3|a98-rgb|prophoto-rgb|rec2020|rec2100-pq|rec2100-hlg|rec2100-linear|jzazbz|ictcp|xyz|xyz-d50|xyz-d65)";
 declare const colorValue: string;
-export { colorValue };
+export { colorValue, colorSpaces };

package/dist/util/colorData.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.colorValue = void 0;
+exports.colorSpaces = exports.colorValue = void 0;
 const colorNames = [
     'currentColor',
+    'currentcolor',
     'transparent',
     'aliceblue',
     'antiquewhite',
@@ -153,7 +154,7 @@ const colorNames = [
     'yellow',
     'yellowgreen',
 ].join('|');
-const numberPattern = '-?\\d+(?:\\.\\d+)?%?';
+const numberPattern = '-?(?:\\d+(?:\\.\\d+)?|\\.\\d+)%?';
 const percentagePattern = `${numberPattern}%`;
 const angleUnit = '(?:deg|grad|rad|turn)?';
 const anglePattern = `${numberPattern}${angleUnit}`;
@@ -180,6 +181,7 @@ const lchParameters = `\\(\\s*${percentagePattern}(?:\\s+${numberPattern}){2}${a
 const lchPattern = `${lchFunctionName}${lchParameters}`;
 const colorFunctionName = 'color';
 const colorSpaces = '(?:srgb|srgb-linear|display-p3|a98-rgb|prophoto-rgb|rec2020|rec2100-pq|rec2100-hlg|rec2100-linear|jzazbz|ictcp|xyz|xyz-d50|xyz-d65)';
+exports.colorSpaces = colorSpaces;
 const colorParameters = `\\(\\s*${colorSpaces}(?:${separator}${numberPattern}){3}${alphaPattern}\\s*\\)`;
 const colorFunctionPattern = `${colorFunctionName}${colorParameters}`;
 const colorValue = `(?:${hexPattern}|${rgbPattern}|${hslPattern}|${hwbPattern}|${labPattern}|${lchPattern}|${colorFunctionPattern}|${colorNames})`;

package/dist/util/unitData.js

@@ -33,5 +33,17 @@ const unitData = [
     'lvh',
     'dvw',
     'dvh',
+    'svb',
+    'svi',
+    'lvb',
+    'lvi',
+    'dvb',
+    'dvi',
+    'cqw',
+    'cqh',
+    'cqi',
+    'cqb',
+    'cqmin',
+    'cqmax',
 ];
 exports.unitData = unitData;

package/package.json

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