weapp-tailwindcss 2.5.2 → 2.6.0

package/README.md

@@ -11,14 +11,8 @@
 <h1 align="center">weapp-tailwindcss</h1>
 
 </p>
-<!-- <p align="center">
-<a href="https://weapp-tw.icebreaker.top#gh-light-mode-only">
-  <img src="./assets/logo-text-light.png#gh-light-mode-only" alt="weapp-tailwindcss-logo" width="300">
-</a>
-<a href="https://weapp-tw.icebreaker.top#gh-dark-mode-only">
-  <img src="./assets/logo-text-dark.png#gh-dark-mode-only" alt="weapp-tailwindcss-logo" width="300">
-</a>
-<br> -->
+
+> 简体中文(zh-cn) | [English](./README_en.md)
 
 ![star](https://badgen.net/github/stars/sonofmagic/weapp-tailwindcss)
 ![dm0](https://badgen.net/npm/dm/weapp-tailwindcss)

package/dist/cli.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var options = require('./options-ad127e0c.js');
+var options = require('./options-487394fa.js');
 require('micromatch');
 require('@babel/types');
 require('@babel/generator');
@@ -9,7 +9,7 @@ require('@babel/traverse');
 require('./replace.js');
 require('./shared-ae7dd073.js');
 require('postcss');
-require('./postcss-fbdc673b.js');
+require('./postcss-b53e9504.js');
 require('postcss-selector-parser');
 require('@csstools/postcss-is-pseudo-class');
 require('node:path');

package/dist/cli.mjs

@@ -1,4 +1,4 @@
-import { g as getOptions, c as createPatch } from './options-1e3a224a.mjs';
+import { g as getOptions, c as createPatch } from './options-f7b71f03.mjs';
 import 'micromatch';
 import '@babel/types';
 import '@babel/generator';
@@ -7,7 +7,7 @@ import '@babel/traverse';
 import './replace.mjs';
 import './shared-7c88fb94.mjs';
 import 'postcss';
-import './postcss-9a63df9d.mjs';
+import './postcss-760298ba.mjs';
 import 'postcss-selector-parser';
 import '@csstools/postcss-is-pseudo-class';
 import 'node:path';

package/dist/gulp.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var stream = require('node:stream');
-var options = require('./options-ad127e0c.js');
+var options = require('./options-487394fa.js');
 require('micromatch');
 require('@babel/types');
 require('@babel/generator');
@@ -12,7 +12,7 @@ require('@babel/traverse');
 require('./replace.js');
 require('./shared-ae7dd073.js');
 require('postcss');
-require('./postcss-fbdc673b.js');
+require('./postcss-b53e9504.js');
 require('postcss-selector-parser');
 require('@csstools/postcss-is-pseudo-class');
 require('node:path');

package/dist/gulp.mjs

@@ -1,5 +1,5 @@
 import stream from 'node:stream';
-import { g as getOptions, a as createTailwindcssPatcher } from './options-1e3a224a.mjs';
+import { g as getOptions, a as createTailwindcssPatcher } from './options-f7b71f03.mjs';
 import 'micromatch';
 import '@babel/types';
 import '@babel/generator';
@@ -8,7 +8,7 @@ import '@babel/traverse';
 import './replace.mjs';
 import './shared-7c88fb94.mjs';
 import 'postcss';
-import './postcss-9a63df9d.mjs';
+import './postcss-760298ba.mjs';
 import 'postcss-selector-parser';
 import '@csstools/postcss-is-pseudo-class';
 import 'node:path';

package/dist/index.js

@@ -7,7 +7,7 @@ var vite = require('./vite.js');
 var gulp = require('./gulp.js');
 require('node:path');
 require('node:fs');
-require('./options-ad127e0c.js');
+require('./options-487394fa.js');
 require('micromatch');
 require('@babel/types');
 require('@babel/generator');
@@ -16,7 +16,7 @@ require('@babel/traverse');
 require('./replace.js');
 require('./shared-ae7dd073.js');
 require('postcss');
-require('./postcss-fbdc673b.js');
+require('./postcss-b53e9504.js');
 require('postcss-selector-parser');
 require('@csstools/postcss-is-pseudo-class');
 require('semver');

package/dist/index.mjs

@@ -3,7 +3,7 @@ export { UnifiedViteWeappTailwindcssPlugin } from './vite.mjs';
 export { createPlugins } from './gulp.mjs';
 import 'node:path';
 import 'node:fs';
-import './options-1e3a224a.mjs';
+import './options-f7b71f03.mjs';
 import 'micromatch';
 import '@babel/types';
 import '@babel/generator';
@@ -12,7 +12,7 @@ import '@babel/traverse';
 import './replace.mjs';
 import './shared-7c88fb94.mjs';
 import 'postcss';
-import './postcss-9a63df9d.mjs';
+import './postcss-760298ba.mjs';
 import 'postcss-selector-parser';
 import '@csstools/postcss-is-pseudo-class';
 import 'semver';

package/dist/{options-ad127e0c.js → options-487394fa.js}

@@ -8,7 +8,7 @@ var traverse = require('@babel/traverse');
 var replace = require('./replace.js');
 var shared = require('./shared-ae7dd073.js');
 var postcss = require('postcss');
-var postcss$1 = require('./postcss-fbdc673b.js');
+var postcss$1 = require('./postcss-b53e9504.js');
 var postcssIsPseudoClass = require('@csstools/postcss-is-pseudo-class');
 var path = require('node:path');
 var fs = require('node:fs');
@@ -372,7 +372,8 @@ const defaultOptions = {
         allowDoubleQuotes: false
     },
     cssChildCombinatorReplaceValue: 'view + view',
-    inlineWxs: false
+    inlineWxs: false,
+    injectAdditionalCssVarScope: false
 };
 
 function generateCode(match, options = {}) {
@@ -732,7 +733,7 @@ function getOptions(options = {}) {
     const result = defu(options, defaultOptions, {
         minifiedJs: isProd()
     });
-    const { cssPreflight, customRuleCallback, cssPreflightRange, replaceUniversalSelectorWith, customAttributes, customReplaceDictionary, supportCustomLengthUnitsPatch, arbitraryValues, cssChildCombinatorReplaceValue, inlineWxs } = result;
+    const { cssPreflight, customRuleCallback, cssPreflightRange, replaceUniversalSelectorWith, customAttributes, customReplaceDictionary, supportCustomLengthUnitsPatch, arbitraryValues, cssChildCombinatorReplaceValue, inlineWxs, injectAdditionalCssVarScope } = result;
     result.escapeMap = customReplaceDictionary;
     const cssInjectPreflight = createInjectPreflight(cssPreflight);
     const customAttributesEntities = isMap(options.customAttributes)
@@ -748,7 +749,8 @@ function getOptions(options = {}) {
         replaceUniversalSelectorWith,
         escapeMap,
         mangleContext,
-        cssChildCombinatorReplaceValue
+        cssChildCombinatorReplaceValue,
+        injectAdditionalCssVarScope
     });
     result.styleHandler = styleHandler;
     const jsHandler = createjsHandler({

package/dist/{options-1e3a224a.mjs → options-f7b71f03.mjs}

@@ -6,7 +6,7 @@ import traverse from '@babel/traverse';
 import { replaceJs as replaceWxml } from './replace.mjs';
 import { S as SimpleMappingChars2String, M as MappingChars2String } from './shared-7c88fb94.mjs';
 import postcss from 'postcss';
-import { p as postcssWeappTailwindcss } from './postcss-9a63df9d.mjs';
+import { p as postcssWeappTailwindcss } from './postcss-760298ba.mjs';
 import postcssIsPseudoClass from '@csstools/postcss-is-pseudo-class';
 import path from 'node:path';
 import fs from 'node:fs';
@@ -342,7 +342,8 @@ const defaultOptions = {
         allowDoubleQuotes: false
     },
     cssChildCombinatorReplaceValue: 'view + view',
-    inlineWxs: false
+    inlineWxs: false,
+    injectAdditionalCssVarScope: false
 };
 
 function generateCode(match, options = {}) {
@@ -702,7 +703,7 @@ function getOptions(options = {}) {
     const result = defu(options, defaultOptions, {
         minifiedJs: isProd()
     });
-    const { cssPreflight, customRuleCallback, cssPreflightRange, replaceUniversalSelectorWith, customAttributes, customReplaceDictionary, supportCustomLengthUnitsPatch, arbitraryValues, cssChildCombinatorReplaceValue, inlineWxs } = result;
+    const { cssPreflight, customRuleCallback, cssPreflightRange, replaceUniversalSelectorWith, customAttributes, customReplaceDictionary, supportCustomLengthUnitsPatch, arbitraryValues, cssChildCombinatorReplaceValue, inlineWxs, injectAdditionalCssVarScope } = result;
     result.escapeMap = customReplaceDictionary;
     const cssInjectPreflight = createInjectPreflight(cssPreflight);
     const customAttributesEntities = isMap(options.customAttributes)
@@ -718,7 +719,8 @@ function getOptions(options = {}) {
         replaceUniversalSelectorWith,
         escapeMap,
         mangleContext,
-        cssChildCombinatorReplaceValue
+        cssChildCombinatorReplaceValue,
+        injectAdditionalCssVarScope
     });
     result.styleHandler = styleHandler;
     const jsHandler = createjsHandler({

package/dist/postcss/cssVars.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    prop: string;
+    value: string;
+}[];
+export default _default;

package/dist/postcss/mp.d.ts

@@ -1,4 +1,8 @@
 import { Rule } from 'postcss';
 import type { IStyleHandlerOptions } from "../types";
 export declare function testIfVariablesScope(node: Rule, count?: number): boolean;
+export declare function testIfTwBackdrop(node: Rule, count?: number): boolean;
+export declare function makePseudoVarRule(): Rule;
+export declare function remakeCssVarSelector(selectors: string[], cssPreflightRange: IStyleHandlerOptions['cssPreflightRange']): string[];
+export declare function remakeCombinatorSelector(selector: string, cssChildCombinatorReplaceValue: IStyleHandlerOptions['cssChildCombinatorReplaceValue']): string;
 export declare function commonChunkPreflight(node: Rule, options: IStyleHandlerOptions): void;

package/dist/postcss-760298ba.mjs

@@ -0,0 +1,351 @@
+import selectorParser from 'postcss-selector-parser';
+import { i as internalCssSelectorReplacer } from './shared-7c88fb94.mjs';
+import { Declaration, Rule } from 'postcss';
+import '@csstools/postcss-is-pseudo-class';
+
+const createTransform = (rule, options) => {
+    const { replaceUniversalSelectorWith, escapeMap, mangleContext } = options;
+    const replaceFlag = replaceUniversalSelectorWith !== false;
+    const transform = (selectors) => {
+        selectors.walk((selector) => {
+            if (selector.type === 'universal' && replaceFlag) {
+                selector.value = replaceUniversalSelectorWith;
+            }
+            if (selector.type === 'selector') {
+                const node = selector.nodes.find((x) => x.type === 'pseudo' && x.value === ':hover');
+                node && selector.remove();
+            }
+            if (selector.type === 'class') {
+                selector.value = internalCssSelectorReplacer(selector.value, {
+                    escapeMap,
+                    mangleContext
+                });
+            }
+        });
+        if (selectors.length === 0) {
+            rule.remove();
+        }
+    };
+    return transform;
+};
+const getTransformer = (rule, options) => {
+    return selectorParser(createTransform(rule, options));
+};
+const transformSync = (rule, options) => {
+    const transformer = getTransformer(rule, options);
+    return transformer.transformSync(rule, {
+        lossless: false,
+        updateSelector: true
+    });
+};
+
+var cssVars = [
+    {
+        prop: '--tw-border-spacing-x',
+        value: '0'
+    },
+    {
+        prop: '--tw-border-spacing-y',
+        value: '0'
+    },
+    {
+        prop: '--tw-translate-x',
+        value: '0'
+    },
+    {
+        prop: '--tw-translate-y',
+        value: '0'
+    },
+    {
+        prop: '--tw-rotate',
+        value: '0'
+    },
+    {
+        prop: '--tw-skew-x',
+        value: '0'
+    },
+    {
+        prop: '--tw-skew-y',
+        value: '0'
+    },
+    {
+        prop: '--tw-scale-x',
+        value: '1'
+    },
+    {
+        prop: '--tw-scale-y',
+        value: '1'
+    },
+    {
+        prop: '--tw-pan-x',
+        value: ' '
+    },
+    {
+        prop: '--tw-pan-y',
+        value: ' '
+    },
+    {
+        prop: '--tw-pinch-zoom',
+        value: ' '
+    },
+    {
+        prop: '--tw-scroll-snap-strictness',
+        value: 'proximity'
+    },
+    {
+        prop: '--tw-gradient-from-position',
+        value: ' '
+    },
+    {
+        prop: '--tw-gradient-via-position',
+        value: ' '
+    },
+    {
+        prop: '--tw-gradient-to-position',
+        value: ' '
+    },
+    {
+        prop: '--tw-ordinal',
+        value: ' '
+    },
+    {
+        prop: '--tw-slashed-zero',
+        value: ' '
+    },
+    {
+        prop: '--tw-numeric-figure',
+        value: ' '
+    },
+    {
+        prop: '--tw-numeric-spacing',
+        value: ' '
+    },
+    {
+        prop: '--tw-numeric-fraction',
+        value: ' '
+    },
+    {
+        prop: '--tw-ring-inset',
+        value: ' '
+    },
+    {
+        prop: '--tw-ring-offset-width',
+        value: '0rpx'
+    },
+    {
+        prop: '--tw-ring-offset-color',
+        value: '#fff'
+    },
+    {
+        prop: '--tw-ring-color',
+        value: 'rgba(59, 130, 246, 0.5)'
+    },
+    {
+        prop: '--tw-ring-offset-shadow',
+        value: '0 0 #0000'
+    },
+    {
+        prop: '--tw-ring-shadow',
+        value: '0 0 #0000'
+    },
+    {
+        prop: '--tw-shadow',
+        value: '0 0 #0000'
+    },
+    {
+        prop: '--tw-shadow-colored',
+        value: '0 0 #0000'
+    },
+    {
+        prop: '--tw-blur',
+        value: ' '
+    },
+    {
+        prop: '--tw-brightness',
+        value: ' '
+    },
+    {
+        prop: '--tw-contrast',
+        value: ' '
+    },
+    {
+        prop: '--tw-grayscale',
+        value: ' '
+    },
+    {
+        prop: '--tw-hue-rotate',
+        value: ' '
+    },
+    {
+        prop: '--tw-invert',
+        value: ' '
+    },
+    {
+        prop: '--tw-saturate',
+        value: ' '
+    },
+    {
+        prop: '--tw-sepia',
+        value: ' '
+    },
+    {
+        prop: '--tw-drop-shadow',
+        value: ' '
+    },
+    {
+        prop: '--tw-backdrop-blur',
+        value: ' '
+    },
+    {
+        prop: '--tw-backdrop-brightness',
+        value: ' '
+    },
+    {
+        prop: '--tw-backdrop-contrast',
+        value: ' '
+    },
+    {
+        prop: '--tw-backdrop-grayscale',
+        value: ' '
+    },
+    {
+        prop: '--tw-backdrop-hue-rotate',
+        value: ' '
+    },
+    {
+        prop: '--tw-backdrop-invert',
+        value: ' '
+    },
+    {
+        prop: '--tw-backdrop-opacity',
+        value: ' '
+    },
+    {
+        prop: '--tw-backdrop-saturate',
+        value: ' '
+    },
+    {
+        prop: '--tw-backdrop-sepia',
+        value: ' '
+    }
+];
+
+const initialNodes = cssVars.map((x) => {
+    return new Declaration({
+        prop: x.prop,
+        value: x.value
+    });
+});
+const PATTERNS = [/:not\(template\)\s*~\s*:not\(template\)/.source, /:not\(\[hidden\]\)\s*~\s*:not\(\[hidden\]\)/.source].join('|');
+const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, 'g');
+function testIfVariablesScope(node, count = 1) {
+    if (/:?:before/.test(node.selector) && /:?:after/.test(node.selector)) {
+        for (let i = 0; i < count; i++) {
+            const tryTestDecl = node.nodes[i];
+            if (tryTestDecl && tryTestDecl.type === 'decl' && tryTestDecl.prop.startsWith('--tw-')) {
+                continue;
+            }
+            else {
+                return false;
+            }
+        }
+        return true;
+    }
+    return false;
+}
+function testIfTwBackdrop(node, count = 1) {
+    if (node.type === 'rule' && node.selector === '::backdrop') {
+        for (let i = 0; i < count; i++) {
+            const tryTestDecl = node.nodes[i];
+            if (tryTestDecl && tryTestDecl.type === 'decl' && tryTestDecl.prop.startsWith('--tw-')) {
+                continue;
+            }
+            else {
+                return false;
+            }
+        }
+        return true;
+    }
+    return false;
+}
+function makePseudoVarRule() {
+    const pseudoVarRule = new Rule({
+        selector: '::before,::after'
+    });
+    pseudoVarRule.append(new Declaration({
+        prop: '--tw-content',
+        value: '""'
+    }));
+    return pseudoVarRule;
+}
+function remakeCssVarSelector(selectors, cssPreflightRange) {
+    const idx = selectors.indexOf('*');
+    if (idx > -1) {
+        selectors.splice(idx, 1);
+    }
+    if (!selectors.includes('view')) {
+        selectors.push('view');
+    }
+    if (cssPreflightRange === 'all' &&
+        !selectors.includes(':not(not)')) {
+        selectors.push(':not(not)');
+    }
+    return selectors;
+}
+function remakeCombinatorSelector(selector, cssChildCombinatorReplaceValue) {
+    let childCombinatorReplaceValue = 'view + view';
+    if (Array.isArray(cssChildCombinatorReplaceValue)) {
+        const part = cssChildCombinatorReplaceValue.join(',');
+        childCombinatorReplaceValue = [part, ' + ', part].join('');
+    }
+    else if (typeof cssChildCombinatorReplaceValue === 'string') {
+        childCombinatorReplaceValue = cssChildCombinatorReplaceValue;
+    }
+    return selector.replaceAll(BROAD_MATCH_GLOBAL_REGEXP, childCombinatorReplaceValue);
+}
+function commonChunkPreflight(node, options) {
+    node.selector = remakeCombinatorSelector(node.selector, options.cssChildCombinatorReplaceValue);
+    if (testIfVariablesScope(node)) {
+        node.selectors = remakeCssVarSelector(node.selectors, options.cssPreflightRange);
+        node.before(makePseudoVarRule());
+        if (typeof options.cssInjectPreflight === 'function') {
+            node.append(...options.cssInjectPreflight());
+        }
+    }
+    if (options.injectAdditionalCssVarScope && testIfTwBackdrop(node)) {
+        const syntheticRule = new Rule({
+            selectors: ['::after', '::before'],
+            nodes: initialNodes
+        });
+        syntheticRule.selectors = remakeCssVarSelector(syntheticRule.selectors, options.cssPreflightRange);
+        node.before(syntheticRule);
+        node.before(makePseudoVarRule());
+        if (typeof options.cssInjectPreflight === 'function') {
+            syntheticRule.append(...options.cssInjectPreflight());
+        }
+    }
+}
+
+const postcssPlugin = 'postcss-weapp-tailwindcss-rename-plugin';
+const pluginName = 'weapp-tailwindcss-webpack-plugin';
+const vitePluginName = 'vite-plugin-uni-app-weapp-tailwindcss-adaptor';
+
+const postcssWeappTailwindcss = (options = {
+    isMainChunk: true
+}) => {
+    const { customRuleCallback, isMainChunk } = options;
+    const flag = typeof customRuleCallback === 'function';
+    return {
+        postcssPlugin,
+        Once(css) {
+            css.walkRules((rule) => {
+                transformSync(rule, options);
+                isMainChunk && commonChunkPreflight(rule, options);
+                flag && customRuleCallback(rule, options);
+            });
+        }
+    };
+};
+postcssWeappTailwindcss.postcss = true;
+
+export { pluginName as a, postcssWeappTailwindcss as p, vitePluginName as v };