Merge pull request #18 from dcasia/polyfill-space-between

Compatible with 'space between' utilities

Author: ItsRyanWu

.eslintrc.js

@@ -22,5 +22,6 @@ module.exports = {
         'unicorn/prevent-abbreviations': 'off',
         'multiline-comment-style': 'off',
         'capitalized-comments': 'off',
+        'unicorn/no-array-for-each': 'off',
     },
 }

package-lock.json

@@ -1,17 +1,21 @@
 {
   "name": "@dcasia/mini-program-tailwind-webpack-plugin",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "让你的小程序用上原汁原味的 Tailwind/Windi CSS",
   "keywords": [
-    "miniprogram",
     "mini-program",
+    "tailwind",
     "tailwindcss",
     "windicss",
     "wechat",
     "taro",
     "css",
     "postcss",
-    "uni-app"
+    "uni-app",
+    "miniprogram",
+    "weapp",
+    "atomic-css",
+    "unocss"
   ],
   "main": "dist/index.js",
   "files": [
@@ -70,6 +74,7 @@
     "jest": "^27.5.1",
     "rollup": "^2.68.0",
     "rollup-plugin-dts": "^4.2.1",
+    "tslib": "^2.4.0",
     "vite": "^2.9.9",
     "webpack": "^5.69.1"
   },

package.json

@@ -4,6 +4,9 @@ import { TaroFramework } from './enum'
 export interface Options {
     enableRpx?: boolean,
     designWidth?: number,
+    utilitiesSettings?: {
+        spaceBetweenItems?: string[],
+    },
 }
 
 export interface TaroWebpackPluginOptions {

src/interfaces.ts

@@ -1,10 +1,22 @@
 import { FileType } from '../enum'
-import { handleCharacters } from '../utilities'
+import { customReplace, handleCharacters } from '../utilities'
 import { Options } from '../interfaces'
 
-export function transformSelector() {
+export function transformSelector(options: Options) {
 
     const processed = Symbol('processed')
+    const defaultSpaceBetweenItems = [ 'view', 'button', 'text', 'image' ]
+    const usersSpaceBetweenItems = options?.utilitiesSettings?.spaceBetweenItems || []
+    const spaceBetweenItems = Array.from(new Set([ ...defaultSpaceBetweenItems, ...usersSpaceBetweenItems ]))
+    const customReplacement = new Map()
+
+    /**
+     * A polyfill that is compatible 'space-[x,y]-\d' syntax
+     * Note that in mini program environment ':not()' selector can only be used when it's combined with other selectors
+     * e.g. view:not() works but the standalone :not() selector couldn't work
+     */
+    customReplacement.set(/^(\.-?space-\w)(-.+?)\s.*/, spaceBetweenItems.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(/^(\.-?space-\w-reverse).*/, spaceBetweenItems.map(item => `$1 > ${ item }:not([hidden])`).join(', '))
 
     return {
         postcssPlugin: 'transformSelectorName',
@@ -13,6 +25,7 @@ export function transformSelector() {
             if (!node[ processed ]) {
 
                 node.selector = handleCharacters(node.selector, FileType.Style)
+                node.selector = customReplace(node.selector, customReplacement)
                 node[ processed ] = true
 
             }

src/postcss/index.ts

@@ -5,7 +5,7 @@ import { transformSelector, transformValue } from './postcss'
 export function handleStyle(rawSource: string, option?: Options) {
 
     const processor = postcss()
-        .use(transformSelector)
+        .use(transformSelector(option))
 
     if (option?.enableRpx) {
         processor.use(transformValue(option))

src/style-handler.ts

@@ -15,7 +15,7 @@ export function handleSource(fileType: FileType, source: string, options?: Optio
 
 }
 
-export default {
+export {
     handleStyle,
     handleTemplate,
 }

src/universal-handler.ts

@@ -63,3 +63,13 @@ export function handleCharacters(content, type: FileType) {
     return content
 
 }
+
+export function customReplace(raw: string, rules: Map<RegExp, string>) {
+
+    rules.forEach((target, exp) => {
+        raw = raw.replace(exp, target)
+    })
+
+    return raw
+
+}