@master/eslint-plugin-css 2.0.0-rc.71 → 2.0.0-rc.73

package/README.md

@@ -86,7 +86,7 @@ export default [
     css,
     {
         rules: {
-            '@master/css/class-validation': ['error', {
+            '@master/css/no-invalid-classes': ['error', {
                 disallowUnknownClass: true
             }]
         }
@@ -96,29 +96,29 @@ export default [
 
 ## Rules
 
-### `@master/css/class-order`
+### `@master/css/sort-classes`
 
-Enforces a consistent and logical order of classes.
+Sorts Master CSS classes into a consistent and logical order.
 
 ```js
 export default [
     {
         rules: {
-            '@master/css/class-order': 'warn'
+            '@master/css/sort-classes': 'warn'
         }
     }
 ]
 ```
 
-### `@master/css/class-validation`
+### `@master/css/no-invalid-classes`
 
-Detects Master CSS syntax errors.
+Disallows invalid Master CSS classes.
 
 ```js
 export default [
     {
         rules: {
-            '@master/css/class-validation': 'error'
+            '@master/css/no-invalid-classes': 'error'
         }
     }
 ]
@@ -130,7 +130,7 @@ Set `disallowUnknownClass: true` to reject classes that do not match the active
 export default [
     {
         rules: {
-            '@master/css/class-validation': ['error', {
+            '@master/css/no-invalid-classes': ['error', {
                 disallowUnknownClass: true
             }]
         }
@@ -138,20 +138,77 @@ export default [
 ]
 ```
 
-### `@master/css/class-collision`
+### `@master/css/prefer-canonical-classes`
 
-Detects classes that emit the same CSS declaration.
+Prefers canonical Master CSS class forms, including semantic utilities, theme tokens, property aliases, composition utilities, and condition suffix order.
 
 ```js
 export default [
     {
         rules: {
-            '@master/css/class-collision': 'warn'
+            '@master/css/prefer-canonical-classes': 'warn'
         }
     }
 ]
 ```
 
+For example, this rule can fix `text-align:center` to `text-center`, `font:16px` to `font:md`, `margin:md` to `m:md`, `m:1rem|1.5rem` to `m:md|lg`, `fg:var(--color-red-60)` to `fg:red-60`, `w:md h:md` to `size:md`, `mt:md mb:md` to `my:md`, and `block@dark@sm` to `block@sm@dark`.
+
+You can disable specific canonicalization families:
+
+```js
+export default [
+    {
+        rules: {
+            '@master/css/prefer-canonical-classes': ['warn', {
+                preferStaticUtilities: true,
+                preferThemeTokens: true,
+                preferPropertyAliases: true,
+                preferVariableReferences: true,
+                preferMultiValueTokens: true,
+                preferCompositionUtilities: true,
+                preferConditionOrder: true
+            }]
+        }
+    }
+]
+```
+
+### `@master/css/no-conflicting-classes`
+
+Disallows classes that emit the same CSS declaration properties for the same variant.
+
+```js
+export default [
+    {
+        rules: {
+            '@master/css/no-conflicting-classes': 'warn'
+        }
+    }
+]
+```
+
+When two classes conflict, the later class is treated as the effective one and the fix removes the earlier class. For partially overlapping spacing, physical inset, radius, and border width/color/style shorthands, the fix preserves the surviving declarations by splitting the earlier class, such as `mx:md ml:lg` to `mr:md ml:lg` or `b-solid bt-dashed` to `br-solid bb-solid bl-solid bt-dashed`.
+
+### `@master/css/no-unapproved-raw-values`
+
+Disallows raw values in token-backed utilities unless they are explicitly allowed. This rule is opt-in team policy and is not enabled by the recommended config.
+
+```js
+export default [
+    {
+        rules: {
+            '@master/css/no-unapproved-raw-values': ['warn', {
+                allowProperties: ['width', 'height'],
+                allowedPatterns: ['^var\\(', '^calc\\(']
+            }]
+        }
+    }
+]
+```
+
+For example, this rule reports `font:15px`, `m:17px`, and `fg:#123456` when those values are not theme tokens. It does not autofix because there may be no safe token replacement.
+
 ## Settings
 
 Settings live under the `@master/css` settings key:

package/dist/configs/recommended.cjs

@@ -5,9 +5,10 @@ var base = require('./base.cjs');
 var recommended = {
     ...base,
     rules: {
-        '@master/css/class-order': 'warn',
-        '@master/css/class-validation': 'error',
-        '@master/css/class-collision': 'warn'
+        '@master/css/sort-classes': 'warn',
+        '@master/css/no-invalid-classes': 'error',
+        '@master/css/no-conflicting-classes': 'warn',
+        '@master/css/prefer-canonical-classes': 'warn'
     }
 };
 

package/dist/configs/recommended.mjs

@@ -3,9 +3,10 @@ import base from './base.mjs';
 var recommended = {
     ...base,
     rules: {
-        '@master/css/class-order': 'warn',
-        '@master/css/class-validation': 'error',
-        '@master/css/class-collision': 'warn'
+        '@master/css/sort-classes': 'warn',
+        '@master/css/no-invalid-classes': 'error',
+        '@master/css/no-conflicting-classes': 'warn',
+        '@master/css/prefer-canonical-classes': 'warn'
     }
 };
 

package/dist/plugin.cjs

@@ -1,8 +1,10 @@
 'use strict';
 
-var classCollision = require('./rules/class-collision.cjs');
-var classOrder = require('./rules/class-order.cjs');
-var classValidation = require('./rules/class-validation.cjs');
+var noConflictingClasses = require('./rules/no-conflicting-classes.cjs');
+var noInvalidClasses = require('./rules/no-invalid-classes.cjs');
+var noUnapprovedRawValues = require('./rules/no-unapproved-raw-values.cjs');
+var preferCanonicalClasses = require('./rules/prefer-canonical-classes.cjs');
+var sortClasses = require('./rules/sort-classes.cjs');
 var fs = require('fs');
 var url = require('url');
 var path = require('path');
@@ -17,9 +19,11 @@ const plugin = {
         version: pkg.version
     },
     rules: {
-        'class-collision': classCollision,
-        'class-order': classOrder,
-        'class-validation': classValidation
+        'no-conflicting-classes': noConflictingClasses,
+        'no-invalid-classes': noInvalidClasses,
+        'no-unapproved-raw-values': noUnapprovedRawValues,
+        'prefer-canonical-classes': preferCanonicalClasses,
+        'sort-classes': sortClasses
     }
 };
 

package/dist/plugin.mjs

@@ -1,6 +1,8 @@
-import classCollision from './rules/class-collision.mjs';
-import classOrder from './rules/class-order.mjs';
-import classValidation from './rules/class-validation.mjs';
+import noConflictingClasses from './rules/no-conflicting-classes.mjs';
+import noInvalidClasses from './rules/no-invalid-classes.mjs';
+import noUnapprovedRawValues from './rules/no-unapproved-raw-values.mjs';
+import preferCanonicalClasses from './rules/prefer-canonical-classes.mjs';
+import sortClasses from './rules/sort-classes.mjs';
 import { readFileSync } from 'fs';
 import { fileURLToPath } from 'url';
 import { dirname, resolve } from 'path';
@@ -14,9 +16,11 @@ const plugin = {
         version: pkg.version
     },
     rules: {
-        'class-collision': classCollision,
-        'class-order': classOrder,
-        'class-validation': classValidation
+        'no-conflicting-classes': noConflictingClasses,
+        'no-invalid-classes': noInvalidClasses,
+        'no-unapproved-raw-values': noUnapprovedRawValues,
+        'prefer-canonical-classes': preferCanonicalClasses,
+        'sort-classes': sortClasses
     }
 };
 

package/dist/rules/no-conflicting-classes.cjs

@@ -0,0 +1,101 @@
+'use strict';
+
+var defineVisitors = require('../utils/define-visitors.cjs');
+var resolveContext = require('../utils/resolve-context.cjs');
+var createRule = require('../create-rule.cjs');
+var cssLint = require('@master/css-lint');
+
+var noConflictingClasses = createRule({
+    name: 'no-conflicting-classes',
+    meta: {
+        type: 'layout',
+        docs: {
+            description: 'Disallow conflicting Master CSS classes'
+        },
+        messages: {
+            collisionClass: '{{message}}',
+            partialCollisionClass: 'Prefer "{{replacement}}" over "{{actual}}" because "{{conflict}}" overrides part of it.'
+        },
+        fixable: 'code',
+        schema: []
+    },
+    defaultOptions: [],
+    create (context) {
+        const { settings, css } = resolveContext(context);
+        return defineVisitors({
+            context,
+            settings
+        }, (_, { raw, start, end, unescape, classNodes, classValues })=>{
+            const conflicts = cssLint.findClassConflicts(classValues, css);
+            if (conflicts.length) {
+                const classNamesToRemove = conflicts.map(({ className })=>className);
+                const keptClassNames = [
+                    ...new Set(conflicts.flatMap(({ conflicts })=>conflicts))
+                ];
+                const formatClassName = (className)=>`"${className}"`;
+                const formatClassList = (classNames)=>{
+                    if (classNames.length <= 2) return classNames.map(formatClassName).join(' and ');
+                    return `${classNames.slice(0, -1).map(formatClassName).join(', ')}, and ${formatClassName(classNames[classNames.length - 1])}`;
+                };
+                const fixedRaw = cssLint.removeClassNamesFromClassList(raw, classNamesToRemove, {
+                    unescape
+                });
+                const firstClassNode = classNodes.find((node)=>node.value === classNamesToRemove[0]);
+                context.report({
+                    loc: firstClassNode.loc,
+                    messageId: 'collisionClass',
+                    data: {
+                        message: `${formatClassList(classNamesToRemove)} ${classNamesToRemove.length === 1 ? 'is' : 'are'} overridden by ${formatClassList(keptClassNames)}.`
+                    },
+                    fix: function(fixer) {
+                        return fixer.replaceTextRange([
+                            start,
+                            end
+                        ], fixedRaw);
+                    }
+                });
+                return;
+            }
+            const partialConflicts = cssLint.findPartialClassConflicts(classValues, css);
+            if (!partialConflicts.length) return;
+            let fixedRaw = raw;
+            for (const conflict of partialConflicts){
+                fixedRaw = cssLint.replaceClassNameInClassList(fixedRaw, conflict.className, conflict.replacement, {
+                    unescape
+                });
+            }
+            const classNodeQueues = new Map();
+            for (const classNode of classNodes){
+                const queue = classNodeQueues.get(classNode.value);
+                if (queue) {
+                    queue.push(classNode);
+                } else {
+                    classNodeQueues.set(classNode.value, [
+                        classNode
+                    ]);
+                }
+            }
+            for (const conflict of partialConflicts){
+                const classNode = classNodeQueues.get(conflict.className)?.shift();
+                if (!classNode) continue;
+                context.report({
+                    loc: classNode.loc,
+                    messageId: 'partialCollisionClass',
+                    data: {
+                        actual: conflict.className,
+                        replacement: conflict.replacement,
+                        conflict: conflict.conflict
+                    },
+                    fix (fixer) {
+                        return fixer.replaceTextRange([
+                            start,
+                            end
+                        ], fixedRaw);
+                    }
+                });
+            }
+        });
+    }
+});
+
+module.exports = noConflictingClasses;

package/dist/rules/no-conflicting-classes.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("@typescript-eslint/utils/ts-eslint").RuleModule<"collisionClass" | "partialCollisionClass", [], unknown, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
+    name: string;
+};
+export default _default;

package/dist/rules/no-conflicting-classes.mjs

@@ -0,0 +1,99 @@
+import defineVisitors from '../utils/define-visitors.mjs';
+import resolveContext from '../utils/resolve-context.mjs';
+import createRule from '../create-rule.mjs';
+import { findClassConflicts, removeClassNamesFromClassList, findPartialClassConflicts, replaceClassNameInClassList } from '@master/css-lint';
+
+var noConflictingClasses = createRule({
+    name: 'no-conflicting-classes',
+    meta: {
+        type: 'layout',
+        docs: {
+            description: 'Disallow conflicting Master CSS classes'
+        },
+        messages: {
+            collisionClass: '{{message}}',
+            partialCollisionClass: 'Prefer "{{replacement}}" over "{{actual}}" because "{{conflict}}" overrides part of it.'
+        },
+        fixable: 'code',
+        schema: []
+    },
+    defaultOptions: [],
+    create (context) {
+        const { settings, css } = resolveContext(context);
+        return defineVisitors({
+            context,
+            settings
+        }, (_, { raw, start, end, unescape, classNodes, classValues })=>{
+            const conflicts = findClassConflicts(classValues, css);
+            if (conflicts.length) {
+                const classNamesToRemove = conflicts.map(({ className })=>className);
+                const keptClassNames = [
+                    ...new Set(conflicts.flatMap(({ conflicts })=>conflicts))
+                ];
+                const formatClassName = (className)=>`"${className}"`;
+                const formatClassList = (classNames)=>{
+                    if (classNames.length <= 2) return classNames.map(formatClassName).join(' and ');
+                    return `${classNames.slice(0, -1).map(formatClassName).join(', ')}, and ${formatClassName(classNames[classNames.length - 1])}`;
+                };
+                const fixedRaw = removeClassNamesFromClassList(raw, classNamesToRemove, {
+                    unescape
+                });
+                const firstClassNode = classNodes.find((node)=>node.value === classNamesToRemove[0]);
+                context.report({
+                    loc: firstClassNode.loc,
+                    messageId: 'collisionClass',
+                    data: {
+                        message: `${formatClassList(classNamesToRemove)} ${classNamesToRemove.length === 1 ? 'is' : 'are'} overridden by ${formatClassList(keptClassNames)}.`
+                    },
+                    fix: function(fixer) {
+                        return fixer.replaceTextRange([
+                            start,
+                            end
+                        ], fixedRaw);
+                    }
+                });
+                return;
+            }
+            const partialConflicts = findPartialClassConflicts(classValues, css);
+            if (!partialConflicts.length) return;
+            let fixedRaw = raw;
+            for (const conflict of partialConflicts){
+                fixedRaw = replaceClassNameInClassList(fixedRaw, conflict.className, conflict.replacement, {
+                    unescape
+                });
+            }
+            const classNodeQueues = new Map();
+            for (const classNode of classNodes){
+                const queue = classNodeQueues.get(classNode.value);
+                if (queue) {
+                    queue.push(classNode);
+                } else {
+                    classNodeQueues.set(classNode.value, [
+                        classNode
+                    ]);
+                }
+            }
+            for (const conflict of partialConflicts){
+                const classNode = classNodeQueues.get(conflict.className)?.shift();
+                if (!classNode) continue;
+                context.report({
+                    loc: classNode.loc,
+                    messageId: 'partialCollisionClass',
+                    data: {
+                        actual: conflict.className,
+                        replacement: conflict.replacement,
+                        conflict: conflict.conflict
+                    },
+                    fix (fixer) {
+                        return fixer.replaceTextRange([
+                            start,
+                            end
+                        ], fixedRaw);
+                    }
+                });
+            }
+        });
+    }
+});
+
+export { noConflictingClasses as default };

package/dist/rules/no-invalid-classes.cjs

@@ -0,0 +1,51 @@
+'use strict';
+
+var defineVisitors = require('../utils/define-visitors.cjs');
+var resolveContext = require('../utils/resolve-context.cjs');
+var createRule = require('../create-rule.cjs');
+var settingsSchema = require('../settings-schema.cjs');
+var cssLint = require('@master/css-lint');
+
+var noInvalidClasses = createRule({
+    name: 'no-invalid-classes',
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Disallow invalid Master CSS classes'
+        },
+        messages: {
+            invalidClass: '{{message}}',
+            disallowUnknownClass: '{{message}}'
+        },
+        fixable: null,
+        schema: [
+            settingsSchema.noInvalidClassesOptionsSchema
+        ]
+    },
+    defaultOptions: [],
+    create: function(context) {
+        const { options, settings, css } = resolveContext(context);
+        return defineVisitors({
+            context,
+            settings
+        }, (_, { classNodes })=>{
+            for (const node of classNodes){
+                const issues = cssLint.getClassValidationIssues(node.value, css, {
+                    disallowUnknownClass: options.disallowUnknownClass,
+                    displayClassName: node.raw
+                });
+                for (const issue of issues){
+                    context.report({
+                        loc: node.loc,
+                        messageId: issue.kind === 'invalid' ? 'invalidClass' : 'disallowUnknownClass',
+                        data: {
+                            message: issue.message
+                        }
+                    });
+                }
+            }
+        });
+    }
+});
+
+module.exports = noInvalidClasses;

