How is it intended that we import CSS?

[NullVoxPopuli]

in many webpack projects (outside of ember+embroider) you can do this:

// app/app.ts
import 'limber/styles/app.css';
// or import './styles/app.css';

// ...

but at the moment I'm getting this error:

Module not found: Error: Can't resolve './styles/app.css' in '$TMPDIR/embroider/66dd2e/frontend/app.ts'

When I inspect /tmp/embroider/66dd2e/frontend/, I see that my app.css has moved to /assets, which I guess makes sense since that's the output directory. But a little weird, cause I expected that I'd be able to resolve all dev-time paths in their dev-time locations.

So now I've changed my import in app.css to:

import './assets/limber.css';

and got past that error, but now a new error:

Build Error (PackagerRunner) in ✂️/limber/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!/tmp/embroider/66dd2e/frontend/assets/limber.css

Module build failed (from ✂️/limber/node_modules/css-loader/dist/cjs.js):
Error: Can't resolve './codemirror-theme.css' in '✂️/limber/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!$TMPDIR/embroider/66dd2e/frontend/assets/limber.css'

which is unexepected to me, because in the normal style pipeline codemirror-theme.css is handled just fine 🤔

So, my hunch is that I now need to configure asset loading to use my own css/postcss loader stack, rather than the default, kinda what I probably need to do anyway for: #729

[ef4]

No, you should not need to configure your own CSS loading stack. It's included by default in the Embroider spec. The problem you're hitting is that there's a bunch of legacy behavior specifically for app/styles/app.css.

So now I've changed my import in app.css to: import './assets/limber.css';

This is not going to work or do what you want. /assets/limber.css is the same kind of URL as /assets/chunk-xxxxx.js: it's an implementation detail of the output, it's not a meaningful location to the code-as-authored. It's not necessarily true that there is any URL in the output that maps to any given input asset, given that we can optimize and inline things.

I would recommend co-locating CSS files with the components that need them and importing them into the components. This ensure that before the component's module evaluates, the CSS is loaded. It doesn't guarantee how it gets loaded, in terms of whether it will get a specific URL in the output or even whether it has a URL at all.

[NullVoxPopuli]

I would recommend co-locating CSS files with the components that need them and importing them into the components.

what do I do for my shadow-dom situation where I want to import the entirety of my app.css? I have no component-local css

[ef4]

I replied to this question here: #995 (comment)

[NullVoxPopuli]

awesome! thanks! so, moving forward with avoiding the legacy style pipeline, how do you set up a new one?

I've mvd my styles directory to my routes directory, and from my application route, I'm now import './styles/app.css, and I've added this to my webpack config for the rules:

// I took this from https://levelup.gitconnected.com/setup-tailwind-css-with-webpack-3458be3eb547
            {
              test: /\.css$/i,
              include: path.resolve(__dirname, 'app'),
              use: ['style-loader', 'css-loader', 'postcss-loader'],
            },

but no dice -- my assets directory has no css (other than vendor and test-support, but those are legacy pipeline)

[NullVoxPopuli]

I can't tell if what I'm doing isn't working because I'm doing it wrong, the blogs / docs I'm reading are wrong, or embroider is interfering 🤔

[linearza]

@NullVoxPopuli have you managed to overcome this yet? Running into the same issue

[NullVoxPopuli]

Yup, importing css, and having css be part of the module graph works great now!