radvalentin / postcss-prefix-selector Goto Github PK

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)?

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

• Check using this plugin works with new postcss-loader config and postcss 7, otherwise bump dependency
• Include new option for ignoring certain files
• Add test to check that using ignore option doesn't exclude any valid files

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 :-)

like what postcss-class-prefix does

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

Does this support an array of source files?

var src = [one.css, two.css, three.css]
var css = fs.readFileSync(src, "utf8");

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

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

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?

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.

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).

• upgrade dependencies in package.json
• use walkRules instead of eachRule(deprecated) here
• parse selectors array instead of splitting here
• submit plugin to postcss.parts

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.

Hi 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.

Request

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.

Example use-case

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 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

Like other postcss plugins (e.g. autoprefixer), this plugin should have postcss as peerDependencies in package.json.

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

The pseudo-class :root is not well handled (a prefix is added)

Input

prefixer({ prefix: '#app' }

and

:root {
  --bs-blue:#0d6efd;
}
:root .a {
  --bs-blue: #0d6ffd;
}

Current result

#app :root {
  --bs-blue:#0d6efd;
}
#app :root .a {
  --bs-blue: #0d6ffd;
}

Expected

 #app {
  --bs-blue:#0d6efd;
}
#app .a {
  --bs-blue: #0d6ffd;
}

Current work around

  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
      }
  })

Version 0.13.3 of husky just got published.

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 💪

Your Greenkeeper Bot 🌴

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.

• Find a way to load the plugin and run it in a web interface so potential users can easily inspect the output
• Build a few demos for common usecases

Totally dig the transform option you included. Any timeframe on when you'll be publishing to npm?

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...