-
Notifications
You must be signed in to change notification settings - Fork 28.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[css] Cascade layers: Support layer() function in @import #147354
[css] Cascade layers: Support layer() function in @import #147354
Comments
@aeschli Are there any updates on this? Cascade layers have now been supported by all modern browsers for over three months, so many people (including me!) already want to use this in production. If the world's most popular code editor shows an error when using a well-supported and not-brand-new feature, most people won't use it. Please prioritize this! |
I just want to +1 this feature, also I would assume this would add support also for the the At-Rule. /* Adds a cascade layer named 'resets' with styles */
@layer resets {
* {
margin: 0;
padding: 0;
}
}
/* Adds an unnamed layer with styles */
@layer {
body {
font-family: system-ui;
font-size: 14px;
}
}
/* Declaring cascading order of layers without giving them styles */
@layer resets, framework, settings, layout, utilities;
/* Layers can be nested */
@layer layout {
main {
background-color: rebeccapurple;
}
@layer composition {
main {
display: grid;
grid-template-columns: repeat(8, 1fr);
}
}
}
/* Adds styles to nested layer from top level */
@layer layout.composition {
.grid-item {
grid-column: 1 / 4;
}
}
/* Assigns external stylesheet to a layer */
@import 'bootstrap.css' layer(framework); |
@Pekes317 The |
Okay, it must be the linter I'm using because it was getting the proper syntax color and I thought is saw a warning about an unknown At-Rule. If there working being done for the import usage of layers it might worth doing a little discount double on the rest of the layer usage. Well anyway excited for all the CSS Layer stuff. |
@Chris-titsus010 Just checked, and yes, indeed: I had "css.lint.unknownProperties": "ignore",
"css.lint.unknownAtRules": "ignore", in my Btw, with "css.validate": false,
"html.validate.styles": false, you can disable all warnings and errors in all your CSS. |
I am getting
|
Whoo! Thank you! |
With the new CSS cascade layers, it is possible to import a CSS file and directly specify the layer in the
@import
statement (see specification):However, VSCode shows a syntax error when using this syntax in a CSS file. Cascade layers are supported in all three modern browsers now, so it would be great if VSCode would be updated to recognize this new syntax.
The text was updated successfully, but these errors were encountered: