feat: init tailwindcss-mangle-shared

Author: sonofmagic

packages/shared/README.md

@@ -0,0 +1,7 @@
+# tailwindcss-mangle-shared
+
+The shared utils of tailwindcss-mangle
+
+## Usage
+
+// TODO

packages/shared/jest.config.ts

@@ -0,0 +1,12 @@
+import type { Config } from 'jest'
+import baseConfig from '../../jest.config'
+const config: Config = {
+  projects: [
+    {
+      ...baseConfig
+      // transformIgnorePatterns: ['/node_modules/(?!(@parse5/)/tools)']
+    }
+  ]
+}
+
+export default config

packages/shared/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "tailwindcss-mangle-shared",
+  "version": "0.0.1",
+  "description": "The shared utils of tailwindcss-mangle",
+  "main": "dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development rollup -cw",
+    "build": "cross-env NODE_ENV=production rollup -c",
+    "dev:tsc": "tsc -p tsconfig.json --sourceMap",
+    "build:tsc": "tsc -p tsconfig.json",
+    "test": "yarn build && jest"
+  },
+  "keywords": [
+    "tailwindcss",
+    "patch",
+    "core",
+    "mangle"
+  ],
+  "author": "SonOfMagic <[email protected]>",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {},
+  "devDependencies": {},
+  "homepage": "https://github.com/sonofmagic/tailwindcss-mangle",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sonofmagic/tailwindcss-mangle.git"
+  }
+}

packages/shared/rollup.config.mjs

@@ -0,0 +1,3 @@
+import { createRollupConfig } from '@icebreakers/rollup'
+// const isDev = process.env.NODE_ENV === 'development'
+export default createRollupConfig()

packages/shared/src/classGenerator.ts

@@ -0,0 +1,109 @@
+import type { IClassGeneratorOptions, IClassGeneratorContextItem, IClassGenerator } from './types'
+
+import { acceptChars, stripEscapeSequence, regExpTest } from './utils'
+
+class ClassGenerator implements IClassGenerator {
+  public newClassMap: Record<string, IClassGeneratorContextItem>
+  public newClassSize: number
+  public context: Record<string, any>
+  public opts: IClassGeneratorOptions
+  public classPrefix: string
+  constructor(opts: IClassGeneratorOptions = {}) {
+    this.newClassMap = {}
+    this.newClassSize = 0
+    this.context = {}
+    this.opts = opts
+    this.classPrefix = opts.classPrefix ?? 'tw-'
+  }
+
+  defaultClassGenerate() {
+    const chars = []
+    let rest = (this.newClassSize - (this.newClassSize % acceptChars.length)) / acceptChars.length
+    if (rest > 0) {
+      while (true) {
+        rest -= 1
+        const m = rest % acceptChars.length
+        const c = acceptChars[m]
+        chars.push(c)
+        rest -= m
+        if (rest === 0) {
+          break
+        }
+        rest /= acceptChars.length
+      }
+    }
+    const prefixIndex = this.newClassSize % acceptChars.length
+
+    const newClassName = `${this.classPrefix}${acceptChars[prefixIndex]}${chars.join('')}`
+    return newClassName
+  }
+
+  ignoreClassName(className: string): boolean {
+    return regExpTest(this.opts.ignoreClass, className)
+  }
+
+  includeFilePath(filePath: string): boolean {
+    const { include } = this.opts
+    if (Array.isArray(include)) {
+      return regExpTest(include, filePath)
+    } else {
+      return true
+    }
+  }
+
+  excludeFilePath(filePath: string): boolean {
+    const { exclude } = this.opts
+    if (Array.isArray(exclude)) {
+      return regExpTest(exclude, filePath)
+    } else {
+      return false
+    }
+  }
+
+  isFileIncluded(filePath: string) {
+    return this.includeFilePath(filePath) && !this.excludeFilePath(filePath)
+  }
+
+  transformCssClass(className: string): string {
+    const key = stripEscapeSequence(className)
+    const cn = this.newClassMap[key]
+    if (cn) return cn.name
+    return className
+  }
+
+  generateClassName(original: string): IClassGeneratorContextItem {
+    const opts = this.opts
+
+    original = stripEscapeSequence(original)
+    const cn = this.newClassMap[original]
+    if (cn) return cn
+
+    let newClassName
+    if (opts.customGenerate && typeof opts.customGenerate === 'function') {
+      newClassName = opts.customGenerate(original, opts, this.context)
+    }
+    if (!newClassName) {
+      newClassName = this.defaultClassGenerate()
+    }
+
+    if (opts.reserveClassName && regExpTest(opts.reserveClassName, newClassName)) {
+      if (opts.log) {
+        console.log(`The class name has been reserved. ${newClassName}`)
+      }
+      this.newClassSize++
+      return this.generateClassName(original)
+    }
+    if (opts.log) {
+      console.log(`Minify class name from ${original} to ${newClassName}`)
+    }
+    const newClass: IClassGeneratorContextItem = {
+      name: newClassName,
+      usedBy: []
+    }
+    this.newClassMap[original] = newClass
+    this.newClassSize++
+    return newClass
+  }
+}
+
+export default ClassGenerator

