Do not modularize files that have no template, e. g. app.css

[lolmaus]

ember-css-modules makes perfect sense with component and controller templates.

But for app.css and other styles in the styles/ folder that are not paired with a template — it does not make sense.

One big use case for using classes in non-component, non-controller stylesheets is overriding styles of third-party libraries.

Often, those overrides are copy-pasted from the internet. Because of ember-css-modules, they cannot be used as-is, and all classes in those snippets have to wrapped with :global() by hand. That's tedious and useless.

I believe, there is not reason to modularize stylesheets not associated with a template. Please make it possible to opt out of that.

CC @simonihmig

[jaredgalanis]

@lolmaus I believe you can do this by overriding the generateScopedName method in ember-cli-build, like here and skipping particular files and just returning the passed in className argument for those that are skipped.

[nova-gavin]

Hey I know this is coming a bit late but I've gotten this to work reasonably well.

This is my ember-cli-build.js. You need to insert the name of your ember-cli project where indicated by your-app-name. In my case, if anything is in the main styles folder it's treated as global. The trick is to require the original function and call it as a pass-through before or after your custom logic as required.

Unfortunately all of this happens at the node level, not in the app, so it's a bit tougher to debug. But the module variable is just the path to the css file.

'use strict';
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const generateScopedName = require('ember-css-modules/lib/generate-scoped-name');

module.exports = function (defaults) {
    const app = new EmberApp(defaults, {
        // Add options here
        cssModules: {

            generateScopedName(className, modulePath) {
                // Your logic here
                if (/^\/your-app-name\/styles\//.test(modulePath)) {
                    return className;
                }
                return generateScopedName(className, modulePath);
            },
        },
    });

    return app.toTree();
};