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

package/dist/common.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+const HALF_WIDTH_WHITESPACE_REGEX = /([\t\n\f\r ]+)/;
+const HALF_WIDTH_WHITESPACE_GLOBAL_REGEX = /([\t\n\f\r ]+)/g;
+
+exports.HALF_WIDTH_WHITESPACE_GLOBAL_REGEX = HALF_WIDTH_WHITESPACE_GLOBAL_REGEX;
+exports.HALF_WIDTH_WHITESPACE_REGEX = HALF_WIDTH_WHITESPACE_REGEX;

package/dist/common.d.ts

@@ -0,0 +1,2 @@
+export declare const HALF_WIDTH_WHITESPACE_REGEX: RegExp;
+export declare const HALF_WIDTH_WHITESPACE_GLOBAL_REGEX: RegExp;

package/dist/common.mjs

@@ -0,0 +1,4 @@
+const HALF_WIDTH_WHITESPACE_REGEX = /([\t\n\f\r ]+)/;
+const HALF_WIDTH_WHITESPACE_GLOBAL_REGEX = /([\t\n\f\r ]+)/g;
+
+export { HALF_WIDTH_WHITESPACE_GLOBAL_REGEX, HALF_WIDTH_WHITESPACE_REGEX };

package/dist/create-rule.cjs

@@ -3,6 +3,6 @@
 var css = require('@master/css');
 var utils = require('@typescript-eslint/utils');
 
-var createRule = utils.ESLintUtils.RuleCreator((name)=>new URL(`/docs/code-linting#${name}`, css.OFFICIAL_URL).href);
+var createRule = utils.ESLintUtils.RuleCreator((name)=>new URL(`/guide/code-linting#${name}`, css.OFFICIAL_URL).href);
 
 module.exports = createRule;

package/dist/create-rule.mjs

@@ -1,6 +1,6 @@
 import { OFFICIAL_URL } from '@master/css';
 import { ESLintUtils } from '@typescript-eslint/utils';
 
-var createRule = ESLintUtils.RuleCreator((name)=>new URL(`/docs/code-linting#${name}`, OFFICIAL_URL).href);
+var createRule = ESLintUtils.RuleCreator((name)=>new URL(`/guide/code-linting#${name}`, OFFICIAL_URL).href);
 
 export { createRule as default };

package/dist/functions/filter-collision-classes.cjs

@@ -14,7 +14,7 @@ function filterCollisionClasses(classNames, css$1) {
             for(let j = 0; j < classNames.length; j++){
                 const compareClassName = classNames[j];
                 const compareRule = validRules.find((eachValidRule)=>eachValidRule.name === compareClassName);
-                if (i !== j && compareRule && css.areRulesDuplicated(rule, compareRule) && css.areRuleStatesEqual(rule, compareRule)) {
+                if (i !== j && compareRule && css.equalDeclarations(rule.declarations, compareRule.declarations) && css.equalVariants(rule, compareRule)) {
                     collisionClasses.push(compareClassName);
                 }
             }

package/dist/functions/filter-collision-classes.mjs

@@ -1,5 +1,5 @@
 import { generateValidRules } from '@master/css-validator';
-import { areRulesDuplicated, areRuleStatesEqual } from '@master/css';
+import { equalDeclarations, equalVariants } from '@master/css';
 
 function filterCollisionClasses(classNames, css) {
     const validRules = classNames.map((eachClassName)=>generateValidRules(eachClassName, css)[0]).filter(Boolean);
@@ -12,7 +12,7 @@ function filterCollisionClasses(classNames, css) {
             for(let j = 0; j < classNames.length; j++){
                 const compareClassName = classNames[j];
                 const compareRule = validRules.find((eachValidRule)=>eachValidRule.name === compareClassName);
-                if (i !== j && compareRule && areRulesDuplicated(rule, compareRule) && areRuleStatesEqual(rule, compareRule)) {
+                if (i !== j && compareRule && equalDeclarations(rule.declarations, compareRule.declarations) && equalVariants(rule, compareRule)) {
                     collisionClasses.push(compareClassName);
                 }
             }

package/dist/rules/class-collision.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 filterCollisionClasses = require('../functions/filter-collision-classes.cjs');
 var createRule = require('../create-rule.cjs');
 var settingsSchema = require('../settings-schema.cjs');
@@ -13,7 +11,7 @@ var classCollision = createRule({
     meta: {
         type: 'layout',
         docs: {
-            description: 'Avoid applying classes with the same CSS declaration'
+            description: 'Avoid applying classes with the same declarations'
         },
         messages: {
             collisionClass: '{{message}}'
@@ -26,44 +24,52 @@ var classCollision = createRule({
     defaultOptions: [],
     create (context) {
         const { settings, css } = resolveContext(context);
-        const visitNode = (node, arg = null)=>{
-            parseNodeRecursive.parseNodeRecursive(node, arg, (classNames, node, originalClassNamesValue, start, end)=>{
-                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;
-                // todo css
-                const collisionClassesRecord = filterCollisionClasses(classNames, css);
-                for(const className in collisionClassesRecord){
-                    const collisionClasses = collisionClassesRecord[className];
-                    const collisionClassNamesMsg = collisionClasses.map((x)=>`"${x}"`).join(' and ');
-                    let fixClassNames = originalClassNamesValue;
-                    for (const collisionClassName of collisionClasses){
-                        const regexSafe = collisionClassName.replace(/(\\|\.|\(|\)|\[|\]|\{|\}|\+|\*|\?|\^|\$|\||\/)/g, '\\$1');
-                        fixClassNames = fixClassNames.replace(new RegExp(`\\s+${regexSafe}|${regexSafe}\\s+`), '');
-                    }
-                    context.report({
-                        loc: findLoc(className, sourceCodeLines, nodeStartLine, nodeStartColumn, nodeEndLine, nodeEndColumn),
-                        messageId: 'collisionClass',
-                        data: {
-                            message: `"${className}" applies the same CSS declarations as ${collisionClassNamesMsg}.`
-                        },
-                        fix: function(fixer) {
-                            return fixer.replaceTextRange([
-                                start,
-                                end
-                            ], fixClassNames);
-                        }
-                    });
-                }
-            }, false, false, settings.ignoredKeys, context);
-        };
         return defineVisitors({
             context,
             settings
-        }, visitNode);
+        }, (node, { raw, start, end, nodes, classNodes, classValues })=>{
+            const collisionClassesRecord = filterCollisionClasses(classValues, css);
+            for(const className in collisionClassesRecord){
+                const collisionClasses = collisionClassesRecord[className];
+                const collisionClassNamesMsg = collisionClasses.map((x)=>`"${x}"`).join(' and ');
+                const classNode = classNodes.find((node)=>node.value === className);
+                const fixedNodes = [
+                    ...nodes
+                ];
+                const removeCollision = (removedClassNode)=>{
+                    for(let i = 0; i < fixedNodes.length; i++){
+                        const fixedNode = fixedNodes[i];
+                        const target = fixedNode === removedClassNode;
+                        if (target) {
+                            const prev = fixedNodes[i - 1];
+                            const isSpaceBefore = prev && prev.type === 'space';
+                            fixedNodes.splice(i, 1);
+                            if (isSpaceBefore) {
+                                fixedNodes.splice(i - 1, 1);
+                            }
+                        }
+                    }
+                };
+                collisionClasses.forEach((collisionClass)=>{
+                    const collisionNode = classNodes.find((node)=>node.value === collisionClass);
+                    removeCollision(collisionNode);
+                });
+                const fixedRaw = fixedNodes.map((node)=>node.raw).join('');
+                context.report({
+                    loc: classNode.loc,
+                    messageId: 'collisionClass',
+                    data: {
+                        message: `"${className}" applies the same declarations as ${collisionClassNamesMsg}.`
+                    },
+                    fix: function(fixer) {
+                        return fixer.replaceTextRange([
+                            start,
+                            end
+                        ], fixedRaw);
+                    }
+                });
+            }
+        });
     }
 });
 

package/dist/rules/class-collision.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 filterCollisionClasses from '../functions/filter-collision-classes.mjs';
 import createRule from '../create-rule.mjs';
 import settingsSchema from '../settings-schema.mjs';
@@ -11,7 +9,7 @@ var classCollision = createRule({
     meta: {
         type: 'layout',
         docs: {
-            description: 'Avoid applying classes with the same CSS declaration'
+            description: 'Avoid applying classes with the same declarations'
         },
         messages: {
             collisionClass: '{{message}}'
@@ -24,44 +22,52 @@ var classCollision = createRule({
     defaultOptions: [],
     create (context) {
         const { settings, css } = resolveContext(context);
-        const visitNode = (node, arg = null)=>{
-            parseNodeRecursive(node, arg, (classNames, node, originalClassNamesValue, start, end)=>{
-                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;
-                // todo css
-                const collisionClassesRecord = filterCollisionClasses(classNames, css);
-                for(const className in collisionClassesRecord){
-                    const collisionClasses = collisionClassesRecord[className];
-                    const collisionClassNamesMsg = collisionClasses.map((x)=>`"${x}"`).join(' and ');
-                    let fixClassNames = originalClassNamesValue;
-                    for (const collisionClassName of collisionClasses){
-                        const regexSafe = collisionClassName.replace(/(\\|\.|\(|\)|\[|\]|\{|\}|\+|\*|\?|\^|\$|\||\/)/g, '\\$1');
-                        fixClassNames = fixClassNames.replace(new RegExp(`\\s+${regexSafe}|${regexSafe}\\s+`), '');
-                    }
-                    context.report({
-                        loc: findLoc(className, sourceCodeLines, nodeStartLine, nodeStartColumn, nodeEndLine, nodeEndColumn),
-                        messageId: 'collisionClass',
-                        data: {
-                            message: `"${className}" applies the same CSS declarations as ${collisionClassNamesMsg}.`
-                        },
-                        fix: function(fixer) {
-                            return fixer.replaceTextRange([
-                                start,
-                                end
-                            ], fixClassNames);
-                        }
-                    });
-                }
-            }, false, false, settings.ignoredKeys, context);
-        };
         return defineVisitors({
             context,
             settings
-        }, visitNode);
+        }, (node, { raw, start, end, nodes, classNodes, classValues })=>{
+            const collisionClassesRecord = filterCollisionClasses(classValues, css);
+            for(const className in collisionClassesRecord){
+                const collisionClasses = collisionClassesRecord[className];
+                const collisionClassNamesMsg = collisionClasses.map((x)=>`"${x}"`).join(' and ');
+                const classNode = classNodes.find((node)=>node.value === className);
+                const fixedNodes = [
+                    ...nodes
+                ];
+                const removeCollision = (removedClassNode)=>{
+                    for(let i = 0; i < fixedNodes.length; i++){
+                        const fixedNode = fixedNodes[i];
+                        const target = fixedNode === removedClassNode;
+                        if (target) {
+                            const prev = fixedNodes[i - 1];
+                            const isSpaceBefore = prev && prev.type === 'space';
+                            fixedNodes.splice(i, 1);
+                            if (isSpaceBefore) {
+                                fixedNodes.splice(i - 1, 1);
+                            }
+                        }
+                    }
+                };
+                collisionClasses.forEach((collisionClass)=>{
+                    const collisionNode = classNodes.find((node)=>node.value === collisionClass);
+                    removeCollision(collisionNode);
+                });
+                const fixedRaw = fixedNodes.map((node)=>node.raw).join('');
+                context.report({
+                    loc: classNode.loc,
+                    messageId: 'collisionClass',
+                    data: {
+                        message: `"${className}" applies the same declarations as ${collisionClassNamesMsg}.`
+                    },
+                    fix: function(fixer) {
+                        return fixer.replaceTextRange([
+                            start,
+                            end
+                        ], fixedRaw);
+                    }
+                });
+            }
+        });
     }
 });
 

package/dist/rules/class-order.cjs

@@ -2,13 +2,6 @@
 
 var defineVisitors = require('../utils/define-visitors.cjs');
 var resolveContext = require('../utils/resolve-context.cjs');
-var getTemplateElementBody = require('../utils/get-template-element-body.cjs');
-var getTemplateElementSuffix = require('../utils/get-template-element-suffix.cjs');
-var getTemplateElementPrefix = require('../utils/get-template-element-prefix.cjs');
-var extractValueFromNode = require('../utils/extract-value-from-node.cjs');
-var extractRangeFromNode = require('../utils/extract-range-from-node.cjs');
-var extractClassnamesFromValue = require('../utils/extract-classnames-from-value.cjs');
-var findLoc = require('../utils/find-loc.cjs');
 var createRule = require('../create-rule.cjs');
 var settingsSchema = require('../settings-schema.cjs');
 var css = require('@master/css');
@@ -31,144 +24,43 @@ var classOrder = createRule({
     defaultOptions: [],
     create: function(context) {
         const { settings, css: css$1 } = resolveContext(context);
-        const sourceCode = context.sourceCode;
-        const visitNode = (node, arg = null)=>{
-            let originalClassNamesValue = null;
-            let start = null;
-            let end = null;
-            let prefix = '';
-            let suffix = '';
-            let expStrings = [];
-            if (arg === null) {
-                originalClassNamesValue = extractValueFromNode(node);
-                const range = extractRangeFromNode(node);
-                if (node.type === 'TextAttribute') {
-                    start = range[0];
-                    end = range[1];
-                } else {
-                    start = range[0] + 1;
-                    end = range[1] - 1;
+        const { sourceCode } = context;
+        return defineVisitors({
+            context,
+            settings
+        }, (node, { raw, start, end, nodes, classValueRawMap, classValues })=>{
+            if (nodes.length <= 1) return;
+            let orderedClasses = css.sortReadableClasses(classValues, css$1);
+            let orderedRaw = nodes.map((node, i)=>{
+                if (node.type === 'class') {
+                    const value = orderedClasses.shift();
+                    return classValueRawMap.get(value);
                 }
-            } else {
-                switch(arg.type){
-                    case 'Identifier':
-                        return;
-                    case 'TemplateLiteral':
-                        arg.expressions.forEach((exp)=>{
-                            visitNode(node, exp);
-                        });
-                        originalClassNamesValue = sourceCode.getText(arg);
-                        originalClassNamesValue = originalClassNamesValue.substring(1, originalClassNamesValue.length - 1);
-                        expStrings = originalClassNamesValue.match(/\$\{(?:(?<!\\\\)(['"`]).*?(?<!\\\\)\1|[^}])*?\}/g) ?? [];
-                        for(let i = 0; i < expStrings.length; i++){
-                            originalClassNamesValue = originalClassNamesValue.replace(expStrings[i], `EXPRESSION_STRING_NUM_${i}`);
-                        }
-                        start = arg.range[0] + 1;
-                        end = arg.range[1] - 1;
-                        break;
-                    case 'ConditionalExpression':
-                        visitNode(node, arg.consequent);
-                        visitNode(node, arg.alternate);
-                        return;
-                    case 'LogicalExpression':
-                        visitNode(node, arg.right);
-                        return;
-                    case 'ArrayExpression':
-                        arg.elements.forEach((el)=>{
-                            visitNode(node, el);
-                        });
-                        return;
-                    case 'ObjectExpression':
-                        const isUsedByClassNamesPlugin = node.callee && node.callee.name === 'classnames';
-                        const isVue = node.key && node.key.type === 'VDirectiveKey';
-                        arg.properties.forEach((prop)=>{
-                            const propVal = isUsedByClassNamesPlugin || isVue ? prop.key : prop.value;
-                            visitNode(node, propVal);
-                        });
-                        return;
-                    case 'Property':
-                        visitNode(node, arg.key);
-                        break;
-                    case 'Literal':
-                        originalClassNamesValue = arg.raw.slice(1, arg.raw.length - 1);
-                        start = arg.range[0] + 1;
-                        end = arg.range[1] - 1;
-                        break;
-                    case 'SvelteLiteral':
-                        originalClassNamesValue = arg.value;
-                        if (originalClassNamesValue === '') {
-                            return;
-                        }
-                        start = arg.range[0];
-                        end = arg.range[1];
-                        break;
-                    case 'TemplateElement':
-                        originalClassNamesValue = arg.value.raw;
-                        if (originalClassNamesValue === '') {
-                            return;
-                        }
-                        start = arg.range[0];
-                        end = arg.range[1];
-                        // https://github.com/eslint/eslint/issues/13360
-                        // The problem is that range computation includes the backticks (`test`)
-                        // but value.raw does not include them, so there is a mismatch.
-                        // start/end does not include the backticks, therefore it matches value.raw.
-                        const txt = context.sourceCode.getText(arg);
-                        prefix = getTemplateElementPrefix(txt, originalClassNamesValue);
-                        suffix = getTemplateElementSuffix(txt, originalClassNamesValue);
-                        originalClassNamesValue = getTemplateElementBody(txt, prefix, suffix);
-                        break;
+                if (node.type === 'space' && (orderedClasses.length !== 0 || i === nodes.length - 1)) {
+                    return node.raw;
                 }
-            }
-            const { classNames, whitespaces, headSpace, tailSpace } = extractClassnamesFromValue(originalClassNamesValue);
-            if (classNames.length <= 1) {
-                // Don't run sorting for a single or empty className
-                return;
-            }
-            let orderedClassNames = css.reorderForReadableClasses(classNames, css$1).filter((eachOrderedClassName)=>classNames.includes(eachOrderedClassName));
-            orderedClassNames = classNames.filter((x)=>!orderedClassNames.includes(x)).concat(orderedClassNames).filter((x)=>x.trim() !== '');
-            // Generates the validated/sorted attribute value
-            let validatedClassNamesValue = '';
-            for(let i = 0; i < orderedClassNames.length; i++){
-                const w = whitespaces[i] ?? '';
-                const cls = orderedClassNames[i];
-                validatedClassNamesValue += headSpace ? `${w}${cls}` : `${cls}${w}`;
-                if (cls) {
-                    if (!tailSpace && i === orderedClassNames.length - 1) {
-                        validatedClassNamesValue = validatedClassNamesValue.replace(/\s+$/, '');
-                    }
-                    if (headSpace && tailSpace && i === orderedClassNames.length - 1) {
-                        validatedClassNamesValue += whitespaces[whitespaces.length - 1] ?? '';
-                    }
+                return '';
+            }).join('');
+            if (raw !== orderedRaw) {
+                if (node.type === 'TemplateElement') {
+                    orderedRaw = '`' + orderedRaw + '`';
                 }
-            }
-            for(let i = 0; i < expStrings.length; i++){
-                originalClassNamesValue = originalClassNamesValue.replace(`EXPRESSION_STRING_NUM_${i}`, expStrings[i]);
-                validatedClassNamesValue = validatedClassNamesValue.replace(`EXPRESSION_STRING_NUM_${i}`, expStrings[i]);
-            }
-            if (originalClassNamesValue !== validatedClassNamesValue) {
-                validatedClassNamesValue = prefix + validatedClassNamesValue + suffix;
-                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;
                 context.report({
-                    loc: findLoc(originalClassNamesValue, sourceCodeLines, nodeStartLine, nodeStartColumn, nodeEndLine, nodeEndColumn),
+                    node,
+                    loc: {
+                        start: sourceCode.getLocFromIndex(start),
+                        end: sourceCode.getLocFromIndex(end)
+                    },
                     messageId: 'invalidClassOrder',
                     fix: function(fixer) {
                         return fixer.replaceTextRange([
                             start,
                             end
-                        ], validatedClassNamesValue);
+                        ], orderedRaw);
                     }
                 });
             }
-        };
-        return defineVisitors({
-            context,
-            settings
-        }, visitNode);
+        });
     }
 });
 

package/dist/rules/class-order.mjs

@@ -1,15 +1,8 @@
 import defineVisitors from '../utils/define-visitors.mjs';
 import resolveContext from '../utils/resolve-context.mjs';
-import getTemplateElementBody from '../utils/get-template-element-body.mjs';
-import getTemplateElementSuffix from '../utils/get-template-element-suffix.mjs';
-import getTemplateElementPrefix from '../utils/get-template-element-prefix.mjs';
-import extractValueFromNode from '../utils/extract-value-from-node.mjs';
-import extractRangeFromNode from '../utils/extract-range-from-node.mjs';
-import extractClassnamesFromValue from '../utils/extract-classnames-from-value.mjs';
-import findLoc from '../utils/find-loc.mjs';
 import createRule from '../create-rule.mjs';
 import settingsSchema from '../settings-schema.mjs';
-import { reorderForReadableClasses } from '@master/css';
+import { sortReadableClasses } from '@master/css';
 
 var classOrder = createRule({
     name: 'consistent-class-order',
@@ -29,144 +22,43 @@ var classOrder = createRule({
     defaultOptions: [],
     create: function(context) {
         const { settings, css } = resolveContext(context);
-        const sourceCode = context.sourceCode;
-        const visitNode = (node, arg = null)=>{
-            let originalClassNamesValue = null;
-            let start = null;
-            let end = null;
-            let prefix = '';
-            let suffix = '';
-            let expStrings = [];
-            if (arg === null) {
-                originalClassNamesValue = extractValueFromNode(node);
-                const range = extractRangeFromNode(node);
-                if (node.type === 'TextAttribute') {
-                    start = range[0];
-                    end = range[1];
-                } else {
-                    start = range[0] + 1;
-                    end = range[1] - 1;
+        const { sourceCode } = context;
+        return defineVisitors({
+            context,
+            settings
+        }, (node, { raw, start, end, nodes, classValueRawMap, classValues })=>{
+            if (nodes.length <= 1) return;
+            let orderedClasses = sortReadableClasses(classValues, css);
+            let orderedRaw = nodes.map((node, i)=>{
+                if (node.type === 'class') {
+                    const value = orderedClasses.shift();
+                    return classValueRawMap.get(value);
                 }
-            } else {
-                switch(arg.type){
-                    case 'Identifier':
-                        return;
-                    case 'TemplateLiteral':
-                        arg.expressions.forEach((exp)=>{
-                            visitNode(node, exp);
-                        });
-                        originalClassNamesValue = sourceCode.getText(arg);
-                        originalClassNamesValue = originalClassNamesValue.substring(1, originalClassNamesValue.length - 1);
-                        expStrings = originalClassNamesValue.match(/\$\{(?:(?<!\\\\)(['"`]).*?(?<!\\\\)\1|[^}])*?\}/g) ?? [];
-                        for(let i = 0; i < expStrings.length; i++){
-                            originalClassNamesValue = originalClassNamesValue.replace(expStrings[i], `EXPRESSION_STRING_NUM_${i}`);
-                        }
-                        start = arg.range[0] + 1;
-                        end = arg.range[1] - 1;
-                        break;
-                    case 'ConditionalExpression':
-                        visitNode(node, arg.consequent);
-                        visitNode(node, arg.alternate);
-                        return;
-                    case 'LogicalExpression':
-                        visitNode(node, arg.right);
-                        return;
-                    case 'ArrayExpression':
-                        arg.elements.forEach((el)=>{
-                            visitNode(node, el);
-                        });
-                        return;
-                    case 'ObjectExpression':
-                        const isUsedByClassNamesPlugin = node.callee && node.callee.name === 'classnames';
-                        const isVue = node.key && node.key.type === 'VDirectiveKey';
-                        arg.properties.forEach((prop)=>{
-                            const propVal = isUsedByClassNamesPlugin || isVue ? prop.key : prop.value;
-                            visitNode(node, propVal);
-                        });
-                        return;
-                    case 'Property':
-                        visitNode(node, arg.key);
-                        break;
-                    case 'Literal':
-                        originalClassNamesValue = arg.raw.slice(1, arg.raw.length - 1);
-                        start = arg.range[0] + 1;
-                        end = arg.range[1] - 1;
-                        break;
-                    case 'SvelteLiteral':
-                        originalClassNamesValue = arg.value;
-                        if (originalClassNamesValue === '') {
-                            return;
-                        }
-                        start = arg.range[0];
-                        end = arg.range[1];
-                        break;
-                    case 'TemplateElement':
-                        originalClassNamesValue = arg.value.raw;
-                        if (originalClassNamesValue === '') {
-                            return;
-                        }
-                        start = arg.range[0];
-                        end = arg.range[1];
-                        // https://github.com/eslint/eslint/issues/13360
-                        // The problem is that range computation includes the backticks (`test`)
-                        // but value.raw does not include them, so there is a mismatch.
-                        // start/end does not include the backticks, therefore it matches value.raw.
-                        const txt = context.sourceCode.getText(arg);
-                        prefix = getTemplateElementPrefix(txt, originalClassNamesValue);
-                        suffix = getTemplateElementSuffix(txt, originalClassNamesValue);
-                        originalClassNamesValue = getTemplateElementBody(txt, prefix, suffix);
-                        break;
+                if (node.type === 'space' && (orderedClasses.length !== 0 || i === nodes.length - 1)) {
+                    return node.raw;
                 }
-            }
-            const { classNames, whitespaces, headSpace, tailSpace } = extractClassnamesFromValue(originalClassNamesValue);
-            if (classNames.length <= 1) {
-                // Don't run sorting for a single or empty className
-                return;
-            }
-            let orderedClassNames = reorderForReadableClasses(classNames, css).filter((eachOrderedClassName)=>classNames.includes(eachOrderedClassName));
-            orderedClassNames = classNames.filter((x)=>!orderedClassNames.includes(x)).concat(orderedClassNames).filter((x)=>x.trim() !== '');
-            // Generates the validated/sorted attribute value
-            let validatedClassNamesValue = '';
-            for(let i = 0; i < orderedClassNames.length; i++){
-                const w = whitespaces[i] ?? '';
-                const cls = orderedClassNames[i];
-                validatedClassNamesValue += headSpace ? `${w}${cls}` : `${cls}${w}`;
-                if (cls) {
-                    if (!tailSpace && i === orderedClassNames.length - 1) {
-                        validatedClassNamesValue = validatedClassNamesValue.replace(/\s+$/, '');
-                    }
-                    if (headSpace && tailSpace && i === orderedClassNames.length - 1) {
-                        validatedClassNamesValue += whitespaces[whitespaces.length - 1] ?? '';
-                    }
+                return '';
+            }).join('');
+            if (raw !== orderedRaw) {
+                if (node.type === 'TemplateElement') {
+                    orderedRaw = '`' + orderedRaw + '`';
                 }
-            }
-            for(let i = 0; i < expStrings.length; i++){
-                originalClassNamesValue = originalClassNamesValue.replace(`EXPRESSION_STRING_NUM_${i}`, expStrings[i]);
-                validatedClassNamesValue = validatedClassNamesValue.replace(`EXPRESSION_STRING_NUM_${i}`, expStrings[i]);
-            }
-            if (originalClassNamesValue !== validatedClassNamesValue) {
-                validatedClassNamesValue = prefix + validatedClassNamesValue + suffix;
-                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;
                 context.report({
-                    loc: findLoc(originalClassNamesValue, sourceCodeLines, nodeStartLine, nodeStartColumn, nodeEndLine, nodeEndColumn),
+                    node,
+                    loc: {
+                        start: sourceCode.getLocFromIndex(start),
+                        end: sourceCode.getLocFromIndex(end)
+                    },
                     messageId: 'invalidClassOrder',
                     fix: function(fixer) {
                         return fixer.replaceTextRange([
                             start,
                             end
-                        ], validatedClassNamesValue);
+                        ], orderedRaw);
                     }
                 });
             }
-        };
-        return defineVisitors({
-            context,
-            settings
-        }, visitNode);
+        });
     }
 });