Getting postcss to process imported css

[fenomas]

Hi,

I'm trying to run autoprefixer on CSS files that use @import. Using basic configs, I find that my root CSS file (that gets required through webpack) gets processed, but styles that are imported from CSS get added to the project but not processed by postcss.

Is this supposed to work out of the box, or am I missing something obvious?

My webpack config is straight from the docs:

    module: {
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader!postcss-loader', },
        ]
    },
    postcss: [
        autoprefixer({
            browsers: ['last 2 versions']
        })
    ],

I run that with a root foo.css that imports bar.css, and the results is that the page gets two style tags, one for each CSS file, and the imported one does not get processed:

    <style type="text/css">
        .bar {
            display: flex;
        }
    </style>
    <style type="text/css">
        .foo {
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
        }
    </style>

Thanks for any help!

[ai]

Use postcss-import to import files inside PostCSS and process it with Autoprefixer after import.

[fenomas]

@ai I considered that, but in #8 you say using postcss-import is a bad way to use this module. Is that no longer the case?

[ai]

@AndyHall the best way is to use one dependency tree for components. Require one component to other, not import one CSS file to other CSS.

So, for example, you have button component. And you will have separated dir with all things for this component:

button/
  index.js
  button.css
  button.js
  image.svg

In index.js you load all stuff (there are few webpack plugins, which will create it automatically):

require('./button.js');
require('./button.css');

So, if you need to use button inside a form, you write in form/form.js:

require('../button');

[fenomas]

@ai That's basically what I'm doing, it's just that the css is quite large and separated into modular pieces.

With that said, I just found that passing importLoaders=1 to css-loader seems to resolve my problem, if I chain from autoprefixer instead of postcss. That is:

    {
        test: /\.css$/, 
        loader: 'style-loader!css-loader?importLoaders=1!autoprefixer-loader',
    }

I'm brand new to webpack and I don't really understand the difference between this and using postcss, but for the moment it seems to avoid the problem..?

[ai]

Yeap, importLoaders=1 looks like a solution.

BTW, autoprefixer-loader is not a official way to load Autoprefixer :). You will have delay for updates.

[fenomas]

Hmm, now that I check, adding importLoaders=1 works with postcss too. So I can do that if it's better.

By not official, do you mean autoprefixer-loader is unmaintained or incorrect or something? I'm just looking for whatever is the standard, default way to autoprefix CSS files that might contain imports.

[ai]

Nope, autoprefixer-loader is OK. But it just unnecessary extra wrap for my opinion. So, when new major Autoprefixer will be release, autoprefixer-loader will require a week or more for update.

[fenomas]

Ah, I get you. Okay, thanks for your help!