CSS Imports (@import) not working as expected

[colinaaa]

I tried this new feature CSS Imports (@import), but it seems not working correctly.

Steps to reproduce:

• a new project by CSA yarn create snowpack-app my-app --template @snowpack/app-template-react-typescript --use-yarn
• yarn add antd
• add @import statement in App.css

@import 'antd/dist/antd.css';

• add a Button in App.tsx

import React from 'react';
import {Button} from 'antd/es';
import './App.css';

const App = () => <Button type="primary">antd</Button>;

export default App;

• yarn build / yarn start

Outputs

The resolved step seems fine, web_modules was generated as expected.

❯ tree build/web_modules/antd/
build/web_modules/antd/
├── dist
│   ├── antd.css
│   └── antd.css.proxy.js
└── es.js

But the App.css with @import statement seems to be incorrect, which imports a js proxy file.

_dist_/App.css:

@import "../web_modules/antd/dist/antd.css.proxy.js"
...

which imports nothing and leads the button unstyled.

HTML:

it looks like the following code replaced the .css to .proxy.js:

https://github.com/pikapkg/snowpack/blob/e5dfccc23d11f02a33e66eb0d3b20c66501d4152/snowpack/src/rewrite-imports.ts#L73-L78

BTW, I can use import css in App.tsx by

import 'antd/dist/antd.css';

to use styles of antd, but it seems to be a bug related to snowpack's @import feature.

[FredKSchott]

Thanks for filing! Just submitted a quick fix here: #1003

[drwpow]

This has been merged! Going to release this in 2.10.3 shortly; hopefully this fixes the issue.

[drwpow]

Oh! Nevermind; this seems to have been released in 2.10.2 (was confused because the PR was still open). Let me know if that fixes the issue.

[ranisalt]

How did you make it work? To me, the styles, even though downloaded, simply are not applied at all.

[colinaaa]

Just do the steps I described before and build with the patch in #1003.

Both my Firefox and Chrome work well.

[FredKSchott]

This was released as 2.10.3, so no need to build the patch locally. Just update Snowpack to latest!

So glad to hear that it's working, woo!