Format

packages/audio/dev/index.tsx

@@ -38,7 +38,7 @@ const App: Component = () => {
             step="0.1"
             max={audio.duration}
             value={audio.currentTime}
-            class="form-range w-40 cursor-pointer appearance-none rounded-3xl bg-gray-200 transition hover:bg-gray-300 focus:outline-none focus:ring-0 "
+            class="form-range w-40 cursor-pointer appearance-none rounded-3xl bg-gray-200 transition hover:bg-gray-300 focus:outline-none focus:ring-0"
           />
           <div class="flex px-2">
             <Icon class="w-6 text-blue-600" path={speakerWave} />

packages/broadcast-channel/dev/index.tsx

@@ -50,7 +50,7 @@ const Content = (props: { page: TPage; channelName: string }) => {
           <span class="font-normal opacity-90">BroadcastChannel name:</span> {props.channelName}
         </h3>
         <button
-          class="btn flex gap-2 "
+          class="btn flex gap-2"
           classList={{
             ["cursor-default"]: !hasMultiplePages(),
             ["hover:bg-teal-600"]: !hasMultiplePages(),

packages/keyboard/dev/index.tsx

@@ -16,12 +16,7 @@ const MessageStack: Component<{
   props.messageTrigger(addMessage);
 
   return (
-    <ul
-      class="
-        fixed right-4 top-4
-        flex flex-col items-end
-        "
-    >
+    <ul class="fixed right-4 top-4 flex flex-col items-end">
       <For each={messages()}>
         {({ text }) => <li class="border-b border-b-red-700 bg-red-500 p-2 text-white">{text}</li>}
       </For>

packages/masonry/dev/index.tsx

@@ -41,8 +41,7 @@ const App: Component = () => {
       const l = Math.random() * 50 + 25;
       return (
         <div
-          class="center-child cursor-pointer rounded outline-dashed 
-          hover:z-10 hover:scale-105 hover:shadow-lg"
+          class="center-child cursor-pointer rounded outline-dashed hover:z-10 hover:scale-105 hover:shadow-lg"
           style={{
             height: `${item.source.height() + item.margin()}px`,
             // "margin-bottom": `${item.margin()}px`,

site/src/components/BundleSizeModal/BundleSizeModal.tsx

@@ -185,7 +185,7 @@ const BundleSizeModal: Component<{
       </div>
       <p>
         <a
-          class=" anchor-tag text-sm hover:opacity-100 dark:opacity-60"
+          class="anchor-tag text-sm hover:opacity-100 dark:opacity-60"
           href="https://jvns.ca/blog/2013/10/23/day-15-how-gzip-works/"
           target="_blank"
           rel="noopener"

site/src/components/Header/Header.tsx

@@ -144,9 +144,7 @@ const Header: Component = () => {
             class={`${pageWidthClass} mx-auto flex h-full w-full items-center justify-between gap-2 px-4 sm:px-8`}
           >
             <div
-              class={`${pageWidthClass} box-shadow-[var(--header-box-shadow)] -z-1 
-              absolute bottom-0 left-0 right-0 top-0 mx-auto w-full opacity-0 transition-opacity
-              duration-200`}
+              class={`${pageWidthClass} box-shadow-[var(--header-box-shadow)] -z-1 absolute bottom-0 left-0 right-0 top-0 mx-auto w-full opacity-0 transition-opacity duration-200`}
               classList={{
                 // show the shadow when scrolled down or when the nav menu is open,
                 // but not when the search modal is open or when the table-sub-nav is shown
@@ -212,9 +210,7 @@ const Header: Component = () => {
           ref={headerOpaqueBgContainer}
         >
           <div
-            class="absolute inset-0 translate-y-[calc(-100%+60px)]
-            bg-white/50 backdrop-blur-md
-            dark:bg-[#293843]/70"
+            class="absolute inset-0 translate-y-[calc(-100%+60px)] bg-white/50 backdrop-blur-md dark:bg-[#293843]/70"
             ref={headerOpaqueBg}
           />
         </div>

site/src/components/Primitives/StageBadge.tsx

@@ -65,7 +65,7 @@ const StageBadge: ParentComponent<{
       <span class="flex justify-center">
         <span
           data-stage
-          class={"flex items-center justify-center rounded-md  font-sans " + classStageColor(level)}
+          class={"flex items-center justify-center rounded-md font-sans " + classStageColor(level)}
           classList={{
             "w-[25px] sm:w-[32.25px] h-[28px]": !size,
             "w-[22px] h-[24px]": size === "small",

site/src/components/Search/Search.tsx

@@ -134,7 +134,7 @@ const Search: Component<{
             classList={{ hidden: !result().length }}
           >
             <div
-              class="-z-1 absolute left-4 right-4 top-[-16px]  h-[16px] shadow-lg shadow-[#24405966] transition dark:shadow-[#05121dbf]"
+              class="-z-1 absolute left-4 right-4 top-[-16px] h-[16px] shadow-lg shadow-[#24405966] transition dark:shadow-[#05121dbf]"
               classList={{
                 "opacity-0": !showShadow(),
                 "opacity-100": showShadow(),

site/src/components/table.tsx

@@ -9,10 +9,7 @@ import { useLocation } from "@solidjs/router";
 
 export const TR: ParentComponent = props => {
   return (
-    <tr
-      class="[&>td:first-child]:z-1 [&:nth-child(odd)>td:first-child]:bg-page-main-bg odd:bg-page-main-bg border-spacing-1 even:bg-[linear-gradient(90deg,#f8fafcc4,#f8fafc)] dark:even:bg-[linear-gradient(90deg,#2b3e4a,#2b3e4ae3)] [&:nth-child(even)>td:first-child]:bg-[#f8fafc] dark:[&:nth-child(even)>td:first-child]:bg-[#2b3e4a]
-    [&>td:first-child]:sticky [&>td:first-child]:left-[2px]"
-    >
+    <tr class="[&>td:first-child]:z-1 [&:nth-child(odd)>td:first-child]:bg-page-main-bg odd:bg-page-main-bg border-spacing-1 even:bg-[linear-gradient(90deg,#f8fafcc4,#f8fafc)] dark:even:bg-[linear-gradient(90deg,#2b3e4a,#2b3e4ae3)] [&:nth-child(even)>td:first-child]:bg-[#f8fafc] dark:[&:nth-child(even)>td:first-child]:bg-[#2b3e4a] [&>td:first-child]:sticky [&>td:first-child]:left-[2px]">
       {props.children}
     </tr>
   );

site/src/routes/package/[name]/(package).tsx

@@ -55,9 +55,7 @@ const Page: Component = () => {
       <Title>{formattedName()} — Solid Primitives</Title>
       <DocumentClass class="primitives-page-main" />
       <div
-        class="-z-1 absolute left-0 right-0 top-0 h-[95vh]
-        bg-[linear-gradient(to_bottom,#fff_var(--primitive-padding-top-gr),transparent)]
-        dark:bg-[linear-gradient(to_bottom,#293843_var(--primitive-padding-top-gr),transparent)]"
+        class="-z-1 absolute left-0 right-0 top-0 h-[95vh] bg-[linear-gradient(to_bottom,#fff_var(--primitive-padding-top-gr),transparent)] dark:bg-[linear-gradient(to_bottom,#293843_var(--primitive-padding-top-gr),transparent)]"
         style={{
           "--primitive-padding-top-gr": `${PRIMITIVE_PAGE_PADDING_TOP + 300}px`,
         }}

site/src/routes/package/[name]/components/package-installation.tsx

@@ -82,11 +82,7 @@ const CopyPackage: Component<{ type: PackageManagerType; packageName: string }>
 
         <div class="group-hover:box-shadow-[0_5px_0_0_#c5d4e4] dark:group-hover:box-shadow-[0_5px_0_0_#3f5d73] pointer-events-none absolute bottom-0 left-0 right-0 top-0 rounded-lg border border-transparent transition-[border-color_box-shadow] group-hover:border-[#0030b1] dark:group-hover:border-[#b1bfe4]" />
       </button>
-      <div
-        class="xs:text-sm flex h-full flex-grow items-center
-        overflow-auto whitespace-nowrap rounded-r-lg border border-l-0 border-[#99999a] px-3
-      pr-3 font-mono text-[13px] font-semibold text-gray-700 dark:text-gray-300 sm:text-base"
-      >
+      <div class="xs:text-sm flex h-full flex-grow items-center overflow-auto whitespace-nowrap rounded-r-lg border border-l-0 border-[#99999a] px-3 pr-3 font-mono text-[13px] font-semibold text-gray-700 dark:text-gray-300 sm:text-base">
         {PM_CONTENT[props.type].text(props.packageName)}
       </div>
     </div>