[2.0.5] Output CSS Reversed/Jumbled

[skipjack]

I'm seeing a weird issue with the output from this loader. I can't share the actual code/output but this is essentially what's happening:

prior to loading

.some-class {
  display: flex;
  flex-direction: column;
  color: black;

  &--mod {
    color: white;
  }
}

after loading

.some-class--mod {
  color: white;
}
.some-class {
  display: flex;
  flex-direction: column;
  color: black;
}

It's not all an exact reverse, but most of it is and the rest just seems randomly jumbled. Obviously this screws up the cascade (i.e. when some-class and some-class--mod are applied to the same element, the color is black instead of white).

Here are the plugins I'm using postcss-import, postcss-modular-scale, postcss-cssnext, and postcss-nested.

[michael-ciniawsky]

webpack.config.js && postcss.config.js please 😛

[skipjack]

That I can do 👍

webpack.config.js (excluding non css-related bits)

// Imports...

module.exports = (env = {}) => ({
    // ...

    module: {
        loaders: [
            // ...
            { 
                test: /\.css$/, 
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        'css-loader',
                        'postcss-loader' 
                    ]
                })
            }
        ]
    },

    plugins: [
        // ...
        new ExtractTextPlugin({
            filename: '[name].[contenthash].css',
            allChunks: true,
            disable: env.dev === true
        })
    ],

    // ...
})

.postcssrc.js

module.exports = {
    plugins: [
        require('postcss-import'),
        require('postcss-modular-scale'),
        require('postcss-cssnext'),
        require('postcss-nested')
    ]
}

Haven't checked extract text output yet although I'm pretty sure it'd be the same. I'm seeing this with env.dev set to true (i.e. when the ExtractTextPlugin is disabled.

[michael-ciniawsky]

As a heads up postcss-nested v2.0.0 (6 hours ago) maybe related to the PostCSS v6.0.0 major bump in postcss-loader

cssnext ships with it's own nesting plugin included postcss-nesting, so maybe try with/without cssnext and put postcss-nested before cssnext in the plugin chain :)

[skipjack]

Thanks I'll try that and report back.

[michael-ciniawsky]

postcss/postcss-nested#52

Released in postcss-nested v2.0.1

[michael-ciniawsky]

Resolved 🙃 ? No rush, but there is another bug which is to 💯 in postcss-loader, otherwise
please try the fix branch and provide feedback 😛 npm i -D postcss/postcss-loader#fix

[skipjack]

Haven't tested yet but let's close and, if anything, I'll re-open if the postcss-nested fix doesn't work.

[skipjack]

I tried that fix (upgraded both this loader as well as postcss-nested) and I'm still seeing the issue unfortunately. Digging around a bit to see if someone has opened a ticket for this in one one of the other plugins I'm using but it doesn't look like it.

cssnext ships with it's own nesting plugin included postcss-nesting, so maybe try with/without cssnext and put postcss-nested before cssnext in the plugin chain :)

Yeah, however we are using the &__element and &--modifier rules to follow BEM which require also adding postcss-nested. I did try messing with the order of plugins which didn't seem to have an effect.

My gut feeling is that it must be either this package or postcss-nested that's causing this issue. I'll open an issue over there as well.

[skipjack]

Also tried blowing away all node_modules and re-installing from scratch with no luck. I'll keep testing and see if I can nail it down to one thing.

[alexander-akait]

@skipjack try to npm cache clear and remove node_modules and again npm i

[skipjack]

Ok I'm pretty sure it is this package that's causing the issue. It happens when I upgrade just loader.

@evilebottnawi tried that as well with no luck, thanks though.

[alexander-akait]

@skipjack can your create minimal test repo? Seems it is related to postcss plugin. I don't see any logic in loader related to this problem.

[skipjack]

Yeah I can do that.

[skipjack]

As promised: postcss-issue-demo

[skipjack]

I'm happy to close this issue and move it elsewhere once we determine the root cause of the problem.

[michael-ciniawsky]

@skipjack

PostCSS Issue Demo

package.json (The most likely case)

- "postcss-nested": "^1.0.0",
+ "postcss-nested": "^2.x",

The most likely reason ☝️ 😛 since postcss-nested =< v1.0.0 is incompatible with postcss-loader >= v2.0.0 bc of a PostCSS 6. I can confirm this, it broke my stuff aswell 🙃

.postcssrc.js

module.exports = {
    plugins: [
        require('postcss-import'),
        require('postcss-modular-scale'),
+       require('postcss-nested') // Maybe you don't need it, 
        require('postcss-cssnext'), // because I include postcss-nesting :),
-       require('postcss-nested') // but postcss-nested [SASS] !== postcss-nesting [CSSWG Spec]
    ]
}

You need to test that, if it worked before all good ¯_(ツ)_/¯, but it could be related to postcss-nesting aswell, which may also has eventual incompabilities with PostCSS 6 API atm.

[skipjack]

Unfortunately that doesn't fix it, I had tried that locally when I first experienced the issue. See this commit I just pushed in the demo repo. The ordering issue still remains.

I think postcss-nesting wouldn't affect it, as postcss-nesting only allows & .class not class concatenation with the parent (i.e. &--modifier). @ai have you had a chance to look at that demo yet (no pressure, just curious)?

@michael-ciniawsky I guess it could be another one of the plugins that somehow isn't compatible with updated postcss under this package.

[ai]

Nope. I will look in next few hours.

[michael-ciniawsky]

@skipjack It's cssnext (postcss-nesting) @see MoOx/postcss-cssnext#374 either disable cssnext for now or take the risk that other plugins maybe flanky aswell, postcss-nested && postcss-loader are working fine

[skipjack]

Awesome, thanks for all of your help! Sorry I didn't pick up on this earlier.

[michael-ciniawsky]

It worked with cssnext in this small example as you can see in the screenshot, but it doesn't really use any other cssnext features besides nesting so be really ⚠️ using it :D

[skipjack]

Yeah, I subscribed to that cssnext issue and will wait to upgrade everything until that's complete.