@master/eslint-plugin-css 2.0.0-beta.175

package/README.md

@@ -0,0 +1,59 @@
+<br>
+<div align="center">
+
+<p align="center">
+    <a href="https://css.master.co">
+        <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/33840671/201701649-3bb7d698-abec-4d5f-ac30-ccc4d7bafcd4.svg">
+            <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/33840671/201703010-77bf2373-9899-40cc-98f5-30cf9b546941.svg">
+            <img alt="Master CSS" src="https://user-images.githubusercontent.com/33840671/201703010-77bf2373-9899-40cc-98f5-30cf9b546941.svg" width="100%">
+        </picture>
+    </a>
+</p>
+<p align="center">An ESLint plugin enforcing a consistent coding style for Master CSS</p>
+
+<p align="center">
+    <a aria-label="GitHub release (latest by date including pre-releases)" href="https://github.com/master-co/css/releases">
+        <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/v/release/master-co/css?include_prereleases&color=212022&label=&style=for-the-badge&logo=github&logoColor=fff">
+            <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/v/release/master-co/css?include_prereleases&color=f6f7f8&label=&style=for-the-badge&logo=github&logoColor=%23000">
+            <img alt="NPM Version" src="https://img.shields.io/github/v/release/master-co/css?include_prereleases&color=f6f7f8&label=&style=for-the-badge&logo=github">
+        </picture>
+    </a>
+    <a aria-label="NPM Package" href="https://www.npmjs.com/package/@master/eslint-plugin-css">
+        <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/dm/@master/eslint-plugin-css?color=212022&label=%20&logo=npm&style=for-the-badge">
+            <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/npm/dm/@master/eslint-plugin-css?color=f6f7f8&label=%20&logo=npm&style=for-the-badge">
+            <img alt="NPM package ( download / month )" src="https://img.shields.io/npm/dm/@master/eslint-plugin-css?color=f6f7f8&label=%20&logo=npm&style=for-the-badge">
+        </picture>
+    </a>
+    <a aria-label="Discord Community" href="https://discord.gg/sZNKpAAAw6">
+        <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/discord/917780624314613760?color=212022&label=%20&logo=discord&style=for-the-badge">
+            <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/discord/917780624314613760?color=f6f7f8&label=%20&logo=discord&style=for-the-badge">
+            <img alt="Discord online" src="https://img.shields.io/discord/917780624314613760?color=f6f7f8&label=%20&logo=discord&style=for-the-badge">
+        </picture>
+    </a>
+    <a aria-label="Follow @mastercorg" href="https://twitter.com/mastercorg">
+        <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/static/v1?label=%20&message=twitter&color=212022&logo=twitter&style=for-the-badge">
+            <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/static/v1?label=%20&message=twitter&color=f6f7f8&logo=twitter&style=for-the-badge">
+            <img alt="Follow @mastercorg" src="https://img.shields.io/static/v1?label=%20&message=twitter&color=f6f7f8&logo=twitter&style=for-the-badge">
+        </picture>
+    </a>
+    <a aria-label="Github Actions" href="https://github.com/1aron/repo/actions/workflows/release.yml">
+        <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/actions/workflow/status/master-co/css/release.yml?branch=beta&label=%20&message=twitter&color=212022&logo=githubactions&style=for-the-badge">
+            <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/actions/workflow/status/master-co/css/release.yml?branch=beta&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
+            <img alt="Github release actions" src="https://img.shields.io/github/actions/workflow/status/master-co/css/release.yml?branch=beta&label=%20&message=twitter&color=f6f7f8&logo=githubactions&style=for-the-badge&logoColor=%23000">
+        </picture>
+    </a>
+</p>
+
+</div>
+
+## Documentation
+Check out the official [documentation](https://beta.css.master.co/docs/code-linting).
+
+## Credits
+This plugin is heavily inspired by the awesome [eslint-plugin-tailwindcss](https://github.com/francoismassart/eslint-plugin-tailwindcss). We want to thank for their initial work, which served as the foundation for this project. While significant modifications have been made, the core ideas and concepts from A Plugin have been instrumental in developing this plugin.

package/lib/index.js

@@ -0,0 +1,19 @@
+/**
+ * @fileoverview Rules enforcing best practices while using Master CSS
+ * @author Miles
+ */
+'use strict'
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const requireIndex = require('requireindex')
+
+//------------------------------------------------------------------------------
+// Plugin Definition
+//------------------------------------------------------------------------------
+
+
+// import all rules in lib/rules
+module.exports.rules = requireIndex(__dirname + '/rules')

package/lib/rules/class-order.js

@@ -0,0 +1,273 @@
+/* eslint-disable no-case-declarations */
+/**
+ * @fileoverview Use a consistent orders for the Master CSS classnames, based on property then on variants
+ * @author Miles
+ */
+'use strict'
+
+// Modified from https://github.com/francoismassart/eslint-plugin-tailwindcss
+
+const docsUrl = require('../util/docsUrl')
+const astUtil = require('../util/ast')
+const removeDuplicatesFromClassnamesAndWhitespaces = require('../util/removeDuplicatesFromClassnamesAndWhitespaces')
+const getOption = require('../util/settings')
+const parserUtil = require('../util/parser')
+
+const MasterCSS = require('@master/css').MasterCSS
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+// Predefine message for use in context.report conditional.
+// messageId will still be usable in tests.
+const INVALID_CLASSNAMES_ORDER_MSG = 'Invalid Master CSS classnames order'
+
+module.exports = {
+    meta: {
+        docs: {
+            description: 'Enforce a consistent and logical order of the Master CSS classnames',
+            category: 'Stylistic Issues',
+            recommended: false,
+            url: docsUrl('class-order'),
+        },
+        messages: {
+            invalidOrder: INVALID_CLASSNAMES_ORDER_MSG,
+        },
+        fixable: 'code',
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    callees: {
+                        type: 'array',
+                        items: { type: 'string', minLength: 0 },
+                        uniqueItems: true,
+                    },
+                    ignoredKeys: {
+                        type: 'array',
+                        items: { type: 'string', minLength: 0 },
+                        uniqueItems: true,
+                    },
+                    config: {
+                        // returned from `loadConfig()` utility
+                        type: ['string', 'object'],
+                    },
+                    removeDuplicates: {
+                        // default: true,
+                        type: 'boolean',
+                    },
+                    tags: {
+                        type: 'array',
+                        items: { type: 'string', minLength: 0 },
+                        uniqueItems: true,
+                    },
+                },
+            },
+        ],
+    },
+
+    create: function (context) {
+        const callees = getOption(context, 'callees')
+        const skipClassAttribute = getOption(context, 'skipClassAttribute')
+        const tags = getOption(context, 'tags')
+        const masterCssConfig = getOption(context, 'config')
+        const classRegex = getOption(context, 'classRegex')
+
+        const masterCss = new MasterCSS(masterCssConfig)
+
+        //----------------------------------------------------------------------
+        // Helpers
+        //----------------------------------------------------------------------
+        /**
+         * Recursive function crawling into child nodes
+         * @param {ASTNode} node The root node of the current parsing
+         * @param {ASTNode} arg The child node of node
+         * @returns {void}
+         */
+        const sortNodeArgumentValue = (node, arg = null) => {
+            let originalClassNamesValue = null
+            let start = null
+            let end = null
+            let prefix = ''
+            let suffix = ''
+            if (arg === null) {
+                originalClassNamesValue = astUtil.extractValueFromNode(node)
+                const range = astUtil.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) => {
+                            sortNodeArgumentValue(node, exp)
+                        })
+                        arg.quasis.forEach((quasis) => {
+                            sortNodeArgumentValue(node, quasis)
+                        })
+                        return
+                    case 'ConditionalExpression':
+                        sortNodeArgumentValue(node, arg.consequent)
+                        sortNodeArgumentValue(node, arg.alternate)
+                        return
+                    case 'LogicalExpression':
+                        sortNodeArgumentValue(node, arg.right)
+                        return
+                    case 'ArrayExpression':
+                        arg.elements.forEach((el) => {
+                            sortNodeArgumentValue(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
+                            sortNodeArgumentValue(node, propVal)
+                        })
+                        return
+                    case 'Property':
+                        sortNodeArgumentValue(node, arg.key)
+                        break
+                    case 'Literal':
+                        originalClassNamesValue = arg.value
+                        start = arg.range[0] + 1
+                        end = arg.range[1] - 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.getSourceCode().getText(arg)
+                        prefix = astUtil.getTemplateElementPrefix(txt, originalClassNamesValue)
+                        suffix = astUtil.getTemplateElementSuffix(txt, originalClassNamesValue)
+                        originalClassNamesValue = astUtil.getTemplateElementBody(txt, prefix, suffix)
+                        break
+                }
+            }
+
+            let { classNames, whitespaces, headSpace, tailSpace } =
+                astUtil.extractClassnamesFromValue(originalClassNamesValue)
+
+            if (classNames.length <= 1) {
+                // Don't run sorting for a single or empty className
+                return
+            }
+
+            for (const className of classNames) {
+                masterCss.insert(className)
+            }
+
+            let orderedClassNames = masterCss.rules
+                .filter(x => classNames.includes(x.className))
+                .map(x => x.className)
+
+            orderedClassNames = orderedClassNames.concat(classNames.filter(x => !orderedClassNames.includes(x)))
+
+            removeDuplicatesFromClassnamesAndWhitespaces(orderedClassNames, whitespaces, headSpace, tailSpace)
+
+            // 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 (headSpace && tailSpace && i === orderedClassNames.length - 1) {
+                    validatedClassNamesValue += whitespaces[whitespaces.length - 1] ?? ''
+                }
+            }
+
+            if (originalClassNamesValue !== validatedClassNamesValue) {
+                validatedClassNamesValue = prefix + validatedClassNamesValue + suffix
+                context.report({
+                    node: node,
+                    messageId: 'invalidOrder',
+                    fix: function (fixer) {
+                        return fixer.replaceTextRange([start, end], validatedClassNamesValue)
+                    },
+                })
+            }
+        }
+
+        //----------------------------------------------------------------------
+        // Public
+        //----------------------------------------------------------------------
+
+        const attributeVisitor = function (node) {
+            if (!astUtil.isClassAttribute(node, classRegex) || skipClassAttribute) {
+                return
+            }
+            if (astUtil.isLiteralAttributeValue(node)) {
+                sortNodeArgumentValue(node)
+            } else if (node.value && node.value.type === 'JSXExpressionContainer') {
+                sortNodeArgumentValue(node, node.value.expression)
+            }
+        }
+
+        const callExpressionVisitor = function (node) {
+            const calleeStr = astUtil.calleeToString(node.callee)
+            if (callees.findIndex((name) => calleeStr === name) === -1) {
+                return
+            }
+
+            node.arguments.forEach((arg) => {
+                sortNodeArgumentValue(node, arg)
+            })
+        }
+
+        const scriptVisitor = {
+            JSXAttribute: attributeVisitor,
+            TextAttribute: attributeVisitor,
+            CallExpression: callExpressionVisitor,
+            TaggedTemplateExpression: function (node) {
+                if (!tags.includes(node.tag.name)) {
+                    return
+                }
+
+                sortNodeArgumentValue(node, node.quasi)
+            },
+        }
+        const templateVisitor = {
+            CallExpression: callExpressionVisitor,
+            /*
+            Tagged templates inside data bindings
+            https://github.com/vuejs/vue/issues/9721
+            */
+            VAttribute: function (node) {
+                switch (true) {
+                    case !astUtil.isValidVueAttribute(node, classRegex):
+                        return
+                    case astUtil.isVLiteralValue(node):
+                        sortNodeArgumentValue(node, null)
+                        break
+                    case astUtil.isArrayExpression(node):
+                        node.value.expression.elements.forEach((arg) => {
+                            sortNodeArgumentValue(node, arg)
+                        })
+                        break
+                    case astUtil.isObjectExpression(node):
+                        node.value.expression.properties.forEach((prop) => {
+                            sortNodeArgumentValue(node, prop)
+                        })
+                        break
+                }
+            },
+        }
+
+        return parserUtil.defineTemplateBodyVisitor(context, templateVisitor, scriptVisitor)
+    },
+}

