Optional StyleInject — just the compiled CSS as an output

[ciampo]

I'm trying to use this plugin to compile the styles of a Web Component.

These are the relevant bits of code in the JS entry point:

import styles from './styles.css';
// ...
template.innerHTML = `<style>${styles}</style> ${html}`;

As you can see, I just need the imported styles to be the compiled CSS string, but so far I haven't managed to get rid of the call to the __$styleInject function.

Is there a way to obtain, as an output, just the processed CSS string?

[egoist]

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

[lmihaidaniel]

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

[egoist]

Check out inject option in v1.0

[ciampo]

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)

[egoist]

Fixed in v1.0.5

[ciampo]

It works now — thank you!

[nikolay-borzov]

Could you please update README to mention this behavior?

[egoist]

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

[nikolay-borzov]

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

[egoist]

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

[nikolay-borzov]

Thanks!

[alex996]

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.