@csstools/postcss-content-alt-text

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";
}

/* becomes */

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

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 */);

PostCSS Content Alt Text runs in all Node environments, with special instructions for:

• Node
• PostCSS CLI
• PostCSS Load Config
• Webpack
• Next.js
• Gulp
• Grunt

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";
}

/* becomes */

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

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";
}

/* becomes */

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