refact: use unicorn rule

Author: sonofmagic

.eslintrc.js

@@ -1,4 +1,11 @@
 module.exports = {
   root: true,
-  extends: ['@icebreakers/eslint-config-ts']
+  extends: ['@icebreakers/eslint-config-ts', 'plugin:unicorn/recommended'],
+  rules: {
+    'unicorn/prefer-module': 0,
+    'unicorn/prevent-abbreviations': 0,
+    'unicorn/filename-case': 0,
+    'unicorn/no-object-as-default-parameter': 0,
+    'unicorn/no-null': 0
+  }
 }

package.json

@@ -29,6 +29,7 @@
     "bumpp": "^9.1.1",
     "cross-env": "^7.0.3",
     "eslint": "^8.42.0",
+    "eslint-plugin-unicorn": "^47.0.0",
     "jest": "^29.5.0",
     "only-allow": "^1.1.1",
     "prettier": "^2.8.8",

packages/core/src/css/plugins.ts

@@ -8,10 +8,10 @@ const postcssPlugin = 'postcss-mangle-tailwindcss-plugin'
 
 export function isVueScoped(s: parser.ClassName): boolean {
   if (s.parent) {
-    const idx = s.parent.nodes.indexOf(s)
-    if (idx > -1) {
-      const nextNode = s.parent.nodes[idx + 1]
-      if (nextNode && nextNode.type === 'attribute' && nextNode.attribute.indexOf('data-v-') > -1) {
+    const index = s.parent.nodes.indexOf(s)
+    if (index > -1) {
+      const nextNode = s.parent.nodes[index + 1]
+      if (nextNode && nextNode.type === 'attribute' && nextNode.attribute.includes('data-v-')) {
         return true
       }
     }
@@ -27,10 +27,8 @@ const postcssMangleTailwindcssPlugin: PostcssMangleTailwindcssPlugin = (options)
     // must set newClassMap options
     let set: Set<string> = new Set()
 
-    if (options) {
-      if (options.runtimeSet) {
-        set = options.runtimeSet
-      }
+    if (options && options.runtimeSet) {
+      set = options.runtimeSet
     }
     return {
       postcssPlugin,
@@ -54,10 +52,8 @@ const postcssMangleTailwindcssPlugin: PostcssMangleTailwindcssPlugin = (options)
   } else {
     let newClassMap: Record<string, IClassGeneratorContextItem> = {}
 
-    if (options) {
-      if (options.classGenerator) {
-        newClassMap = options.classGenerator.newClassMap
-      }
+    if (options && options.classGenerator) {
+      newClassMap = options.classGenerator.newClassMap
     }
 
     return {

packages/core/src/html/index.ts

@@ -8,15 +8,14 @@ export function htmlHandler(rawSource: string, options: IHtmlHandlerOptions) {
   const fragment = parse(rawSource)
   traverse(fragment, {
     element(node, parent) {
-      const attr = node.attrs.find((x) => x.name === 'class')
-      if (attr) {
-        const arr = splitCode(attr.value, {
+      const attribute = node.attrs.find((x) => x.name === 'class')
+      if (attribute) {
+        const array = splitCode(attribute.value, {
           splitQuote: false
         })
-        for (let i = 0; i < arr.length; i++) {
-          const v = arr[i]
+        for (const v of array) {
           if (runtimeSet.has(v)) {
-            attr.value = attr.value.replace(makeRegex(v), classGenerator.generateClassName(v).name)
+            attribute.value = attribute.value.replace(makeRegex(v), classGenerator.generateClassName(v).name)
           }
         }
       }

packages/core/src/js/index.ts

@@ -3,29 +3,28 @@ import * as t from '@babel/types'
 import { transformSync, type BabelFileResult, type NodePath } from '@babel/core'
 import type { IJsHandlerOptions } from '../types'
 import { makeRegex, splitCode } from '../shared'
-import { isProd } from '../env'
+import { isProd as isProduction } from '../env'
 
-export function handleValue(str: string, node: StringLiteral | TemplateElement, options: IJsHandlerOptions) {
+export function handleValue(string_: string, node: StringLiteral | TemplateElement, options: IJsHandlerOptions) {
   const { runtimeSet: set, classGenerator: clsGen, splitQuote = true } = options
 
-  const arr = splitCode(str, {
+  const array = splitCode(string_, {
     splitQuote
   })
-  let rawStr = str
-  for (let i = 0; i < arr.length; i++) {
-    const v = arr[i]
+  let rawString = string_
+  for (const v of array) {
     if (set.has(v)) {
       let ignoreFlag = false
       if (Array.isArray(node.leadingComments)) {
         ignoreFlag = node.leadingComments.findIndex((x) => x.value.includes('tw-mangle') && x.value.includes('ignore')) > -1
       }
 
       if (!ignoreFlag) {
-        rawStr = rawStr.replace(makeRegex(v), clsGen.generateClassName(v).name)
+        rawString = rawString.replace(makeRegex(v), clsGen.generateClassName(v).name)
       }
     }
   }
-  return rawStr
+  return rawString
 }
 
 export function jsHandler(rawSource: string, options: IJsHandlerOptions) {
@@ -52,12 +51,10 @@ export function jsHandler(rawSource: string, options: IJsHandlerOptions) {
               enter(p: NodePath<CallExpression>) {
                 const n = p.node
                 // eval()
-                if (t.isIdentifier(n.callee) && n.callee.name === 'eval') {
-                  if (t.isStringLiteral(n.arguments[0])) {
-                    const res = jsHandler(n.arguments[0].value, options)
-                    if (res.code) {
-                      n.arguments[0].value = res.code
-                    }
+                if (t.isIdentifier(n.callee) && n.callee.name === 'eval' && t.isStringLiteral(n.arguments[0])) {
+                  const res = jsHandler(n.arguments[0].value, options)
+                  if (res.code) {
+                    n.arguments[0].value = res.code
                   }
                 }
               }
@@ -67,7 +64,7 @@ export function jsHandler(rawSource: string, options: IJsHandlerOptions) {
         }
       }
     ],
-    minified: options.minified ?? isProd(),
+    minified: options.minified ?? isProduction(),
     sourceMaps: false,
     configFile: false
   })

packages/core/test/html.test.ts

@@ -10,9 +10,9 @@ describe('html handler', () => {
   it('common usage', () => {
     const runtimeSet = new Set<string>()
 
-    splitCode('text-3xl font-bold underline').forEach((x) => {
+    for (const x of splitCode('text-3xl font-bold underline')) {
       runtimeSet.add(x)
-    })
+    }
     const res = htmlHandler(getTestCase('hello-world.html'), {
       classGenerator,
       runtimeSet
@@ -23,9 +23,9 @@ describe('html handler', () => {
   it('trailing slash case', () => {
     const runtimeSet = new Set<string>()
 
-    splitCode('bg-red-500 bg-red-500/50').forEach((x) => {
+    for (const x of splitCode('bg-red-500 bg-red-500/50')) {
       runtimeSet.add(x)
-    })
+    }
     const res = htmlHandler(getTestCase('trailing-slash.html'), {
       classGenerator,
       runtimeSet

packages/core/test/js.test.ts

@@ -65,9 +65,9 @@ describe('js handler', () => {
 
   it('z-10 not transform', () => {
     const runtimeSet = new Set<string>()
-    'z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex'.split(' ').forEach((cls) => {
+    for (const cls of 'z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex'.split(' ')) {
       runtimeSet.add(cls)
-    })
+    }
 
     const testCase = `{ className: "z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex" }`
     const code = jsHandler(testCase, {
@@ -79,9 +79,9 @@ describe('js handler', () => {
 
   it('z-10 not transform with splitQuote false', () => {
     const runtimeSet = new Set<string>()
-    'z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex'.split(' ').forEach((cls) => {
+    for (const cls of 'z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex'.split(' ')) {
       runtimeSet.add(cls)
-    })
+    }
 
     const testCase = `{ className: "z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex" }`
     const code = jsHandler(testCase, {

packages/shared/src/classGenerator.ts

@@ -44,20 +44,12 @@ class ClassGenerator implements IClassGenerator {
 
   includeFilePath(filePath: string): boolean {
     const { include } = this.opts
-    if (Array.isArray(include)) {
-      return regExpTest(include, filePath)
-    } else {
-      return true
-    }
+    return Array.isArray(include) ? regExpTest(include, filePath) : true
   }
 
   excludeFilePath(filePath: string): boolean {
     const { exclude } = this.opts
-    if (Array.isArray(exclude)) {
-      return regExpTest(exclude, filePath)
-    } else {
-      return false
-    }
+    return Array.isArray(exclude) ? regExpTest(exclude, filePath) : false
   }
 
   isFileIncluded(filePath: string) {

packages/shared/src/regex.ts

@@ -2,7 +2,7 @@ export function escapeStringRegexp(str: string) {
   if (typeof str !== 'string') {
     throw new TypeError('Expected a string')
   }
-  return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d')
+  return str.replaceAll(/[$()*+.?[\\\]^{|}]/g, '\\$&').replaceAll('-', '\\x2d')
 }
 
 export function makeRegex(

packages/shared/src/split.ts

@@ -1,4 +1,4 @@
-export const validateFilterRE = /[\w\u00A0-\uFFFF-_:%-?]/
+export const validateFilterRE = /[\w%-?\u00A0-\uFFFF-]/
 
 export function isValidSelector(selector = ''): selector is string {
   return validateFilterRE.test(selector)
@@ -10,6 +10,6 @@ export const splitCode = (
     splitQuote?: boolean
   } = { splitQuote: true }
 ) => {
-  const regex = options.splitQuote ? /[\s"]+/ : /[\s]+/
-  return code.split(regex).filter(isValidSelector)
+  const regex = options.splitQuote ? /[\s"]+/ : /\s+/
+  return code.split(regex).filter((x) => isValidSelector(x))
 }

packages/shared/src/utils.ts

@@ -4,48 +4,47 @@ export const defaultMangleClassFilter = (className: string) => {
   // ignore className like 'filter','container'
   // it may be dangerous to mangle/rename all StringLiteral , so use /-/ test for only those with /-/ like:
   // bg-[#123456] w-1 etc...
-  return /[-:]/.test(className)
+  return /[:-]/.test(className)
 }
 
 export function groupBy<T>(arr: T[], cb: (arg: T) => string): Record<string, T[]> {
   if (!Array.isArray(arr)) {
-    throw new Error('expected an array for first argument')
+    throw new TypeError('expected an array for first argument')
   }
 
   if (typeof cb !== 'function') {
-    throw new Error('expected a function for second argument')
+    throw new TypeError('expected a function for second argument')
   }
 
   const result: Record<string, T[]> = {}
-  for (let i = 0; i < arr.length; i++) {
-    const item = arr[i]
+  for (const item of arr) {
     const bucketCategory = cb(item)
     const bucket = result[bucketCategory]
 
-    if (!Array.isArray(bucket)) {
-      result[bucketCategory] = [item]
-    } else {
+    if (Array.isArray(bucket)) {
       result[bucketCategory].push(item)
+    } else {
+      result[bucketCategory] = [item]
     }
   }
 
   return result
 }
 
-export const acceptChars = 'abcdefghijklmnopqrstuvwxyz'.split('')
+export const acceptChars = [...'abcdefghijklmnopqrstuvwxyz']
 
 export function stripEscapeSequence(words: string) {
-  return words.replace(/\\/g, '')
+  return words.replaceAll('\\', '')
 }
 
 export const validate = (opts: IClassGeneratorOptions, classGenerator: IClassGenerator) => {
   if (!opts.log) return
   for (const className in classGenerator.newClassMap) {
     const c = classGenerator.newClassMap[className]
-    if (c.usedBy.length >= 1) {
+    if (c.usedBy.length > 0) {
       continue
     }
-    if (c.usedBy[0].match(/.+\.css:*$/)) {
+    if (/.+\.css:*$/.test(c.usedBy[0])) {
       console.log(`The class name '${className}' is not used: defined at ${c.usedBy[0]}.`)
     } else {
       console.log(`The class name '${className}' is not defined: used at ${c.usedBy[0]}.`)
@@ -63,8 +62,7 @@ export function isMap(value: unknown) {
 
 export function regExpTest(arr: (string | RegExp)[] = [], str: string) {
   if (Array.isArray(arr)) {
-    for (let i = 0; i < arr.length; i++) {
-      const item = arr[i]
+    for (const item of arr) {
       if (typeof item === 'string') {
         if (item === str) {
           return true

packages/shared/test/reg.test.ts

@@ -4,7 +4,7 @@ describe('regex', () => {
   it('z-10 regex', () => {
     const testCase = 'z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex'
     const regex = makeRegex('z-10')
-    const arr = Array.from(testCase.matchAll(regex))
+    const arr = [...testCase.matchAll(regex)]
     expect(arr.length).toBe(1)
     expect(arr).toMatchSnapshot()
   })
@@ -14,15 +14,15 @@ describe('regex', () => {
     const regex = makeRegex('bg-red-500', {
       exact: false
     })
-    const arr = Array.from(testCase.matchAll(regex))
+    const arr = [...testCase.matchAll(regex)]
     expect(arr.length).toBe(2)
     expect(arr).toMatchSnapshot()
   })
 
   it('trailing slash should exact match case 1', () => {
     const testCase = 'bg-red-500 bg-red-500/50'
     const regex = makeRegex('bg-red-500')
-    const arr = Array.from(testCase.matchAll(regex))
+    const arr = [...testCase.matchAll(regex)]
     expect(arr.length).toBe(1)
     expect(arr).toMatchSnapshot()
   })