Add in @layer at-rule to CSS grammar

[nilaallj]

Description

Atom and VS Code have currently no support for the new @layer at-rule, despite it being supported by all major browsers since a few weeks back. It should be added to the grammar. The @import at-rule also needs an update, since it can now be used to assign layers to external stylesheets.

Since non-layered styles have precedence in the cascading order, the @layer at-rule is most likely to be used in stylesheets where most (if not all) styles are nested within layers. This currently impairs the coding experience in VS Code since the use of the rule blocks the hover information and color decorators from showing up.

Example code

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