PostCSS 渐进自定义属性

PostCSS 渐进自定义属性 是正确声明自定义属性倒置和增强的实用插件.

[尖叫声] 它无意被样式表作者直接使用 . 将包含在其他 PostCSS 插件中,提供 CSS 值转换为倒置.

自定义属性在无效时不会像常规声明一样被丢弃 . 这使得为更古老的浏览器提供倒置值变得棘手.

解决办法是将自定义财产申报包装在 @supports 规则.

:root {
    /* fallback */
    --a-color: red;
    /* progressive enhancement */
    --a-color: oklch(40% 0.234 0.39 / var(--opacity-50));
}

/* becomes */

:root {
    --a-color: red;
}

@supports (color: oklch(0% 0 0)) {
    :root {
        --a-color: oklch(40% 0.234 0.39 / var(--opacity-50));
    }
}

被忽略的数值

initial 财务报告和审定财务报表 <white space> 被忽略.

.initial {
    --prop-1: red;
    --prop-1: initial;
}

.white-space {
    --prop-1: red;
    --prop-1:;

    --prop-2: red;
    --prop-2: ;

    --prop-3: red;
    --prop-3:    ;
}

/* remains */

.initial {
    --prop-1: red;
    --prop-1: initial;
}

.white-space {
    --prop-1: red;
    --prop-1:;

    --prop-2: red;
    --prop-2: ;

    --prop-3: red;
    --prop-3:    ;
}

使用量

添加 PostCSS 渐进自定义属性 对您的项目:

npm install @csstools/postcss-progressive-custom-properties --save-dev

使用 PostCSS 渐进自定义属性 作为 邮政 插件 :

const postcss = require('postcss');
const postcssCustomProperties = require('@csstools/postcss-progressive-custom-properties');

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

@ supports (帮助)

此插件将自定义属性包起来, 覆盖声明在一个 @supports 规则. 有了PostCSS 8,这个触发声明访问者再次跑.

确定您的插件检测和忽略相关值 @supports 规则.

读取列表

• https://moderncs.dev/how-custom-property-values-are-computed/ (中文(中国大陆) )

PostCSS 渐进自定义属性 在所有节点环境中运行,并有下列特殊指令: