@master/eslint-plugin-css 2.0.0-rc.60 → 2.0.0-rc.62

package/dist/rules/class-validation.cjs

@@ -2,8 +2,6 @@
 
 var defineVisitors = require('../utils/define-visitors.cjs');
 var resolveContext = require('../utils/resolve-context.cjs');
-var findLoc = require('../utils/find-loc.cjs');
-var parseNodeRecursive = require('../utils/parse-node-recursive.cjs');
 var createRule = require('../create-rule.cjs');
 var settingsSchema = require('../settings-schema.cjs');
 var cssValidator = require('@master/css-validator');
@@ -27,44 +25,35 @@ var classValidation = createRule({
     defaultOptions: [],
     create: function(context) {
         const { options, settings, css } = resolveContext(context);
-        const visitNode = (node, arg = null)=>{
-            parseNodeRecursive.parseNodeRecursive(node, arg, (classNames, node)=>{
-                const sourceCode = context.sourceCode;
-                const sourceCodeLines = sourceCode.lines;
-                const nodeStartLine = node.loc.start.line;
-                const nodeStartColumn = node.loc.start.column;
-                const nodeEndLine = node.loc.end.line;
-                const nodeEndColumn = node.loc.end.column;
-                for (const className of classNames){
-                    const { matched, errors } = cssValidator.validate(className, css);
-                    if (errors.length > 0) {
-                        for (const error of errors){
-                            if (matched) {
-                                context.report({
-                                    loc: findLoc(className, sourceCodeLines, nodeStartLine, nodeStartColumn, nodeEndLine, nodeEndColumn),
-                                    messageId: 'invalidClass',
-                                    data: {
-                                        message: error.message + '.'
-                                    }
-                                });
-                            } else if (options.disallowUnknownClass) {
-                                context.report({
-                                    loc: findLoc(className, sourceCodeLines, nodeStartLine, nodeStartColumn, nodeEndLine, nodeEndColumn),
-                                    messageId: 'disallowUnknownClass',
-                                    data: {
-                                        message: `"${className}" is not a valid or known class.`
-                                    }
-                                });
-                            }
-                        }
-                    }
-                }
-            }, false, false, settings.ignoredKeys, context);
-        };
         return defineVisitors({
             context,
             settings
-        }, visitNode);
+        }, (node, { classNodes })=>{
+            for (const node of classNodes){
+                const { matched, errors } = cssValidator.validate(node.value, css);
+                if (errors.length > 0) {
+                    for (const error of errors){
+                        if (matched) {
+                            context.report({
+                                loc: node.loc,
+                                messageId: 'invalidClass',
+                                data: {
+                                    message: error.message + '.'
+                                }
+                            });
+                        } else if (options.disallowUnknownClass) {
+                            context.report({
+                                loc: node.loc,
+                                messageId: 'disallowUnknownClass',
+                                data: {
+                                    message: `"${node.raw}" is not a valid or known class.`
+                                }
+                            });
+                        }
+                    }
+                }
+            }
+        });
     }
 });
 

package/dist/rules/class-validation.mjs

@@ -1,7 +1,5 @@
 import defineVisitors from '../utils/define-visitors.mjs';
 import resolveContext from '../utils/resolve-context.mjs';
-import findLoc from '../utils/find-loc.mjs';
-import { parseNodeRecursive } from '../utils/parse-node-recursive.mjs';
 import createRule from '../create-rule.mjs';
 import settingsSchema from '../settings-schema.mjs';
 import { validate } from '@master/css-validator';
@@ -25,44 +23,35 @@ var classValidation = createRule({
     defaultOptions: [],
     create: function(context) {
         const { options, settings, css } = resolveContext(context);
-        const visitNode = (node, arg = null)=>{
-            parseNodeRecursive(node, arg, (classNames, node)=>{
-                const sourceCode = context.sourceCode;
-                const sourceCodeLines = sourceCode.lines;
-                const nodeStartLine = node.loc.start.line;
-                const nodeStartColumn = node.loc.start.column;
-                const nodeEndLine = node.loc.end.line;
-                const nodeEndColumn = node.loc.end.column;
-                for (const className of classNames){
-                    const { matched, errors } = validate(className, css);
-                    if (errors.length > 0) {
-                        for (const error of errors){
-                            if (matched) {
-                                context.report({
-                                    loc: findLoc(className, sourceCodeLines, nodeStartLine, nodeStartColumn, nodeEndLine, nodeEndColumn),
-                                    messageId: 'invalidClass',
-                                    data: {
-                                        message: error.message + '.'
-                                    }
-                                });
-                            } else if (options.disallowUnknownClass) {
-                                context.report({
-                                    loc: findLoc(className, sourceCodeLines, nodeStartLine, nodeStartColumn, nodeEndLine, nodeEndColumn),
-                                    messageId: 'disallowUnknownClass',
-                                    data: {
-                                        message: `"${className}" is not a valid or known class.`
-                                    }
-                                });
-                            }
-                        }
-                    }
-                }
-            }, false, false, settings.ignoredKeys, context);
-        };
         return defineVisitors({
             context,
             settings
-        }, visitNode);
+        }, (node, { classNodes })=>{
+            for (const node of classNodes){
+                const { matched, errors } = validate(node.value, css);
+                if (errors.length > 0) {
+                    for (const error of errors){
+                        if (matched) {
+                            context.report({
+                                loc: node.loc,
+                                messageId: 'invalidClass',
+                                data: {
+                                    message: error.message + '.'
+                                }
+                            });
+                        } else if (options.disallowUnknownClass) {
+                            context.report({
+                                loc: node.loc,
+                                messageId: 'disallowUnknownClass',
+                                data: {
+                                    message: `"${node.raw}" is not a valid or known class.`
+                                }
+                            });
+                        }
+                    }
+                }
+            }
+        });
     }
 });
 

package/dist/utils/define-visitors.cjs

@@ -1,10 +1,12 @@
 'use strict';
 
