webcontainer-core icon indicating copy to clipboard operation
webcontainer-core copied to clipboard

CSS file import into cascade layer leads to a syntax error

Open enix79 opened this issue 6 months ago • 1 comments

Describe the bug

I'm using Tailwind CSS in my project and I would like to import some CSS in certain layers:

https://developer.mozilla.org/en-US/docs/Web/CSS/@import#importing_css_rules_into_a_cascade_layer

@import 'x/styles/core.css';
@import 'x/styles/preflight.css';
@import 'x/styles/tailwind-components.css' layer(components);

@tailwind base;
@tailwind components;
@tailwind utilities;

When I'm trying so, I receive an unspecific syntax error: "semi-colon expectedcss(css-semicolonexpected)"

Image

Link to the blitz that caused the error

https://stackblitz.com/edit/vitejs-vite-crs9asdz?file=src%2FApp.css

Steps to reproduce

  1. create some css file
  2. try to import some file into a layer

Expected behavior

I except to not receive any syntax error.

Parity with Local

Screenshots

No response

Platform

Browser name  = Chrome
Full version  = 137.0.0.0
Major version = 137
navigator.appName = Netscape
navigator.userAgent = Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36
performance.memory = {
  "totalJSHeapSize": 109789814,
  "usedJSHeapSize": 106230462,
  "jsHeapSizeLimit": 4294705152
}
Hash = 10996a95

Additional context

No response

enix79 avatar Jun 19 '25 19:06 enix79

Any news here? It prevents my organization from heavily using stackblitz for our design system :(

enix79 avatar Jul 07 '25 06:07 enix79