How to add Open Props to a SvelteKit application

Things you’ll need:

• a SvelteKit project
• open-props package
• postcss-jit-props package

---

Instructions:

Set up your SvelteKit project:

• Create a new SvelteKit project.

pnpm create svelte sveltekitchen

• Follow the prompts.

• Navigate to the project directory.

cd sveltekitchen

• Install project dependencies.

pnpm i

Install Open Props:

• Install the Open Props package

pnpm i -D open-props

Install PostCss JIT Props:

• Install the PostCSS JIT Props package to ensure unused CSS variables are removed.

pnpm i -D postcss-jit-props

Configure PostCSS

• Create a configuration file to use open-props and postcss-jit-props

const postcssJitProps = require('postcss-jit-props');
const openProps = require('open-props');
const config = {
	plugins: [
		postcssJitProps(openProps),
	]
};

module.exports = config;

---

Serve and enjoy:

• Utilize Open Props’ CSS variables in your components, ensuring that only the variables you actually use will be included.

---

Notes

• Recipe tested using:

  • @sveltejs/adapter-auto@2.1.0
  • @sveltejs/kit@1.21.0
  • svelte@4.0.1
  • vite@4.3.9
  • open-props@1.5.10
  • postcss-jit-props@1.0.13