salsify / ember-css-modules

CSS Modules for ambitious applications
MIT License
284 stars 50 forks source link

Provide exclude glob option #282

Open arei opened 2 years ago

arei commented 2 years ago

Currently when processing our application, ember-css-modules, concats all the .css files into a single file. This includes `app/styles/.css. Unfortunately, it seems to do it in whatever order it wants and with regards to things like@import. Thus we end up with an output file that has all of our component css files at the top and ourapp/styles/*.cssat the bottom, apparently in alphabetical order. such thatapp.csscomes beforereset.css`, which is problematic.

And headerModules doesnt seem to have an impact.

And importing via @import statements just lands us two copies of the css file being included.

So, unless we're doing something wrong, I think we need a way to control what files ember-css-modules includes and possibly in what order they are included.

Our config, for reference:

        cssModules: {
            generateScopedName(className, modulePath) {
                return className;
            },
            headerModules: [
                'app/styles/reset',
                'app/styles/toasts',
                'app/styles/tooltips',
                'app/styles/spinkit',
                'app/styles/ember-power-calendar',
            ],
            plugins: [
                require('postcss-reporter')(),
                require('postcss-import')(),
                require('postcss-preset-env')({
                    stage: 0,
                }),
            ],
        },

@optikalefx

optikalefx commented 2 years ago

Bump, is there anyone who can look at this?