Snowpack: [Enhancement] Support CSS imports

[FredKSchott]

Original Discussion: https://www.pika.dev/npm/snowpack/discuss/74
/cc @ssilvert, @FredKSchott

Right now, Snowpack can't install packages that import CSS as if it were a JS module:

import './style.css'; 
// Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

Unfortunately, there's no real good alternative here for JS libraries that ship CSS. And since most frontend npm consumers are bundlers, it's common for this to "just work" for most consumers.

Snowpack exists to convert non-browser-compatible packages into compliant JS files. Converting bad CSS imports to good ones (bundling CSS into the JS file via something like PostCSS) seems like a reasonable problem for this package to solve. We already handle JSON imports, which aren't supported by spec today either. This isn't too different from that.

So I'd be into merging this support as an enhancement, probably by just adding this as a plugin: https://github.com/egoist/rollup-plugin-postcss. We'd want to keep support very minimal (basically just import 'url') so that we don't potentially clash with CSS modules whenever they ship.

[FredKSchott]

Update: Thanks to @dangodev we'll support this via user-supplied rollup plugins, with a better warning when we see CSS files to suggest you use: https://github.com/egoist/rollup-plugin-postcss

[ssilvert]

@FredKSchott That's great news! Is this ready to try out?

[FredKSchott]

Yup, this should have been released in the latest version v1.4.0

[adam-cyclones]

Im trying to figure this one out, the lit-element recipe as found in the docs doesn't seem compatible with this feature.

import myCss from './file.css';

Given that lit-element uses custom elements, I really don't want my css auto injected into the head, this is an assumption that might be fine 99% of the time in 2020 but who knows in a couple of years?
I would want to have control and get myCss as a string to add to my custom element's shadow dom, but also piped through post-css just like it would normally be.

I am a little new to snowpack, thanks for reading.
I did find this https://www.npmjs.com/package/rollup-plugin-postcss-lit but I have no idea how to plug it in or if it will help me.

[FredKSchott]

You can't currently configure this behavior of how we support non-JS asset imports. I would like to support this one day.