[wip] webpack5 ng css - #9434

Nice!

But I think this might match app.component.css as the base css rule. I'm not sure how we could limit it to only appPath/app(.platform)?.css . Also would be interesting to see how we treat external css from node_modules. Angular inlines css in the libraries, so I think most external .css files are safely assumed to be core related.

I think the "correct" config my be:
css rule: appPath/app(.platform)?.css and node_modules/**/*.css
angular rule: appPath/**/*.css excluding appPath/app(.platform)?.css.

On one of my projects I did this, but it might be a bit dirty:

        config.module
            .rule('scss')
            .include
            .add(path.join(webpack.Utils.platform.getEntryDirPath(), 'app.scss'))
            .add(path.join(webpack.Utils.platform.getEntryDirPath(), 'app.android.scss'))
            .add(path.join(webpack.Utils.platform.getEntryDirPath(), 'app.ios.scss'));
        config.module
            .rule('scss|component')
            .test(/\.scss$/)
            .exclude
            .add(path.join(webpack.Utils.platform.getEntryDirPath(), 'app.scss'))
            .add(path.join(webpack.Utils.platform.getEntryDirPath(), 'app.android.scss'))
            .add(path.join(webpack.Utils.platform.getEntryDirPath(), 'app.ios.scss'));

might need another include for node_modules on the scss rule? I'm not sure how prevalent that is. Preferably the libraries should provide an entrypoint for css so that isn't needed.

@rigor789 how about my latest commit?

Still have to test all scenarios out, but basically:

scss/css rules will match:
src/app.css,src/app.platform.css, node_modules

scss/css|component rules will match:
everything but the above.

If a developer wants to load a css file normally (import './pathTo.scss';), they have to do:

config.rule('scss').include.add(pathToCssFile);
config.rule('scss|component').exclude.add(pathToCssFile);

If they want to match a scss file somewhere else, they have to swap scss and `scss|component´ in the code above.

Considering Angular devs never import css manually, this should cover all bases.

Thoughts?

@edusperoni lgtm, though I would like to give this a spin in an app and see if everything works as expected.

Could you run the tests & update the snapshots? (npm run test --watch and then press u once the tests fail to update the snapshots)

I think this is should be ready for merge