This plugin separates declarations into those that contain colors and those that do not.
npm install postcss-color-extractor
npm install postcss-color-extractor
`
Then, you can include it in your PostCSS configuration file, example of webpack configuration
`js
const colorExtractor = require("postcss-color-extractor");
...
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
colorExtractor({
extract: input => {
console.log(input.toResult(), input.source?.input?.file);
}
})
]
}
}
}
`
This plugin has several options that can be passed in as an object:
* The extract option is a callback function that takes as a parameter the extracted part of the data (a new selector containing declarations with colors). The function does not return any value.
* includeResultInOutput: a boolean that determines whether the extracted parts should be included in the final CSS output or not.
* mergeMode: a string that sets the merge mode of the selectors, can be "merge" or "before"
* mergeType: a string that sets the merge type, can be "className", "attribute", "id", "tag"
* mergeValue: a string | null that sets the merge value, it will be added to mergeType, null - disable merging
* removeFromSelector: an array of objects containing a type and a match property, the plugin will remove the parts of selectors that match the type and match properties.
* saveInputRules`: a boolean that determines whether the input rules should be saved in the output or not.