浏览器嵌套兼容处理

GBVFtou2025-10-09 15:29

背景

使用tailwindcss 替代sass less 使用嵌套语法如何处理

问题

1. 内部系统win7操作系统 chrome最高支持108.

2. caniuse 图

css 复制代码

.a{
   .b
}

.a{
    & .b{
    }
}

.a{
    &.b{
    }
}

@nest .a .b { color: red; }

分析

postcss-preset-env

里面用到 postcss-nesting

postcss-nested 兼容类Sass嵌套
postcss-nesting

处理标准Css嵌套
@tailwindcss/nesting
tailwindcss/nesting

js 复制代码

    1.引用 postcss-nested
    const _postcss = /*#__PURE__*/ _interop_require_default(require("postcss"));
const _postcssnested = /*#__PURE__*/ _interop_require_default(require("postcss-nested"));
    2.处理 screen apply 兼容tailwindcss
       root.walkAtRules("screen", (rule)=>{
            rule.name = "media";
            rule.params = `screen(${rule.params})`;
        });
        root.walkAtRules("apply", (rule)=>{
            rule.before(_postcss.default.decl({
                prop: "__apply",
                value: rule.params,
                source: rule.source
            }));
            rule.remove();
        });
    
    3.调用 postcss-nested
     (0, _postcss.default)([
            plugin
        ]).process(root, result.opts).sync();
    4。清空脏修改
          root.walkDecls("__apply", (decl)=>{
            decl.before(_postcss.default.atRule({
                name: "apply",
                params: decl.value,
                source: decl.source
            }));
            decl.remove();
        });

1.node_modules/tailwindcss/nesting' is not supported resolving ES modules imported esm

使用tailwindcss/nesting/index

2.postcss-nested 与 tailwindcss 冲突

使用tailwindcss/postcss-nested

最终方案

js 复制代码

export default {
  plugins: [
    dep.postcssImport(),
    dep.tailwindcssNesting(dep.postcssNesting),
    dep.tailwindcssNesting(dep.postcssNested),
    dep.tailwindcss(
      dep.path.resolve(path.config, "./style/postcss/tailwindcss/base.ts")
    ),
    dep.postcssPresetEnv({
      stage: 0,
      features: { "nesting-rules": false },
    }),
    placeCssValue(),
    dep.autoprefixer(),
  ],
};

注意插件执行顺序导入->nest->tw->preset->autoprefix autoprefix可能多余未验证