PostCSS 叠加层

npm install @csstools/postcss-cascade-layers --save-dev

PostCSS 叠加层 让您使用 @layer 之后 分层规格。关于层的更多信息,请查看 CSS 叠加层完整指南 米里亚姆·苏珊娜著.

target {
    color: purple;
}

@layer {
    target {
        color: green;
    }
}


/* becomes */


target:not(#\#) {
    color: purple;
}

target {
        color: green;
    }

如何运作

PostCSS 叠加层 创造特异性的"层".

它对您所有的风格都应用了额外的特异性,基于:

• 找到最具体的选择器
• 定义地层的顺序

@layer A, B;

@layer B {
    .a-less-specific-selector {
        /* styles */
    }
}

@layer A {
    #something #very-specific {
        /* styles */
    }
}

@layer C {
    .a-less-specific-selector {
        /* styles */
    }
}

最具体的选择器 :

• #something #very-specific
• [2, 0, 0]
• 2 + 1 - > (中文) 3 确保没有重叠

层定义的顺序:

• A
• B
• C

这种方法让更重要的(后)层总是凌驾于不太重要的(更早)层上.
层层内部有足够的空间 让每个选取者按预期工作 并覆盖.

更多层次的特异性会更长 :not(...) 要生成的选择器 .

[大 PostCSS 叠加层 假设处理您的完整 CSS 捆绑.
如果您的构建工具单独处理文件或并行处理文件, 输出将是不正确的 .
使用 @csstools/postcss-bundler 财务报告和审定财务报表 @import 语句是在此插件处理之前确保您的 CSS 捆绑的一种方法 .

使用量

添加 PostCSS 叠加层 对您的项目:

npm install postcss @csstools/postcss-cascade-layers --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssCascadeLayers = require('@csstools/postcss-cascade-layers');

postcss([
    postcssCascadeLayers(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

选项

关于RevertLayer关键词

这个 onRevertLayerKeyword 选项启用警告,如果 revert-layer 已使用. 正在转换 revert-layer 对于此插件中较旧的浏览器是不可能实现的 .

默认为 warn

postcssCascadeLayers({ onRevertLayerKeyword: 'warn' }) // 'warn' | false

/* [postcss-cascade-layers]: handling "revert-layer" is unsupported by this plugin and will cause style differences between browser versions. */
@layer {
    .foo {
        color: revert-layer;
    }
}

关于有条件规则的变动

这个 onConditionalRulesChangingLayerOrder 如果在条件规则中以多个不同的顺序声明了地层,选项将启用警告. 在此插件中无法为旧浏览器正确转换这些层 .

默认为 warn

postcssCascadeLayers({ onConditionalRulesChangingLayerOrder: 'warn' }) // 'warn' | false

/* [postcss-cascade-layers]: handling different layer orders in conditional rules is unsupported by this plugin and will cause style differences between browser versions. */
@media (min-width: 10px) {
    @layer B {
        .foo {
            color: red;
        }
    }
}

@layer A {
    .foo {
        color: pink;
    }
}

@layer B {
    .foo {
        color: red;
    }
}

进口规则

这个 @import at-rule 也可以与级联层一起使用,具体用于创建类似的新层:

@import 'theme.css' layer(utilities);

如果您的 CSS 使用 @import 有层层,你还需要 邮政进口 插件 。 仅此插件无法处理 @import 规则.

此插件会在发现时提醒您 邮政进口 没有改变@import 规则.

postcssCascadeLayers({ onImportLayerRule: 'warn' }) // 'warn' | false

贡献者

此插件的作者是 奥卢·尼伊-阿沃苏西 财务报告和审定财务报表 萨娜·贾韦德 从 怪鸟 还有罗曼·门克.