@weapp-tailwindcss/postcss 1.0.12 → 1.0.13-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,13 @@
1
+ import { PluginCreator } from 'postcss';
2
+
3
+ interface IOptions {
4
+ /** 当前编译平台 */
5
+ platform?: string;
6
+ /** 设置是否去除 cursor 相关样式 (h5默认值:true) */
7
+ removeCursorStyle?: boolean;
8
+ /** 是否移除 * 相关样式 */
9
+ removeUniversal?: boolean;
10
+ }
11
+ declare const postcssHtmlTransform: PluginCreator<IOptions>;
12
+
13
+ export { type IOptions, postcssHtmlTransform as default };
@@ -0,0 +1,15 @@
1
+ import { PluginCreator } from 'postcss';
2
+
3
+ interface IOptions {
4
+ /** 当前编译平台 */
5
+ platform?: string;
6
+ /** 设置是否去除 cursor 相关样式 (h5默认值:true) */
7
+ removeCursorStyle?: boolean;
8
+ /** 是否移除 * 相关样式 */
9
+ removeUniversal?: boolean;
10
+ }
11
+ declare const postcssHtmlTransform: PluginCreator<IOptions>;
12
+
13
+ // @ts-ignore
14
+ export = postcssHtmlTransform;
15
+ export type { IOptions };
@@ -0,0 +1,58 @@
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/html-transform.ts
2
+ var _process = require('process'); var _process2 = _interopRequireDefault(_process);
3
+ var _shared = require('@weapp-tailwindcss/shared');
4
+ var htmlTags = ["html", "body", "a", "audio", "button", "canvas", "form", "iframe", "img", "input", "label", "progress", "select", "slot", "textarea", "video", "abbr", "area", "b", "bdi", "big", "br", "cite", "code", "data", "datalist", "del", "dfn", "em", "i", "ins", "kbd", "map", "mark", "meter", "output", "picture", "q", "s", "samp", "small", "span", "strong", "sub", "sup", "td", "template", "th", "time", "tt", "u", "var", "wbr", "address", "article", "aside", "blockquote", "caption", "dd", "details", "dialog", "div", "dl", "dt", "fieldset", "figcaption", "figure", "footer", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hgroup", "hr", "legend", "li", "main", "nav", "ol", "p", "pre", "section", "summary", "table", "tbody", "tfoot", "thead", "tr", "ul", "svg"];
5
+ var miniAppTags = ["cover-image", "cover-view", "match-media", "movable-area", "movable-view", "page-container", "scroll-view", "share-element", "swiper", "swiper-item", "view", "icon", "progress", "rich-text", "text", "button", "checkbox", "checkbox-group", "editor", "form", "input", "keyboard-accessory", "label", "picker", "picker-view", "picker-view-column", "radio", "radio-group", "slider", "switch", "textarea", "functional-page-navigator", "navigator", "audio", "camera", "image", "live-player", "live-pusher", "video", "voip-room", "map", "canvas", "web-view", "ad", "ad-custom", "official-account", "open-data", "navigation-bar", "page-meta"];
6
+ var tags2Rgx = (tags = []) => new RegExp(`(^| |\\+|,|~|>|\\n)(${tags.join("|")})\\b(?=$| |\\.|\\+|,|~|:|\\[)`, "g");
7
+ var postcssHtmlTransform = (opts = {}) => {
8
+ const options = _shared.defu.call(void 0, opts, {
9
+ platform: _process2.default.env.TARO_ENV
10
+ });
11
+ let selectorFilter;
12
+ let walkRules;
13
+ switch (options.platform) {
14
+ case "h5": {
15
+ selectorFilter = tags2Rgx(miniAppTags);
16
+ walkRules = (rule) => {
17
+ rule.selector = rule.selector.replace(selectorFilter, "$1taro-$2-core");
18
+ };
19
+ break;
20
+ }
21
+ case "rn": {
22
+ break;
23
+ }
24
+ case "quickapp": {
25
+ break;
26
+ }
27
+ default: {
28
+ const selector = tags2Rgx(htmlTags);
29
+ walkRules = (rule) => {
30
+ if (options.removeUniversal && /(?:^| )\*(?![=/*])/.test(rule.selector)) {
31
+ rule.remove();
32
+ return;
33
+ }
34
+ rule.selector = rule.selector.replace(selector, "$1.h5-$2");
35
+ };
36
+ }
37
+ }
38
+ return {
39
+ postcssPlugin: "postcss-html-transform",
40
+ Rule(rule) {
41
+ _optionalChain([walkRules, 'optionalCall', _ => _(rule)]);
42
+ },
43
+ Declaration(decl) {
44
+ if (_optionalChain([options, 'optionalAccess', _2 => _2.removeCursorStyle])) {
45
+ if (decl.prop === "cursor") {
46
+ decl.remove();
47
+ }
48
+ }
49
+ }
50
+ };
51
+ };
52
+ postcssHtmlTransform.postcss = true;
53
+ var html_transform_default = postcssHtmlTransform;
54
+
55
+
56
+ exports.default = html_transform_default;
57
+
58
+ module.exports = exports.default;
@@ -0,0 +1,56 @@
1
+ // src/html-transform.ts
2
+ import process from "process";
3
+ import { defu } from "@weapp-tailwindcss/shared";
4
+ var htmlTags = ["html", "body", "a", "audio", "button", "canvas", "form", "iframe", "img", "input", "label", "progress", "select", "slot", "textarea", "video", "abbr", "area", "b", "bdi", "big", "br", "cite", "code", "data", "datalist", "del", "dfn", "em", "i", "ins", "kbd", "map", "mark", "meter", "output", "picture", "q", "s", "samp", "small", "span", "strong", "sub", "sup", "td", "template", "th", "time", "tt", "u", "var", "wbr", "address", "article", "aside", "blockquote", "caption", "dd", "details", "dialog", "div", "dl", "dt", "fieldset", "figcaption", "figure", "footer", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hgroup", "hr", "legend", "li", "main", "nav", "ol", "p", "pre", "section", "summary", "table", "tbody", "tfoot", "thead", "tr", "ul", "svg"];
5
+ var miniAppTags = ["cover-image", "cover-view", "match-media", "movable-area", "movable-view", "page-container", "scroll-view", "share-element", "swiper", "swiper-item", "view", "icon", "progress", "rich-text", "text", "button", "checkbox", "checkbox-group", "editor", "form", "input", "keyboard-accessory", "label", "picker", "picker-view", "picker-view-column", "radio", "radio-group", "slider", "switch", "textarea", "functional-page-navigator", "navigator", "audio", "camera", "image", "live-player", "live-pusher", "video", "voip-room", "map", "canvas", "web-view", "ad", "ad-custom", "official-account", "open-data", "navigation-bar", "page-meta"];
6
+ var tags2Rgx = (tags = []) => new RegExp(`(^| |\\+|,|~|>|\\n)(${tags.join("|")})\\b(?=$| |\\.|\\+|,|~|:|\\[)`, "g");
7
+ var postcssHtmlTransform = (opts = {}) => {
8
+ const options = defu(opts, {
9
+ platform: process.env.TARO_ENV
10
+ });
11
+ let selectorFilter;
12
+ let walkRules;
13
+ switch (options.platform) {
14
+ case "h5": {
15
+ selectorFilter = tags2Rgx(miniAppTags);
16
+ walkRules = (rule) => {
17
+ rule.selector = rule.selector.replace(selectorFilter, "$1taro-$2-core");
18
+ };
19
+ break;
20
+ }
21
+ case "rn": {
22
+ break;
23
+ }
24
+ case "quickapp": {
25
+ break;
26
+ }
27
+ default: {
28
+ const selector = tags2Rgx(htmlTags);
29
+ walkRules = (rule) => {
30
+ if (options.removeUniversal && /(?:^| )\*(?![=/*])/.test(rule.selector)) {
31
+ rule.remove();
32
+ return;
33
+ }
34
+ rule.selector = rule.selector.replace(selector, "$1.h5-$2");
35
+ };
36
+ }
37
+ }
38
+ return {
39
+ postcssPlugin: "postcss-html-transform",
40
+ Rule(rule) {
41
+ walkRules?.(rule);
42
+ },
43
+ Declaration(decl) {
44
+ if (options?.removeCursorStyle) {
45
+ if (decl.prop === "cursor") {
46
+ decl.remove();
47
+ }
48
+ }
49
+ }
50
+ };
51
+ };
52
+ postcssHtmlTransform.postcss = true;
53
+ var html_transform_default = postcssHtmlTransform;
54
+ export {
55
+ html_transform_default as default
56
+ };
package/dist/index.d.mts CHANGED
@@ -1,5 +1,5 @@
1
- import { I as IStyleHandlerOptions, a as InternalCssSelectorReplacerOptions } from './types-BuzFFGLX.mjs';
2
- export { d as CssPreflightOptions, C as CustomRuleCallback, b as IPropValue, L as LoadedPostcssOptions, R as RequiredStyleHandlerOptions, U as UserDefinedPostcssOptions, c as createInjectPreflight } from './types-BuzFFGLX.mjs';
1
+ import { I as IStyleHandlerOptions, a as InternalCssSelectorReplacerOptions } from './types-tu70dcVo.mjs';
2
+ export { d as CssPreflightOptions, C as CustomRuleCallback, b as IPropValue, L as LoadedPostcssOptions, R as RequiredStyleHandlerOptions, U as UserDefinedPostcssOptions, c as createInjectPreflight } from './types-tu70dcVo.mjs';
3
3
  import postcss from 'postcss';
4
4
  import '@weapp-tailwindcss/mangle';
5
5
  import 'postcss-load-config';
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { I as IStyleHandlerOptions, a as InternalCssSelectorReplacerOptions } from './types-BuzFFGLX.js';
2
- export { d as CssPreflightOptions, C as CustomRuleCallback, b as IPropValue, L as LoadedPostcssOptions, R as RequiredStyleHandlerOptions, U as UserDefinedPostcssOptions, c as createInjectPreflight } from './types-BuzFFGLX.js';
1
+ import { I as IStyleHandlerOptions, a as InternalCssSelectorReplacerOptions } from './types-tu70dcVo.js';
2
+ export { d as CssPreflightOptions, C as CustomRuleCallback, b as IPropValue, L as LoadedPostcssOptions, R as RequiredStyleHandlerOptions, U as UserDefinedPostcssOptions, c as createInjectPreflight } from './types-tu70dcVo.js';
3
3
  import postcss from 'postcss';
4
4
  import '@weapp-tailwindcss/mangle';
5
5
  import 'postcss-load-config';
package/dist/index.js CHANGED
@@ -150,11 +150,11 @@ function createRuleTransform(rule, options) {
150
150
  if (index === 0 && selector.length === 1) {
151
151
  selector.walk((node, idx) => {
152
152
  if (idx === 0 && node.type === "class") {
153
- const nodes = _optionalChain([node, 'access', _3 => _3.parent, 'optionalAccess', _4 => _4.nodes]);
154
- if (nodes) {
155
- const first = nodes[idx + 1];
153
+ const nodes2 = _optionalChain([node, 'access', _3 => _3.parent, 'optionalAccess', _4 => _4.nodes]);
154
+ if (nodes2) {
155
+ const first = nodes2[idx + 1];
156
156
  if (first && first.type === "combinator" && first.value === ">") {
157
- const second = nodes[idx + 2];
157
+ const second = nodes2[idx + 2];
158
158
  if (second && second.type === "pseudo" && second.value === ":not" && second.first.first.type === "pseudo" && second.first.first.value === ":last-child") {
159
159
  const ast = getCombinatorSelectorAst(options);
160
160
  second.replaceWith(
@@ -191,13 +191,13 @@ function createRuleTransform(rule, options) {
191
191
  }
192
192
  } else if (selector.type === "combinator") {
193
193
  if (selector.value === ">") {
194
- const nodes = _optionalChain([selector, 'access', _5 => _5.parent, 'optionalAccess', _6 => _6.nodes]);
195
- if (nodes) {
196
- const first = nodes[index + 1];
194
+ const nodes2 = _optionalChain([selector, 'access', _5 => _5.parent, 'optionalAccess', _6 => _6.nodes]);
195
+ if (nodes2) {
196
+ const first = nodes2[index + 1];
197
197
  if (first && first.type === "pseudo" && first.value === ":not" && (first.first.first.type === "attribute" && first.first.first.attribute === "hidden" || first.first.first.type === "tag" && first.first.first.value === "template")) {
198
- const second = nodes[index + 2];
198
+ const second = nodes2[index + 2];
199
199
  if (second && second.type === "combinator" && (second.value === "~" || second.value === "+")) {
200
- const third = nodes[index + 3];
200
+ const third = nodes2[index + 3];
201
201
  if (third && third.type === "pseudo" && third.value === ":not" && (third.first.first.type === "attribute" && third.first.first.attribute === "hidden" || third.first.first.type === "tag" && third.first.first.value === "template")) {
202
202
  const ast = getCombinatorSelectorAst(options);
203
203
  _optionalChain([selector, 'access', _7 => _7.parent, 'optionalAccess', _8 => _8.nodes, 'access', _9 => _9.splice, 'call', _10 => _10(
@@ -366,8 +366,8 @@ postcssWeappTailwindcssPostPlugin.postcss = true;
366
366
  // src/mp.ts
367
367
 
368
368
 
369
- // src/cssVars.ts
370
- var cssVars_default = [
369
+ // src/cssVarsV3.ts
370
+ var cssVarsV3_default = [
371
371
  {
372
372
  prop: "--tw-border-spacing-x",
373
373
  value: "0"
@@ -574,8 +574,152 @@ var cssVars_default = [
574
574
  }
575
575
  ];
576
576
 
577
+ // src/cssVarsV4.ts
578
+ function property(ident, initialValue, _syntax) {
579
+ return {
580
+ prop: ident,
581
+ value: initialValue || ""
582
+ };
583
+ }
584
+ var nullShadow = "0 0 #0000";
585
+ var nodes = [
586
+ // https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts#L1137
587
+ property("--tw-border-spacing-x", "0", "<length>"),
588
+ property("--tw-border-spacing-y", "0", "<length>"),
589
+ // https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts#L1205
590
+ property("--tw-translate-x", "0"),
591
+ property("--tw-translate-y", "0"),
592
+ property("--tw-translate-z", "0"),
593
+ // https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts#L1285
594
+ property("--tw-scale-x", "1"),
595
+ property("--tw-scale-y", "1"),
596
+ property("--tw-scale-z", "1"),
597
+ // https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts#L1424
598
+ property("--tw-rotate-x"),
599
+ property("--tw-rotate-y"),
600
+ property("--tw-rotate-z"),
601
+ property("--tw-skew-x"),
602
+ property("--tw-skew-y"),
603
+ // https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts#L1641C13-L1641C88
604
+ property("--tw-pan-x"),
605
+ property("--tw-pan-y"),
606
+ property("--tw-pinch-zoom"),
607
+ // https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts#L1688C38-L1688C95
608
+ property("--tw-scroll-snap-strictness", "proximity", "*"),
609
+ // https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts#L1688C38-L1688C95
610
+ property("--tw-space-x-reverse", "0"),
611
+ property("--tw-space-y-reverse", "0"),
612
+ // https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts#L2169C22-L2169C60
613
+ property("--tw-border-style", "solid"),
614
+ property("--tw-divide-x-reverse", "0"),
615
+ property("--tw-divide-y-reverse", "0"),
616
+ property("--tw-gradient-position", "initial"),
617
+ property("--tw-gradient-from", "#0000", "<color>"),
618
+ property("--tw-gradient-via", "#0000", "<color>"),
619
+ property("--tw-gradient-to", "#0000", "<color>"),
620
+ property("--tw-gradient-stops", "initial"),
621
+ property("--tw-gradient-via-stops", "initial"),
622
+ property("--tw-gradient-from-position", "0%", "<length-percentage>"),
623
+ property("--tw-gradient-via-position", "50%", "<length-percentage>"),
624
+ property("--tw-gradient-to-position", "100%", "<length-percentage>"),
625
+ property("--tw-mask-linear", "linear-gradient(#fff, #fff)"),
626
+ property("--tw-mask-radial", "linear-gradient(#fff, #fff)"),
627
+ property("--tw-mask-conic", "linear-gradient(#fff, #fff)"),
628
+ property("--tw-mask-left", "linear-gradient(#fff, #fff)"),
629
+ property("--tw-mask-right", "linear-gradient(#fff, #fff)"),
630
+ property("--tw-mask-bottom", "linear-gradient(#fff, #fff)"),
631
+ property("--tw-mask-top", "linear-gradient(#fff, #fff)"),
632
+ property("--tw-mask-linear-position", "0deg"),
633
+ property("--tw-mask-linear-from-position", "0%"),
634
+ property("--tw-mask-linear-to-position", "100%"),
635
+ property("--tw-mask-linear-from-color", "black"),
636
+ property("--tw-mask-linear-to-color", "transparent"),
637
+ property("--tw-mask-radial-from-position", "0%"),
638
+ property("--tw-mask-radial-to-position", "100%"),
639
+ property("--tw-mask-radial-from-color", "black"),
640
+ property("--tw-mask-radial-to-color", "transparent"),
641
+ property("--tw-mask-radial-shape", "ellipse"),
642
+ property("--tw-mask-radial-size", "farthest-corner"),
643
+ property("--tw-mask-radial-position", "center"),
644
+ property("--tw-mask-conic-position", "0deg"),
645
+ property("--tw-mask-conic-from-position", "0%"),
646
+ property("--tw-mask-conic-to-position", "100%"),
647
+ property("--tw-mask-conic-from-color", "black"),
648
+ property("--tw-mask-conic-to-color", "transparent"),
649
+ property("--tw-font-weight"),
650
+ property("--tw-blur"),
651
+ property("--tw-brightness"),
652
+ property("--tw-contrast"),
653
+ property("--tw-grayscale"),
654
+ property("--tw-hue-rotate"),
655
+ property("--tw-invert"),
656
+ property("--tw-opacity"),
657
+ property("--tw-saturate"),
658
+ property("--tw-sepia"),
659
+ property("--tw-drop-shadow"),
660
+ property("--tw-drop-shadow-color"),
661
+ property("--tw-drop-shadow-alpha", "100%", "<percentage>"),
662
+ property("--tw-drop-shadow-size"),
663
+ property("--tw-backdrop-blur"),
664
+ property("--tw-backdrop-brightness"),
665
+ property("--tw-backdrop-contrast"),
666
+ property("--tw-backdrop-grayscale"),
667
+ property("--tw-backdrop-hue-rotate"),
668
+ property("--tw-backdrop-invert"),
669
+ property("--tw-backdrop-opacity"),
670
+ property("--tw-backdrop-saturate"),
671
+ property("--tw-backdrop-sepia"),
672
+ property("--tw-duration", "initial"),
673
+ property("--tw-ease", "initial"),
674
+ property("--tw-content", '""'),
675
+ property("--tw-contain-size"),
676
+ property("--tw-contain-layout"),
677
+ property("--tw-contain-paint"),
678
+ property("--tw-contain-style"),
679
+ property("--tw-leading"),
680
+ property("--tw-tracking"),
681
+ property("--tw-ordinal"),
682
+ property("--tw-slashed-zero"),
683
+ property("--tw-numeric-figure"),
684
+ property("--tw-numeric-spacing"),
685
+ property("--tw-numeric-fraction"),
686
+ property("--tw-outline-style", "solid"),
687
+ property("--tw-text-shadow-color", "initial"),
688
+ property("--tw-text-shadow-alpha", "100%", "<percentage>"),
689
+ property("--tw-shadow", nullShadow),
690
+ property("--tw-shadow-color", "initial"),
691
+ property("--tw-shadow-alpha", "100%", "<percentage>"),
692
+ property("--tw-inset-shadow", nullShadow),
693
+ property("--tw-inset-shadow-color", "initial"),
694
+ property("--tw-inset-shadow-alpha", "100%", "<percentage>"),
695
+ property("--tw-ring-color"),
696
+ property("--tw-ring-shadow", nullShadow),
697
+ property("--tw-inset-ring-color"),
698
+ property("--tw-inset-ring-shadow", nullShadow),
699
+ // Legacy
700
+ property("--tw-ring-inset"),
701
+ property("--tw-ring-offset-width", "0px", "<length>"),
702
+ property("--tw-ring-offset-color", "#fff"),
703
+ property("--tw-ring-offset-shadow", nullShadow)
704
+ ];
705
+ for (const edge of ["top", "right", "bottom", "left"]) {
706
+ nodes.push(
707
+ property(`--tw-mask-${edge}-from-position`, "0%"),
708
+ property(`--tw-mask-${edge}-to-position`, "100%"),
709
+ property(`--tw-mask-${edge}-from-color`, "black"),
710
+ property(`--tw-mask-${edge}-to-color`, "transparent")
711
+ );
712
+ }
713
+ var cssVarsV4_default = nodes;
714
+
577
715
  // src/mp.ts
578
- var initialNodes = cssVars_default.map((x) => {
716
+ var cssVarsV3Nodes = cssVarsV3_default.map((x) => {
717
+ return new (0, _postcss.Declaration)({
718
+ prop: x.prop,
719
+ value: x.value
720
+ });
721
+ });
722
+ var cssVarsV4Nodes = cssVarsV4_default.map((x) => {
579
723
  return new (0, _postcss.Declaration)({
580
724
  prop: x.prop,
581
725
  value: x.value
@@ -583,9 +727,9 @@ var initialNodes = cssVars_default.map((x) => {
583
727
  });
584
728
  function testIfVariablesScope(node, count = 2) {
585
729
  if (isOnlyBeforeAndAfterPseudoElement(node)) {
586
- const nodes = node.nodes;
730
+ const nodes2 = node.nodes;
587
731
  let c = 0;
588
- for (const tryTestDecl of nodes) {
732
+ for (const tryTestDecl of nodes2) {
589
733
  if (tryTestDecl && tryTestDecl.type === "decl" && tryTestDecl.prop.startsWith("--tw-")) {
590
734
  c++;
591
735
  }
@@ -599,9 +743,9 @@ function testIfVariablesScope(node, count = 2) {
599
743
  }
600
744
  function testIfTwBackdrop(node, count = 2) {
601
745
  if (node.type === "rule" && node.selector === "::backdrop") {
602
- const nodes = node.nodes;
746
+ const nodes2 = node.nodes;
603
747
  let c = 0;
604
- for (const tryTestDecl of nodes) {
748
+ for (const tryTestDecl of nodes2) {
605
749
  if (tryTestDecl && tryTestDecl.type === "decl" && tryTestDecl.prop.startsWith("--tw-")) {
606
750
  c++;
607
751
  }
@@ -613,6 +757,9 @@ function testIfTwBackdrop(node, count = 2) {
613
757
  }
614
758
  return false;
615
759
  }
760
+ function testIfRootHostForV4(node) {
761
+ return node.type === "rule" && node.selector.includes(":root") && node.selector.includes(":host");
762
+ }
616
763
  function makePseudoVarRule() {
617
764
  const pseudoVarRule = new (0, _postcss.Rule)({
618
765
  // selectors: ['::before', '::after'],
@@ -654,10 +801,11 @@ function commonChunkPreflight(node, options) {
654
801
  node.append(...cssInjectPreflight());
655
802
  }
656
803
  }
657
- if (injectAdditionalCssVarScope && testIfTwBackdrop(node)) {
804
+ const isTailwindcss4 = options.majorVersion === 4;
805
+ if (injectAdditionalCssVarScope && (isTailwindcss4 ? testIfRootHostForV4(node) : testIfTwBackdrop(node))) {
658
806
  const syntheticRule = new (0, _postcss.Rule)({
659
807
  selectors: ["*", "::after", "::before"],
660
- nodes: initialNodes
808
+ nodes: isTailwindcss4 ? cssVarsV4Nodes : cssVarsV3Nodes
661
809
  });
662
810
  syntheticRule.selectors = remakeCssVarSelector(syntheticRule.selectors, options);
663
811
  node.before(syntheticRule);
@@ -731,7 +879,7 @@ var postcssWeappTailwindcssPrePlugin = (options) => {
731
879
  };
732
880
  postcssWeappTailwindcssPrePlugin.postcss = true;
733
881
 
734
- // ../../node_modules/.pnpm/@csstools+postcss-is-pseudo-class@5.0.1_postcss@8.5.3/node_modules/@csstools/postcss-is-pseudo-class/dist/index.mjs
882
+ // ../../node_modules/.pnpm/@csstools+postcss-is-pseudo-class@5.0.1_postcss@8.5.4/node_modules/@csstools/postcss-is-pseudo-class/dist/index.mjs
735
883
 
736
884
 
737
885
  // ../../node_modules/.pnpm/@csstools+selector-specificity@5.0.0_postcss-selector-parser@7.1.0/node_modules/@csstools/selector-specificity/dist/index.mjs
@@ -839,7 +987,7 @@ function selectorNodeContainsNothingOrOnlyUniversal(e3) {
839
987
  return 0 === t2.length || 1 === t2.length && "universal" === t2[0].type;
840
988
  }
841
989
 
842
- // ../../node_modules/.pnpm/@csstools+postcss-is-pseudo-class@5.0.1_postcss@8.5.3/node_modules/@csstools/postcss-is-pseudo-class/dist/index.mjs
990
+ // ../../node_modules/.pnpm/@csstools+postcss-is-pseudo-class@5.0.1_postcss@8.5.4/node_modules/@csstools/postcss-is-pseudo-class/dist/index.mjs
843
991
  function alwaysValidSelector(s) {
844
992
  const o2 = _postcssselectorparser2.default.call(void 0, ).astSync(s);
845
993
  let t2 = true;
package/dist/index.mjs CHANGED
@@ -150,11 +150,11 @@ function createRuleTransform(rule, options) {
150
150
  if (index === 0 && selector.length === 1) {
151
151
  selector.walk((node, idx) => {
152
152
  if (idx === 0 && node.type === "class") {
153
- const nodes = node.parent?.nodes;
154
- if (nodes) {
155
- const first = nodes[idx + 1];
153
+ const nodes2 = node.parent?.nodes;
154
+ if (nodes2) {
155
+ const first = nodes2[idx + 1];
156
156
  if (first && first.type === "combinator" && first.value === ">") {
157
- const second = nodes[idx + 2];
157
+ const second = nodes2[idx + 2];
158
158
  if (second && second.type === "pseudo" && second.value === ":not" && second.first.first.type === "pseudo" && second.first.first.value === ":last-child") {
159
159
  const ast = getCombinatorSelectorAst(options);
160
160
  second.replaceWith(
@@ -191,13 +191,13 @@ function createRuleTransform(rule, options) {
191
191
  }
192
192
  } else if (selector.type === "combinator") {
193
193
  if (selector.value === ">") {
194
- const nodes = selector.parent?.nodes;
195
- if (nodes) {
196
- const first = nodes[index + 1];
194
+ const nodes2 = selector.parent?.nodes;
195
+ if (nodes2) {
196
+ const first = nodes2[index + 1];
197
197
  if (first && first.type === "pseudo" && first.value === ":not" && (first.first.first.type === "attribute" && first.first.first.attribute === "hidden" || first.first.first.type === "tag" && first.first.first.value === "template")) {
198
- const second = nodes[index + 2];
198
+ const second = nodes2[index + 2];
199
199
  if (second && second.type === "combinator" && (second.value === "~" || second.value === "+")) {
200
- const third = nodes[index + 3];
200
+ const third = nodes2[index + 3];
201
201
  if (third && third.type === "pseudo" && third.value === ":not" && (third.first.first.type === "attribute" && third.first.first.attribute === "hidden" || third.first.first.type === "tag" && third.first.first.value === "template")) {
202
202
  const ast = getCombinatorSelectorAst(options);
203
203
  selector.parent?.nodes.splice(
@@ -366,8 +366,8 @@ import { defu as defu2 } from "@weapp-tailwindcss/shared";
366
366
  // src/mp.ts
367
367
  import { Declaration, Rule } from "postcss";
368
368
 
369
- // src/cssVars.ts
370
- var cssVars_default = [
369
+ // src/cssVarsV3.ts
370
+ var cssVarsV3_default = [
371
371
  {
372
372
  prop: "--tw-border-spacing-x",
373
373
  value: "0"
@@ -574,8 +574,152 @@ var cssVars_default = [
574
574
  }
575
575
  ];
576
576
 
577
+ // src/cssVarsV4.ts
578
+ function property(ident, initialValue, _syntax) {
579
+ return {
580
+ prop: ident,
581
+ value: initialValue || ""
582
+ };
583
+ }
584
+ var nullShadow = "0 0 #0000";
585
+ var nodes = [
586
+ // https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts#L1137
587
+ property("--tw-border-spacing-x", "0", "<length>"),
588
+ property("--tw-border-spacing-y", "0", "<length>"),
589
+ // https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts#L1205
590
+ property("--tw-translate-x", "0"),
591
+ property("--tw-translate-y", "0"),
592
+ property("--tw-translate-z", "0"),
593
+ // https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts#L1285
594
+ property("--tw-scale-x", "1"),
595
+ property("--tw-scale-y", "1"),
596
+ property("--tw-scale-z", "1"),
597
+ // https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts#L1424
598
+ property("--tw-rotate-x"),
599
+ property("--tw-rotate-y"),
600
+ property("--tw-rotate-z"),
601
+ property("--tw-skew-x"),
602
+ property("--tw-skew-y"),
603
+ // https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts#L1641C13-L1641C88
604
+ property("--tw-pan-x"),
605
+ property("--tw-pan-y"),
606
+ property("--tw-pinch-zoom"),
607
+ // https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts#L1688C38-L1688C95
608
+ property("--tw-scroll-snap-strictness", "proximity", "*"),
609
+ // https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts#L1688C38-L1688C95
610
+ property("--tw-space-x-reverse", "0"),
611
+ property("--tw-space-y-reverse", "0"),
612
+ // https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts#L2169C22-L2169C60
613
+ property("--tw-border-style", "solid"),
614
+ property("--tw-divide-x-reverse", "0"),
615
+ property("--tw-divide-y-reverse", "0"),
616
+ property("--tw-gradient-position", "initial"),
617
+ property("--tw-gradient-from", "#0000", "<color>"),
618
+ property("--tw-gradient-via", "#0000", "<color>"),
619
+ property("--tw-gradient-to", "#0000", "<color>"),
620
+ property("--tw-gradient-stops", "initial"),
621
+ property("--tw-gradient-via-stops", "initial"),
622
+ property("--tw-gradient-from-position", "0%", "<length-percentage>"),
623
+ property("--tw-gradient-via-position", "50%", "<length-percentage>"),
624
+ property("--tw-gradient-to-position", "100%", "<length-percentage>"),
625
+ property("--tw-mask-linear", "linear-gradient(#fff, #fff)"),
626
+ property("--tw-mask-radial", "linear-gradient(#fff, #fff)"),
627
+ property("--tw-mask-conic", "linear-gradient(#fff, #fff)"),
628
+ property("--tw-mask-left", "linear-gradient(#fff, #fff)"),
629
+ property("--tw-mask-right", "linear-gradient(#fff, #fff)"),
630
+ property("--tw-mask-bottom", "linear-gradient(#fff, #fff)"),
631
+ property("--tw-mask-top", "linear-gradient(#fff, #fff)"),
632
+ property("--tw-mask-linear-position", "0deg"),
633
+ property("--tw-mask-linear-from-position", "0%"),
634
+ property("--tw-mask-linear-to-position", "100%"),
635
+ property("--tw-mask-linear-from-color", "black"),
636
+ property("--tw-mask-linear-to-color", "transparent"),
637
+ property("--tw-mask-radial-from-position", "0%"),
638
+ property("--tw-mask-radial-to-position", "100%"),
639
+ property("--tw-mask-radial-from-color", "black"),
640
+ property("--tw-mask-radial-to-color", "transparent"),
641
+ property("--tw-mask-radial-shape", "ellipse"),
642
+ property("--tw-mask-radial-size", "farthest-corner"),
643
+ property("--tw-mask-radial-position", "center"),
644
+ property("--tw-mask-conic-position", "0deg"),
645
+ property("--tw-mask-conic-from-position", "0%"),
646
+ property("--tw-mask-conic-to-position", "100%"),
647
+ property("--tw-mask-conic-from-color", "black"),
648
+ property("--tw-mask-conic-to-color", "transparent"),
649
+ property("--tw-font-weight"),
650
+ property("--tw-blur"),
651
+ property("--tw-brightness"),
652
+ property("--tw-contrast"),
653
+ property("--tw-grayscale"),
654
+ property("--tw-hue-rotate"),
655
+ property("--tw-invert"),
656
+ property("--tw-opacity"),
657
+ property("--tw-saturate"),
658
+ property("--tw-sepia"),
659
+ property("--tw-drop-shadow"),
660
+ property("--tw-drop-shadow-color"),
661
+ property("--tw-drop-shadow-alpha", "100%", "<percentage>"),
662
+ property("--tw-drop-shadow-size"),
663
+ property("--tw-backdrop-blur"),
664
+ property("--tw-backdrop-brightness"),
665
+ property("--tw-backdrop-contrast"),
666
+ property("--tw-backdrop-grayscale"),
667
+ property("--tw-backdrop-hue-rotate"),
668
+ property("--tw-backdrop-invert"),
669
+ property("--tw-backdrop-opacity"),
670
+ property("--tw-backdrop-saturate"),
671
+ property("--tw-backdrop-sepia"),
672
+ property("--tw-duration", "initial"),
673
+ property("--tw-ease", "initial"),
674
+ property("--tw-content", '""'),
675
+ property("--tw-contain-size"),
676
+ property("--tw-contain-layout"),
677
+ property("--tw-contain-paint"),
678
+ property("--tw-contain-style"),
679
+ property("--tw-leading"),
680
+ property("--tw-tracking"),
681
+ property("--tw-ordinal"),
682
+ property("--tw-slashed-zero"),
683
+ property("--tw-numeric-figure"),
684
+ property("--tw-numeric-spacing"),
685
+ property("--tw-numeric-fraction"),
686
+ property("--tw-outline-style", "solid"),
687
+ property("--tw-text-shadow-color", "initial"),
688
+ property("--tw-text-shadow-alpha", "100%", "<percentage>"),
689
+ property("--tw-shadow", nullShadow),
690
+ property("--tw-shadow-color", "initial"),
691
+ property("--tw-shadow-alpha", "100%", "<percentage>"),
692
+ property("--tw-inset-shadow", nullShadow),
693
+ property("--tw-inset-shadow-color", "initial"),
694
+ property("--tw-inset-shadow-alpha", "100%", "<percentage>"),
695
+ property("--tw-ring-color"),
696
+ property("--tw-ring-shadow", nullShadow),
697
+ property("--tw-inset-ring-color"),
698
+ property("--tw-inset-ring-shadow", nullShadow),
699
+ // Legacy
700
+ property("--tw-ring-inset"),
701
+ property("--tw-ring-offset-width", "0px", "<length>"),
702
+ property("--tw-ring-offset-color", "#fff"),
703
+ property("--tw-ring-offset-shadow", nullShadow)
704
+ ];
705
+ for (const edge of ["top", "right", "bottom", "left"]) {
706
+ nodes.push(
707
+ property(`--tw-mask-${edge}-from-position`, "0%"),
708
+ property(`--tw-mask-${edge}-to-position`, "100%"),
709
+ property(`--tw-mask-${edge}-from-color`, "black"),
710
+ property(`--tw-mask-${edge}-to-color`, "transparent")
711
+ );
712
+ }
713
+ var cssVarsV4_default = nodes;
714
+
577
715
  // src/mp.ts
578
- var initialNodes = cssVars_default.map((x) => {
716
+ var cssVarsV3Nodes = cssVarsV3_default.map((x) => {
717
+ return new Declaration({
718
+ prop: x.prop,
719
+ value: x.value
720
+ });
721
+ });
722
+ var cssVarsV4Nodes = cssVarsV4_default.map((x) => {
579
723
  return new Declaration({
580
724
  prop: x.prop,
581
725
  value: x.value
@@ -583,9 +727,9 @@ var initialNodes = cssVars_default.map((x) => {
583
727
  });
584
728
  function testIfVariablesScope(node, count = 2) {
585
729
  if (isOnlyBeforeAndAfterPseudoElement(node)) {
586
- const nodes = node.nodes;
730
+ const nodes2 = node.nodes;
587
731
  let c = 0;
588
- for (const tryTestDecl of nodes) {
732
+ for (const tryTestDecl of nodes2) {
589
733
  if (tryTestDecl && tryTestDecl.type === "decl" && tryTestDecl.prop.startsWith("--tw-")) {
590
734
  c++;
591
735
  }
@@ -599,9 +743,9 @@ function testIfVariablesScope(node, count = 2) {
599
743
  }
600
744
  function testIfTwBackdrop(node, count = 2) {
601
745
  if (node.type === "rule" && node.selector === "::backdrop") {
602
- const nodes = node.nodes;
746
+ const nodes2 = node.nodes;
603
747
  let c = 0;
604
- for (const tryTestDecl of nodes) {
748
+ for (const tryTestDecl of nodes2) {
605
749
  if (tryTestDecl && tryTestDecl.type === "decl" && tryTestDecl.prop.startsWith("--tw-")) {
606
750
  c++;
607
751
  }
@@ -613,6 +757,9 @@ function testIfTwBackdrop(node, count = 2) {
613
757
  }
614
758
  return false;
615
759
  }
760
+ function testIfRootHostForV4(node) {
761
+ return node.type === "rule" && node.selector.includes(":root") && node.selector.includes(":host");
762
+ }
616
763
  function makePseudoVarRule() {
617
764
  const pseudoVarRule = new Rule({
618
765
  // selectors: ['::before', '::after'],
@@ -654,10 +801,11 @@ function commonChunkPreflight(node, options) {
654
801
  node.append(...cssInjectPreflight());
655
802
  }
656
803
  }
657
- if (injectAdditionalCssVarScope && testIfTwBackdrop(node)) {
804
+ const isTailwindcss4 = options.majorVersion === 4;
805
+ if (injectAdditionalCssVarScope && (isTailwindcss4 ? testIfRootHostForV4(node) : testIfTwBackdrop(node))) {
658
806
  const syntheticRule = new Rule({
659
807
  selectors: ["*", "::after", "::before"],
660
- nodes: initialNodes
808
+ nodes: isTailwindcss4 ? cssVarsV4Nodes : cssVarsV3Nodes
661
809
  });
662
810
  syntheticRule.selectors = remakeCssVarSelector(syntheticRule.selectors, options);
663
811
  node.before(syntheticRule);
@@ -731,7 +879,7 @@ var postcssWeappTailwindcssPrePlugin = (options) => {
731
879
  };
732
880
  postcssWeappTailwindcssPrePlugin.postcss = true;
733
881
 
734
- // ../../node_modules/.pnpm/@csstools+postcss-is-pseudo-class@5.0.1_postcss@8.5.3/node_modules/@csstools/postcss-is-pseudo-class/dist/index.mjs
882
+ // ../../node_modules/.pnpm/@csstools+postcss-is-pseudo-class@5.0.1_postcss@8.5.4/node_modules/@csstools/postcss-is-pseudo-class/dist/index.mjs
735
883
  import e2 from "postcss-selector-parser";
736
884
 
737
885
  // ../../node_modules/.pnpm/@csstools+selector-specificity@5.0.0_postcss-selector-parser@7.1.0/node_modules/@csstools/selector-specificity/dist/index.mjs
@@ -839,7 +987,7 @@ function selectorNodeContainsNothingOrOnlyUniversal(e3) {
839
987
  return 0 === t2.length || 1 === t2.length && "universal" === t2[0].type;
840
988
  }
841
989
 
842
- // ../../node_modules/.pnpm/@csstools+postcss-is-pseudo-class@5.0.1_postcss@8.5.3/node_modules/@csstools/postcss-is-pseudo-class/dist/index.mjs
990
+ // ../../node_modules/.pnpm/@csstools+postcss-is-pseudo-class@5.0.1_postcss@8.5.4/node_modules/@csstools/postcss-is-pseudo-class/dist/index.mjs
843
991
  function alwaysValidSelector(s) {
844
992
  const o2 = e2().astSync(s);
845
993
  let t2 = true;
@@ -50,6 +50,7 @@ type IStyleHandlerOptions = {
50
50
  media?: boolean;
51
51
  };
52
52
  uniAppX?: boolean;
53
+ majorVersion?: number;
53
54
  } & RequiredStyleHandlerOptions;
54
55
  interface UserDefinedPostcssOptions {
55
56
  cssPreflight?: CssPreflightOptions;
@@ -50,6 +50,7 @@ type IStyleHandlerOptions = {
50
50
  media?: boolean;
51
51
  };
52
52
  uniAppX?: boolean;
53
+ majorVersion?: number;
53
54
  } & RequiredStyleHandlerOptions;
54
55
  interface UserDefinedPostcssOptions {
55
56
  cssPreflight?: CssPreflightOptions;
package/dist/types.d.mts CHANGED
@@ -3,4 +3,4 @@ import 'postcss';
3
3
  import 'postcss-load-config';
4
4
  import 'postcss-preset-env';
5
5
  import 'postcss-rem-to-responsive-pixel';
6
- export { d as CssPreflightOptions, C as CustomRuleCallback, b as IPropValue, I as IStyleHandlerOptions, a as InternalCssSelectorReplacerOptions, L as LoadedPostcssOptions, R as RequiredStyleHandlerOptions, U as UserDefinedPostcssOptions } from './types-BuzFFGLX.mjs';
6
+ export { d as CssPreflightOptions, C as CustomRuleCallback, b as IPropValue, I as IStyleHandlerOptions, a as InternalCssSelectorReplacerOptions, L as LoadedPostcssOptions, R as RequiredStyleHandlerOptions, U as UserDefinedPostcssOptions } from './types-tu70dcVo.mjs';
package/dist/types.d.ts CHANGED
@@ -3,4 +3,4 @@ import 'postcss';
3
3
  import 'postcss-load-config';
4
4
  import 'postcss-preset-env';
5
5
  import 'postcss-rem-to-responsive-pixel';
6
- export { d as CssPreflightOptions, C as CustomRuleCallback, b as IPropValue, I as IStyleHandlerOptions, a as InternalCssSelectorReplacerOptions, L as LoadedPostcssOptions, R as RequiredStyleHandlerOptions, U as UserDefinedPostcssOptions } from './types-BuzFFGLX.js';
6
+ export { d as CssPreflightOptions, C as CustomRuleCallback, b as IPropValue, I as IStyleHandlerOptions, a as InternalCssSelectorReplacerOptions, L as LoadedPostcssOptions, R as RequiredStyleHandlerOptions, U as UserDefinedPostcssOptions } from './types-tu70dcVo.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@weapp-tailwindcss/postcss",
3
- "version": "1.0.12",
3
+ "version": "1.0.13-beta.1",
4
4
  "description": "@weapp-tailwindcss/postcss",
5
5
  "author": "ice breaker <1324318532@qq.com>",
6
6
  "license": "MIT",
@@ -24,7 +24,13 @@
24
24
  "types": "./dist/types.d.ts",
25
25
  "import": "./dist/types.mjs",
26
26
  "require": "./dist/types.js"
27
- }
27
+ },
28
+ "./html-transform": {
29
+ "types": "./dist/html-transform.d.ts",
30
+ "import": "./dist/html-transform.mjs",
31
+ "require": "./dist/html-transform.js"
32
+ },
33
+ "./package.json": "./package.json"
28
34
  },
29
35
  "main": "./dist/index.js",
30
36
  "module": "./dist/index.mjs",
@@ -34,8 +40,8 @@
34
40
  ],
35
41
  "dependencies": {
36
42
  "@weapp-core/escape": "~4.0.1",
37
- "postcss": "~8.5.3",
38
- "postcss-preset-env": "^10.1.6",
43
+ "postcss": "~8.5.4",
44
+ "postcss-preset-env": "^10.2.0",
39
45
  "postcss-rem-to-responsive-pixel": "~6.0.2",
40
46
  "postcss-selector-parser": "~7.1.0",
41
47
  "@weapp-tailwindcss/shared": "1.0.2"