Skip to content

CSS file import into cascade layer leads to a syntax error #1907

@enix79

Description

@enix79

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions