feat: auto class name from comment block

Author: relliv

docs/index.html

@@ -100,6 +100,7 @@
 
     <!-- twcss-to-sass -->
     <script src="https://unpkg.com/@egoistdeveloper/twcss-to-sass@latest/dist/umd/index.js"></script>
+    <!-- <script src="../dist/umd/index.js"></script> -->
 
     <!-- Monaco Editor -->
     <script>
@@ -143,15 +144,27 @@
 
                     const {
                         convertToSass
-                    } = TwCssToSass,
-                    theme = this.getCurrentTheme(),
+                    } = TwCssToSass;
+
+                    const theme = this.getCurrentTheme(),
                         commonEditorConfig = {
                             theme: `vs-${theme}`,
                             minimap: {
                                 enabled: false
                             }
                         };
 
+                    const converterConfigs = {
+                          useCommentBlocksAsClassName: true,
+                          printComments: true,
+                          classNameOptions: {
+                            lowercase: true,
+                            replaceWith: '-',
+                            prefix: '',
+                            suffix: ''
+                          }
+                        };
+
                     htmlMonacoEditor = monaco.editor.create(document.getElementById('htmlContainer'), Object
                         .assign(commonEditorConfig, {
                             value: defaultTemplate,
@@ -163,10 +176,10 @@
                             language: 'scss',
                         }));
 
