@master/eslint-plugin-css 2.0.0-beta.184 → 2.0.0-beta.186

package/tests/{class-order → frameworks}/svelte.js

@@ -1,23 +1,22 @@
 'use strict'
 
-var rule = require('../../lib/rules/class-order')
-var RuleTester = require('eslint').RuleTester
-var parserOptions = {
-    ecmaVersion: 2019,
-    sourceType: 'module',
-    ecmaFeatures: {
-        jsx: true,
-    },
-}
+const rule = require('../../lib/rules/class-order')
+const RuleTester = require('eslint').RuleTester
+const ruleTester = new RuleTester({
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true,
+        },
+    }
+})
 
-var ruleTester = new RuleTester({ parserOptions })
 ruleTester.run('svelte class order', rule, {
     valid: [{ code: `<div class="bg:black fg:white f:24 m:8 p:8">Simple, basic</div>` }],
     invalid: [
         {
             code: `<div class="m:8 bg:black p:8 fg:white f:24 {flipped ? 'flipped' : ''}">Enhancing readability</div>`,
             output: `<div class="bg:black fg:white f:24 m:8 p:8 {flipped ? 'flipped' : ''}">Enhancing readability</div>`,
-            errors: [{ messageId: 'invalidOrder' }],
+            errors: [{ messageId: 'invalidClassOrder' }],
             filename: 'test.svelte',
             parser: require.resolve('svelte-eslint-parser'),
         },

package/tests/{class-order → frameworks}/vue.js

@@ -1,23 +1,22 @@
 'use strict'
 
-var rule = require('../../lib/rules/class-order')
-var RuleTester = require('eslint').RuleTester
-var parserOptions = {
-    ecmaVersion: 2019,
-    sourceType: 'module',
-    ecmaFeatures: {
-        jsx: true,
-    },
-}
+const rule = require('../../lib/rules/class-order')
+const RuleTester = require('eslint').RuleTester
+const ruleTester = new RuleTester({
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true,
+        }
+    }
+})
 
-var ruleTester = new RuleTester({ parserOptions })
 ruleTester.run('vue class order', rule, {
     valid: [{ code: `<div class="bg:black fg:white f:24 m:8 p:8">Simple, basic</div>` }],
     invalid: [
         {
             code: `<template><div class="m:8 bg:black p:8 fg:white f:24">Enhancing readability</div></template>`,
             output: `<template><div class="bg:black fg:white f:24 m:8 p:8">Enhancing readability</div></template>`,
-            errors: [{ messageId: 'invalidOrder' }],
+            errors: [{ messageId: 'invalidClassOrder' }],
             filename: 'test.vue',
             parser: require.resolve('vue-eslint-parser'),
         },

package/tests/order.js

@@ -0,0 +1,66 @@
+'use strict'
+
+const rule = require('../lib/rules/class-order')
+const RuleTester = require('eslint').RuleTester
+const ruleTester = new RuleTester({
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true,
+        },
+    }
+})
+
+ruleTester.run('class order', rule, {
+    valid: [
+        {
+            code: `<div class="bg:black fg:white f:24 m:8 p:8">Simple, basic</div>`,
+        },
+        {
+            code: `<div class="card mt:20">Traditional class + syntax</div>`,
+        },
+        {
+            code: `<div test="bg:black fg:white f:24 m:8 p:8">Simple, using 'test' prop</div>`,
+            options: [
+                {
+                    classMatching: '^test$',
+                },
+            ],
+        },
+    ],
+    invalid: [
+        {
+            code: `<div class="fg:white f:24 m:8 p:8 bg:black">Classnames will be ordered</div>`,
+            output: `<div class="bg:black fg:white f:24 m:8 p:8">Classnames will be ordered</div>`,
+            errors: [{ messageId: 'invalidClassOrder' }],
+        },
+        {
+            code: `
+                    <div class="
+                        m:8
+                        bg:black
+                        p:8
+                        fg:white
+                        f:24
+                    ">
+                        :)
+                    </div>`,
+            output: `
+                    <div class="
+                        bg:black
+                        fg:white
+                        f:24
+                        m:8
+                        p:8
+                    ">
+                        :)
+                    </div>`,
+            errors: [{ messageId: 'invalidClassOrder' }],
+            parser: require.resolve('@angular-eslint/template-parser'),
+        },
+        {
+            code: `<div class="flex uppercase m:0 m:0>li text-decoration:none>li>a px:4>li align-items:baseline fg:gray-30>li>a gap-x:28 font:12 font:semibold pb:6>li pt:20 pt:10>li {bb:3|solid|black}>li:has(>.router-link-active) {fg:black}>li:has(>.router-link-active)>a fg:gray-10>li>a:hover box-shadow:none>li>a:focus">Group</div>`,
+            output: `<div class="flex uppercase align-items:baseline box-shadow:none>li>a:focus fg:gray-30>li>a fg:gray-10>li>a:hover gap-x:28 font:12 font:semibold {bb:3|solid|black}>li:has(>.router-link-active) {fg:black}>li:has(>.router-link-active)>a m:0 m:0>li pb:6>li pt:20 pt:10>li px:4>li text-decoration:none>li>a">Group</div>`,
+            errors: [{ messageId: 'invalidClassOrder' }],
+        }
+    ],
+})

package/tests/validation.js

@@ -0,0 +1,69 @@
+'use strict'
+
+const rule = require('../lib/rules/class-validation')
+const RuleTester = require('eslint').RuleTester
+
+new RuleTester({
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true,
+        },
+    }
+}).run('invalid', rule, {
+    valid: [
+        {
+            code: `<div class="bg:black fg:white f:24 m:8 p:8">Simple, basic</div>`,
+        }
+    ],
+    invalid: [
+        {
+            code: `<div class="bg:black m:mistake rrr">Simple, basic</div>`,
+            errors: [
+                { messageId: 'invalidClass' },
+                { messageId: 'disallowTraditionalClass' }
+            ],
+            options: [
+                {
+                    disallowTraditionalClass: true
+                }
+            ]
+        },
+        {
+            code: `<div class="bg:black m:mistake rrr">Simple, basic</div>`,
+            errors: [
+                { messageId: 'invalidClass' },
+            ]
+        }
+    ]
+})
+
+new RuleTester({
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true,
+        },
+    },
+    settings: {
+        '@master/css': {
+            config: {
+                styles: { btn: 'block' }
+            }
+        }
+    }
+}).run('invalid', rule, {
+    valid: [],
+    invalid: [
+        {
+            code: `<div class="bg:black m:mistake rrr btn">Simple, basic</div>`,
+            errors: [
+                { messageId: 'invalidClass' },
+                { messageId: 'disallowTraditionalClass' }
+            ],
+            options: [
+                {
+                    disallowTraditionalClass: true
+                }
+            ]
+        },
+    ],
+})

package/lib/util/ast.js

@@ -1,370 +0,0 @@
-/**
- * @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':
-        return true
-      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/parser.js

@@ -1,21 +0,0 @@
-/**
- * @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

@@ -1,16 +0,0 @@
-/**
- * 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

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

package/lib/util/removeDuplicatesFromClassnamesAndWhitespaces.js

@@ -1,18 +0,0 @@
-'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

@@ -1,39 +0,0 @@
-'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