
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
postcss-modules-values-replace
Advanced tools
PostCSS plugin to work around CSS Modules values limitations
PostCSS plugin to work around CSS Modules values limitations.
Replaces CSS Modules @values just as postcss-modules-values does, but without help of css-loader, so it could be used before other PostCSS plugins like postcss-calc.
Example:
/* constants.css */
@value unit: 8px;
@value footer-height: calc(unit * 5);
/* my-components.css */
@value unit, footer-height from "./constants.css";
@value component-height: calc(unit * 10);
.my-component {
padding: unit;
margin-top: footer-height;
height: component-height;
}
yields my-components.css
:
@value unit, footer-height from "./constants.css";
@value component-height: calc(8px * 10);
.my-component {
padding: 8px;
margin-top: calc(8px * 5);
height: calc(8px * 10);
}
and leads to export of following values to JS:
{
"unit": "8px",
"footer-height": "calc(8px * 5)",
"component-height": "calc(8px * 10)",
...
}
See how to export computed values in usage with calc
example below.
Place it before other plugins:
postcss([ require('postcss-modules-values-replace'), require('postcss-calc') ]);
When using from webpack, pass its file system in postcss.config.js
form:
module.exports = (ctx) => ({
plugins: [
require('postcss-modules-values-replace')({fs: ctx.webpack._compiler.inputFileSystem}),
require('postcss-calc'),
]
});
See PostCSS docs for other examples for your environment.
Object
File system to use. To make it faster in webpack pass its file system to plugin. Cached Node's file system is used by default.
Object
enhanced-resolve's configuration object, see there for possible options and defaults.
boolean
When enabled @value rules/declarations will be removed from the emitted output
Input:
@value myBrandColor blue;
@font-face {}
body { background: myBrandColor }
Output:
@font-face {}
body { background: blue }
boolean
When enabled, permit plugins defined earlier in the PostCSS pipeline to modify @value
declarations before they are recorded by this plugin.
boolean
When enabled, value imports will be resolved as module requests, in line with css-loader
's resolution logic as of 2.0.0.
If your code is written with pre-2.0 import syntax, and utilises postcss-modules-tilda for compatibility, this option is not required.
boolean
When enabled, value usage within rule selectors will also be replaced by this plugin.
Array<string>
You can pass a list of at-rules in which @value
's should be replaced. Only @media
rules will be processed by default.
Note that passed array isn't merged with default ['media']
but overwrites it, so you'll need to include all the rules you want to be processed.
postcss([
require('postcss-modules-values-replace')({ atRules: ['media', 'container'] })
]);
Input:
@value $tables from './breakpoints.css';
@container (width >= $tablet) {}
Output:
@container (width >= 768px) {}
To enable calculations inside @value, enable media queries support in postcss-calc:
postcss([
require('postcss-modules-values-replace'),
require('postcss-calc')({mediaQueries: true})
])
or via postcss-cssnext:
postcss([
require('postcss-modules-values-replace'),
require('postcss-cssnext')({features: {calc: {mediaQueries: true}}})
])
Example with calc
enabled:
/* constants.css */
@value unit: 8px;
@value footer-height: calc(unit * 5);
/* my-components.css */
@value unit, footer-height from "./constants.css";
@value component-height: calc(unit * 10);
.my-component {
padding: unit;
margin-top: footer-height;
height: component-height;
}
yields my-components.css
:
@value unit, footer-height from "./constants.css";
@value component-height: 80px;
.my-component {
padding: 8px;
margin-top: 40px;
height: 80px;
}
and leads to export of following values to JS:
{
"unit": "8px",
"footer-height": "40px",
"component-height": "80px",
...
}
postcss-calc and postcss-color-function are known to work inside @value as they traverse media queries. Experience with other plugins may differ if they ignore media queries.
This plugin provides to postcss a custom messages object with type: 'values'
.
The values
property of that object will contain all the extracted values with all substitution performed (i.e. for values that reference other values).
See modules-values-extract for an example of how this can be used.
Node.js 6.5 or above is recomended.
ISC
Code is mostly taken from postcss-modules-values by Glen Maddern, Mark Dalgleish and other contributors.
FAQs
PostCSS plugin to work around CSS Modules values limitations
The npm package postcss-modules-values-replace receives a total of 41,576 weekly downloads. As such, postcss-modules-values-replace popularity was classified as popular.
We found that postcss-modules-values-replace demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.