[css] Cascade layers: Support layer() function in @import

[BenjaminAster]

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):

@import url("./foo.css") layer(foo);

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.

[BenjaminAster]

@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!

[Pekes317]

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);

[BenjaminAster]

@Pekes317 The @layer rule is already supported in VSCode (or at least VSCode doesn't show a syntax error). The layer() function in @import however does trigger a syntax error in VSCode, making it practically unusable, so it's the only thing where work needs to be done.

[Pekes317]

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.

[SuddenLeeus]

@Pekes317 I too have the warning saying 'Unknown at rule @layer' but I don't have any linter extension installed.

[BenjaminAster]

@Chris-titsus010 Just checked, and yes, indeed: I had

"css.lint.unknownProperties": "ignore",
"css.lint.unknownAtRules": "ignore",

in my settings.json. Can recommend to everyone, as VSCode shows a warning for a ton of new CSS properties & at-rules.

Btw, with

"css.validate": false,
"html.validate.styles": false,

you can disable all warnings and errors in all your CSS.

[DavidSouther]

I am getting css(css-semicolonexpected) with

@import './sanitize.css' layer(reset);
                              ^-- semi-colon expected

[DavidSouther]

Whoo! Thank you!