Skip to content

Add support for import at-rule layer functionality #4340

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

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

puckowski
Copy link
Contributor

What:

Add support for @import layer functionality documented in https://developer.mozilla.org/en-US/docs/Web/CSS/@import

Builds on top of #4337

@import url("theme.css") layer(theme);
@import url("features.css") layer(features) supports(display: grid);
@import url("responsive.css") layer(responsive) supports(display: flex) screen and (max-width: 768px);
@import url("print.css") layer(print) print;

The above syntax has widely available browser support according to MDN.

Why:

Supporting the additional @import CSS syntax may benefit Less users.

Checklist:

  • Documentation
  • Added/updated unit tests
  • Code complete

I did not venture into .less imports using this syntax as existing import code makes a clear distinction between .css and .less and the two have significantly different behavior.

* Add support for layer at-rule.
* Add tests for layer at-rule.
* Cleanup layer import at-rule solution before merge.
@dosubot dosubot bot added the size:M This PR changes 30-99 lines, ignoring generated files. label Apr 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
size:M This PR changes 30-99 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant