PostCSS 内容替代文本

npm install @csstools/postcss-content-alt-text --save-dev

PostCSS 内容替代文本 生成后退值 content 将备选案文放在后面 CSS 生成内容模块。 。 。 .

.foo {
    content: url(tree.jpg) / "A beautiful tree in a dark forest";
}

.bar {
    content: ">" / "";
}

/* becomes */

.foo {
    content: url(tree.jpg)  "A beautiful tree in a dark forest";
    content: url(tree.jpg) / "A beautiful tree in a dark forest";
}

.bar {
    content: ">" ;
    content: ">" / "";
}

使用量

添加 PostCSS 内容替代文本 对您的项目:

npm install postcss @csstools/postcss-content-alt-text --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssContentAltText = require('@csstools/postcss-content-alt-text');

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

选项

保护

这个 preserve 选项决定原始标记是否 被保存下来。 默认保存.

postcssContentAltText({ preserve: false })

.foo {
    content: url(tree.jpg) / "A beautiful tree in a dark forest";
}

.bar {
    content: ">" / "";
}

/* becomes */

.foo {
    content: url(tree.jpg)  "A beautiful tree in a dark forest";
}

.bar {
    content: ">" ;
}

条形文字

这个 stripAltText 选项决定是否从数值中去除备选案文文本.
默认情况下,它不会被删除.
相反,它被添加到 content 价值本身可以确保内容无障碍.

只设定为 true 如果您确定不需要备选案文.

postcssContentAltText({ stripAltText: true })

.foo {
    content: url(tree.jpg) / "A beautiful tree in a dark forest";
}

.bar {
    content: ">" / "";
}

/* becomes */

.foo {
    content: url(tree.jpg) ;
    content: url(tree.jpg) / "A beautiful tree in a dark forest";
}

.bar {
    content: ">" ;
    content: ">" / "";
}