@master/eslint-plugin-css 2.0.0-rc.15 → 2.0.0-rc.16

package/dist/configs/config.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+const config = {
+    rules: {
+        '@master/css/class-order': 'warn',
+        '@master/css/class-validation': 'error',
+        '@master/css/class-collision': 'warn'
+    },
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true
+        }
+    }
+};
+
+module.exports = config;

package/dist/configs/config.mjs

@@ -1 +1,14 @@
-const s={rules:{"@master/css/class-order":"warn","@master/css/class-validation":"error","@master/css/class-collision":"warn"},parserOptions:{ecmaFeatures:{jsx:!0}}};var r=s;export{r as default};
+const config = {
+    rules: {
+        '@master/css/class-order': 'warn',
+        '@master/css/class-validation': 'error',
+        '@master/css/class-collision': 'warn'
+    },
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true
+        }
+    }
+};
+
+export { config as default };

package/dist/configs/flat.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var plugin = require('../plugin.cjs');
+var config = require('./config.cjs');
+
+var flat = {
+    plugins: {
+        '@master/css': plugin
+    },
+    ...config
+};
+
+module.exports = flat;

package/dist/configs/flat.mjs

@@ -1 +1,11 @@
-import o from"../plugin.mjs";import r from"./config.mjs";var p={plugins:{"@master/css":o},...r};export{p as default};
+import plugin from '../plugin.mjs';
+import config from './config.mjs';
+
+var flat = {
+    plugins: {
+        '@master/css': plugin
+    },
+    ...config
+};
+
+export { flat as default };

package/dist/configs/recommended.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var config = require('./config.cjs');
+
+var recommended = {
+    plugins: [
+        '@master/css'
+    ],
+    ...config
+};
+
+module.exports = recommended;

package/dist/configs/recommended.mjs

@@ -1 +1,10 @@
-import o from"./config.mjs";var s={plugins:["@master/css"],...o};export{s as default};
+import config from './config.mjs';
+
+var recommended = {
+    plugins: [
+        '@master/css'
+    ],
+    ...config
+};
+
+export { recommended as default };

package/dist/index.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var plugin = require('./plugin.cjs');
+var settings = require('./settings.cjs');
+var recommended = require('./configs/recommended.cjs');
+var flat = require('./configs/flat.cjs');
+
+module.exports = {
+    ...plugin,
+    configs: {
+        recommended,
+        flat
+    },
+    settings
+};

package/dist/index.mjs

@@ -1 +1,13 @@
-var i=(r,o)=>()=>(o||r((o={exports:{}}).exports,o),o.exports);import t from"./plugin.mjs";import f from"./settings.mjs";import p from"./configs/recommended.mjs";import e from"./configs/flat.mjs";var n=i((x,m)=>{m.exports={...t,configs:{recommended:p,flat:e},settings:f}});export default n();
+import plugin from './plugin.mjs';
+import settings from './settings.mjs';
+import recommended from './configs/recommended.mjs';
+import flat from './configs/flat.mjs';
+
+module.exports = {
+    ...plugin,
+    configs: {
+        recommended,
+        flat
+    },
+    settings
+};

package/dist/plugin.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var classCollision = require('./rules/class-collision.cjs');
+var classOrder = require('./rules/class-order.cjs');
+var classValidation = require('./rules/class-validation.cjs');
+
+const plugin = {
+    meta: {
+        name: '@master/eslint-plugin-css'
+    },
+    rules: {
+        'class-collision': classCollision,
+        'class-order': classOrder,
+        'class-validation': classValidation
+    }
+};
+
+module.exports = plugin;

package/dist/plugin.mjs

@@ -1 +1,16 @@
-import s from"./rules/class-collision.mjs";import i from"./rules/class-order.mjs";import l from"./rules/class-validation.mjs";const o={meta:{name:"@master/eslint-plugin-css"},rules:{"class-collision":s,"class-order":i,"class-validation":l}};var n=o;export{n as default};
+import classCollision from './rules/class-collision.mjs';
+import classOrder from './rules/class-order.mjs';
+import classValidation from './rules/class-validation.mjs';
+
+const plugin = {
+    meta: {
+        name: '@master/eslint-plugin-css'
+    },
+    rules: {
+        'class-collision': classCollision,
+        'class-order': classOrder,
+        'class-validation': classValidation
+    }
+};
+
+export { plugin as default };

package/dist/rules/class-collision.cjs

@@ -0,0 +1,103 @@
+'use strict';
+
+var areDeclarationsEqual = require('../utils/are-declarations-equal.cjs');
+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 validRulesAction = require('../utils/valid-rules-action.cjs');
+
+var classCollision = {
+    meta: {
+        docs: {
+            description: 'Avoid applying classes with the same CSS declaration',
+            category: 'Stylistic Issues',
+            recommended: false,
+            url: 'https://rc.css.master.co/docs/code-linting#class-collision-detection'
+        },
+        messages: {
+            collisionClass: '{{message}}'
+        },
+        fixable: 'code',
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    calleeMatching: {
+                        type: 'string'
+                    },
+                    classMatching: {
+                        type: 'string'
+                    },
+                    ignoredKeys: {
+                        type: 'array',
+                        items: {
+                            type: 'string',
+                            minLength: 0
+                        },
+                        uniqueItems: true
+                    },
+                    config: {
+                        type: [
+                            'string',
+                            'object'
+                        ]
+                    }
+                }
+            }
+        ]
+    },
+    create (context) {
+        const { options, settings } = 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 nodeEndLine = node.loc.end.line;
+                const ruleOfClass = validRulesAction(classNames, settings.config);
+                for(let i = 0; i < classNames.length; i++){
+                    const className = classNames[i];
+                    const rule = ruleOfClass[className];
+                    const conflicts = [];
+                    if (rule) {
+                        for(let j = 0; j < classNames.length; j++){
+                            const compareClassName = classNames[j];
+                            const compareRule = ruleOfClass[compareClassName];
+                            if (i !== j && compareRule && areDeclarationsEqual(rule.declarations, compareRule.declarations) && rule.stateToken === compareRule.stateToken) {
+                                conflicts.push(compareClassName);
+                            }
+                        }
+                    }
+                    if (conflicts.length > 0) {
+                        const conflictClassNamesMsg = conflicts.map((x)=>`"${x}"`).join(' and ');
+                        let fixClassNames = originalClassNamesValue;
+                        for (const conflictClassName of conflicts){
+                            const regexSafe = conflictClassName.replace(/(\\|\.|\(|\)|\[|\]|\{|\}|\+|\*|\?|\^|\$|\||\/)/g, '\\$1');
+                            fixClassNames = fixClassNames.replace(new RegExp(`\\s+${regexSafe}|${regexSafe}\\s+`), '');
+                        }
+                        context.report({
+                            loc: findLoc(className, sourceCodeLines, nodeStartLine, nodeEndLine),
+                            messageId: 'collisionClass',
+                            data: {
+                                message: `"${className}" applies the same CSS declarations as ${conflictClassNamesMsg}.`
+                            },
+                            fix: function(fixer) {
+                                return fixer.replaceTextRange([
+                                    start,
+                                    end
+                                ], fixClassNames);
+                            }
+                        });
+                    }
+                }
+            }, false, false, settings.ignoredKeys, context);
+        };
+        return defineVisitors({
+            context,
+            settings
+        }, visitNode);
+    }
+};
+
+module.exports = classCollision;

package/dist/rules/class-collision.mjs

@@ -1 +1,101 @@
-import $ from"../utils/are-declarations-equal.mjs";import v from"../utils/define-visitors.mjs";import L from"../utils/resolve-context.mjs";import j from"../utils/find-loc.mjs";import{parseNodeRecursive as x}from"../utils/parse-node-recursive.mjs";import M from"../utils/valid-rules-action.mjs";var O={meta:{docs:{description:"Avoid applying classes with the same CSS declaration",category:"Stylistic Issues",recommended:!1,url:"https://rc.css.master.co/docs/code-linting#class-collision-detection"},messages:{collisionClass:"{{message}}"},fixable:"code",schema:[{type:"object",properties:{calleeMatching:{type:"string"},classMatching:{type:"string"},ignoredKeys:{type:"array",items:{type:"string",minLength:0},uniqueItems:!0},config:{type:["string","object"]}}}]},create(t){const{options:N,settings:a}=L(t);return v({context:t,settings:a},(f,g=null)=>{x(f,g,(i,d,u,C,h)=>{const y=t.sourceCode.lines,R=d.loc.start.line,S=d.loc.end.line,p=M(i,a.config);for(let n=0;n<i.length;n++){const c=i[n],l=p[c],r=[];if(l)for(let s=0;s<i.length;s++){const o=i[s],e=p[o];n!==s&&e&&$(l.declarations,e.declarations)&&l.stateToken===e.stateToken&&r.push(o)}if(r.length>0){const s=r.map(e=>`"${e}"`).join(" and ");let o=u;for(const e of r){const m=e.replace(/(\\|\.|\(|\)|\[|\]|\{|\}|\+|\*|\?|\^|\$|\||\/)/g,"\\$1");o=o.replace(new RegExp(`\\s+${m}|${m}\\s+`),"")}t.report({loc:j(c,y,R,S),messageId:"collisionClass",data:{message:`"${c}" applies the same CSS declarations as ${s}.`},fix:function(e){return e.replaceTextRange([C,h],o)}})}}},!1,!1,a.ignoredKeys,t)})}};export{O as default};
+import areDeclarationsEqual from '../utils/are-declarations-equal.mjs';
+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 validRulesAction from '../utils/valid-rules-action.mjs';
+
+var classCollision = {
+    meta: {
+        docs: {
+            description: 'Avoid applying classes with the same CSS declaration',
+            category: 'Stylistic Issues',
+            recommended: false,
+            url: 'https://rc.css.master.co/docs/code-linting#class-collision-detection'
+        },
+        messages: {
+            collisionClass: '{{message}}'
+        },
+        fixable: 'code',
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    calleeMatching: {
+                        type: 'string'
+                    },
+                    classMatching: {
+                        type: 'string'
+                    },
+                    ignoredKeys: {
+                        type: 'array',
+                        items: {
+                            type: 'string',
+                            minLength: 0
+                        },
+                        uniqueItems: true
+                    },
+                    config: {
+                        type: [
+                            'string',
+                            'object'
+                        ]
+                    }
+                }
+            }
+        ]
+    },
+    create (context) {
+        const { options, settings } = 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 nodeEndLine = node.loc.end.line;
+                const ruleOfClass = validRulesAction(classNames, settings.config);
+                for(let i = 0; i < classNames.length; i++){
+                    const className = classNames[i];
+                    const rule = ruleOfClass[className];
+                    const conflicts = [];
+                    if (rule) {
+                        for(let j = 0; j < classNames.length; j++){
+                            const compareClassName = classNames[j];
+                            const compareRule = ruleOfClass[compareClassName];
+                            if (i !== j && compareRule && areDeclarationsEqual(rule.declarations, compareRule.declarations) && rule.stateToken === compareRule.stateToken) {
+                                conflicts.push(compareClassName);
+                            }
+                        }
+                    }
+                    if (conflicts.length > 0) {
+                        const conflictClassNamesMsg = conflicts.map((x)=>`"${x}"`).join(' and ');
+                        let fixClassNames = originalClassNamesValue;
+                        for (const conflictClassName of conflicts){
+                            const regexSafe = conflictClassName.replace(/(\\|\.|\(|\)|\[|\]|\{|\}|\+|\*|\?|\^|\$|\||\/)/g, '\\$1');
+                            fixClassNames = fixClassNames.replace(new RegExp(`\\s+${regexSafe}|${regexSafe}\\s+`), '');
+                        }
+                        context.report({
+                            loc: findLoc(className, sourceCodeLines, nodeStartLine, nodeEndLine),
+                            messageId: 'collisionClass',
+                            data: {
+                                message: `"${className}" applies the same CSS declarations as ${conflictClassNamesMsg}.`
+                            },
+                            fix: function(fixer) {
+                                return fixer.replaceTextRange([
+                                    start,
+                                    end
+                                ], fixClassNames);
+                            }
+                        });
+                    }
+                }
+            }, false, false, settings.ignoredKeys, context);
+        };
+        return defineVisitors({
+            context,
+            settings
+        }, visitNode);
+    }
+};
+
+export { classCollision as default };

package/dist/rules/class-order.cjs

@@ -0,0 +1,196 @@
+'use strict';
+
+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 reorderValidClassesAction = require('../utils/reorder-valid-classes-action.cjs');
+
+var classOrder = {
+    meta: {
+        docs: {
+            description: 'Enforce a consistent and logical order of classes',
+            category: 'Stylistic Issues',
+            recommended: false,
+            url: 'https://rc.css.master.co/docs/code-linting#consistent-class-order'
+        },
+        messages: {
+            invalidClassOrder: 'No consistent class order followed.'
+        },
+        fixable: 'code',
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    calleeMatching: {
+                        type: 'string'
+                    },
+                    classMatching: {
+                        type: 'string'
+                    },
+                    ignoredKeys: {
+                        type: 'array',
+                        items: {
+                            type: 'string',
+                            minLength: 0
+                        },
+                        uniqueItems: true
+                    },
+                    config: {
+                        type: [
+                            'string',
+                            'object'
+                        ]
+                    }
+                }
+            }
+        ]
+    },
+    create: function(context) {
+        const { options, settings } = 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;
+                }
+            } 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.value;
+                        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;
+                }
+            }
+            const { classNames, whitespaces, headSpace, tailSpace } = extractClassnamesFromValue(originalClassNamesValue);
+            if (classNames.length <= 1) {
+                // Don't run sorting for a single or empty className
+                return;
+            }
+            let orderedClassNames = reorderValidClassesAction(classNames, settings.config);
+            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] ?? '';
+                    }
+                }
+            }
+            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 nodeEndLine = node.loc.end.line;
+                const descriptor = {
+                    loc: findLoc(originalClassNamesValue, sourceCodeLines, nodeStartLine, nodeEndLine),
+                    messageId: 'invalidClassOrder',
+                    fix: function(fixer) {
+                        return fixer.replaceTextRange([
+                            start,
+                            end
+                        ], validatedClassNamesValue);
+                    }
+                };
+                context.report(descriptor);
+            }
+        };
+        return defineVisitors({
+            context,
+            settings
+        }, visitNode);
+    }
+};
+
+module.exports = classOrder;