🤝 Introducing new SvelteKit TypeScript vanilla‑extract Starter #
Since vanilla-extract uses TypeScript for styling input, it makes sense also to use TypeScript for the SvelteKit side and leverage autocompletion and type safety together with the other TypeScript benefits. In the rest of this post we look at getting started with the new starter from cloning the repo to build.
🚀 Quick Start #
Get going in three steps: clone the repo, install packages then spin up a dev server to start building out your new project:
This will spin up a dev server on your machine on TCP port
If you already have something running there, it is easy to switch SvelteKit server port, adding a
--port 3001 (or similar) to the project
package.json dev script.
When you are ready, to build the site, just do a
pnpm run build from
🧐 What’s Inside? #
app.d.tshere we have custom types used by the app.
app.htmlregular SvelteKit HTML template, we include some favicon links in the html head section.
This is where we add new blog posts. Create a new folder under
src/content/blog for each new post. Just add an
index.md file inside the new directory
for the post content. Although the file has an
.md extension, since
the project uses mdsvex you can drop Svelte code in there too. A new post in
src/content/blog/new-post/index.md will be generated on
We have images in here, such as banner images and social sharing images used in the starter’s SEO components.
src/lib/componentsthese are the components we use in pages. We define style files alongside file components. As an example, we have the Svelte component file
BannerImage.sveltefor next-gen responsive images and next to it;
BannerImage.css.ts. In there we define the component’s vanilla-extract styles. If you use VSCode, in the project’s
.vscode/settings.jsonthere is an override for
explorer.fileNesting.patternswhich tucks these
.css.tsfiles into their parent
This folder contains a file for each post with responsive data used with vite-imagetools.
vite-imagetools generates images in next-gen formats together with responsive sizes. The node
generate-responsive-image-data.ts actually creates these files.
Here we have a Svelte store which puts the use light/dark theme preference to local storage. The code checks if there is already a browser preference for light or dark theme. This, however, is overridden when the user toggles the dark/light button. Then, using local storage, we note the choice for future site visits.
src/lib/styles/styles.css.tshere you will find the main vanilla-extract global styles. The file references variables set in
src/lib/styles/varsfolder (such as spacing, font sizes and so on).
src/lib/styles/themeswe have a few files here.
theme.css.tsdefines the variables which any theme must have. We start to see some of the power of vanilla-extract here. The other two files define those variables for the light and dark themes included in the starter.
src/utilities/blog.tsthis file contains some code for helping us transform the markdown in blog posts to Svelte. As well as that they help extract fields in the frontmatter (this is the metadata we include at the top of the blog post
src/routes/[slug].json.tsthis is essentially a template for blog post data. One of these files is generated at build for each blog post.
If you are new to Svelte, see the post on Getting Started with SvelteKit blog post. That goes into a little detail on some of the other files in a Svelte project. By the same token, the post on using vanilla-extract in SvelteKit talks more about the benefits of using vanilla-extract for styling. As well as that there is more detail on the nuts and bolts of making it work with SvelteKit.
🖋 SvelteKit TypeScript vanilla‑extract Starter: Blog Posts #
We just mentioned the blog posts are in
index.md files within folders
src/content/blog. Here is an example:
This looks like regular Markdown at first glance. However, you might notice we have a familiar Svelte
script tag in lines
19. This comes courtesy of mdsvex and lets us use Svelte components within the post content files.
The frontmatter fields (like
twitterImage) are passed to the starter’s SEO component.
🗳 Poll #
🖼 SvelteKit TypeScript vanilla‑extract Starter: Icons #
We use Iconify icons in the starter. This gives you access to thousands of icons in dozens of libraries all through a single npm package. The starter uses these icons offline, though you can choose to download them on demand. See the article on using SvelteKit with Iconify for more on customisation together with finding icons.
🙌🏽 SvelteKit TypeScript vanilla‑extract Starter: Wrapup #
We have a had a quick look at getting up and running with the new SvelteKit TypeScript vanilla-extract starter. In particular we have touched on:
- cloning and then spinning up the starter,
- where to find vanilla-extract global styles as well as other important files,
- some starter features including responsive images and Iconify icons together with light/dark mode.
This was just a quick look though! Probably the best way to get acquainted with the starter is just to clone it, then start playing around. I would love to hear of your suggestions for improvements. Do let me know if there is something missing either in the starter or from this introduction. You can drop a comment below or reach out for a chat on Element as well as Twitter @mention
You can get the starter from the Rodney Lab Git Hub repo .
🏁 SvelteKit TypeScript vanilla‑extract Starter: Summary #
Why use vanilla-extract for styling? #
- vanilla-extract generates plain CSS stylesheets making the end user-experience fast. You code your styles in TypeScript. This, then, makes it easy to leverage vanilla-extract as a tool for enforcing a coding style. On top you can add policies to keep styles more maintainable. For example, with minimal effort you can ensure any new themes have certain colours or other variables defined. This helps teams work on parts of a project without breaking parts they are not yet familiar with.
How can you quickly spin up a new SvelteKit TypeScript project using vanilla-extract for styling? #
- To get going quickly on a SvelteKit site try a starter. We have seen the SvelteKit TypeScript starter is quick to clone then get going on. It offers PWA support, icons from dozens of libraries via iconify and responsive images in next-gen formats as well as light/dark mode. vanilla-extract lets you write you styles in TypeScript in line with your own style guide. It then creates CSS stylesheets on build which have zero runtime overhead.
Does SvelteKit work with vanilla-extract? #
- Yes vanilla-extract uses the vite plugin to work with SvelteKit. You need minimal configuration to get up and running. Essentially, you install the plugin then add a couple of lines of config to your svelte.config.js file. vanilla-extract also works with React so you can share styles with Next projects as an example. You can also use the vanilla-extract rollup plugin. For example, this can be handy for styling components in Svelte libraries or packages you are working on.
🙏🏽 SvelteKit TypeScript vanilla‑extract Starter: Feedback #
If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention, so I can see what you did. Finally, be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.
Just dropped a new article taking you through the ❤️ SvelteKit TypeScript 👨🏽🍳 vanilla-extract starter and getting you up and running in it.— Rodney (@askRodney) May 27, 2022
Hope you find it useful!
#askRodney #SvelteJS #SvelteKit https://t.co/rEZvtu49Wu
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.