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.
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 the Terminal.
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
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
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
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 vanilla-extract’s power 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 front matter (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 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.
We just mentioned the blog posts are in
index.md files within
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 front matter fields (like
twitterImage) are passed to the starter’s SEO component.
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 customization together with finding icons.
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; and
- 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 .
- 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.
- 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 your styles in TypeScript in line with your own style guide. It then creates CSS stylesheets on build, which have zero runtime overhead.
- 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.
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.
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.