-
-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
CSS container queries "@container" breaks parser #6969
Comments
Pending upstream support csstree/csstree#174 |
Out of interest, Svelte is currently using Follow-up question - is anyone aware of a hack to get Container Query syntax working in Svelte at the moment? I'd ideally drop in the de-facto polyfill and do something in either a preprocessor or an action to bypass csstree for now. Any thoughts? |
My workaround is to have container queries in separate CSS files, and bring them in with svelte:head |
That's an option, for sure. I'd definitely miss the idea of co-locating the CQ with the Svelte file in question though. I've been playing around with this pattern: https://svelte.dev/repl/1a52f9bfad9c41729338200a5d552ef2?version=3.46.6. It works well, but is jumping through hoops just because the CSS can't be parsed, which is frustrating! But super cool to have CQs working in a component with a simple action. |
この方法は sveltejs/svelte#6969 (comment) による。 仕組み 1. Svelte では@container はSyntax Error となる 2. 外部CSS まではSvelte は関与しないので、そこに@container を書く ただし、グローバルCSS での提供となり、クラス名に配慮しなければならない また、src/Product.svelte と public/product.css と二元管理になってしまう 3. container-query-polyfill を読み込む https://github.com/GoogleChromeLabs/container-query-polyfill 小中大の3サイズが確認できる。
Here's a PR to upgrade to the latest |
We can use container queries (temporarily) in Svelte by creating a Examplesrc/routes/+page.svelte <script>
import "./page.css";
</script>
<div>
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
</div>
<style>
div {
container-type: inline-size;
}
</style> src/routes/page.css @container (min-width: 500px) {
div h1 {
font-size: 5cqi;
}
} PS I like to create a folder for each component in |
I have written a first pass at adding container queries to You can see my extensive comment detailing the parser support I've added to my I have a temporary release of a fork of Svelte 3.53.1 w/ container query support that you can install as a dependency in Hopefully I'll be able to reach the maintainer of |
This comment was marked as off-topic.
This comment was marked as off-topic.
The maintainer of I've already offered lending a hand for any testing or anything else that could help in the related I gather the core Svelte maintainers, can't speak for them, will want to wait for the Container queries are amazing and really help making compound / complex components. I've developed a very advanced color picker w/ my CQ Svelte fork. |
This comment was marked as spam.
This comment was marked as spam.
Hi @benmccann / @tanhauhau... I'd like to continue discussion on a solution that I have just implemented for container query (CQ) support that I believe will be palatable to Svelte maintainers. The last correspondence from I made a hard fork of Changes
You can view a diff of my changes here: ImpactNo downsides that I'm aware of regarding these changes. Simply that Svelte can now ship On my side I'm releasing the next version of my UI framework imminently and there is non-trivial CQ usage for a complex color picker component. It would really be great to have a version of Svelte out that supports CQ. |
I think this approach makes sense given that container queries are available for a long time now and there doesn't seem another short term solution in sight. I haven't looked at the code closely though. |
@dummdidumm it would be great to move forward on a code review of my added code. A good part of it though of course is internal implementation details to I'd like to get an idea of what tests could be added. In an ideal world of course If you or any other Svelte maintainer can respond with a testing goal / requirement I will then add it and make a clean 1-commit PR. Keeping this section here for reference. Found solution...
OK... We are back on... The problem described above was solved in Changing this: to:
I have temporarily published to NPM @typhonjs-svelte/svelte for those that would like to try out Svelte w/ CQ support. I have only tested this with direct Svelte builds, so it might not work with SvelteKit. You can try out CQ support in Svelte by removing and adding an "overrides": {
"svelte": "npm:@typhonjs-svelte/svelte@3.55.1-cq"
}, |
I've tested the override in my Svelte project and can confirm it works! |
For me the solution was to simply set your release as the svelte version in the devDependencies and I'm using SvelteKit. Here's my full devDependencies for reference:
Anyways, thanks for this special release, it really helps! 🙏 |
Awesome... Re: two confirmations above. I'm working on a PR later today to hopefully get this mainlined! :D |
As indicated above the PR is in and waiting on review + merge. #8275. |
An update on the PR. Given the follow on discussion in the PR I have added single value CSS function support to the associated PR supporting the usage of @container test-container (calc(400px + 1px) <= width < calc(500px + 1px)) {} As described above you can test out this functionality now as I have a temporary fork of Svelte w/ this PR available with this NPM package. You can load it in a Svelte project with the following in package.json: "overrides": {
"svelte": "npm:@typhonjs-svelte/svelte@3.55.1-cq2"
}, Waiting on Svelte maintainers for review / merge. |
Yet another minor update.. The PR is up to date w/ mainline Svelte as of this message. A new external version of Svelte "overrides": {
"svelte": "npm:@typhonjs-svelte/svelte@3.57.0-cq"
}, Still waiting on Svelte maintainers to take a look. |
Really hope this gets implemented into mainline Svelte soon… |
Closes #6969 As discussed there, container query support is quite useful to add to Svelte as it is now broadly available with Firefox releasing support imminently w/ FF v110 this upcoming week (~Feb 14th). Chrome has had support since ~Aug '22. The central issue is that css-tree which is a dependency for CSS AST parsing is significantly lagging behind on adding more recent features such as container query support. Ample time has been given to the maintainer to update css-tree and I do have every confidence that in time css-tree will receive a new major version with all sorts of modern CSS syntax supported including container queries. This PR provides an interim solution for what Svelte needs to support container queries now.
Huge thanks to @typhonrt for making the dream a reality |
Agreed! @typhonrt thanks so much 🙏 |
Yes, thank you @typhonrt for your efforts and persistence! 👏 |
Thanks @mitchray, @rob-balfre, and @finnhvman for the nod! I'm certainly excited to now ship some advanced CQ components. IMHO it is a massive game changer for responsive component design. Even better, now that the CQ PR is merged and I can rely on the Svelte maintainers being OK w/ how the solution is implemented I was able to refactor the The MQ PR is here: #8430 |
Thank you! This has been released in 3.58.0. |
Amazing ❤️❤️❤️ |
Hm, Svelte 4.2.8 and it seems that using @container (){} breaks all the following CSSes. Is this a regression or did I do something weird with my code? EDIT: I've been mistaken obviously and the reason was me not fully understanding what setting an element as container does to the layout. Sorry! |
If you can work up an example in the Svelte REPL that is helpful. Though I don't believe It could be a situation where the custom parsing for |
Describe the bug
With CSS container queries on the way I wanted to flag this early
Currently using
@container
throws "RightParenthesis is expected"Reproduction
https://svelte.dev/repl/c660c23146364ec3910534a89363801b?version=3
Logs
System Info
Severity
annoyance
The text was updated successfully, but these errors were encountered: