Added support for '%' symbol and Uno CSS (#41)

* added support for % symbol

* replace * to component names

* add customComponents option

* bump version from 1.4.5 to 1.5.0

Author: ItsRyanWu

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dcasia/mini-program-tailwind-webpack-plugin",
-    "version": "1.4.5",
+    "version": "1.5.0",
     "description": "让你的小程序用上原汁原味的 Tailwind/Windi CSS",
     "keywords": [
         "mini-program",

src/interfaces.ts

@@ -7,6 +7,7 @@ export interface Options {
     utilitiesSettings?: {
         spaceBetweenItems?: string[],
         divideItems?: string[],
+        customComponents?: string[],
     },
 }
 

src/postcss/index.ts

@@ -1,6 +1,7 @@
 import { FileType } from '../enum'
 import { customReplace, handleCharacters } from '../utilities'
 import { Options } from '../interfaces'
+import { intrinsicComponents } from '../utilities'
 
 export function transformSelector(options: Options) {
 
@@ -10,6 +11,8 @@ export function transformSelector(options: Options) {
     const spaceBetweenItems = Array.from(new Set([ ...defaultSpaceBetweenItems, ...usersSpaceBetweenItems ]))
     const userDivideBetweenItems = options?.utilitiesSettings?.divideItems || []
     const divideItems = Array.from(new Set([ ...defaultSpaceBetweenItems, ...userDivideBetweenItems ]))
+    const customComponents = options?.utilitiesSettings?.customComponents || []
+    const allComponents = Array.from(new Set([ ...intrinsicComponents, ...customComponents ]))
     const customReplacement = new Map()
 
     /**
@@ -21,6 +24,7 @@ export function transformSelector(options: Options) {
     customReplacement.set(/^(\.-?space-\w-reverse).*/, spaceBetweenItems.map(item => `$1>${ item }:not([hidden])`).join(', '))
     customReplacement.set(/^(\.-?divide-\w+)(-.+?)?\s?>.*/, divideItems.map(item => `$1$2:not($1-reverse)>${ item }:not([hidden]):not(:first-child), $1$2$1-reverse>${ item }:not([hidden]):not(:last-child)`).join(', '))
     customReplacement.set(/^(\.-?divide-\w-reverse).*/, divideItems.map(item => `$1>${ item }:not([hidden])`).join(', '))
+    customReplacement.set('*', allComponents.join(', '))
 
     return {
         postcssPlugin: 'transformSelectorName',

src/utilities.ts

@@ -1,5 +1,7 @@
 import { FileType } from './enum'
 
+export const intrinsicComponents = [ 'cover-image', 'cover-view', 'movable-area', 'movable-view', 'scroll-view', 'swiper', 'swiper-item', 'view', 'icon', 'progree', 'rich-text', 'text', 'button', 'checkbox', 'checkbox-group', 'editor', 'form', 'input', 'label', 'picker', 'picker-view', 'picker-view-column', 'radio', 'radio-group', 'slider', 'switch', 'textarea', 'navigator', 'audio', 'camera', 'image', 'live-player', 'live-pusher', 'video', 'map', 'canvas' ]
+
 export const regExpJS = /.+\.js$/
 
 export const regExpVue = /.+\.vue$/
@@ -29,6 +31,7 @@ const charactersMap = {
     '.': '-d-',
     ':': '-c-',
     ',': '-2c-',
+    '%': '-p-',
 }
 
 const specialCharactersMap = {