shadcn-svelte icon indicating copy to clipboard operation
shadcn-svelte copied to clipboard

feat: add cssVariables config

Open Ken-HH24 opened this issue 1 year ago • 4 comments

Hi, I try to implement the cssVariables config for #191 . Here is what I did to implement this feature.

  • use ts-morph to transform css variables just like shadcn-ui.
  • use ts-morph to transform the import statements.

I'm not sure if this works correctly or not.

I run the command shadcn-svelte init and shadcn-svelte add button. It seems to work.

cssVariables = false

// button/index.ts
const buttonVariants = tv({
	variants: {
		variant: {
			default: "bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90",
			// ... ...
		},
	},
	// ... ...
});

cssVariables = true

// button/index.ts
const buttonVariants = tv({
	variants: {
		variant: {
			default: "bg-primary text-primary-foreground hover:bg-primary/90",
			// ... ..	
		},
	}
	// ... ...
});

Before submitting the PR, please make sure you do the following

  • [x] If your PR isn't addressing a small fix (like a typo), it references an issue where it is discussed ahead of time and assigned to you. In many cases, features are absent for a reason.
  • [x] Prefix your PR title with feat:, fix:, chore:, or docs:.
  • [x] This message body should clearly illustrate what problems it solves.
  • [x] Follows the contribution guidelines.
  • [x] Format & lint the code with pnpm format and pnpm lint

Ken-HH24 avatar Dec 23 '23 14:12 Ken-HH24

⚠️ No Changeset found

Latest commit: fd6283b0e5ccb02e49e11ad376f2b56bffdd2164

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

changeset-bot[bot] avatar Dec 23 '23 14:12 changeset-bot[bot]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
shadcn-svelte ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 23, 2023 2:54pm

vercel[bot] avatar Dec 23 '23 14:12 vercel[bot]

Hey there, thanks a ton for taking this on! I'm going to keep this PR on pause until we add some tests to the CLI to ensure this doesn't break any existing functionality.

huntabyte avatar Jan 04 '24 01:01 huntabyte

Sure, maybe I can also help with adding tests to the CLI.

Ken-HH24 avatar Jan 06 '24 02:01 Ken-HH24