@bien-bien/css-setup

A command-line utility to quickly set up PostCSS and styles for SvelteKit projects.

What it does

This utility performs the following tasks:

1. Creates the necessary CSS files:

   • src/lib/styles/main.css - Main CSS styles
   • src/lib/styles/mixins/index.css - CSS mixins

2. Installs required packages:

   • postcss-mixins (dev dependency)
   • autoprefixer (dev dependency)
   • @bien-bien/css-sizes (regular dependency)
   • @bien-bien/css-reset (regular dependency)

3. Creates a PostCSS configuration file (postcss.config.cjs)

4. Updates svelte.config.js to enable PostCSS by adding postcss: true to the vitePreprocess options

Installation

Global Installation

pnpm add -g @bien-bien/css-setup

Usage

Navigate to your SvelteKit project directory and run:

css-setup

After running the utility, remember to import the styles in your +layout.svelte file:

<script>
  import '$lib/styles/main.css';
</script>