feat: media query range syntax & single value function support via css-tree extension #8430
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #5876. As discussed there,
css-tree
is not updated for the latest CSS syntax including the ability to use single value functions (calc, etc.) in media queries.css-tree
also does not yet support media query range syntax that is part of the media query level 4 specification.This PR broadly helps the entire Svelte ecosystem including SvelteKit.
Given the acceptance of the container query PR (#8275) to extend
css-tree
to support container queries I was able to refactor this extension support repurposing the range syntax support to apply to both container & media queries. At the same time the single value function support implemented for container queries also applies to media queries.Changes
src/compiler/parse/read/css-tree-cq/css_tree_parse.ts: cleanup new AST node import / assignment.
src/compiler/parse/read/css-tree-cq/node/index.ts: added for convenience to export all nodes cleanly.
src/compiler/parse/read/css-tree-cq/node/lookahead_is_range.ts: separated utility function out to be used by CQ / MQ.
src/compiler/parse/read/css-tree-cq/node/media_query.ts: provides new media query node implementation.
src/compiler/parse/read/css-tree-cq/node/query_feature.ts: renamed from container_feature.ts
src/compiler/parse/read/css-tree-cq/node/query_range_feature.ts: renamed from container_range_feature.ts
test/css/samples/media-query: Updated parsing test case with range syntax and single value function use cases.
Impact
No downsides that I'm aware of regarding these changes. Simply that Svelte can now ship with updated media query syntax support. I have thoroughly tested the code and updated the media query parsing test accordingly. Because the fork capability of css-tree is used to extend it the css-tree version can keep being bumped if new versions come out without updated MQ support. However, when the unified queries support is added to
css-tree
the local extensions can be removed and an easy swap back to the official css-tree parse capability is trivial.Testing
The media query parsing test has been updated for range syntax and single value function use cases.
css-tree Extension
The bulk of this PR is a refactor of the container query implementation to share the range syntax and single value function support added in the CQ PR between both media and container queries via local extension of css-tree using the fork capability of css-tree to just modify how the
MediaQuery
node is parsed. The benefit of taking this approach is that the temporary modifications necessary to extend css-tree are committed to the Svelte repo and a separate hard fork of css-tree isn't necessary. The css-tree version can continue to be bumped as necessary and when css-tree supports modern query syntax the local extension can be removed.It is unknown when css-tree will be updated to support modern query support. However, when css-tree does offer support a one line change and removal of the extensions provided in this PR is trivial.