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

package/lib/index.js

@@ -1,19 +1,5 @@
-/**
- * @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

@@ -1,27 +1,9 @@
-/* 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 astUtil = require('../util/ast')
-const removeDuplicatesFromClassnamesAndWhitespaces = require('../util/removeDuplicatesFromClassnamesAndWhitespaces')
-const getOption = require('../util/settings')
-const parserUtil = require('../util/parser')
-
+const astUtil = require('../utils/ast')
+const resolveContext = require('../utils/resolve-context')
 const { reorderForReadableClasses } = require('@master/css')
 
-//------------------------------------------------------------------------------
-// Rule Definition
-//------------------------------------------------------------------------------
-
-// Predefine message for use in context.report conditional.
-// messageId will still be usable in tests.
-const INVALID_CLASSNAMES_ORDER_MSG = 'No consistent class order followed.'
-
 module.exports = {
     meta: {
         docs: {
@@ -31,57 +13,12 @@ module.exports = {
             url: 'https://beta.css.master.co/docs/code-linting#enforce-a-consistent-and-logical-order-of-classes',
         },
         messages: {
-            invalidOrder: INVALID_CLASSNAMES_ORDER_MSG,
+            invalidClassOrder: 'No consistent class order followed.',
         },
-        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,
-                    },
-                },
-            },
-        ],
+        fixable: 'code'
     },
-
     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')
-
-        //----------------------------------------------------------------------
-        // 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 { options, settings, config } = resolveContext(context)
         const sortNodeArgumentValue = (node, arg = null) => {
             let originalClassNamesValue = null
             let start = null
@@ -145,7 +82,7 @@ module.exports = {
                         }
                         start = arg.range[0]
                         end = arg.range[1]
-                        break;
+                        break
                     case 'TemplateElement':
                         originalClassNamesValue = arg.value.raw
                         if (originalClassNamesValue === '') {
@@ -173,12 +110,12 @@ module.exports = {
                 return
             }
 
-            let orderedClassNames = reorderForReadableClasses(classNames, masterCssConfig)
+            let orderedClassNames = reorderForReadableClasses(classNames, config)
                 .filter(eachOrderedClassName => classNames.includes(eachOrderedClassName))
 
-            orderedClassNames = orderedClassNames.concat(classNames.filter(x => !orderedClassNames.includes(x)))
-
-            removeDuplicatesFromClassnamesAndWhitespaces(orderedClassNames, whitespaces, headSpace, tailSpace)
+            orderedClassNames = classNames.filter(x => !orderedClassNames.includes(x))
+                .concat(orderedClassNames)
+                .filter(x => x.trim() !== '')
 
             // Generates the validated/sorted attribute value
             let validatedClassNamesValue = ''
@@ -195,7 +132,7 @@ module.exports = {
                 validatedClassNamesValue = prefix + validatedClassNamesValue + suffix
                 context.report({
                     node: node,
-                    messageId: 'invalidOrder',
+                    messageId: 'invalidClassOrder',
                     fix: function (fixer) {
                         return fixer.replaceTextRange([start, end], validatedClassNamesValue)
                     },
@@ -203,24 +140,9 @@ module.exports = {
             }
         }
 
-        //----------------------------------------------------------------------
-        // 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) {
+            if (settings.callees.findIndex((name) => calleeStr === name) === -1) {
                 return
             }
 
@@ -230,53 +152,51 @@ module.exports = {
         }
 
         const scriptVisitor = {
-            JSXAttribute: attributeVisitor,
-            SvelteAttribute: function (node) {
-                if (!node.key?.name) return
-                if (!new RegExp(classRegex).test(node.key.name) || skipClassAttribute) {
-                    return
+            CallExpression: callExpressionVisitor,
+            JSXAttribute: function (node) {
+                if (!node.name || !new RegExp(settings.classMatching).test(node.name.name)) return
+                if (node.value && node.value.type === 'Literal') {
+                    sortNodeArgumentValue(node)
+                } else if (node.value && node.value.type === 'JSXExpressionContainer') {
+                    sortNodeArgumentValue(node, node.value.expression)
                 }
+            },
+            SvelteAttribute: function (node) {
+                if (!node.key?.name || !new RegExp(settings.classMatching).test(node.key.name)) return
                 for (const eachValue of node.value) {
                     sortNodeArgumentValue(node, eachValue)
                 }
             },
-            TextAttribute: attributeVisitor,
-            CallExpression: callExpressionVisitor,
+            TextAttribute: function (node) {
+                if (!node.name || !new RegExp(settings.classMatching).test(node.name)) return
+                sortNodeArgumentValue(node)
+            },
             TaggedTemplateExpression: function (node) {
-                if (!tags.includes(node.tag.name)) {
+                if (!settings.tags.includes(node.tag.name)) {
                     return
                 }
-
                 sortNodeArgumentValue(node, node.quasi)
             },
         }
-        const templateVisitor = {
+        const templateBodyVisitor = {
             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
+                if (node.value && node.value.type === 'VLiteral') {
+                    sortNodeArgumentValue(node)
+                } else if (node.value && node.value.type === 'VExpressionContainer' && node.value.expression.type === 'ArrayExpression') {
+                    node.value.expression.elements.forEach((arg) => {
+                        sortNodeArgumentValue(node, arg)
+                    })
+                } else if (node.value && node.value.type === 'VExpressionContainer' && node.value.expression.type === 'ObjectExpression') {
+                    sortNodeArgumentValue(node, prop)
                 }
             },
         }
 
-        return parserUtil.defineTemplateBodyVisitor(context, templateVisitor, scriptVisitor)
+        if (context.parserServices == null || context.parserServices.defineTemplateBodyVisitor == null) {
+            return scriptVisitor
+        } else {
+            return context.parserServices.defineTemplateBodyVisitor(templateBodyVisitor, scriptVisitor)
+        }
     },
 }

package/lib/rules/class-validation.js

@@ -0,0 +1,123 @@
+'use strict'
+
+const astUtil = require('../utils/ast')
+const resolveContext = require('../utils/resolve-context')
+const { validate } = require('@master/css-validator')
+
+module.exports = {
+    meta: {
+        docs: {
+            description: 'Check the validity of classes with your configuration',
+            category: 'Stylistic Issues',
+            recommended: false,
+            url: 'https://beta.css.master.co/docs/code-linting#check-the-validity-of-classes-with-your-configuration',
+        },
+        messages: {
+            invalidClass: '{{message}}',
+            disallowTraditionalClass: '{{message}}',
+        },
+        fixable: null
+    },
+    create: function (context) {
+        const { options, settings, config } = resolveContext(context)
+        const checkNodeArgumentValue = (node, arg = null) => {
+            astUtil.parseNodeRecursive(
+                node,
+                arg,
+                (classNames, node) => {
+                    const sourceCode = context.getSourceCode()
+                    const sourceCodeLines = sourceCode.lines
+                    const nodeStartLine = node.loc.start.line
+                    const nodeEndLine = node.loc.end.line
+                    for (const className of classNames) {
+                        const { isMasterCSS, errors } = validate(className, { config })
+                        if (errors.length > 0) {
+                            for (const error of errors) {
+                                if (isMasterCSS) {
+                                    context.report({
+                                        loc: astUtil.findLoc(className, sourceCodeLines, nodeStartLine, nodeEndLine),
+                                        messageId: 'invalidClass',
+                                        data: {
+                                            message: error.message + '.',
+                                        }
+                                    })
+                                } else if (!isMasterCSS && options.disallowTraditionalClass) {
+                                    context.report({
+                                        loc: astUtil.findLoc(className, sourceCodeLines, nodeStartLine, nodeEndLine),
+                                        messageId: 'disallowTraditionalClass',
+                                        data: {
+                                            message: `Disallow a traditional class \`${className}\`.`,
+                                        }
+                                    })
+                                }
+                            }
+                        }
+                    }
+                },
+                false,
+                false,
+                settings.ignoredKeys
+            )
+        }
+
+        const callExpressionVisitor = function (node) {
+            const calleeStr = astUtil.calleeToString(node.callee)
+            if (settings.callees.findIndex((name) => calleeStr === name) === -1) {
+                return
+            }
+
+            node.arguments.forEach((arg) => {
+                checkNodeArgumentValue(node, arg)
+            })
+        }
+
+        const scriptVisitor = {
+            CallExpression: callExpressionVisitor,
+            JSXAttribute: function (node) {
+                if (!node.name || !new RegExp(settings.classMatching).test(node.name.name)) return
+                if (node.value && node.value.type === 'Literal') {
+                    checkNodeArgumentValue(node)
+                } else if (node.value && node.value.type === 'JSXExpressionContainer') {
+                    checkNodeArgumentValue(node, node.value.expression)
+                }
+            },
+            SvelteAttribute: function (node) {
+                if (!node.key?.name || !new RegExp(settings.classMatching).test(node.key.name)) return
+                for (const eachValue of node.value) {
+                    checkNodeArgumentValue(node, eachValue)
+                }
+            },
+            TextAttribute: function (node) {
+                if (!node.name || !new RegExp(settings.classMatching).test(node.name)) return
+                checkNodeArgumentValue(node)
+            },
+            TaggedTemplateExpression: function (node) {
+                if (!settings.tags.includes(node.tag.name)) {
+                    return
+                }
+                checkNodeArgumentValue(node, node.quasi)
+            },
+        }
+
+        const templateBodyVisitor = {
+            CallExpression: callExpressionVisitor,
+            VAttribute: function (node) {
+                if (node.value && node.value.type === 'VLiteral') {
+                    checkNodeArgumentValue(node)
+                } else if (node.value && node.value.type === 'VExpressionContainer' && node.value.expression.type === 'ArrayExpression') {
+                    node.value.expression.elements.forEach((arg) => {
+                        checkNodeArgumentValue(node, arg)
+                    })
+                } else if (node.value && node.value.type === 'VExpressionContainer' && node.value.expression.type === 'ObjectExpression') {
+                    checkNodeArgumentValue(node, prop)
+                }
+            },
+        }
+
+        if (context.parserServices == null || context.parserServices.defineTemplateBodyVisitor == null) {
+            return scriptVisitor
+        } else {
+            return context.parserServices.defineTemplateBodyVisitor(templateBodyVisitor, scriptVisitor)
+        }
+    },
+}

package/lib/utils/ast.js

@@ -0,0 +1,218 @@
+'use strict'
+
+const separatorRegEx = /([\t\n\f\r ]+)/
+
+function calleeToString(calleeNode) {
+    if (calleeNode.type === 'Identifier') {
+        return calleeNode.name
+    }
+    if (calleeNode.type === 'MemberExpression') {
+        return `${calleeNode.object.name}.${calleeNode.property.name}`
+    }
+}
+
+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 = [... new Set(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)
+}
+
+function findLoc(text, lines, startLine, endLine) {
+    for (let i = startLine; i <= endLine; i++) {
+        const sourceCodeLine = lines[i - 1]
+        const index = sourceCodeLine.indexOf(text)
+        if (index !== -1) {
+            return {
+                start: {
+                    line: i,
+                    column: index
+                },
+                end: {
+                    line: i,
+                    column: index + text.length
+                }
+            }
+        }
+    }
+    return null
+}
+
+module.exports = {
+    calleeToString,
+    extractRangeFromNode,
+    extractValueFromNode,
+    extractClassnamesFromValue,
+    getTemplateElementPrefix,
+    getTemplateElementSuffix,
+    getTemplateElementBody,
+    parseNodeRecursive,
+    findLoc
+}

package/lib/utils/resolve-context.js

@@ -0,0 +1,21 @@
+'use strict'
+
+const exploreConfig = require('explore-config').default
+
+const resolveContext = function (context) {
+    const settings = Object.assign({
+        callees: ['classnames', 'clsx', 'ctl', 'cva', 'cv', 'classVariant', 'styled'],
+        ignoredKeys: ['compoundVariants', 'defaultVariants'],
+        classMatching: '^class(Name)?$',
+        config: 'master.css.*',
+        tags: []
+    }, context.settings?.['@master/css'])
+    const config = settings?.config
+    return {
+        settings,
+        options: context.options[0] || {},
+        config: typeof config === 'object' ? config : exploreConfig(settings?.config || '')
+    }
+}
+
+module.exports = resolveContext

package/package.json

@@ -1 +1 @@
-{"name":"@master/eslint-plugin-css","scripts":{"test":"mocha tests --recursive --timeout 10000","test:file":"mocha tests"},"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.184","explore-config":"^2.2.10","requireindex":"^1.2.0"},"devDependencies":{"@angular-eslint/template-parser":"^16.2.0","@types/node":"^20.6.0","@typescript-eslint/parser":"^5.50.0","eslint":"^7.1.0","mocha":"^10.2.0","svelte-eslint-parser":"^0.33.1","vue-eslint-parser":"^9.3.1"},"version":"2.0.0-beta.184"}
+{"name":"@master/eslint-plugin-css","scripts":{"test":"mocha tests --recursive --timeout 10000","test:file":"mocha tests"},"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.186","@master/css-validator":"^2.0.0-beta.186","explore-config":"^2.2.10","requireindex":"^1.2.0"},"devDependencies":{"@angular-eslint/template-parser":"^16.2.0","@types/node":"^20.6.0","@typescript-eslint/parser":"^5.50.0","eslint":"^7.1.0","mocha":"^10.2.0","svelte-eslint-parser":"^0.33.1","vue-eslint-parser":"^9.3.1"},"version":"2.0.0-beta.186"}

package/tests/frameworks/react.js

@@ -0,0 +1,55 @@
+'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: '<h1 className={"bg:black fg:white f:24 m:8 p:8"}>Welcome {name}</h1>' }
+    ],
+    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={"bg:black fg:white f:24 m:8 p:8"}>Welcome {name}</h1>
+                            <p>Bye {name}</p>
+                        </>
+                        );
+                    }
+                    export default Fake;
+                `,
+            parser: require.resolve('@typescript-eslint/parser'),
+            errors: [{ messageId: 'invalidClassOrder' }],
+        },
+    ]
+})