Nested @import CSS statements not getting rolled up using rollup-plugin-postcss

Question

I have this source file as src/mike.js

import '@ckeditor/ckeditor5-ui/theme/globals/globals.css'
export default function () {
    console.log('Hello world');
}

@ckeditor/ckeditor5-ui/theme/globals/globals.css looks like this:

@import "./_hidden.css";
@import "./_reset.css";
@import "./_zindex.css";

And I have this rollup config:

import resolve from 'rollup-plugin-node-resolve';
import postcss from 'rollup-plugin-postcss'


export default {
    input: 'src/mike.js',
    output: {
        file: 'public/bundle2.js',
        format: 'cjs'
    },
    plugins: [resolve(), postcss({
        plugins: []
    })]
};

The rolled up public/bundle2.js looks like this:

'use strict';

function styleInject(css, ref) {
  // plugin function, removed for clarity
}

var css = "/*\n * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n@import \"./_hidden.css\";\n@import \"./_reset.css\";\n@import \"./_zindex.css\";\n";
styleInject(css);

function mike () {
    console.log('Hello world');
}

module.exports = mike;

So rollup-plugin-postcss did not follow the nested @import statements here.

How to make this work?

Mike Hogan · Accepted Answer · 2019-12-12 09:01:07Z

12

Alright, the answer is that PostCSS itself needs plugins to handle @import statements. So the rollup config you need is:

import resolve from 'rollup-plugin-node-resolve';
import postcss from 'rollup-plugin-postcss'

import postcssImport from 'postcss-import';


export default {
    input: 'src/mike.js',
    output: {
        file: 'public/bundle2.js',
        format: 'cjs'
    },
    plugins: [resolve(),
        postcss({
            plugins: [postcssImport()]
        })]
};

answered Dec 12, 2019 at 9:01

Mike Hogan

10.8k10 gold badges50 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gezim Over a year ago

For what it's worth, resolve() was causing an issue for me. Taking it out still inlined imported css.

Collectives™ on Stack Overflow

Nested @import CSS statements not getting rolled up using rollup-plugin-postcss

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related