@csstools/postcss-global-data
v3.0.0
Published
PostCSS plugin to define global data that will be injected into PostCSS for use in other plugins.
Downloads
1,095,571
Readme
PostCSS Global Data
npm install @csstools/postcss-global-data --save-dev
PostCSS Global Data lets you inject CSS that is removed again before the final output. This is useful for plugins that use global CSS as data.
For example, in the case of CSS Modules with PostCSS Custom Media, rules are usually not imported by every single file, so PostCSS Custom Media cannot generate fallbacks. By providing a list of files, this plugin will inject the global CSS as data so that PostCSS Custom Media can generate fallbacks.
It is important that PostCSS Global Data is used before the plugin that actually needs the data.
Please note that PostCSS Global Data does not add anything to the output of your CSS. It only injects data into PostCSS so that other plugins can actually use it.
Usage
Add PostCSS Global Data to your project:
npm install postcss @csstools/postcss-global-data --save-dev
Use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssGlobalData = require('@csstools/postcss-global-data');
postcss([
postcssGlobalData(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
PostCSS Global Data runs in all Node environments, with special instructions for:
Options
files
The files
option determines which files to inject into PostCSS.
postcssGlobalData({
files: [
'./src/css/variables.css',
'./src/css/media-queries.css',
],
});