GithubHelp home page GithubHelp logo

Comments (12)

lmihaidaniel avatar lmihaidaniel commented on May 18, 2024 2

that will do, was next on my to-do list

from rollup-plugin-postcss.

egoist avatar egoist commented on May 18, 2024 2

Fixed in v1.0.5

from rollup-plugin-postcss.

egoist avatar egoist commented on May 18, 2024 1

cc @lmihaidaniel maybe add styleInject: false to fix this?

from rollup-plugin-postcss.

egoist avatar egoist commented on May 18, 2024

Check out inject option in v1.0

from rollup-plugin-postcss.

ciampo avatar ciampo commented on May 18, 2024

Hi @egoist and @lmihaidaniel,

I tried to add the inject: false option, but I still get the __$$styleInject function added to my output code.

This is the configuration that I'm using:

//...
  plugins: [
    postcss({
      inject: false,
      plugins: [
        inlineSvg,
        autoprefixer({browsers: 'last 2 versions'}),
      ],
    }),

and this is the output code generated:

function __$$styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css) { return }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css = "[...]";
__$$styleInject(css);

Ideally, I'd just like to get rid of the __$$styleInject function definition and the __$$styleInject(css); call completely, keeping only var css = ....

Would that be possible?


EDIT: looking at the source code, it looks like the inferOption(option, defaultValue) function may not behave as expected: if the value of option is false (which is what I'm setting for the inject option), then its value is set to {} (see https://github.com/egoist/rollup-plugin-postcss/blob/master/src/index.js#L15)

from rollup-plugin-postcss.

ciampo avatar ciampo commented on May 18, 2024

It works now — thank you!

from rollup-plugin-postcss.

nikolay-borzov avatar nikolay-borzov commented on May 18, 2024

Could you please update README to mention this behavior?

from rollup-plugin-postcss.

egoist avatar egoist commented on May 18, 2024

@nikolay-borzov what needs To be updated? it's already in the options section.

from rollup-plugin-postcss.

nikolay-borzov avatar nikolay-borzov commented on May 18, 2024

Right, but it doesn't say that setting inject: false excludes styleInject and keeps varaible with CSS string

from rollup-plugin-postcss.

egoist avatar egoist commented on May 18, 2024

It will always export a variable with the CSS string unless extract: true, now mentioned it in usage: https://github.com/egoist/rollup-plugin-postcss#usage

from rollup-plugin-postcss.

nikolay-borzov avatar nikolay-borzov commented on May 18, 2024

Thanks!

from rollup-plugin-postcss.

alex996 avatar alex996 commented on May 18, 2024

Is there a way to get hold of the generated styles when modules: true? Currently, it only exposes the object with class names; I'd like the actual CSS too. If you set inject: false and modules: true, the CSS gets lost and is never bundled.

from rollup-plugin-postcss.

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.