How do you add PostCSS to a SvelteKit project?

SvelteKit gets PostCSS support through svelte-preprocess and vitePreprocess. As a first step, update your `svelte.config.js` file adding two imports: `import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';` and `import preprocess from 'svelte-preprocess';`. Then, in the same file, set config.preprocess to `[vitePreprocess(), preprocess()]`. Next, add postcss and any PostCSS plugins you want to use, as dev dependencies. Finally, create a regular `postcss.config.cjs` file in the root directory of your project.

How can I use future CSS with SvelteKit?

You can use future CSS, such as custom media queries and media query ranges today, with SvelteKit. To get going, set up PostCSS in your project. Next, add the `postcss-preset-env` plugin as a project dev dependency. Finally, update your `postcss.config.cjs` file to use the plugin. As configuration options (for postcss-preset-env), you might want to set stage 3 and add some features like nesting rules, custom media queries and media query ranges. For a full list of features, see the postcss-preset-env GitHub repo.

How can you use custom media queries in Svelte style blocks?

Even if you set up custom-media-queries in PostCSS, using postcss-preset-env. You might not get custom media queries working. Custom media queries is a CSS proposal which lets you define a media query once, attaching it to an identifier, then being able to use that identifier (`--desktop-device`, for example), instead of the full media query throughout your code base. To use the queries, in SvelteKit, first define them in a `src/lib/styles/custom-media-queries.css` file. Then, add the `@csstools/postcss-global-data` to your PostCSS config file. Finally, set that plugin’s options (before custom-media-queries) to `{ files: ['src/lib/styles/custom-media-queries.css'] }`. Remember to include `lang="postcss"` on your style tags in `.svelte` files, and you will now have access to custom media queries you set in `custom-media-queries.css`.

SvelteKit PostCSS Tutorial: use Future CSS Today # SvelteKit PostCSS Tutorial: use Future CSS Today #

SvelteKit PostCSS Tutorial: use Future CSS Today #

Updated 7 months ago

4 minute read

Gunning Fog Index: 6.3

Content by Rodney

💄 SvelteKit PostCSS Tutorial: the CSS Future, Now #

In this SvelteKit PostCSS tutorial, we have a look at how you can use next-gen CSS today in your Svelte project. As well as opening up access to future CSS, the rich PostCSS plugin ecosystem brings you prefixes for legacy browser support and CSS optimization, among a host of other features. In this video tutorial, we also see how you can set up PostCSS and start using those features. We also have a close look at custom media queries, which can help make your CSS code more robust, while improving developer experience.

If that sounds like a productivity boost you’d sign up for, then get your typing fingers warmed up and hit play on the tutorial.

📹 SvelteKit PostCSS Tutorial: Video #

Please enable JavaScript to watch the video 📼

SvelteKit PostCSS Tutorial: use next-gen CSS now

🗳 Poll #

Do you use future CSS in your projects?

🖥 Code #

PostCSS Package and Plugin Install #

    pnpm add -D @csstools/postcss-global-data autoprefixer \
  postcss postcss-csso postcss-preset-env svelte-preprocess

PostCSS Config #

postcss.config.cjs

javascript

    const autoprefixer = require('autoprefixer');
const postcssPresetEnv = require('postcss-preset-env');
const csso = require('postcss-csso');
const postcssGlobalData = require('@csstools/postcss-global-data');
 
const config = {
	plugins: [
		postcssGlobalData({
			files: ['src/lib/styles/custom-media-queries.css']
		}),
		postcssPresetEnv({
			stage: 3,
			features: {
				'nesting-rules': true,
				'custom-media-queries': true,
				'media-query-ranges': true
			}
		}),
		autoprefixer(),
		csso()
	]
};
 
module.exports = config;

SvelteKit Config #

svelte.config.js

javascript

    1 import adapter from '@sveltejs/adapter-auto';
2 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
3 import preprocess from 'svelte-preprocess';
4  
5 /** @type {import('@sveltejs/kit').Config} */
6 const config = {
7 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
8 	// for more information about preprocessors
9 	preprocess: [vitePreprocess(), preprocess()],
10 
11 	kit: {
12 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
13 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
14 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
15 		adapter: adapter()
16 	}
17 };
18  
19 export default config;

SvelteKit Custom Media Query with PostCSS Usage #

src/lib/styles/custom-media-queries.css

css

    1 @custom-media --desktop-device screen and (width > 768px);

src/routes/+layout.svelte

svelte

    1 <!-- ...TRUNCATED -->
2 
3 <style lang="postcss">
4 	@media (--desktop-device) {
5 		main {
6 			width: min(var(--max-width-full) - var(--spacing-24), var(--max-width-wrapper));
7 			margin: var(--spacing-6) auto var(--spacing-24);
8 		}
9 	}
10 </style>

🔗 Links #

🏁 SvelteKit PostCSS Tutorial: Summary #

How do you add PostCSS to a SvelteKit project? #: SvelteKit gets PostCSS support through svelte-preprocess and vitePreprocess. As a first step, update your `svelte.config.js` file adding two imports: `import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';` and `import preprocess from 'svelte-preprocess';`. Then, in the same file, set config.preprocess to `[vitePreprocess(), preprocess()]`. Next, add postcss and any PostCSS plugins you want to use, as dev dependencies. Finally, create a regular `postcss.config.cjs` file in the root directory of your project.
How can I use future CSS with SvelteKit? #: You can use future CSS, such as custom media queries and media query ranges today, with SvelteKit. To get going, set up PostCSS in your project. Next, add the `postcss-preset-env` plugin as a project dev dependency. Finally, update your `postcss.config.cjs` file to use the plugin. As configuration options (for postcss-preset-env), you might want to set stage 3 and add some features like nesting rules, custom media queries and media query ranges. For a full list of features, see the postcss-preset-env GitHub repo.
How can you use custom media queries in Svelte style blocks? #: Even if you set up custom-media-queries in PostCSS, using postcss-preset-env. You might not get custom media queries working. Custom media queries is a CSS proposal which lets you define a media query once, attaching it to an identifier, then being able to use that identifier (`--desktop-device`, for example), instead of the full media query throughout your code base. To use the queries, in SvelteKit, first define them in a `src/lib/styles/custom-media-queries.css` file. Then, add the `@csstools/postcss-global-data` to your PostCSS config file. Finally, set that plugin’s options (before custom-media-queries) to `{ files: ['src/lib/styles/custom-media-queries.css'] }`. Remember to include `lang="postcss"` on your style tags in `.svelte` files, and you will now have access to custom media queries you set in `custom-media-queries.css`.

🙏🏽 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, though. 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 post on setting up PostCSS with SvelteKit, letting you use 🥏 future CSS now.

We see that custom-media-queries setup and more in the tutorial.

Hope you find it useful!

#askRodney #futureCSS https://t.co/79YHYujeHI
— Rodney (@askRodney) June 2, 2023

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.