Setup style imports by default

[NullVoxPopuli]

Here is a demonstration of the problem: https://github.com/NullVoxPopuli/ember-style-import-test-no-embroider The app fails at runtime with an error:

vendor.js:266 Uncaught Error: Could not find module `ember-style-import-test-no-embroider/test.css` imported from `ember-style-import-test-no-embroider/app`
    at missingModule (vendor.js:266:11)

I tested this change via pnpm link the build told me I had to install loaders -- no dice.

When in a pre-embroider app, this custom webpack config allows folks to import CSS:

autoImport: {
    webpack: {
      module = {
        rules: [
          {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader', 'postcss-loader'],
          },
        ],
      },
    },
  };

But it seems the same configuration added to ember-auto-import does not fix the error.

What's the right way to configure this?

[ef4]

This isn't something ember-auto-import is intended to do at present. It only handles importing things (including CSS) in v2 addons and non-ember dependencies. It doesn't handle things inside your app.

It's a feature we could discuss adding, as a polyfill for behavior that does work in embroider, but it would be a new feature.

Also, this is not the right implementation. As you probably saw, we already have a style loader rule. There's no reason to add another one. The issue is that the splitter decides to ignore all relative imports as not being ember-auto-import's job.

[ef4]

The biggest reason we leave everything in the app alone is that we can't guarantee it's not already being incorporated into the build the traditional broccoli way. It would be very easy to double-add things. If we do this feature, it probably needs to involve setting up explicit paths that are handled by ember-auto-import and definitely filtered out of the broccoli app tree entirely.