Importing nested css is not transpired

[amir20]

Hello, I am new to PostCSS. I am getting a strange behavior with this module which I expect it to work. I have a simple project that looks like:

• app.js
• app.css
• header.css

app.js

import "app.css"

app.css

@import "~normalize.css"
@import "./header.css"

header.css

header {
  & h1 { ... }
}

The issue is that header.css is never transpiled. I was using webpack2 at first but then I gave up and started using webpack1 and I still see the same problem.

Including header.css from app.js does work.

webpack.config.js

const webpack = require("webpack");
const path = require("path");
const ExtractTextPlugin = require('extract-text-webpack-plugin');


module.exports = {
    context: __dirname + "/themes/amirraminfar",
    entry: {
        app: "./static/js/app.js"
    },
    output: {
        path: __dirname + "/themes/amirraminfar/static/js/",
        filename: "[name].bundle.js",
    },
    resolve: {
        alias: {
            jquery: "jquery/src/jquery"
        }
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        }, {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'postcss-loader')
        }]
    },
    postcss: function(webpack) {
        return [
            require('postcss-import')({
                addDependencyTo: webpack
            }),
            require("postcss-cssnext")(),
            require('lost'),
            require('postcss-font-magician')()
        ]
    },
    plugins: [
        new ExtractTextPlugin("../css/[name].bundle.css"),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            'window.jQuery': 'jquery'
        }),
    ]
};

What am I doing wrong?

[MoOx]

What am I doing wrong?

loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'postcss-loader')

should be

loader: ExtractTextPlugin.extract('style-loader', [ 'css-loader', 'postcss-loader' ])
// or
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')

[amir20]

Hey thanks for the response. But that didn't work. I simplified my example and put it on https://github.com/amir20/example-bug-326.

The broken output is here, and I have modified webpack.config.js as you suggested. I also tried css-loader!postcss-loader. Same result :(

Could this be a bug @MoOx? I can't reopen.

[MoOx]

No this is definitely not a cssnext bug. And lot's of people and config are doing a classic postcss + postcss-import + postcss-cssnext without any problem. It's more a configuration issue ;)

[MoOx]

ExtractTextPlugin.extract() take 2 args in wepback 1, an object in webpack 2 version. Just check that something in the root is transpiled.

[amir20]

ExtractTextPlugin.extract() take 2 args in wepback 1, an object in webpack 2 version. Just check that something in the root is transpiled.

I am have done loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader') and still no luck. Do you an example handy that ExtractTextPlugin + PostCSS + CSSNext work? I am starting to give up. I don't know what else to try.

[amir20]

I am going to try without ExtractTextPlugin see if that works.

[MoOx]

Also try with more simple features without import.

[amir20]

Good news, it works without ExtractTextPlugin.

[amir20]

Problem solved. I was missing 'css-loader?importLoaders=1'

[MoOx]

You are not supposed to use this option when you use postcss-import.

[amir20]

You are not supposed to use this option when you use postcss-import.

Is that documented somewhere?

Honestly, I was trying to understand what is all the fuss about PostCSS when compared to other frameworks. I find PostCSS really powerful, but having to figure out why something is not working and then digging to the six plugins I am using feel a step back in direction of web development. Then again that's just my opinion.

[MoOx]

You are mixing webpack and postcss. Just try vanilla postcss, then integrate it to webpack.
The fact that you didn't used correctly ExtractTextPlugin show you didn't read the doc enough, and that's the first thing to do when you want to use something.

[amir20]

In the documentation it says

the loader(s) that should be used for converting the resource to a css exporting module

I read the documentation. I also followed it correctly.

I think you are missing what I am saying. I am not saying this is PostCSS or even this module's problem. I am saying back in 2010, I would include less, stylus, sass, etc... and with minimal effort you would get things to work. Now, the options are endless and we can add so many things. But it comes at a cost where not all modules are compatible with each. I was trying to evaluate this at work. It feels like the JavaScript community is moving away from opinionated frameworks to having everything configured. I have probably spend 6 hours on this. It's probably my fault because I didn't know what to google. But at some point, I thought, this can't be this hard. I didn't find a single example of extract + webpack + postcss + postcss-next. As a software engineer with 10 years of experience, that is frustrating.

Anyway, thanks for the help. Maybe I am just alone in this thought. I have read so many documents.

[MoOx]

I totally agree with you. I barely use postcss this days since I use javascript solution to write my styles.

But in comparison to postcss, babel does offer an easy way to setup. Postcss should have a website with a page to show classic example (like webpack + postcss). They started to make a website, but there is only a homepage, nothing more... poke @ai.

[amir20]

Thanks @MoOx. I did a little investigation. I wanted to know where I got the syntax and why I missed this. I googled "ExtractTextPlugin postcss with webpack" which led me to this page. It didn't work, I tried doing webpack2 search which led me to this page. That didn't work.

I see what you were saying now that in PostCss README example says to use importLoaders or postcss-modules.

So to wrap things up. Lesson learned here is that I should have first tried to gotten it to work without ExtractTextPlugin then move incrementally. I do this usually with new technology.

All this webpack/js/postcss is moving so fast that README files become outdated within weeks, especially with webpack2 coming out.

Thanks for being patient. :) Looking forward to see an actual homepage with how to use it with babel.