package/lib/util/ast.js

@@ -0,0 +1,371 @@
+/**
+ * @fileoverview Utility functions for AST
+ */
+
+'use strict'
+
+const { separatorRegEx } = require('./regex')
+// context.parserPath
+// /.../eslint-plugin-tailwindcss/node_modules/espree/espree.js
+// /.../eslint-plugin-tailwindcss/node_modules/@angular-eslint/template-parser/dist/index.js
+
+const removeDuplicatesFromArray = require('./removeDuplicatesFromArray')
+
+function calleeToString(calleeNode) {
+  if (calleeNode.type === 'Identifier') {
+    return calleeNode.name
+  }
+  if (calleeNode.type === 'MemberExpression') {
+    return `${calleeNode.object.name}.${calleeNode.property.name}`
+  }
+}
+
+/**
+ * Find out if node is `class` or `className`
+ *
+ * @param {ASTNode} node The AST node being checked
+ * @param {String} classRegex Regex to test the attribute that is being checked against
+ * @returns {Boolean}
+ */
+function isClassAttribute(node, classRegex) {
+  if (!node.name) {
+    return false
+  }
+  let name = ''
+  switch (node.type) {
+    case 'TextAttribute':
+      name = node.name
+      break
+    default:
+      name = node.name.name
+  }
+  return new RegExp(classRegex).test(name)
+}
+
+/**
+ * Find out if node is `class`
+ *
+ * @param {ASTNode} node The AST node being checked
+ * @param {String} classRegex Regex to test the attribute that is being checked against
+ * @returns {Boolean}
+ */
+function isVueClassAttribute(node, classRegex) {
+  const re = new RegExp(classRegex)
+  let name = ''
+  switch (true) {
+    case node.key && node.key.name && re.test(node.key.name):
+      // class="vue-classes-as-litteral"
+      return true
+    case node.key &&
+      node.key.name &&
+      node.key.name.name &&
+      node.key.argument &&
+      node.key.argument.name &&
+      /^bind$/.test(node.key.name.name) &&
+      re.test(node.key.argument.name):
+      // v-bind:class="vue-classes-as-bind"
+      // :class="vue-classes-as-bind"
+      return true
+    default:
+      return false
+  }
+}
+
+/**
+ * Find out if node's value attribute is just simple text
+ *
+ * @param {ASTNode} node The AST node being checked
+ * @returns {Boolean}
+ */
+function isVLiteralValue(node) {
+  return node.value && node.value.type === 'VLiteral'
+}
+
+/**
+ * Find out if node's value attribute is an ArrayExpression
+ *
+ * @param {ASTNode} node The AST node being checked
+ * @returns {Boolean}
+ */
+function isArrayExpression(node) {
+  return node.value && node.value.type === 'VExpressionContainer' && node.value.expression.type === 'ArrayExpression'
+}
+
+/**
+ * Find out if node's value attribute is an ObjectExpression
+ *
+ * @param {ASTNode} node The AST node being checked
+ * @returns {Boolean}
+ */
+function isObjectExpression(node) {
+  return node.value && node.value.type === 'VExpressionContainer' && node.value.expression.type === 'ObjectExpression'
+}
+
+/**
+ * Find out if node's value attribute is just simple text
+ *
+ * @param {ASTNode} node The AST node being checked
+ * @returns {Boolean}
+ */
+function isVueValidAttributeValue(node) {
+  switch (true) {
+    case isVLiteralValue(node): // Simple string
+    case isArrayExpression(node): // ['tw-unknown-class']
+    case isObjectExpression(node): // {'tw-unknown-class': true}
+      return true
+    default:
+      return false
+  }
+}
+
+/**
+ * Find out if node's value attribute is just simple text
+ *
+ * @param {ASTNode} node The AST node being checked
+ * @returns {Boolean}
+ */
+function isLiteralAttributeValue(node) {
+  if (node.type === 'TextAttribute' && node.name === 'class' && typeof node.value === 'string') {
+    return true
+  }
+  if (node.value) {
+    switch (node.value.type) {
+      case 'Literal':
+        // No support for dynamic or conditional...
+        return !/\{|\?|\}/.test(node.value.value)
+      case 'JSXExpressionContainer':
+        // className={"..."}
+        return node.value.expression.type === 'Literal'
+    }
+  }
+  return false
+}
+
+/**
+ * Find out if the node is a valid candidate for our rules
+ *
+ * @param {ASTNode} node The AST node being checked
+ * @param {String} classRegex Regex to test the attribute that is being checked against
+ * @returns {Boolean}
+ */
+function isValidJSXAttribute(node, classRegex) {
+  if (!isClassAttribute(node, classRegex)) {
+    // Only run for class[Name] attributes
+    return false
+  }
+  if (!isLiteralAttributeValue(node)) {
+    // No support for dynamic or conditional classnames
+    return false
+  }
+  return true
+}
+
+/**
+ * Find out if the node is a valid candidate for our rules
+ *
+ * @param {ASTNode} node The AST node being checked
+ * @param {String} classRegex Regex to test the attribute that is being checked against
+ * @returns {Boolean}
+ */
+function isValidVueAttribute(node, classRegex) {
+  if (!isVueClassAttribute(node, classRegex)) {
+    // Only run for class attributes
+    return false
+  }
+  if (!isVueValidAttributeValue(node)) {
+    // No support for dynamic or conditional classnames
+    return false
+  }
+  return true
+}
+
+function extractRangeFromNode(node) {
+  if (node.type === 'TextAttribute' && node.name === 'class') {
+    return [node.valueSpan.fullStart.offset, node.valueSpan.end.offset]
+  }
+  switch (node.value.type) {
+    case 'JSXExpressionContainer':
+      return node.value.expression.range
+    default:
+      return node.value.range
+  }
+}
+
+function extractValueFromNode(node) {
+  if (node.type === 'TextAttribute' && node.name === 'class') {
+    return node.value
+  }
+  switch (node.value.type) {
+    case 'JSXExpressionContainer':
+      return node.value.expression.value
+    case 'VExpressionContainer':
+      switch (node.value.expression.type) {
+        case 'ArrayExpression':
+          return node.value.expression.elements
+        case 'ObjectExpression':
+          return node.value.expression.properties
+      }
+      return node.value.expression.value
+    default:
+      return node.value.value
+  }
+}
+
+function extractClassnamesFromValue(classStr) {
+  if (typeof classStr !== 'string') {
+    return { classNames: [], whitespaces: [], headSpace: false, tailSpace: false }
+  }
+  let parts = classStr.split(separatorRegEx)
+  if (parts[0] === '') {
+    parts.shift()
+  }
+  if (parts[parts.length - 1] === '') {
+    parts.pop()
+  }
+  let headSpace = separatorRegEx.test(parts[0])
+  let tailSpace = separatorRegEx.test(parts[parts.length - 1])
+  const isClass = (_, i) => (headSpace ? i % 2 !== 0 : i % 2 === 0)
+  const isNotClass = (_, i) => (headSpace ? i % 2 === 0 : i % 2 !== 0)
+  let classNames = parts.filter(isClass)
+  let whitespaces = parts.filter(isNotClass)
+  return { classNames: classNames, whitespaces: whitespaces, headSpace: headSpace, tailSpace: tailSpace }
+}
+
+/**
+ * Inspect and parse an abstract syntax node and run a callback function
+ *
+ * @param {ASTNode} rootNode The current root node being parsed by eslint
+ * @param {ASTNode} childNode The AST node child argument being checked
+ * @param {Function} cb The callback function
+ * @param {Boolean} skipConditional Optional, indicate distinct parsing for conditional nodes
+ * @param {Boolean} isolate Optional, set internally to isolate parsing and validation on conditional children
+ * @param {Array} ignoredKeys Optional, set object keys which should not be parsed e.g. for `cva`
+ * @returns {void}
+ */
+function parseNodeRecursive(rootNode, childNode, cb, skipConditional = false, isolate = false, ignoredKeys = []) {
+  // TODO allow vue non litteral
+  let originalClassNamesValue
+  let classNames
+  if (childNode === null) {
+    originalClassNamesValue = extractValueFromNode(rootNode);
+    ({ classNames } = extractClassnamesFromValue(originalClassNamesValue))
+    classNames = removeDuplicatesFromArray(classNames)
+    if (classNames.length === 0) {
+      // Don't run for empty className
+      return
+    }
+    cb(classNames, rootNode)
+  } else if (childNode === undefined) {
+    // Ignore invalid child candidates (probably inside complex TemplateLiteral)
+    return
+  } else {
+    const forceIsolation = skipConditional ? true : isolate
+    let trim = false
+    switch (childNode.type) {
+      case 'TemplateLiteral':
+        childNode.expressions.forEach((exp) => {
+          parseNodeRecursive(rootNode, exp, cb, skipConditional, forceIsolation, ignoredKeys)
+        })
+        childNode.quasis.forEach((quasis) => {
+          parseNodeRecursive(rootNode, quasis, cb, skipConditional, isolate, ignoredKeys)
+        })
+        return
+      case 'ConditionalExpression':
+        parseNodeRecursive(rootNode, childNode.consequent, cb, skipConditional, forceIsolation, ignoredKeys)
+        parseNodeRecursive(rootNode, childNode.alternate, cb, skipConditional, forceIsolation, ignoredKeys)
+        return
+      case 'LogicalExpression':
+        parseNodeRecursive(rootNode, childNode.right, cb, skipConditional, forceIsolation, ignoredKeys)
+        return
+      case 'ArrayExpression':
+        childNode.elements.forEach((el) => {
+          parseNodeRecursive(rootNode, el, cb, skipConditional, forceIsolation, ignoredKeys)
+        })
+        return
+      case 'ObjectExpression':
+        childNode.properties.forEach((prop) => {
+          const isUsedByClassNamesPlugin = rootNode.callee && rootNode.callee.name === 'classnames'
+
+          if (prop.type === 'SpreadElement') {
+            // Ignore spread elements
+            return
+          }
+
+          if (prop.key.type === 'Identifier' && ignoredKeys.includes(prop.key.name)) {
+            // Ignore specific keys defined in settings
+            return
+          }
+
+          parseNodeRecursive(
+            rootNode,
+            isUsedByClassNamesPlugin ? prop.key : prop.value,
+            cb,
+            skipConditional,
+            forceIsolation,
+            ignoredKeys
+          )
+        })
+        return
+      case 'Property':
+        parseNodeRecursive(rootNode, childNode.key, cb, skipConditional, forceIsolation, ignoredKeys)
+        return
+      case 'Literal':
+        trim = true
+        originalClassNamesValue = childNode.value
+        break
+      case 'TemplateElement':
+        originalClassNamesValue = childNode.value.raw
+        break
+    }
+    ({ classNames } = extractClassnamesFromValue(originalClassNamesValue))
+    classNames = removeDuplicatesFromArray(classNames)
+    if (classNames.length === 0) {
+      // Don't run for empty className
+      return
+    }
+    const targetNode = isolate ? null : rootNode
+    cb(classNames, targetNode)
+  }
+}
+
+function getTemplateElementPrefix(text, raw) {
+  const idx = text.indexOf(raw)
+  if (idx === 0) {
+    return ''
+  }
+  return text.split(raw).shift()
+}
+
+function getTemplateElementSuffix(text, raw) {
+  if (text.indexOf(raw) === -1) {
+    return ''
+  }
+  return text.split(raw).pop()
+}
+
+function getTemplateElementBody(text, prefix, suffix) {
+  let arr = text.split(prefix)
+  arr.shift()
+  let body = arr.join(prefix)
+  arr = body.split(suffix)
+  arr.pop()
+  return arr.join(suffix)
+}
+
+module.exports = {
+  calleeToString,
+  extractRangeFromNode,
+  extractValueFromNode,
+  extractClassnamesFromValue,
+  isClassAttribute,
+  isLiteralAttributeValue,
+  isArrayExpression,
+  isObjectExpression,
+  isValidJSXAttribute,
+  isValidVueAttribute,
+  isVLiteralValue,
+  parseNodeRecursive,
+  getTemplateElementPrefix,
+  getTemplateElementSuffix,
+  getTemplateElementBody,
+}

package/lib/util/docsUrl.js

@@ -0,0 +1,8 @@
+'use strict'
+
+// Copied from https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/util/docsUrl.js
+function docsUrl(ruleName) {
+    return `https://github.com/master-co/css/tree/beta/packages/eslint-plugin/docs/rules/${ruleName}.md`
+}
+
+module.exports = docsUrl

package/lib/util/parser.js

@@ -0,0 +1,21 @@
+/**
+ * @see parserServices https://eslint.org/docs/developer-guide/working-with-rules#the-context-object
+ * @param {Object} context
+ * @param {Function} templateBodyVisitor
+ * @param {Function} scriptVisitor
+ * @returns
+ */
+function defineTemplateBodyVisitor(context, templateBodyVisitor, scriptVisitor) {
+  if (context.parserServices == null || context.parserServices.defineTemplateBodyVisitor == null) {
+    // Default parser
+    return scriptVisitor
+  }
+
+  // Using "vue-eslint-parser" requires this setup
+  // @see https://eslint.org/docs/developer-guide/working-with-rules#the-context-object
+  return context.parserServices.defineTemplateBodyVisitor(templateBodyVisitor, scriptVisitor)
+}
+
+module.exports = {
+  defineTemplateBodyVisitor,
+}

package/lib/util/regex.js

@@ -0,0 +1,16 @@
+/**
+ * Escapes a string to be used in a regular expression
+ * Copied from https://stackoverflow.com/a/3561711.
+ * @param {string} input
+ * @returns {string}
+ */
+function escapeRegex(input) {
+  return input.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&')
+}
+
+const separatorRegEx = /([\t\n\f\r ]+)/
+
+module.exports = {
+  escapeRegex,
+  separatorRegEx,
+}

package/lib/util/removeDuplicatesFromArray.js

@@ -0,0 +1,7 @@
+'use strict'
+
+function removeDuplicatesFromArray(arr) {
+  return [...new Set(arr)]
+}
+
+module.exports = removeDuplicatesFromArray

package/lib/util/removeDuplicatesFromClassnamesAndWhitespaces.js

@@ -0,0 +1,18 @@
+'use strict'
+
+function removeDuplicatesFromClassnamesAndWhitespaces(orderedClassNames, whitespaces, headSpace, tailSpace) {
+  let previous = orderedClassNames[0]
+  const offset = (!headSpace && !tailSpace) || tailSpace ? -1 : 0
+  for (let i = 1; i < orderedClassNames.length; i++) {
+    const cls = orderedClassNames[i]
+    // This function assumes that the list of classNames is ordered, so just comparing to the previous className is enough
+    if (cls === previous) {
+      orderedClassNames.splice(i, 1)
+      whitespaces.splice(i + offset, 1)
+      i--
+    }
+    previous = cls
+  }
+}
+
+module.exports = removeDuplicatesFromClassnamesAndWhitespaces

package/lib/util/settings.js

@@ -0,0 +1,39 @@
+'use strict'
+const exploreConfig = require('explore-config').default
+
+function getOption(context, name) {
+    // Options (defined at rule level)
+    const options = context.options[0] || {}
+    if (options[name] != undefined) {
+        return options[name]
+    }
+    // Settings (defined at plugin level, shared accross rules)
+    if (context.settings && context.settings.mastercss && context.settings.mastercss[name] != undefined) {
+        return context.settings.mastercss[name]
+    }
+    // Fallback to defaults
+    switch (name) {
+        case 'callees':
+            return ['classnames', 'clsx', 'ctl', 'cva']
+        case 'ignoredKeys':
+            return ['compoundVariants', 'defaultVariants']
+        case 'classRegex':
+            return '^class(Name)?$'
+        case 'config':
+            return exploreConfig('master.css.*', {})
+        case 'cssFiles':
+            return ['**/*.css', '!**/node_modules', '!**/.*', '!**/dist', '!**/build']
+        case 'cssFilesRefreshRate':
+            return 5_000
+        case 'removeDuplicates':
+            return true
+        case 'skipClassAttribute':
+            return false
+        case 'tags':
+            return []
+        case 'whitelist':
+            return []
+    }
+}
+
+module.exports = getOption

package/package.json

@@ -0,0 +1 @@
+{"name":"@master/eslint-plugin-css","scripts":{"test":"mocha tests --recursive --timeout 10000"},"keywords":["mastercss","eslint","eslintplugin"],"license":"MIT","description":"Master CSS ESLint Plugin","author":"Aoyue Design LLC.","funding":"https://css.master.co/docs/donate","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/eslint-plugin"},"sideEffects":false,"main":"./lib/index.js","exports":"./lib/index.js","publishConfig":{"access":"public"},"dependencies":{"@master/css":"^2.0.0-beta.175","requireindex":"^1.2.0","explore-config":"^2.2.10"},"devDependencies":{"@angular-eslint/template-parser":"^16.2.0","@typescript-eslint/parser":"^5.50.0","@types/node":"^20.6.0","mocha":"^10.2.0","eslint":"^7.1.0","vue-eslint-parser":"^9.3.1"},"version":"2.0.0-beta.175"}

package/tests/class-order.js

@@ -0,0 +1,134 @@
+/**
+ * @fileoverview Use a consistent orders for the Master CSS classnames, based on property then on variants
+ * @author Miles
+ */
+'use strict'
+
+// Modified from https://github.com/francoismassart/eslint-plugin-tailwindcss
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+var rule = require('../lib/rules/class-order')
+var RuleTester = require('eslint').RuleTester
+var parserOptions = {
+    ecmaVersion: 2019,
+    sourceType: 'module',
+    ecmaFeatures: {
+        jsx: true,
+    },
+}
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+describe('class-order', function () {
+    it('basic', function () {
+        var ruleTester = new RuleTester({ parserOptions })
+        const generateErrors = (count) => {
+            const errors = []
+
+            for (let i = 0; i < count; i++) {
+                errors.push({
+                    messageId: 'invalidOrder',
+                })
+            }
+
+            return errors
+        }
+
+        const errors = generateErrors(1)
+
+        ruleTester.run('class-order', rule, {
+            valid: [
+                {
+                    code: `<div class="m:8 p:8 bg:black fg:white f:24">Simple, basic</div>`,
+                },
+                {
+                    code: `<div test="m:8 p:8 bg:black fg:white f:24">Simple, using 'test' prop</div>`,
+                    options: [
+                        {
+                            classRegex: '^test$',
+                        },
+                    ],
+                },
+            ],
+            invalid: [
+                {
+                    code: `
+                        export interface FakePropsInterface {
+                            readonly name?: string;
+                        }
+                        function Fake({
+                            name = 'yolo'
+                        }: FakeProps) {
+                            return (
+                            <>
+                                <h1 className={"m:8 bg:black p:8 fg:white f:24"}>Welcome {name}</h1>
+                                <p>Bye {name}</p>
+                            </>
+                            );
+                        }
+                        export default Fake;
+                    `,
+                    output: `
+                        export interface FakePropsInterface {
+                            readonly name?: string;
+                        }
+                        function Fake({
+                            name = 'yolo'
+                        }: FakeProps) {
+                            return (
+                            <>
+                                <h1 className={"m:8 p:8 bg:black fg:white f:24"}>Welcome {name}</h1>
+                                <p>Bye {name}</p>
+                            </>
+                            );
+                        }
+                        export default Fake;
+                    `,
+                    parser: require.resolve('@typescript-eslint/parser'),
+                    errors: errors,
+                },
+                {
+                    code: `<div class="fg:white f:24 m:8 p:8 bg:black">Classnames will be ordered</div>`,
+                    output: `<div class="m:8 p:8 bg:black fg:white f:24">Classnames will be ordered</div>`,
+                    errors: errors,
+                },
+                {
+                    code: `<template><div class="m:8 bg:black p:8 fg:white f:24">Enhancing readability</div></template>`,
+                    output: `<template><div class="m:8 p:8 bg:black fg:white f:24">Enhancing readability</div></template>`,
+                    errors: errors,
+                    filename: 'test.vue',
+                    parser: require.resolve('vue-eslint-parser'),
+                },
+                {
+                    code: `
+                        <div class="
+                            m:8
+                            bg:black
+                            p:8
+                            fg:white
+                            f:24
+                        ">
+                            :)
+                        </div>`,
+                    output: `
+                        <div class="
+                            m:8
+                            p:8
+                            bg:black
+                            fg:white
+                            f:24
+                        ">
+                            :)
+                        </div>`,
+                    errors: errors,
+                    parser: require.resolve('@angular-eslint/template-parser'),
+                }
+            ],
+        })
+    })
+})