+var withVisitClassNode = require('./with-visit-class-node.cjs');
+
 function defineVisitors({ context, settings }, visitNode) {
     const classAttributeRegex = new RegExp(`^(?:${settings.classAttributes.join('|')})$`);
     const classFunctionsRegex = new RegExp(`^(?:${settings.classFunctions.join('|')})`);
     const classDeclarationsRegex = new RegExp(`^(?:${settings.classDeclarations.join('|')})$`);
-    const isFnNode = (node)=>{
+    const allowCalleeNode = (node)=>{
         let calleeName = '';
         const calleeNode = node.callee || node.tag;
         if (calleeNode.type === 'Identifier') {
@@ -15,51 +17,48 @@ function defineVisitors({ context, settings }, visitNode) {
         }
         return classFunctionsRegex.test(calleeName);
     };
+    const visitClassNode = withVisitClassNode(visitNode, context);
     const CallExpression = function(node) {
-        if (!isFnNode(node)) {
-            return;
-        }
-        node.arguments.forEach((arg)=>{
-            visitNode(node, arg);
+        if (!allowCalleeNode(node)) return;
+        node.arguments.forEach((node)=>{
+            visitClassNode(node);
         });
     };
     const scriptVisitor = {
         CallExpression,
         JSXAttribute: function(node) {
             if (!node.name || !classAttributeRegex.test(node.name.name)) return;
-            if (node.value && node.value.type === 'Literal') {
-                visitNode(node);
-            } else if (node.value && node.value.type === 'JSXExpressionContainer') {
-                visitNode(node, node.value.expression);
+            if (node.value) {
+                visitClassNode(node.value);
             }
         },
         SvelteAttribute: function(node) {
             if (!node.key?.name || !classAttributeRegex.test(node.key.name)) return;
             for (const eachValue of node.value){
-                visitNode(node, eachValue);
+                visitClassNode(eachValue);
             }
         },
         TextAttribute: function(node) {
             if (!node.name || !classAttributeRegex.test(node.name)) return;
-            visitNode(node);
+            visitClassNode(node);
         },
         TaggedTemplateExpression: function(node) {
-            if (isFnNode(node)) {
-                visitNode(node, node.quasi);
+            if (allowCalleeNode(node)) {
+                visitClassNode(node.quasi);
                 return;
             }
         },
         VariableDeclaration: function(node) {
             node.declarations.forEach((decl)=>{
                 if (decl.id.type === 'Identifier' && classDeclarationsRegex.test(decl.id.name)) {
-                    visitNode(node, decl.init);
+                    visitClassNode(decl.init);
                 }
             });
         },
         ObjectExpression: function(node) {
             node.properties.forEach((prop)=>{
                 if (prop.type === 'Property' && prop.key.type === 'Identifier' && classDeclarationsRegex.test(prop.key.name)) {
-                    visitNode(node, prop.value);
+                    visitClassNode(prop.value);
                 }
             });
         }
@@ -67,16 +66,16 @@ function defineVisitors({ context, settings }, visitNode) {
     const templateBodyVisitor = {
         CallExpression,
         VAttribute: function(node) {
+            const name = node.key.argument?.name || node.key.name;
+            if (!name || !classAttributeRegex.test(name)) return;
             if (node.value && node.value.type === 'VLiteral') {
-                visitNode(node);
-            } else if (node.value && node.value.type === 'VExpressionContainer' && node.value.expression?.type === 'ArrayExpression') {
-                node.value.expression.elements.forEach((arg)=>{
-                    visitNode(node, arg);
-                });
-            } else if (node.value && node.value.type === 'VExpressionContainer' && node.value.expression?.type === 'ObjectExpression') {
-                node.value.expression.properties.forEach((prop)=>{
-                    visitNode(node, prop);
-                });
+                visitClassNode(node.value);
+            } else if (node.value) {
+                if (node.value.type === 'VExpressionContainer') {
+                    if (node.value.expression?.type === 'ArrayExpression' || node.value.expression?.type === 'ObjectExpression') {
+                        visitClassNode(node.value.expression);
+                    }
+                }
             }
         }
     };

package/dist/utils/define-visitors.d.ts

@@ -1,7 +1,8 @@
 import { TSESTree } from '@typescript-eslint/utils';
 import type { RuleContext, RuleListener } from '@typescript-eslint/utils/ts-eslint';
 import { Settings } from '../settings';
+import resolveClassNode from './resolve-class-node';
 export default function defineVisitors({ context, settings }: {
     context: RuleContext<any, any[]>;
     settings: Settings;
-}, visitNode: (node: TSESTree.Node, args?: any) => void): RuleListener;
+}, visitNode: (node: TSESTree.Node, resolved: ReturnType<typeof resolveClassNode>) => void): RuleListener;

package/dist/utils/define-visitors.mjs

@@ -1,8 +1,10 @@
+import withVisitClassNode from './with-visit-class-node.mjs';
+
 function defineVisitors({ context, settings }, visitNode) {
     const classAttributeRegex = new RegExp(`^(?:${settings.classAttributes.join('|')})$`);
     const classFunctionsRegex = new RegExp(`^(?:${settings.classFunctions.join('|')})`);
     const classDeclarationsRegex = new RegExp(`^(?:${settings.classDeclarations.join('|')})$`);
-    const isFnNode = (node)=>{
+    const allowCalleeNode = (node)=>{
         let calleeName = '';
         const calleeNode = node.callee || node.tag;
         if (calleeNode.type === 'Identifier') {
@@ -13,51 +15,48 @@ function defineVisitors({ context, settings }, visitNode) {
         }
         return classFunctionsRegex.test(calleeName);
     };
+    const visitClassNode = withVisitClassNode(visitNode, context);
     const CallExpression = function(node) {
-        if (!isFnNode(node)) {
-            return;
-        }
-        node.arguments.forEach((arg)=>{
-            visitNode(node, arg);
+        if (!allowCalleeNode(node)) return;
+        node.arguments.forEach((node)=>{
+            visitClassNode(node);
         });
     };
     const scriptVisitor = {
         CallExpression,
         JSXAttribute: function(node) {
             if (!node.name || !classAttributeRegex.test(node.name.name)) return;
-            if (node.value && node.value.type === 'Literal') {
-                visitNode(node);
-            } else if (node.value && node.value.type === 'JSXExpressionContainer') {
-                visitNode(node, node.value.expression);
+            if (node.value) {
+                visitClassNode(node.value);
             }
         },
         SvelteAttribute: function(node) {
             if (!node.key?.name || !classAttributeRegex.test(node.key.name)) return;
             for (const eachValue of node.value){
-                visitNode(node, eachValue);
+                visitClassNode(eachValue);
             }
         },
         TextAttribute: function(node) {
             if (!node.name || !classAttributeRegex.test(node.name)) return;
-            visitNode(node);
+            visitClassNode(node);
         },
         TaggedTemplateExpression: function(node) {
-            if (isFnNode(node)) {
-                visitNode(node, node.quasi);
+            if (allowCalleeNode(node)) {
+                visitClassNode(node.quasi);
                 return;
             }
         },
         VariableDeclaration: function(node) {
             node.declarations.forEach((decl)=>{
                 if (decl.id.type === 'Identifier' && classDeclarationsRegex.test(decl.id.name)) {
-                    visitNode(node, decl.init);
+                    visitClassNode(decl.init);
                 }
             });
         },
         ObjectExpression: function(node) {
             node.properties.forEach((prop)=>{
                 if (prop.type === 'Property' && prop.key.type === 'Identifier' && classDeclarationsRegex.test(prop.key.name)) {
-                    visitNode(node, prop.value);
+                    visitClassNode(prop.value);
                 }
             });
         }
@@ -65,16 +64,16 @@ function defineVisitors({ context, settings }, visitNode) {
     const templateBodyVisitor = {
         CallExpression,
         VAttribute: function(node) {
+            const name = node.key.argument?.name || node.key.name;
+            if (!name || !classAttributeRegex.test(name)) return;
             if (node.value && node.value.type === 'VLiteral') {
-                visitNode(node);
-            } else if (node.value && node.value.type === 'VExpressionContainer' && node.value.expression?.type === 'ArrayExpression') {
-                node.value.expression.elements.forEach((arg)=>{
-                    visitNode(node, arg);
-                });
-            } else if (node.value && node.value.type === 'VExpressionContainer' && node.value.expression?.type === 'ObjectExpression') {
-                node.value.expression.properties.forEach((prop)=>{
-                    visitNode(node, prop);
-                });
+                visitClassNode(node.value);
+            } else if (node.value) {
+                if (node.value.type === 'VExpressionContainer') {
+                    if (node.value.expression?.type === 'ArrayExpression' || node.value.expression?.type === 'ObjectExpression') {
+                        visitClassNode(node.value.expression);
+                    }
+                }
             }
         }
     };

package/dist/utils/resolve-class-node.cjs

@@ -0,0 +1,147 @@
+'use strict';
+
+var common = require('../common.cjs');
+
+function resolveClassNode(node, context) {
+    const { sourceCode } = context;
+    let value = null;
+    let raw = null;
+    let start = null;
+    let end = null;
+    switch(node.type){
+        case 'Literal':
+            value = node.value;
+            raw = node.raw;
+            start = node.range[0];
+            end = node.range[1];
+            break;
+        case 'VLiteral':
+            value = node.value;
+            raw = sourceCode.getText(node);
+            start = node.range[0];
+            end = node.range[1];
+            break;
+        case 'TextAttribute':
+            value = node.value;
+            start = node.valueSpan.fullStart.offset;
+            end = node.valueSpan.end.offset;
+            raw = sourceCode.getText({
+                ...node,
+                range: [
+                    start,
+                    end
+                ]
+            });
+            break;
+        case 'SvelteLiteral':
+            value = node.value;
+            raw = sourceCode.getText(node);
+            start = node.range[0];
+            end = node.range[1];
+            break;
+        case 'TemplateElement':
+            if (node.parent.expressions.length) {
+                return;
+            }
+            value = node.value.cooked;
+            raw = node.value.raw;
+            start = node.range[0];
+            end = node.range[1];
+            break;
+        default:
+            return;
+    }
+    if (/^(['"`])(.*)\1$/.test(raw)) {
+        raw = raw.slice(1, -1);
+        start = start + 1;
+        end = end - 1;
+    }
+    const nodes = [];
+    const classValues = value.split(common.HALF_WIDTH_WHITESPACE_REGEX);
+    const classRaws = raw.split(common.HALF_WIDTH_WHITESPACE_REGEX);
+    const classValueRawMap = new Map();
+    const classRawValueMap = new Map();
+    for(let i = 0; i < classRaws.length; i++){
+        classValueRawMap.set(classValues[i], classRaws[i]);
+        classRawValueMap.set(classRaws[i], classValues[i]);
+    }
+    let lastIndex = 0;
+    let match;
+    while((match = common.HALF_WIDTH_WHITESPACE_GLOBAL_REGEX.exec(raw)) !== null){
+        const spaceRaw = match[0];
+        const spaceStart = match.index;
+        const spaceEnd = spaceStart + spaceRaw.length;
+        // 處理前一段非空白 (class name)
+        if (spaceStart > lastIndex) {
+            const classRaw = raw.slice(lastIndex, spaceStart);
+            const classValue = classRawValueMap.get(classRaw);
+            if (!classValue) return;
+            const startOffset = start + lastIndex;
+            const endOffset = start + spaceStart;
+            nodes.push({
+                type: 'class',
+                value: classValue,
+                raw: classRaw,
+                range: [
+                    startOffset,
+                    endOffset
+                ],
+                loc: {
+                    start: sourceCode.getLocFromIndex(startOffset),
+                    end: sourceCode.getLocFromIndex(endOffset)
+                }
+            });
+        }
+        // 處理空白
+        const spaceStartOffset = start + spaceStart;
+        const spaceEndOffset = start + spaceEnd;
+        nodes.push({
+            type: 'space',
+            raw: spaceRaw,
+            range: [
+                spaceStartOffset,
+                spaceEndOffset
+            ],
+            loc: {
+                start: sourceCode.getLocFromIndex(spaceStartOffset),
+                end: sourceCode.getLocFromIndex(spaceEndOffset)
+            }
+        });
+        lastIndex = spaceEnd;
+    }
+    // 最後一段 class name（若結尾不是空白）
+    if (lastIndex < raw.length) {
+        const classRaw = raw.slice(lastIndex);
+        const classValue = classRawValueMap.get(classRaw);
+        if (!classValue) return;
+        const startOffset = start + lastIndex;
+        const endOffset = start + raw.length;
+        nodes.push({
+            type: 'class',
+            value: classValue,
+            raw: classRaw,
+            range: [
+                startOffset,
+                endOffset
+            ],
+            loc: {
+                start: sourceCode.getLocFromIndex(startOffset),
+                end: sourceCode.getLocFromIndex(endOffset)
+            }
+        });
+    }
+    const classNodes = nodes.filter((node)=>node.type === 'class');
+    return {
+        nodes,
+        start,
+        end,
+        raw,
+        value,
+        classRawValueMap,
+        classValueRawMap,
+        classNodes,
+        classValues: classNodes.map((node)=>node.value)
+    };
+}
+
+module.exports = resolveClassNode;

package/dist/utils/resolve-class-node.d.ts

@@ -0,0 +1,12 @@
+import { RuleContext } from '@typescript-eslint/utils/ts-eslint';
+export default function resolveClassNode(node: any, context: RuleContext<any, any[]>): {
+    nodes: any[];
+    start: number;
+    end: number;
+    raw: string;
+    value: string;
+    classRawValueMap: Map<any, any>;
+    classValueRawMap: Map<any, any>;
+    classNodes: any[];
+    classValues: any[];
+};

package/dist/utils/resolve-class-node.mjs

@@ -0,0 +1,145 @@
+import { HALF_WIDTH_WHITESPACE_REGEX, HALF_WIDTH_WHITESPACE_GLOBAL_REGEX } from '../common.mjs';
+
+function resolveClassNode(node, context) {
+    const { sourceCode } = context;
+    let value = null;
+    let raw = null;
+    let start = null;
+    let end = null;
+    switch(node.type){
+        case 'Literal':
+            value = node.value;
+            raw = node.raw;
+            start = node.range[0];
+            end = node.range[1];
+            break;
+        case 'VLiteral':
+            value = node.value;
+            raw = sourceCode.getText(node);
+            start = node.range[0];
+            end = node.range[1];
+            break;
+        case 'TextAttribute':
+            value = node.value;
+            start = node.valueSpan.fullStart.offset;
+            end = node.valueSpan.end.offset;
+            raw = sourceCode.getText({
+                ...node,
+                range: [
+                    start,
+                    end
+                ]
+            });
+            break;
+        case 'SvelteLiteral':
+            value = node.value;
+            raw = sourceCode.getText(node);
+            start = node.range[0];
+            end = node.range[1];
+            break;
+        case 'TemplateElement':
+            if (node.parent.expressions.length) {
+                return;
+            }
+            value = node.value.cooked;
+            raw = node.value.raw;
+            start = node.range[0];
+            end = node.range[1];
+            break;
+        default:
+            return;
+    }
+    if (/^(['"`])(.*)\1$/.test(raw)) {
+        raw = raw.slice(1, -1);
+        start = start + 1;
+        end = end - 1;
+    }
+    const nodes = [];
+    const classValues = value.split(HALF_WIDTH_WHITESPACE_REGEX);
+    const classRaws = raw.split(HALF_WIDTH_WHITESPACE_REGEX);
+    const classValueRawMap = new Map();
+    const classRawValueMap = new Map();
+    for(let i = 0; i < classRaws.length; i++){
+        classValueRawMap.set(classValues[i], classRaws[i]);
+        classRawValueMap.set(classRaws[i], classValues[i]);
+    }
+    let lastIndex = 0;
+    let match;
+    while((match = HALF_WIDTH_WHITESPACE_GLOBAL_REGEX.exec(raw)) !== null){
+        const spaceRaw = match[0];
+        const spaceStart = match.index;
+        const spaceEnd = spaceStart + spaceRaw.length;
+        // 處理前一段非空白 (class name)
+        if (spaceStart > lastIndex) {
+            const classRaw = raw.slice(lastIndex, spaceStart);
+            const classValue = classRawValueMap.get(classRaw);
+            if (!classValue) return;
+            const startOffset = start + lastIndex;
+            const endOffset = start + spaceStart;
+            nodes.push({
+                type: 'class',
+                value: classValue,
+                raw: classRaw,
+                range: [
+                    startOffset,
+                    endOffset
+                ],
+                loc: {
+                    start: sourceCode.getLocFromIndex(startOffset),
+                    end: sourceCode.getLocFromIndex(endOffset)
+                }
+            });
+        }
+        // 處理空白
+        const spaceStartOffset = start + spaceStart;
+        const spaceEndOffset = start + spaceEnd;
+        nodes.push({
+            type: 'space',
+            raw: spaceRaw,
+            range: [
+                spaceStartOffset,
+                spaceEndOffset
+            ],
+            loc: {
+                start: sourceCode.getLocFromIndex(spaceStartOffset),
+                end: sourceCode.getLocFromIndex(spaceEndOffset)
+            }
+        });
+        lastIndex = spaceEnd;
+    }
+    // 最後一段 class name（若結尾不是空白）
+    if (lastIndex < raw.length) {
+        const classRaw = raw.slice(lastIndex);
+        const classValue = classRawValueMap.get(classRaw);
+        if (!classValue) return;
+        const startOffset = start + lastIndex;
+        const endOffset = start + raw.length;
+        nodes.push({
+            type: 'class',
+            value: classValue,
+            raw: classRaw,
+            range: [
+                startOffset,
+                endOffset
+            ],
+            loc: {
+                start: sourceCode.getLocFromIndex(startOffset),
+                end: sourceCode.getLocFromIndex(endOffset)
+            }
+        });
+    }
+    const classNodes = nodes.filter((node)=>node.type === 'class');
+    return {
+        nodes,
+        start,
+        end,
+        raw,
+        value,
+        classRawValueMap,
+        classValueRawMap,
+        classNodes,
+        classValues: classNodes.map((node)=>node.value)
+    };
+}
+
+export { resolveClassNode as default };