Snowpack: Resolve CSS import URLs

[FredKSchott]

Original Discussion: https://www.pika.dev/npm/snowpack/discuss/197
/cc @idan, @jan-dh, @FredKSchott, @jwondrusch, @nickolay

Right now, we only resolve import URLs in JS. We should use that same logic on CSS import URLs as well.

// Supported (In any JS file)
import 'antd/dist/antd.css';

// Not Supported (In CSS files)
@import 'antd/dist/antd.css';

To start, we're going to try to implement this without Webpack's ~ operator. That means that Snowpack will never handle @import 'foo/bar.css' as a relative URL, even though the browser would. Relative URLs must be imported via @import './foo/bar.css'.

[jan-dh]

As @nikolay pointed out, @importis part of the css spec, so no extra plugin needed. The postcss-import plugin 's purpose is mostly this:

One of the most useful features preprocessors offer is the ability to organize your CSS into multiple files and combine them at build time by processing @import statements in advance, instead of in the browser.

I think the docs you updated here are a bit off.

There's a pretty good section on using with preprocessors in the Tailwindcss docs

[nickolay]

In my PR for the documentation I tried to explain what's lacking in snowpack at the moment: @import 'foo.css' will only try to import foo.css in public/. Expected functionality includes:

• Importing CSS files relative to the current file (@import './foo.css')
• Importing styles from other installed packages (@import 'antd/dist/antd.css'; should import the file in node_modules/antd/dist/antd.css)

[jwondrusch]

To piggyback on @jan-dh's comment, while I had been figuring out the issue with TailwindCSS and the pseudo-selector classes using @apply, I had tried using postcss-import.

It didn't solve the issue, but it did work in terms of being able to define root or path in the postcss plugin settings and have the files be read correctly.

I haven't dug into the snowpack source too much to know whether it's a more prudent path to add a setting to snowpack to indicate a root for css @imports or to update the docs. If it's the latter, I could probably put together a quick PR for that.

[FredKSchott]

Another example that should be fixed as a part of this, if possible (or broken out):

@font-face {
  font-family: 'Framework7 Icons';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Framework7Icons-Regular.eot");
  src: url("../fonts/Framework7Icons-Regular.woff2") format("woff2"),
       url("../fonts/Framework7Icons-Regular.woff") format("woff"),
       url("../fonts/Framework7Icons-Regular.ttf") format("truetype");
}

From: https://www.pika.dev/npm/snowpack/discuss/408

[FredKSchott]

docs have been updated, so I think we're safe to close

[SystemParadox]

The docs currently point to this issue, so it definitely shouldn't be closed!

Webpack automatically parses CSS @imports and bundles them together. Since the documentation currently points to this issue as "not yet supported natively", it seems the plan is for snowpack to also do something similar.

[FredKSchott]

Ah, thank you! My issue cleanup was over ambitious :)

We could probably clarify the docs a bit more, but for anyone coming here the current status is:

• Snowpack supports @import statements today, so as long as your browser supports them
• but, unlike other import statements it's resolved purely by URL in the browser, and not by local file path at build time
• If you want to resolve imports at build time, use postcss (see the docs linked above)
• Webpack automatically parses and bundles these together today

[FredKSchott]

Update: Cleaned up the docs to make it more clear that Snowpack matches native CSS import syntax by default and that imports by package name are supported via a PostCSS plugin.

https://www.snowpack.dev/#css-%40import-support

We also have a PR to add native support for this here: https://github.com/pikapkg/snowpack/pull/803

[simonh1000]

Are there any working examples of how precisely to set this up. I read that snowpack won't import from node_modules and that people have tried postcss-import without success (my case too)?

[ludwignagelhus]

Same. I have no idea what any of this means... I just want to import my fonts for my project T_T