refactor: replace w-* and h-* utilities with size-* utility (#665)

denoland · Jan 31, 2024 · 8990bec · 8990bec
1 parent ae0aaee
commit 8990bec
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 16 deletions.
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -61,23 +61,23 @@ export default function Footer() {
           Blog
         </a>
         <a href="/feed" aria-label="Deno Hunt RSS Feed" class="link-styles">
-          <IconRss class="h-6 w-6" />
+          <IconRss class="size-6" />
         </a>
         <a
           href="https://discord.gg/deno"
           target="_blank"
           aria-label="Deno SaaSKit on Discord"
           class="link-styles"
         >
-          <IconBrandDiscord class="h-6 w-6" />
+          <IconBrandDiscord class="size-6" />
         </a>
         <a
           href="https://github.com/denoland/saaskit"
           target="_blank"
           aria-label="Deno SaaSKit repo on GitHub"
           class="link-styles"
         >
-          <IconBrandGithub class="h-6 w-6" />
+          <IconBrandGithub class="size-6" />
         </a>
         <a href="https://fresh.deno.dev">
           <MadeWithFreshBadge />

diff --git a/components/GitHubAvatarImg.tsx b/components/GitHubAvatarImg.tsx
@@ -18,7 +18,7 @@ export default function GitHubAvatarImg(props: GitHubAvatarImgProps) {
         props.size * 2
       }`}
       alt={`GitHub avatar of ${props.login}`}
-      class={`rounded-full inline-block aspect-square h-[${props.size}px] w-[${props.size}px] ${
+      class={`rounded-full inline-block aspect-square size-[${props.size}px] ${
         props.class ?? ""
       }`}
       crossOrigin="anonymous"

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -31,7 +31,7 @@ export default function Header(props: HeaderProps) {
             width="48"
             src="/logo.webp"
             alt={SITE_NAME + " logo"}
-            class="h-12 w-12"
+            class="size-12"
           />
         </a>
         <div class="flex gap-4 items-center">
@@ -41,8 +41,8 @@ export default function Header(props: HeaderProps) {
             id="nav-toggle-label"
             htmlFor="nav-toggle"
           >
-            <IconMenu class="w-6 h-6" />
-            <IconX class="hidden w-6 h-6" />
+            <IconMenu class="size-6" />
+            <IconX class="hidden size-6" />
           </label>
         </div>
       </div>

diff --git a/deno.json b/deno.json
@@ -27,9 +27,9 @@
     "preact-render-to-string": "https://esm.sh/*[email protected]",
     "@preact/signals": "https://esm.sh/*@preact/[email protected]",
     "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
-    "tailwindcss": "npm:tailwindcss@3.3.5",
-    "tailwindcss/": "npm:/tailwindcss@3.3.5/",
-    "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js",
+    "tailwindcss": "npm:tailwindcss@3.4.1",
+    "tailwindcss/": "npm:/tailwindcss@3.4.1/",
+    "tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js",
     "std/": "https://deno.land/[email protected]/",
     "stripe": "npm:/[email protected]",
     "feed": "npm:/[email protected]",

diff --git a/islands/ItemsList.tsx b/islands/ItemsList.tsx
@@ -18,7 +18,7 @@ async function fetchVotedItems() {
 function EmptyItemsList() {
   return (
     <div class="flex flex-col justify-center items-center gap-2 pt-16">
-      <IconInfo class="w-10 h-10 text-gray-400 dark:text-gray-600" />
+      <IconInfo class="size-10 text-gray-400 dark:text-gray-600" />
       <p>No items found</p>
       <a href="/submit" class="text-primary hover:underline">
         Submit your project &#8250;

diff --git a/islands/UsersTable.tsx b/islands/UsersTable.tsx
@@ -25,7 +25,7 @@ function UserTableRow(props: User) {
         {props.isSubscribed
           ? (
             <>
-              Premium <PremiumBadge class="w-5 h-5 inline" />
+              Premium <PremiumBadge class="size-5 inline" />
             </>
           )
           : "Basic"}

diff --git a/routes/account/index.tsx b/routes/account/index.tsx
@@ -38,7 +38,7 @@ export default defineRoute<SignedInState>((_req, ctx) => {
                 {sessionUser.isSubscribed
                   ? (
                     <>
-                      Premium <PremiumBadge class="w-5 h-5 inline" />
+                      Premium <PremiumBadge class="size-5 inline" />
                     </>
                   )
                   : "Free"}

diff --git a/routes/pricing.tsx b/routes/pricing.tsx
@@ -10,7 +10,7 @@ import { PremiumBadge } from "@/components/PremiumBadge.tsx";
 
 const CARD_STYLES =
   "shadow-md flex flex-col flex-1 space-y-8 p-8 ring-1 ring-gray-300 ring-opacity-50 rounded-xl dark:bg-gray-700 bg-gradient-to-r";
-const CHECK_STYLES = "w-6 h-6 text-primary shrink-0 inline-block mr-2";
+const CHECK_STYLES = "size-6 text-primary shrink-0 inline-block mr-2";
 
 function FreePlanCard() {
   return (
@@ -90,7 +90,7 @@ function PremiumPlanCard(props: PremiumCardPlanProps) {
         </p>
         <p>
           <IconCheckCircle class={CHECK_STYLES} />
-          Official pro user badge <PremiumBadge class="w-5 h-5 inline" />
+          Official pro user badge <PremiumBadge class="size-5 inline" />
         </p>
       </div>
 

diff --git a/routes/users/[login].tsx b/routes/users/[login].tsx
@@ -21,7 +21,7 @@ function UserProfile(props: UserProfileProps) {
         <div class="font-semibold text-xl">
           {props.login}
         </div>
-        {props.isSubscribed && <PremiumBadge class="w-6 h-6 inline" />}
+        {props.isSubscribed && <PremiumBadge class="size-6 inline" />}
         <a
           href={`https://github.com/${props.login}`}
           aria-label={`${props.login}'s GitHub profile`}