PostCSS 彩色函数显示 P3 线性

npm install @csstools/postcss-color-function-display-p3-linear --save-dev

PostCSS 彩色函数显示 P3 线性 让你使用 display-p3-linear 颜色空间 color 函数在 支助科,随 CSS 颜色 规格.

.color {
    color: color(display-p3-linear 0.3081 0.014 0.0567);
}

:root {
    --a-color: color(display-p3-linear 0.3081 0.014 0.0567);
}

/* becomes */

.color {
    color: color(display-p3 0.59096 0.12316 0.26409);
}

:root {
    --a-color: color(display-p3 0.59096 0.12316 0.26409);
}

使用量

添加 PostCSS 彩色函数显示 P3 线性 对您的项目:

npm install postcss @csstools/postcss-color-function-display-p3-linear --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssColorFunctionDisplayP3Linear = require('@csstools/postcss-color-function-display-p3-linear');

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

选项

保护

这个 preserve 选项决定原始标记是否 被保存下来。 默认情况下,它没有被保存.

postcssColorFunctionDisplayP3Linear({ preserve: true })

.color {
    color: color(display-p3-linear 0.3081 0.014 0.0567);
}

:root {
    --a-color: color(display-p3-linear 0.3081 0.014 0.0567);
}

/* becomes */

.color {
    color: color(display-p3 0.59096 0.12316 0.26409);
    color: color(display-p3-linear 0.3081 0.014 0.0567);
}

:root {
    --a-color: color(display-p3 0.59096 0.12316 0.26409);
}

@supports (color: color(display-p3-linear 0 0 0)) {
:root {
    --a-color: color(display-p3-linear 0.3081 0.014 0.0567);
}
}

启用渐进自定义收益

这个 enableProgressiveCustomProperties 选项决定原始标记是否 包裹着 @supports 当使用自定义属性时。 默认情况下, 它被启用 .

[注] 我们只建议在您准备好的时候取消这个 preserve 改为 false 或者你带了自定义属性的修补.
查看插件在其中的用途 读取。 。 。 .

postcssColorFunctionDisplayP3Linear({ enableProgressiveCustomProperties: false })

.color {
    color: color(display-p3-linear 0.3081 0.014 0.0567);
}

:root {
    --a-color: color(display-p3-linear 0.3081 0.014 0.0567);
}

/* becomes */

.color {
    color: color(display-p3 0.59096 0.12316 0.26409);
    color: color(display-p3-linear 0.3081 0.014 0.0567);
}

:root {
    --a-color: color(display-p3 0.59096 0.12316 0.26409);
    --a-color: color(display-p3-linear 0.3081 0.014 0.0567);
}

自定义属性不回落到上一个声明

版权:颜色转换

本软件或文件包括复制自或衍生自 https://github.com/w3c/cswg-draps/tree/main/cs-color-4 互联网档案馆的存檔,存档日期2014-12-12. 版权:"2022 W3C" (MIT, ERCIM, Keio, Beihan).