feat: add sorting by group

twcomponents · Jun 11, 2022 · a5ac24f · a5ac24f
1 parent 54f158d
commit a5ac24f
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egoistdeveloper/twcss-to-sass",
-  "version": "2.1.18",
+  "version": "2.2.0",
   "description": "HTML template to SASS converter for TailwindCSS",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

diff --git a/readme.md b/readme.md
@@ -41,9 +41,10 @@ npm i @egoistdeveloper/twcss-to-sass
 - [x] Fix `group` and `peer` utility classes issue on SASS
 - [ ] Filter non tailwind classes
 - [x] Order classes
-- [ ] Group classes
+- [x] Group classes
 - [ ] Print as group classes
-- [ ] Add configs menu for playground
+- [x] Add configs menu for playground
+- [ ] Detect tailwind classes
 
 ## Input-Output
 

diff --git a/src/interfaces/tw-to-sass-options.ts b/src/interfaces/tw-to-sass-options.ts
@@ -11,4 +11,5 @@ export interface ITwToSassOptions {
   classNameOptions: IClassNameOptions
   preventDuplicateClasses: boolean
   orderByTailwindClasses: boolean
+  groupByTailwindClasses: boolean
 }
diff --git a/src/twcss-to-sass.ts b/src/twcss-to-sass.ts
@@ -39,6 +39,7 @@ const defaultOptions: ITwToSassOptions = {
   formatterOptions: formatterOptions,
   preventDuplicateClasses: true,
   orderByTailwindClasses: true,
+  groupByTailwindClasses: true,
   classNameOptions: {
     lowercase: true,
     replacement: '-',
@@ -207,7 +208,7 @@ function groupUtilityToSass(
 
   let groupSass = ''
 
-  const groupPattern = / group-([a-z0-9]+):([a-z0-9-:\/]+)/gm
+  const groupPattern = / ?group-([a-z0-9]+):([a-z0-9-:\/]+)/gm
 
   nodeTree.forEach((node: IHtmlNode) => {
     if (node.filterAttributes) {
@@ -402,9 +403,20 @@ function getNodeClassAndStyles(node: IHtmlNode): string {
     if (node.filterAttributes.class) {
       let classList = ''
 
-      classList = _defaultOptions.orderByTailwindClasses
-        ? ClassUtils.orderClasses(node.filterAttributes.class)
-        : node.filterAttributes.class
+      // order classes by word group
+      if (_defaultOptions.groupByTailwindClasses) {
+        classList = _defaultOptions.orderByTailwindClasses
+          ? ClassUtils.groupClasses(
+              node.filterAttributes.class,
+              _defaultOptions.orderByTailwindClasses
+            )
+          : node.filterAttributes.class
+      } // order classes by text
+      else {
+        classList = _defaultOptions.orderByTailwindClasses
+          ? ClassUtils.orderClasses(node.filterAttributes.class)
+          : node.filterAttributes.class
+      }
 
       nodeClassAndStyles += node.filterAttributes.class
         ? `@apply ${classList};`
@@ -436,8 +448,9 @@ function getNodeClassAndStyles(node: IHtmlNode): string {
  */
 function getSassTree(nodeTree: IHtmlNode[]): string {
   let sassTree = '',
-    isLastLevel = false,
-    duplicatedItems: string[] = []
+    isLastLevel = false
+
+  const duplicatedItems: string[] = []
 
   nodeTree.forEach((node: IHtmlNode, index) => {
     let treeString = '',

diff --git a/src/utils/class.ts b/src/utils/class.ts
@@ -21,6 +21,63 @@ const ClassUtils = {
     return orderedClassList
   },
 
+  /**
+   * Group by class names
+   *
+   * @param classes string
+   * @param sort boolean
+   * @returns string
+   */
+  groupClasses(classes: string, sort = false): string {
+    // group by class names
+    const classGroups = classes.split(/\s+/g)?.reduce(
+      (
+        result: {
+          [key: string]: string[]
+        },
+        word: string
+      ) => {
+        let _word = null
+
+        if (word) {
+          const match = word?.match('-?[a-z0-9]+')
+
+          if (match && match[0]) {
+            _word = match[0]
+          } else {
+            _word = word
+          }
+        }
+
+        if (!result) {
+          result = {}
+        }
+
+        if (_word) {
+          result[_word] = result[_word] || []
+          result[_word].push(word)
+        }
+
+        return result
+      },
+      {}
+    )
+
+    // convert to string back
+    const classGroupsMerged = Object.entries(classGroups)
+      .sort((a, b) => {
+        // sort by group name (as key)
+        return sort ? (a > b ? 1 : a < b ? -1 : 0) : 0
+      })
+      .map(function (item) {
+        // merge group classes
+        return item[1].join(' ')
+      })
+      .join(' ')
+
+    return classGroupsMerged
+  },
+
   /**
    * Get CSS class name from node details
    *