π Check out my other work on Codepen π
radvalentin / postcss-prefix-selector Goto Github PK
View Code? Open in Web Editor NEWPrefix all CSS rules with a selector
License: MIT License
Prefix all CSS rules with a selector
License: MIT License
π Check out my other work on Codepen π
package.json
walkRules
instead of eachRule
(deprecated) hereHi there, thanks for this useful plugin!
From your other posts you seem very busy atm, so please do ignore this request until you have time. I could help by making a PR for this if you like the idea.
Right now the transform
callback only receives strings as parameters. It would be useful if it at least also received the postcss root node to support more complex filtering.
I would use this for adding a prefix, but only on the condition that the root has no comment /* !allGlobal */
as it's first node. This is already possible, but requires having to parse the file again.
How it could work:
// [...]
transform: function (prefix, selector, prefixedSelector, file, root) {
const rootNode = root.first;
// etc.:
if (rootNode.type === 'comment' && rootNode.text.trim().toLowerCase() === '!allglobal') {
return selector;
} else {
return prefixedSelector;
}
}
How I make this work now:
const fs = require('fs');
// [...]
transform: function (prefix, selector, prefixedSelector, file) {
const rootNode = postcss.parse(fs.readFileSync(file)).first;
// etc...
}
Thanks for your time. Good luck to you!
I have the following rule defined in my webpack.config:
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-prefix-selector',
{
prefix: '.___my-app',
},
],
],
},
},
},
'sass-loader',
];
}
]
};
It has been working great, but I just discovered a scenario where it will not scope styles. Let's say I have a React component and I have import './custom.scss';
at the top of the file. custom.scss
looks like this:
@import 'styles.css';
@import 'styles.scss';
Styles in styles.scss
WILL be scoped, but styles in styles.css
will NOT be scoped. The problem has to do with the use of @import
with *.css files because if I use import './styles.css';
directly in my React component, styles WILL be scoped.
Totally dig the transform
option you included. Any timeframe on when you'll be publishing to npm?
Like other postcss plugins (e.g. autoprefixer), this plugin should have postcss
as peerDependencies
in package.json.
I am having an issue prefixing some of my styles that are being generated with vue-cli. I only have one line configuring the postcss-prefix-selector
plugin:
prefix: '.my-wizard '
In the css output I can see the plugin correctly prefixed some of my styles. For example, this:
.bottom-border[data-v-843ce414]
Was transformed to this:
.my-wizard .bottom-border[data-v-843ce414]
However, styles that begin with the data attribute are getting transformed without a space after the prefix. For example, this:
[data-v-843ce414] .v-tab
Gets transformed to this:
.my-wizard[data-v-843ce414] .v-tab
The outputted style doesn't work correctly because it's missing a space after the prefix.
Is this a bug, or am I doing something incorrectly.
UPDATE
I think this may be an issue related to the order that this plugin runs compared to vue-loader. It seems that anytime the selector starts with a scoped style from one of my Vue files, this issue occurs. I am thinking maybe the data-
prefix hasn't been added yet when this plugin runs. Could that be true? I would have thought this loader would be processing the final css after vue-loader ads its own scoping.
The pseudo-class :root
is not well handled (a prefix is added)
prefixer({ prefix: '#app' }
and
:root {
--bs-blue:#0d6efd;
}
:root .a {
--bs-blue: #0d6ffd;
}
#app :root {
--bs-blue:#0d6efd;
}
#app :root .a {
--bs-blue: #0d6ffd;
}
#app {
--bs-blue:#0d6efd;
}
#app .a {
--bs-blue: #0d6ffd;
}
prefixer({
prefix: '#app',
transform: (prefix, selector, prefixedSelector) => {
const found = selector.match(/^\s*:root(\s+\S.*)?$/)
if (found) {
return found[1] === undefined ? prefix : `${prefix}${found[1]}`
}
return prefixedSelector
}
})
Hi, first at all thanks for the project
This is just what I need, but I don't know how to configure it properly, can you point me out how to setup the plugin using Parcel Bundler?
Does this support an array of source files?
var src = [one.css, two.css, three.css]
var css = fs.readFileSync(src, "utf8");
Could you add -ms-keyframes to the default exceptions array? It's possible to set old browsers support in autoprefixer.browsers but it do wrong compilations for -ms-keyframes cases
like what postcss-class-prefix does
In the code sample in the section Usage with PostCSS
, should the line
return 'body.' + prefix;
be
return 'body' + prefix;
?
Sorry if I'm not understanding properly! V useful project btw - has just saved me a big headache :-)
Source:
body {
background: red;
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
Result:
.my-prefix {
background: red;
}
@keyframes fade-out {
.my-prefix 0% {
opacity: 1;
}
.my-prefix 100% {
opacity: 0;
}
}
For some reason this utility is also prefixing the "selectors" inside the @Keyframes. Is there a way to ignore when inside this block (@Keyframes)?
While there is an exclude option, it would be great to also have a whitelist option where the prefix would only be added to the matching
I'm wondering if there is a reason that ignoreFiles
and includeFiles
are just (optional) string arrays instead of also accepting regex. This would be helpful because if you wanted to ignore/include all eg. Ant Design CSS files you could use regex where you targeted css files that started with antd
. You could also not have to deal with whether a CSS file was styles.css
or styles.min.css
.
If this would be a desirable enhancement, I could potentially try to fork the repo and create a PR.
was using this sucessfully before. now no more. I've tried everything. It's really bad since my project is relying on this.
"postcss-prefix-selector": "^1.6.0",
I've tried with the postcss.config.js
module.exports = {
parser: 'sugarss',
plugins: {
'postcss-prefix-selector': {
prefix: '.pjson ', // <--- notice the traililng space!
exclude: ['body', 'html']
}
}
};
and this webpack config:
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader?config=postcss.config.js',
options: {
ident: 'postcss',
plugins: () => [prefixer({
prefix: '.pjson ', // <--- notice the traililng space!
exclude: ['body', 'html']
})]
}
},
{
loader: 'autoprefixer-loader'
},
{
loader: 'sass-loader'
}
]
}
I've tried no postcss config...I've tried webpack 2.2, webpac 2.2.1, everything.
I've even tried
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: require.resolve('postcss-loader'),
options: {
plugins: () => [
prefixer({
prefix: '.pjson ', // <--- notice the traililng space!
exclude: ['body', 'html']
}),
autoprefixer({
browsers: ['last 4 versions']
})
]
}
},
{
loader: 'sass-loader'
}
]
},
I dont know why its not working. Its definitely not working. No errors...but also no prefixes...
Hi Guys,
this is not an issue, it's just a general question, cause i couldn't find any information about that.
In our project we are importing an third-party ui-components library. Is it possible to prefix all the css-selector from the used component library as well? Cause at the moment it seems like, its not doing that. If yes, how can i do that?
thanks for your time and best regards,
Quan
Right now the prefixer will process elements that can't be namespaced (body
and head
, maybe others). The workaround so far has been to use the transform
option added in #16 and let the user provide his own custom logic that deals with this.
It would be cool if the prefixer knew to handle these elements differently out of the box.
/* assuming the prefix is .hello we get the following */
// special cases
body -> body .hello
html -> html .hello
html body -> html body .hello
// prefixer works as usual for any other elements
div -> .hello div
I just noticed that the webpack doc isn't up to date with version 4 of postcss-loader.
There is a breaking change in the configuration format with postcssOptions
: https://github.com/webpack-contrib/postcss-loader/blob/master/CHANGELOG.md#-breaking-changes-1:
PostCSS (plugins/syntax/parser/stringifier) options was moved to the postcssOptions option
I see that there is already a PR about that: #83
By the way thanks for this plugin it was really useful to me
Starting to get such error with a minor update to [email protected].
Interesting how that happened (see that in deps, there where postcss 8 for a long time already).
Branch | Build failing π¨ |
---|---|
Dependency | husky |
Current Version | 0.13.2 |
Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
As husky is βonlyβ a devDependency of this project it might not break production or downstream projects, but βonlyβ your build or test tools β preventing new deploys or publishes.
I recommend you give this issue a high priority. Iβm sure you can resolve this πͺ
The new version differs by 9 commits .
4b5011e
0.13.3
6b92bb8
Comments
c6f8bb1
0.13.3-0
a2da709
Prefer nvm over Node global install
652c7f0
Update README.md
d05a7b3
Update README.md
0bb5798
Fix tests
7af95d3
update failure message (#107)
be435ca
Update CHANGELOG.md
See the full diff.
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot π΄
I apply the following prefix setting for 'sass'. But the output is not what I want. The '/' signs remain. And the text color is not red. Do I need to add another setting? I added the prefix setting as in the document, but I seem to be missing something.
it's not working.
prefix: "#single-spa-application:\\@kapital\\/dashboard"
output still has '/' signs.
#single-spa-application:\@kapital\/dashboard .deneme {
color: red;
}
prefix i need
#single-spa-application:@kapital/dashboard .deneme {
color: red;
}
but when I use it like this, SassError: SassError: Expected identifier. I get an error
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.