package/dist/rules/{class-validation.d.ts → no-invalid-classes.d.ts}

@@ -1,4 +1,4 @@
-declare const _default: import("@typescript-eslint/utils/ts-eslint").RuleModule<"invalidClass" | "disallowUnknownClass", [], unknown, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
+declare const _default: import("@typescript-eslint/utils/ts-eslint").RuleModule<"disallowUnknownClass" | "invalidClass", [], unknown, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
     name: string;
 };
 export default _default;

package/dist/rules/no-invalid-classes.mjs

@@ -0,0 +1,49 @@
+import defineVisitors from '../utils/define-visitors.mjs';
+import resolveContext from '../utils/resolve-context.mjs';
+import createRule from '../create-rule.mjs';
+import { noInvalidClassesOptionsSchema } from '../settings-schema.mjs';
+import { getClassValidationIssues } from '@master/css-lint';
+
+var noInvalidClasses = createRule({
+    name: 'no-invalid-classes',
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Disallow invalid Master CSS classes'
+        },
+        messages: {
+            invalidClass: '{{message}}',
+            disallowUnknownClass: '{{message}}'
+        },
+        fixable: null,
+        schema: [
+            noInvalidClassesOptionsSchema
+        ]
+    },
+    defaultOptions: [],
+    create: function(context) {
+        const { options, settings, css } = resolveContext(context);
+        return defineVisitors({
+            context,
+            settings
+        }, (_, { classNodes })=>{
+            for (const node of classNodes){
+                const issues = getClassValidationIssues(node.value, css, {
+                    disallowUnknownClass: options.disallowUnknownClass,
+                    displayClassName: node.raw
+                });
+                for (const issue of issues){
+                    context.report({
+                        loc: node.loc,
+                        messageId: issue.kind === 'invalid' ? 'invalidClass' : 'disallowUnknownClass',
+                        data: {
+                            message: issue.message
+                        }
+                    });
+                }
+            }
+        });
+    }
+});
+
+export { noInvalidClasses as default };

package/dist/rules/no-unapproved-raw-values.cjs

@@ -0,0 +1,77 @@
+'use strict';
+
+var defineVisitors = require('../utils/define-visitors.cjs');
+var resolveContext = require('../utils/resolve-context.cjs');
+var createRule = require('../create-rule.cjs');
+var cssLint = require('@master/css-lint');
+
+var noUnapprovedRawValues = createRule({
+    name: 'no-unapproved-raw-values',
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Disallow unapproved raw values in token-backed Master CSS classes'
+        },
+        messages: {
+            unapprovedRawValue: 'Unexpected raw value "{{value}}" in "{{className}}". Use a token or allow it explicitly.'
+        },
+        fixable: null,
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    allowRawValues: {
+                        type: 'boolean'
+                    },
+                    allowProperties: {
+                        type: 'array',
+                        items: {
+                            type: 'string'
+                        },
+                        uniqueItems: true
+                    },
+                    allowedPatterns: {
+                        type: 'array',
+                        items: {
+                            type: 'string'
+                        },
+                        uniqueItems: true
+                    }
+                },
+                additionalProperties: false
+            }
+        ]
+    },
+    defaultOptions: [
+        {
+            allowRawValues: false,
+            allowProperties: [],
+            allowedPatterns: []
+        }
+    ],
+    create (context) {
+        const { settings, css } = resolveContext(context);
+        const options = context.options[0] || {};
+        return defineVisitors({
+            context,
+            settings
+        }, (node, { classNodes, classValues })=>{
+            const issues = cssLint.findUnapprovedRawValueClasses(classValues, css, options);
+            for (const issue of issues){
+                const classNode = classNodes.find((node)=>node.value === issue.className);
+                if (!classNode) continue;
+                context.report({
+                    node,
+                    loc: classNode.loc,
+                    messageId: 'unapprovedRawValue',
+                    data: {
+                        className: issue.className,
+                        value: issue.value
+                    }
+                });
+            }
+        });
+    }
+});
+
+module.exports = noUnapprovedRawValues;

package/dist/rules/no-unapproved-raw-values.d.ts

@@ -0,0 +1,8 @@
+declare const _default: import("@typescript-eslint/utils/ts-eslint").RuleModule<"unapprovedRawValue", [{
+    allowRawValues: boolean;
+    allowProperties: any[];
+    allowedPatterns: any[];
+}], unknown, import("@typescript-eslint/utils/ts-eslint").RuleListener> & {
+    name: string;
+};
+export default _default;