Skip to content

CSS @import doesn't support 'layer' or 'supports' #428

@JohnnyQuest1983

Description

@JohnnyQuest1983

CSS @import supports code in the following formats:

@import url;
@import url layer;
@import url layer(layer-name);
@import url layer(layer-name) supports(supports-condition);
@import url layer(layer-name) supports(supports-condition) list-of-media-queries;
@import url layer(layer-name) list-of-media-queries;
@import url supports(supports-condition);
@import url supports(supports-condition) list-of-media-queries;
@import url list-of-media-queries;

Looking at

protected function combineImports($source, $content, $parents)
it seems that the CSS Minifier only recognises @import url; and @import url list-of-media-queries;, 'layer' and 'supports' are not checked.

Basic layer Test Case:

@import url('file1.css') layer(testLayer1);
@import url('file2.css') layer(testLayer2);

Minified Outcome (invalid code, not used by browser):

@media layer(testLayer1){/*...file1.css...*/}@media layer(testLayer2){/*...file2.css...*/}

Expected Outcome (imported files converted to appropriate @layer entries):

@layer testLayer1{/*...file1.css...*/}@layer testLayer2{/*...file2.css...*/}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions