Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
postcss-prefix-selector
Advanced tools
Readme
Prefix every CSS selector with a custom namespace
.a => .prefix .a
$ npm install postcss-prefix-selector
const prefixer = require('postcss-prefix-selector')
// css to be processed
const css = fs.readFileSync("input.css", "utf8")
const out = postcss().use(prefixer({
prefix: '.some-selector',
exclude: ['.c'],
// Optional transform callback for case-by-case overrides
transform: function (prefix, selector, prefixedSelector, filePath, rule) {
if (selector === 'body') {
return 'body' + prefix;
} else {
return prefixedSelector;
}
}
})).process(css).css
Using the options above and the CSS below...
body {
background: red;
}
.a, .b {
color: aqua;
}
.c {
color: coral;
}
You will get the following output
body.some-selector {
background: red;
}
.some-selector .a, .some-selector .b {
color: aqua;
}
.c {
color: coral;
}
Use it like you'd use any other PostCSS plugin. If you also have autoprefixer
in your webpack config then make sure that postcss-prefix-selector
is called first. This is needed to avoid running the prefixer twice on both standard selectors and vendor specific ones (ex: @keyframes
and @webkit-keyframes
).
module: {
rules: [{
test: /\.css$/,
use: [
require.resolve('style-loader'),
require.resolve('css-loader'),
{
loader: require.resolve('postcss-loader'),
options: {
postcssOptions: {
plugins: {
"postcss-prefix-selector": {
prefix: '.my-prefix',
transform(prefix, selector, prefixedSelector, filePath, rule) {
if (selector.match(/^(html|body)/)) {
return selector.replace(/^([^\s]*)/, `$1 ${prefix}`);
}
if (filePath.match(/node_modules/)) {
return selector; // Do not prefix styles imported from node_modules
}
const annotation = rule.prev();
if (annotation?.type === 'comment' && annotation.text.trim() === 'no-prefix') {
return selector; // Do not prefix style rules that are preceded by: /* no-prefix */
}
return prefixedSelector;
},
},
autoprefixer: {
browsers: ['last 4 versions']
}
}
}
}
}
]
}]
}
Following the same way of Webpack but for Vite:
import prefixer from 'postcss-prefix-selector';
import autoprefixer from 'autoprefixer';
...
export default defineConfig({
...
css: {
postcss: {
plugins: [
prefixer({
prefix: '.my-prefix',
transform(prefix, selector, prefixedSelector, filePath, rule) {
if (selector.match(/^(html|body)/)) {
return selector.replace(/^([^\s]*)/, `$1 ${prefix}`);
}
if (filePath.match(/node_modules/)) {
return selector; // Do not prefix styles imported from node_modules
}
const annotation = rule.prev();
if (annotation?.type === 'comment' && annotation.text.trim() === 'no-prefix') {
return selector; // Do not prefix style rules that are preceded by: /* no-prefix */
}
return prefixedSelector;
},
}),
autoprefixer({}) // add options if needed
],
}
},
...
});
Name | Type | Description |
---|---|---|
prefix | string | This string is added before every CSS selector |
exclude | string[] or RegExp[] | It's possible to avoid prefixing some selectors by passing an array of selectors |
transform | Function | In cases where you may want to use the prefix differently for different selectors, it is possible to pass in a custom transform method |
ignoreFiles | string[] or RegExp[] | List of ignored files for processing |
includeFiles | string[] or RegExp[] | List of included files for processing |
This project was originally created by @jongleberry and is being maintained by @RadValentin. If you have any questions, feel free to ping the latter.
Please contribute! If you have any questions or bugs, open an issue. Or, open a pull request with a fix.
This project uses Mocha. If you submit a PR, please add appropriate tests and make sure that everything is green for your branch.
MIT © 2015-2022 Jonathan Ong.
FAQs
Prefix all CSS rules with a selector
The npm package postcss-prefix-selector receives a total of 253,093 weekly downloads. As such, postcss-prefix-selector popularity was classified as popular.
We found that postcss-prefix-selector demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers 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.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.