
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-plugin-context
Advanced tools
Limit a PostCSS processor to a local stylesheet context.
With npm do:
npm install postcss-plugin-context --save
This plugin is useful should you need to contextualize another processor inside
your CSS file. For example, postcss-map
will allow you to specify a short
syntax if only one file is specified. Using this module, we can limit the scope
of the transform to be of our choice, rather than the module's. In this example,
only the first ruleset is actually passed to postcss-map, and the rest of the
CSS file is untouched.
Simply define a @context
block inside your CSS file, such as:
@context brandColors {
h1 {
color: map(primary);
}
}
Then, the plugin will work on the brandColors
context. The @context
block is
removed automatically for you after the fact.
var postcss = require('postcss');
var map = require('postcss-map');
var context = require('postcss-plugin-context');
var css = '@context brandColors { h1 { color: map(primary) } } h2 { color: map(primary) }';
console.log(postcss([
context({
brandColors: map({
maps: ['brand.yml']
})
})
]).process(css).css);
// => 'h1 { color: red } h2 { color: map(primary) }'
Note that you can pass multiple processors to a single context block:
h1 {
@context brandColors, size {
color: map(primary);
size: 100px;
}
}
Outputs:
h1 {
color: red;
width: 100px;
height: 100px;
}
Note that a context may also be defined across a whole file; if you specify
@context
without curly braces. For example:
@context size;
h1 {
size: 100px;
}
Outputs:
h1 {
width: 100px;
height: 100px;
}
Type: object
Required value.
Pass an object of processors to contextualize.
context({
brandColors: map({maps: ['brand.yml']})
size: require('postcss-size')
});
Pull requests are welcome. If you add functionality, then please add unit tests to cover it.
MIT © Ben Briggs
FAQs
Limit a PostCSS processor to a local stylesheet context.
The npm package postcss-plugin-context receives a total of 292 weekly downloads. As such, postcss-plugin-context popularity was classified as not popular.
We found that postcss-plugin-context demonstrated a not healthy version release cadence and project activity because the last version was released 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.