@csstools/postcss-content-alt-text
v2.0.4
Published
Generate fallback values for content with alt text
Downloads
2,873,785
Readme
PostCSS Content Alt Text
npm install @csstools/postcss-content-alt-text --save-dev
PostCSS Content Alt Text generates fallback values for content
with alt text following the CSS Generated Content Module.
.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: ">" / "";
}
Usage
Add PostCSS Content Alt Text to your project:
npm install postcss @csstools/postcss-content-alt-text --save-dev
Use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssContentAltText = require('@csstools/postcss-content-alt-text');
postcss([
postcssContentAltText(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
Options
preserve
The preserve
option determines whether the original notation
is preserved. By default, it is preserved.
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
The stripAltText
option determines whether the alt text is removed from the value.
By default, it is not removed.
Instead it is added to the content
value itself to ensure content is accessible.
Only set this to true
if you are sure the alt text is not needed.
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: ">" / "";
}