feat: add tailwind utility class ordering option

Author: relliv

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egoistdeveloper/twcss-to-sass",
-  "version": "2.1.17",
+  "version": "2.1.18",
   "description": "HTML template to SASS converter for TailwindCSS",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

src/interfaces/tw-to-sass-options.ts

@@ -8,6 +8,7 @@ export interface ITwToSassOptions {
   printSassComments: boolean
   useCommentBlocksAsClassName: boolean
   maxClassNameLength: number
-  classNameOptions: IClassNameOptions,
+  classNameOptions: IClassNameOptions
   preventDuplicateClasses: boolean
+  orderByTailwindClasses: boolean
 }

src/twcss-to-sass.ts

@@ -4,6 +4,7 @@ import beautifyCss, { CSSBeautifyOptions } from 'js-beautify'
 import Utils from './utils/utils'
 import HtmlUtils from './utils/html'
 import SlugUtils from './utils/slug'
+import ClassUtils from './utils/class'
 
 import { ITwToSassOptions } from './interfaces/tw-to-sass-options'
 import {
@@ -38,6 +39,7 @@ const defaultOptions: ITwToSassOptions = {
   printSassComments: true,
   formatterOptions: formatterOptions,
   preventDuplicateClasses: true,
+  orderByTailwindClasses: true,
   classNameOptions: {
     lowercase: true,
     replacement: '-',
@@ -436,8 +438,14 @@ function getNodeClassAndStyles(node: IHtmlNode): string {
   if (node.filterAttributes) {
     // print tailwind class names
     if (node.filterAttributes.class) {
+      let classList = ''
+
+      classList = _defaultOptions.orderByTailwindClasses
+        ? ClassUtils.orderClasses(node.filterAttributes.class)
+        : node.filterAttributes.class
+
       nodeClassAndStyles += node.filterAttributes.class
-        ? `@apply ${node.filterAttributes.class};`
+        ? `@apply ${classList};`
         : ''
     }
 

src/utils/class.ts

@@ -0,0 +1,21 @@
+const ClassUtils = {
+  /**
+   * Order by class names
+   *
+   * @param classes string
+   * @returns string
+   */
+  orderClasses(classes: string): string {
+    const classList = classes.split(/\s+/g)
+
+    const orderedClassList = classList
+      .sort((a, b) => {
+        return a > b ? 1 : a < b ? -1 : 0
+      })
+      .join(' ')
+
+    return orderedClassList
+  },
+}
+
+export default ClassUtils

test/twcss-to-sass.test.ts

@@ -10,7 +10,11 @@ test('convert to sass', () => {
     @apply w-72 h-40 bg-green-400 transform transition-all;
 }`
 
-  const converterResult = convertToSass(htmlCotnent)
+  const converterConfigs = <ITwToSassOptions>{
+    orderByTailwindClasses: false
+  }
+
+  const converterResult = convertToSass(htmlCotnent, converterConfigs)
 
   expect(converterResult?.sass).toBe(sassOutput)
 })
@@ -28,7 +32,11 @@ test('convert to sass with inline css', () => {
     font-weight: 50px;
 }`
 
-  const converterResult = convertToSass(htmlCotnent)
+  const converterConfigs = <ITwToSassOptions>{
+    orderByTailwindClasses: false
+  }
+
+  const converterResult = convertToSass(htmlCotnent, converterConfigs)
 
   expect(converterResult?.sass).toBe(sassOutput)
 })
@@ -57,7 +65,9 @@ test('convert to sass with comments', () => {
   const converterConfigs = <ITwToSassOptions>{
     useCommentBlocksAsClassName: true,
     printSassComments: true,
+    orderByTailwindClasses: false
   }
+
   const converterResult = convertToSass(htmlCotnent, converterConfigs)
 
   expect(converterResult?.sass).toBe(sassOutput)
@@ -87,6 +97,7 @@ test('convert to sass with comments class names', () => {
   const converterConfigs = <ITwToSassOptions>{
     useCommentBlocksAsClassName: true,
     printSassComments: true,
+    orderByTailwindClasses: false,
     classNameOptions: {
       lowercase: true,
       replacement: '_',
@@ -127,7 +138,11 @@ test('convert to sass with group-modifier', () => {
     }
 }`
 
-  const converterResult = convertToSass(htmlCotnent)
+  const converterConfigs = <ITwToSassOptions>{
+    orderByTailwindClasses: false
+  }
+
+  const converterResult = convertToSass(htmlCotnent, converterConfigs)
 
   expect(converterResult?.sass).toBe(sassOutput)
 })
@@ -175,8 +190,33 @@ test('convert to sass with non-duplicated classes', () => {
     }
 }`
 
-  const converterResult = convertToSass(htmlCotnent)
+  const converterConfigs = <ITwToSassOptions>{
+    orderByTailwindClasses: false
+  }
+
+  const converterResult = convertToSass(htmlCotnent, converterConfigs)
 
   expect(converterResult?.sass).toBe(sassOutput)
 })
 
+test('convert to sass with class ordering', () => {
+  const htmlCotnent = `<!-- My Button -->
+<button class="flex items-center justify-center w-full px-4 py-2 space-x-1 font-medium tracking-wider uppercase bg-gray-100 border rounded-md focus:outline-none focus:ring">
+    test
+</button>`
+
+  const sassOutput = `/* My Button -> 1 */
+.my-button {
+    @apply bg-gray-100 border flex focus:outline-none focus:ring font-medium items-center justify-center px-4 py-2 rounded-md space-x-1 tracking-wider uppercase w-full;
+}`
+
+  const converterConfigs = <ITwToSassOptions>{
+    useCommentBlocksAsClassName: true,
+    printSassComments: true,
+    orderByTailwindClasses: true
+  }
+
+  const converterResult = convertToSass(htmlCotnent, converterConfigs)
+
+  expect(converterResult?.sass).toBe(sassOutput)
+})