Skip to content

feat(astro): make an astro.js integration #74

@tremppu

Description

@tremppu

Atm Salty CSS already works with Astro as CSS-in-JS solution when first adding a React.js integration.

Steps to make Salty CSS in Astro happen before integration is live:

  1. Add React integration to Astro https://docs.astro.build/en/guides/integrations-guide/react/
  2. Initialize Salty CSS with CLI npx salty-css init
  3. Install and add React and Vite packages manually npm i @salty-css/react @salty-css/vite
  4. Add following vite configuration snippet to your astro.config:
// Import
import saltyPlugin from "@salty-css/vite";

// Config 
export default defineConfig({
  vite: {
    plugins: [
      saltyPlugin("dirname_or_path_to_your_repo"),
    ],
  },
});
  1. Create new Salty CSS components with npx salty-css generate [dir]

Additionally className function works out of the box great atm with astro components.

Sub-issues

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Status

Ready, waiting for release

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions