Fix see all posts and convert css to sprinkles

src/routes/blog/[slug].svelte

@@ -26,7 +26,8 @@
 </script>
 
 <script lang="ts">
-  import ArticleFooter from '../../components/blog/article-footer.svelte'
+  import ArticleFooter from '../../components/blog/ArticleFooter.svelte'
+  import { contentClass } from './blog.css'
 
   export let post
 </script>
@@ -37,37 +38,7 @@
 
 <h1>{post.title}</h1>
 
-<div class="content">
+<div class="content {contentClass}">
   {@html post.body}
 </div>
 <ArticleFooter {post} />
-
-<style lang="less">
-  @import '../../styles/variables.module.less';
-
-  /*
-		By default, CSS is locally scoped to the component,
-		and any unused styles are dead-code-eliminated.
-		In this page, Svelte can't know which elements are
-		going to appear inside the {{{post.html}}} block,
-		so we have to use the :global(...) modifier to target
-		all elements inside .content
-	*/
-
-  .content :global(ul) {
-    line-height: 1.5;
-  }
-
-  .content :global(li) {
-    margin: 0 0 0.5em 0;
-  }
-
-  .content :global(img) {
-    max-height: 640px;
-  }
-
-  .content :global(img:only-child) {
-    display: block;
-    margin: 0 auto;
-  }
-</style>

src/routes/blog/blog.css.ts

@@ -0,0 +1,21 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+import { vars } from 'src/styles/vars.css'
+
+export const contentClass = style({})
+
+globalStyle(`${contentClass} ul, ${contentClass} ol`, {
+  lineHeight: vars.lineHeight['2x'],
+})
+
+globalStyle(`${contentClass} li`, {
+  marginBottom: vars.space['2x'],
+})
+
+globalStyle(`${contentClass} img`, {
+  maxHeight: vars.height.image,
+})
+
+globalStyle(`${contentClass} img:only-child`, {
+  display: 'block',
+  margin: '0 auto',
+})

src/routes/blog/index.css.ts

@@ -0,0 +1,20 @@
+import { globalStyle } from '@vanilla-extract/css'
+import { vars } from '../../styles/vars.css'
+import { sprinkles } from '../../styles/sprinkles.css'
+
+export const postListClass = sprinkles({
+  padding: 'none',
+  lineHeight: '3x',
+  listStyle: 'none',
+})
+
+export const seeAllClass = sprinkles({
+  textAlign: 'end',
+  width: 'parent',
+  maxWidth: 'max',
+  margin: 'auto',
+})
+
+globalStyle(`${postListClass} > li:not(:last-child)`, {
+  marginBottom: vars.space['4x'],
+})

src/routes/blog/index.json.ts

@@ -1,7 +1,7 @@
 import { getBlogListing } from './_content'
 
 export async function get({ query }) {
-  const { tag } = query
+  const tag = query.get('tag')
   const filteredContents = await getBlogListing(tag)
   return {
     status: 200,

src/routes/blog/index.svelte

@@ -1,14 +1,10 @@
 <script context="module" lang="ts">
+  // TODO Fix query & seeAll functionality
   /**
    * @type {import('@sveltejs/kit').Load}
    */
   export function load({ fetch, page: { params, query } }) {
-    const blogQuery = query
-      ? '?' +
-        Object.entries(query)
-          .map((q) => q.join('='))
-          .join('&')
-      : ''
+    const blogQuery = query ? '?' + query.toString() : ''
     return fetch(`blog.json${blogQuery}`)
       .then((r) => r.json())
       .then((posts) => {
@@ -18,11 +14,15 @@
 </script>
 
 <script lang="ts">
-  import ArticleFooter from '../../components/blog/article-footer.svelte'
+  import ArticleFooter from '../../components/blog/ArticleFooter.svelte'
+  import { postListClass, seeAllClass } from './index.css'
   import type { PostContent } from './_content'
 
   export let posts: PostContent[]
   export let query
+  export let tagQuery
+
+  $: tagQuery = query.get('tag')
 </script>
 
 <svelte:head>
@@ -34,18 +34,18 @@
 {:else}
   <h1>
     Recent
-    {#if query.tag}
-      <em>{query.tag}</em>
+    {#if tagQuery}
+      <em>{tagQuery}</em>
     {/if}
     posts
   </h1>
-  {#if query.tag}
-    <div class="see-all">
-      <a href="/blog" class="">See all posts</a>
+  {#if tagQuery}
+    <div class={seeAllClass}>
+      <a href="/blog">See all posts</a>
     </div>
   {/if}
 {/if}
-<ul class="post-list">
+<ul class="post-list {postListClass}">
   {#each posts as post}
     <!-- we're using the non-standard `rel=prefetch` attribute to
 				tell Sapper to load the data for the page as soon as
@@ -64,20 +64,3 @@
     </li>
   {/each}
 </ul>
-
-<style>
-  .post-list {
-    padding: 0;
-    line-height: 1.5;
-    list-style: none;
-  }
-
-  .post-list > li:not(:last-child) {
-    margin-bottom: 3em;
-  }
-
-  .see-all {
-    text-align: end;
-    margin-top: -1.5em;
-  }
-</style>