From f6284a1ff72eaaafcae80362f1bc42692cd28e22 Mon Sep 17 00:00:00 2001
From: Aaron Maywood <am7274183@gmail.com>
Date: Thu, 7 Apr 2022 12:54:06 +0900
Subject: [PATCH] =?UTF-8?q?Svelte=20=E3=81=A7@container=20=E3=82=AF?=
 =?UTF-8?q?=E3=82=A8=E3=83=AA=E3=83=BC=E3=82=92=E4=BD=BF=E3=81=86=E6=96=B9?=
 =?UTF-8?q?=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

この方法は
https://github.com/sveltejs/svelte/issues/6969#issuecomment-1086942714
による。

仕組み
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     | 41 +++++++++++++++++++++++++++++++++++
 src/Lib/Product.svelte | 49 +++++-------------------------------------
 2 files changed, 46 insertions(+), 44 deletions(-)
 create mode 100644 public/product.css

diff --git a/public/product.css b/public/product.css
new file mode 100644
index 0000000..66eb8e6
--- /dev/null
+++ b/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;
+	}
+}
+
+
diff --git a/src/Lib/Product.svelte b/src/Lib/Product.svelte
index e5d684b..e851b50 100644
--- a/src/Lib/Product.svelte
+++ b/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>