@master/eslint-plugin-css 2.0.0-beta.180 → 2.0.0-beta.182

package/lib/rules/class-order.js

@@ -12,7 +12,7 @@ const removeDuplicatesFromClassnamesAndWhitespaces = require('../util/removeDupl
 const getOption = require('../util/settings')
 const parserUtil = require('../util/parser')
 
-const MasterCSS = require('@master/css').MasterCSS
+const { reorderForReadableClasses } = require('@master/css')
 
 //------------------------------------------------------------------------------
 // Rule Definition
@@ -73,8 +73,6 @@ module.exports = {
         const masterCssConfig = getOption(context, 'config')
         const classRegex = getOption(context, 'classRegex')
 
-        const masterCss = new MasterCSS(masterCssConfig)
-
         //----------------------------------------------------------------------
         // Helpers
         //----------------------------------------------------------------------
@@ -167,13 +165,8 @@ module.exports = {
                 return
             }
 
-            for (const className of classNames) {
-                masterCss.insert(className)
-            }
-
-            let orderedClassNames = masterCss.rules
-                .filter(x => classNames.includes(x.className))
-                .map(x => x.className)
+            let orderedClassNames = reorderForReadableClasses(classNames, masterCssConfig)
+                .filter(eachOrderedClassName => classNames.includes(eachOrderedClassName))
 
             orderedClassNames = orderedClassNames.concat(classNames.filter(x => !orderedClassNames.includes(x)))
 

package/package.json

@@ -1 +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.180","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.180"}
+{"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.182","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.182"}

package/tests/class-order.js

@@ -44,10 +44,10 @@ describe('class-order', function () {
         ruleTester.run('class-order', rule, {
             valid: [
                 {
-                    code: `<div class="m:8 p:8 bg:black fg:white f:24">Simple, basic</div>`,
+                    code: `<div class="bg:black fg:white f:24 m:8 p:8">Simple, basic</div>`,
                 },
                 {
-                    code: `<div test="m:8 p:8 bg:black fg:white f:24">Simple, using 'test' prop</div>`,
+                    code: `<div test="bg:black fg:white f:24 m:8 p:8">Simple, using 'test' prop</div>`,
                     options: [
                         {
                             classRegex: '^test$',
@@ -82,7 +82,7 @@ describe('class-order', function () {
                         }: FakeProps) {
                             return (
                             <>
-                                <h1 className={"m:8 p:8 bg:black fg:white f:24"}>Welcome {name}</h1>
+                                <h1 className={"bg:black fg:white f:24 m:8 p:8"}>Welcome {name}</h1>
                                 <p>Bye {name}</p>
                             </>
                             );
@@ -94,12 +94,12 @@ describe('class-order', function () {
                 },
                 {
                     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>`,
+                    output: `<div class="bg:black fg:white f:24 m:8 p:8">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>`,
+                    output: `<template><div class="bg:black fg:white f:24 m:8 p:8">Enhancing readability</div></template>`,
                     errors: errors,
                     filename: 'test.vue',
                     parser: require.resolve('vue-eslint-parser'),
@@ -117,11 +117,11 @@ describe('class-order', function () {
                         </div>`,
                     output: `
                         <div class="
-                            m:8
-                            p:8
                             bg:black
                             fg:white
                             f:24
+                            m:8
+                            p:8
                         ">
                             :)
                         </div>`,