Back slashes added?

[kevinSuttle]

Any ideas on what could be causing this? I'm not sure it's this plugin, to be honest.

 postcss: function () {
      return [
        require('postcss-import')({
          addDependencyTo: webpack,
        }),
        customProperties({
          preserve: true,
        }),
        cssApply,
        autoprefixer,
      ]
    },

[kevinSuttle]

I even removed :root and still the back slashes were added.

[kevinSuttle]

There seems to be some issue with colons as well. When I don't add them after the "mixins" declared under :root (e.g. --ThemeAnimationStyles), the rules below :root are not eval'd.

[pascalduez]

Hi,

are you sure the @apply plugin is executed actually?
Because property sets declarations are supposed to be removed from final output.

Or most probably it's because the slash is added to the declaration before the plugin runs, which breaks its "detection", so nothing happens.

I would advise to always add colons at the end of the declaration.
I will add more tests for this.

Can you set-up a small repo to be able to reproduce/debug?

[kevinSuttle]

The plugin is running, because the styles are being applied. Let me see if I can set up a small test repo.

[kevinSuttle]

@pascalduez Here you go: https://cloudup.com/cLsnx9RtW82 See README for repro steps.

[kevinSuttle]

The plugin is running, because the styles are being applied.

Odd. I noticed that they're being applied in Chrome, but not Safari.

[kevinSuttle]

Yeah, something's up for sure, because changing the buttons.css file doesn't change anything in Chrome, even though Webpack is "rebuilding".

[kevinSuttle]

Maybe it's this?

postcss/postcss-import#223

[pascalduez]

@kevinSuttle Is this issue still relevant?

[pascalduez]

I tried fiddling with the provided repo for an hour or so, I could not get any progress.
Looks like the postcss plugins are not even applied/called.
By default storybook will use its own webpack config, so no surprise the plugins aren't used.
I added a custom webpack config for storybook but same result.

Next step would be to try without storybook, just "plain" webpack and an index.html.

I'm using cssnext on a projet with webpack n' stuff and have no issue BTW.

[kevinSuttle]

@pascalduez I haven't seen it reproduced. Thanks for checking into it. I appreciate you taking the time.

[kevinSuttle]

Seeing this again now.
I'm now using:

• https://github.com/sebastian-software/postcss-smart-import
• https://github.com/postcss/postcss-custom-properties/
• Webpack 2.1.0-beta.22

Button.css

:root {
  \--ThemeButtonStyles: {
    @apply --ThemeAnimationStyles;
...
}

webpack.config.js

postcss: function() {
      return [
        atImport({
           addDependencyTo: webpack,
           path: './src/Index.css',
           plugins: [
              customProperties({preserve: true}),
              cssApply,
              autoprefixer
          ]
        }),
      ]
    },

[pascalduez]

This is concerning enough, even if Webpack 2 is still in beta. Re-opening.