-                    sassMonacoEditor.getModel().setValue(convertToSass(defaultTemplate));
+                    sassMonacoEditor.getModel().setValue(convertToSass(defaultTemplate, converterConfigs));
 
                     htmlMonacoEditor.onDidChangeModelContent(function (e) {
-                        let sassOutput = convertToSass(htmlMonacoEditor.getValue());
+                        let sassOutput = convertToSass(htmlMonacoEditor.getValue(), converterConfigs);
 
                         if (!sassOutput || !sassOutput.length) {
                             sassOutput = 'Invalid HTML content.';

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@egoistdeveloper/twcss-to-sass",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "HTML template to SASS converter for TailwindCSS",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -49,20 +49,22 @@
   "dependencies": {
     "@egoistdeveloper/twcss-to-sass": "file:egoistdeveloper-twcss-to-sass-2.0.1.tgz",
     "himalaya": "^1.1.0",
-    "js-beautify": "^1.14.0"
+    "js-beautify": "^1.14.0",
+    "slug": "^5.3.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
     "@types/jest": "^27.0.1",
     "@types/js-beautify": "^1.13.3",
+    "@types/slug": "^5.0.3",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
     "@typescript-eslint/parser": "^4.31.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "husky": "^7.0.2",
-    "jest": "^27.2.0",
+    "jest": "^27.5.1",
     "pinst": "^2.1.6",
     "prettier": "^2.4.0",
     "ts-jest": "^27.0.5",

package.json

@@ -0,0 +1,6 @@
+export interface IClassNameOptions {
+  lowercase: boolean
+  replaceWith: string
+  prefix: string
+  suffix: string
+}

src/interfaces/classname-options.ts

@@ -1,6 +1,11 @@
-import { IFormatterOptions } from './formatter-options'
+import { CSSBeautifyOptions } from 'js-beautify'
+import { IClassNameOptions } from './classname-options'
 
 export interface ITwToSassOptions {
   formatOutput: boolean
-  fomatterOptions: IFormatterOptions | null
+  formatterOptions: CSSBeautifyOptions
+  printComments: boolean
+  useCommentBlocksAsClassName: boolean
+  maxClassNameLength: number
+  classNameOptions: IClassNameOptions
 }

src/interfaces/formatter-options.ts

@@ -1,46 +1,45 @@
 import { parse } from 'himalaya'
-import beautifyCss from 'js-beautify'
+import beautifyCss, { CSSBeautifyOptions } from 'js-beautify'
+import slug from 'slug'
 
 import Utils from './utils/utils'
 import { ITwToSassOptions } from './interfaces/tw-to-sass-options'
-import { IFormatterOptions } from './interfaces/formatter-options'
 import {
   IAttribute,
   IHtmlNode,
   IHtmlNodeAttribute,
 } from './interfaces/html-node'
 
-/**
- * Default options
- */
-const defaultOptions: ITwToSassOptions = {
-  formatOutput: true,
-  fomatterOptions: null,
-}
-
 /**
  * Default js-beautify css formatter options
  */
-const formatterOptions: IFormatterOptions = {
-  indent_size: '4',
+const formatterOptions: CSSBeautifyOptions = {
+  indent_size: 4,
   indent_char: ' ',
   max_preserve_newlines: 5,
   preserve_newlines: true,
-  keep_array_indentation: false,
-  break_chained_methods: false,
-  indent_scripts: 'normal',
-  brace_style: 'collapse',
-  space_before_conditional: true,
-  unescape_strings: false,
-  jslint_happy: false,
   end_with_newline: false,
-  wrap_line_length: '0',
-  indent_inner_html: false,
-  comma_first: false,
-  e4x: false,
+  wrap_line_length: 0,
   indent_empty_lines: false,
 }
 
+/**
+ * Default options
+ */
+let defaultOptions: ITwToSassOptions = {
+  formatOutput: true,
+  useCommentBlocksAsClassName: false,
+  maxClassNameLength: 50,
+  printComments: true,
+  formatterOptions: formatterOptions,
+  classNameOptions: {
+    lowercase: true,
+    replaceWith: '-',
+    prefix: '',
+    suffix: '',
+  },
+}
+
 /**
  * Get style and class attributes
  *
@@ -157,7 +156,6 @@ const filterHtmlData = function (
             .reverse()
             .join(', ')
 
-          node.comment = node.comment ? node.comment : node.tagName
           node.order = nestedOrder
 
           const children: IHtmlNode[] | null = filterHtmlData(
@@ -192,6 +190,46 @@ const filterHtmlData = function (
   return null
 }
 
+/**
+ * Get CSS class name from node details
+ *
+ * @param node IHtmlNode
+ * @param deepth number
+ *
+ * @returns string
+ */
+const getClassName = function (node: IHtmlNode, deepth: number): string {
+  let className = ''
+
+  const classComment = defaultOptions.printComments
+    ? `/* ${node.comment ? node.comment : node.tagName} -> ${node.order} */`
+    : ''
+
+  if (node.comment && defaultOptions.useCommentBlocksAsClassName) {
+    let classSlug = defaultOptions.classNameOptions.prefix
+
+    classSlug += slug(node.comment, {
+      lower: !!defaultOptions.classNameOptions.lowercase,
+      replacement: defaultOptions.classNameOptions.replaceWith,
+    })
+
+    classSlug =
+      classSlug.length > defaultOptions.maxClassNameLength
+        ? classSlug.substring(0, defaultOptions.maxClassNameLength)
+        : classSlug
+
+    classSlug += defaultOptions.classNameOptions.suffix
+
+    className += `.${classSlug}`
+  } else if (node.tagName != 'div') {
+    className += `${node.tagName}`
+  } else {
+    className += `.class-${node.tagName}-${deepth}`
+  }
+
+  return classComment + className
+}
+
 /**
  * Extract SASS tree from HTML JSON tree
  *
@@ -251,8 +289,8 @@ const getSassTree = function (nodeTree: IHtmlNode[] | IHtmlNode, deepth = 0) {
           }
 
           if (treeSTring.length || subTreeSTring.length) {
-            let result = `/* ${node.comment} -> ${node.order} */`
-            result += `.class-${deepth}-${node.tagName}`
+            let result = getClassName(node, deepth)
+
             result += `{${treeSTring}${subTreeSTring}}`
 
             return result
@@ -277,9 +315,16 @@ const getSassTree = function (nodeTree: IHtmlNode[] | IHtmlNode, deepth = 0) {
  */
 export const convertToSass = function (
   html: string,
-  options: ITwToSassOptions = defaultOptions
+  options: ITwToSassOptions | null = null
 ): null | string {
   if (html && html.length) {
+    if (options) {
+      defaultOptions = {
+        ...defaultOptions,
+        ...options,
+      }
+    }
+
     html = Utils.cleanText(html)
 
     const htmlJson: IHtmlNode[] | IHtmlNode = parse(html)
@@ -290,19 +335,10 @@ export const convertToSass = function (
       const sassTreeResult = getSassTree(filteredHtmlData)
 
       // export with formatted output
-      if (options && options.formatOutput === true) {
-        let _formatterOptions = {}
-
-        if (options && options.fomatterOptions) {
-          _formatterOptions = Object.assign(
-            formatterOptions,
-            options.fomatterOptions
-          )
-        }
-
+      if (defaultOptions.formatOutput === true) {
         const formattedResult = beautifyCss.css(
           sassTreeResult,
-          _formatterOptions
+          defaultOptions.formatterOptions
         )
 
         return Utils.fixFomatterApplyIssue(formattedResult)

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

@@ -4,7 +4,7 @@ test('convert to sass', () => {
   const htmlCotnent =
       '<div class="w-72 h-40 bg-green-400 transform transition-all">My Text 1</div>',
     sassOutput = `/* div -> 1 */
-.class-1-div {
+.class-div-1 {
     @apply w-72 h-40 bg-green-400 transform transition-all;
 }`
 
@@ -15,7 +15,7 @@ test('convert to sass with inline css', () => {
   const htmlCotnent =
       '<div class="w-72 h-40 bg-green-400 transform transition-all" style="border: 1px solid white; padding: 30px; font-weight: 50px;">My Text 1</div>',
     sassOutput = `/* div -> 1 */
-.class-1-div {
+.class-div-1 {
     @apply w-72 h-40 bg-green-400 transform transition-all;
     border: 1px solid white;
     padding: 30px;
@@ -36,11 +36,11 @@ test('convert to sass with comments', () => {
 </div>
 <!-- Container End-->`,
     sassOutput = `/* Container Start, Container Any -> 1 */
-.class-1-div {
+.class-div-1 {
     @apply bg-white;
 
     /* Some Div -> 2 */
-    .class-2-div {
+    .class-div-2 {
         @apply flex justify-center items-center min-h-screen min-w-full;
     }
 }`