Svelte で@container クエリーを使う方法

この方法は
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

小中大の３サイズが確認できる。

public/product.css

@@ -0,0 +1,41 @@
+/* Smaller version (ie. sidebar in this demo) */
+@container (max-width: 200px) {
+	.product-container {
+		border: 1px solid #c2ceb0;
+		padding: 0.5rem;
+		border-radius: 10px;
+		display: flex;
+		align-items: center;
+	}
+
+	.product-container h3 {
+		letter-spacing: 0;
+		width: 90px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: pre;
+		margin: 0;
+	}
+
+	.product-container span {
+		margin: 0;
+	}
+
+	.product-container p,
+	.product-container button {
+		display: none;
+	}
+}
+
+/* wider sizes (i.e in hero) */
+@container (min-width: 350px) {
+	.product-container {
+		padding: 0.5rem 0 0;
+		display: flex;
+	}
+	.product button {
+		margin-left: 1rem;
+	}
+}
+
+

src/Lib/Product.svelte

@@ -1,3 +1,8 @@
+<svelte:head>
+	<script src="https://unpkg.com/container-query-polyfill/cqfill.iife.min.js"></script>
+    <link rel="stylesheet" href='/product.css'>
+</svelte:head>
+
 <div class="product">
 	<div class="product-container">
 		<figure><img src="https://www.ikea.com/us/en/images/products/fejka-artificial-potted-plant-indoor-outdoor-cactus__0935865_PE792997_S5.JPG?f=xs" />
@@ -72,48 +77,4 @@ button {
 	width: 350px;
 	background: white;
 }
-
-/* Smaller version (ie. sidebar in this demo) */
-/*
-@container (max-width: 200px) {
-	.product-container {
-		border: 1px solid #c2ceb0;
-		padding: 0.5rem;
-		border-radius: 10px;
-		display: flex;
-		align-items: center;
-	}
-
-	.product-container h3 {
-		letter-spacing: 0;
-		width: 90px;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: pre;
-		margin: 0;
-	}
-
-	.product-container span {
-		margin: 0;
-	}
-
-	.product-container p,
-	.product-container button {
-		display: none;
-	}
-}
-*/
-
-/* wider sizes (i.e in hero) */
-/*
-@container (min-width: 350px) {
-	.product-container {
-		padding: 0.5rem 0 0;
-		display: flex;
-	}
-	.product button {
-		margin-left: 1rem;
-	}
-}
-*/
 </style>