Giter VIP home page Giter VIP logo

Comments (6)

joewebdev avatar joewebdev commented on July 20, 2024 1

I would, unfortunately I don't have the time. But I'll try and if I have time I will. Thanks.

from postcss-prefix-selector.

joewebdev avatar joewebdev commented on July 20, 2024

i'm looking to do something like this. i'm using bootstrap, and don't want to add prefix to html/body. what is the logic used in the transform and should it go in webpack or postcss config?

from postcss-prefix-selector.

RadValentin avatar RadValentin commented on July 20, 2024

You can configure the plugin as part of a webpack config or of a postcss config, it just depends on how your project is structured.

The logic shouldn't be too complicated, it's already possible to have different output for body and html via the transform option, see this. What I'd like to happen is for this behavior to be a standard feature.

Would you like to try and add this functionality in a pull request?

from postcss-prefix-selector.

Tofandel avatar Tofandel commented on July 20, 2024

You could also just use exclude: ['html', 'body'] the plugin cannot assume where the prefix selector will be, sure this plugin is mostly used to prefix apps within the body, but what if the prefix is a class of the body or a class of html? Then adding the prefix after those elements wouldn't work

from postcss-prefix-selector.

simeonkerkola avatar simeonkerkola commented on July 20, 2024

@Tofandel In the case your prefix selector is set to html element, you could use the transform function to set the selector as a suffix.

<html class="my-selector">
prefixer({
  prefix: 'my-selector',
  transform(prefix, selector, prefixedSelector) {
    if (selector === 'html') {
      return `html${prefix}`
    }
    return prefixedSelector
  }
}),

from postcss-prefix-selector.

RadValentin avatar RadValentin commented on July 20, 2024

TODO: Add a default value to the exclude config option, exclude: ['html', 'body']

from postcss-prefix-selector.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.