packages/shared/src/index.ts

@@ -0,0 +1,6 @@
+export { default as ClassGenerator } from './classGenerator'
+
+export * from './regex'
+export * from './split'
+export * from './utils'
+export * from './types'

packages/shared/src/regex.ts

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

packages/shared/src/split.ts

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

packages/shared/src/types.ts

@@ -0,0 +1,20 @@
+export interface IClassGeneratorContextItem {
+  name: string
+  usedBy: any[]
+}
+
+export interface IClassGeneratorOptions {
+  reserveClassName?: (string | RegExp)[]
+  customGenerate?: (original: string, opts: IClassGeneratorOptions, context: Record<string, any>) => string | undefined
+  log?: boolean
+  exclude?: (string | RegExp)[]
+  include?: (string | RegExp)[]
+  ignoreClass?: (string | RegExp)[]
+  classPrefix?: string
+}
+
+export interface IClassGenerator {
+  newClassMap: Record<string, IClassGeneratorContextItem>
+  newClassSize: number
+  context: Record<string, any>
+}

packages/shared/src/utils.ts

@@ -0,0 +1,82 @@
+import type { IClassGeneratorOptions, IClassGenerator } from './types'
+
+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)
+}
+
+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')
+  }
+
+  if (typeof cb !== 'function') {
+    throw new Error('expected a function for second argument')
+  }
+
+  const result: Record<string, T[]> = {}
+  for (let i = 0; i < arr.length; i++) {
+    const item = arr[i]
+    const bucketCategory = cb(item)
+    const bucket = result[bucketCategory]
+
+    if (!Array.isArray(bucket)) {
+      result[bucketCategory] = [item]
+    } else {
+      result[bucketCategory].push(item)
+    }
+  }
+
+  return result
+}
+
+export const acceptChars = 'abcdefghijklmnopqrstuvwxyz'.split('')
+
+export function stripEscapeSequence(words: string) {
+  return words.replace(/\\/g, '')
+}
+
+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) {
+      continue
+    }
+    if (c.usedBy[0].match(/.+\.css:*$/)) {
+      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]}.`)
+    }
+  }
+}
+
+export function isRegexp(value: unknown) {
+  return Object.prototype.toString.call(value) === '[object RegExp]'
+}
+
+export function isMap(value: unknown) {
+  return Object.prototype.toString.call(value) === '[object Map]'
+}
+
+export function regExpTest(arr: (string | RegExp)[] = [], str: string) {
+  if (Array.isArray(arr)) {
+    for (let i = 0; i < arr.length; i++) {
+      const item = arr[i]
+      if (typeof item === 'string') {
+        if (item === str) {
+          return true
+        }
+      } else if (isRegexp(item)) {
+        item.lastIndex = 0
+        if (item.test(str)) {
+          return true
+        }
+      }
+    }
+    return false
+  }
+  throw new TypeError("paramater 'arr' should be a Array of Regexp | String !")
+}