Merge branch 'main' into main

.changeset/hip-moose-add.md

@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+recursively resolve registry dependencies

.github/workflows/prerelease.yml

@@ -54,7 +54,7 @@ jobs:
  path: packages/shadcn
 
  - name: Upload packaged artifact
- uses: actions/upload-artifact@v2
+ uses: actions/upload-artifact@v3
  with:
  name: npm-package-shadcn@${{ steps.package-version.outputs.current-version }}-pr-${{ github.event.number }} # encode the PR number into the artifact name
  path: packages/shadcn/dist/index.js

packages/shadcn/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @shadcn/ui
 
+## 2.0.8
+
+### Patch Changes
+
+- [#4922](https:/shadcn-ui/ui/pull/4922) [`c62167a`](https:/shadcn-ui/ui/commit/c62167a449a5cf82d8ed93a7af986d5e503893bb) Thanks [@sapenlei](https:/sapenlei)! - remove next.js default vars
+
+- [#4871](https:/shadcn-ui/ui/pull/4871) [`ce3adfa`](https:/shadcn-ui/ui/commit/ce3adfa075793a46b4fb2ff797ce87ad22bfa2cd) Thanks [@bcorbold](https:/bcorbold)! - support tw prefixes for registry files with single quote formatting
+
 ## 2.0.7
 
 ### Patch Changes

packages/shadcn/package.json

@@ -1,6 +1,6 @@
 {
  "name": "shadcn",
- "version": "2.0.7",
+ "version": "2.0.8",
  "description": "Add components to your apps.",
  "publishConfig": {
  "access": "public"

packages/shadcn/src/utils/get-project-info.ts

@@ -108,7 +108,7 @@ export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
 }
 
 export async function getTailwindCssFile(cwd: string) {
- const files = await fg.glob("**/*.css", {
+ const files = await fg.glob(["**/*.css", "**/*.scss"], {
  cwd,
  deep: 5,
  ignore: PROJECT_SHARED_IGNORE,

packages/shadcn/src/utils/registry/index.ts

@@ -265,44 +265,33 @@ export async function registryResolveItemsTree(
  return null
  }
 
- let items = (
- await Promise.all(
- names.map(async (name) => {
- const item = await getRegistryItem(name, config.style)
- return item
- })
- )
- ).filter((item): item is NonNullable<typeof item> => item !== null)
-
- if (!items.length) {
- return null
+ // If we're resolving the index, we want it to go first.
+ if (names.includes("index")) {
+ names.unshift("index")
  }
 
- const registryDependencies: string[] = items
- .map((item) => item.registryDependencies ?? [])
- .flat()
+ let registryDependencies: string[] = []
+ for (const name of names) {
+ const itemRegistryDependencies = await resolveRegistryDependencies(
+ name,
+ config
+ )
+ registryDependencies.push(...itemRegistryDependencies)
+ }
 
- const uniqueDependencies = Array.from(new Set(registryDependencies))
- const urls = Array.from([...names, ...uniqueDependencies]).map((name) =>
- getRegistryUrl(isUrl(name) ? name : `styles/${config.style}/${name}.json`)
- )
- let result = await fetchRegistry(urls)
+ const uniqueRegistryDependencies = Array.from(new Set(registryDependencies))
+ let result = await fetchRegistry(uniqueRegistryDependencies)
  const payload = z.array(registryItemSchema).parse(result)
 
  if (!payload) {
  return null
  }
 
- // If we're resolving the index, we want it to go first.
+ // If we're resolving the index, we want to fetch
+ // the theme item if a base color is provided.
+ // We do this for index only.
+ // Other components will ship with their theme tokens.
  if (names.includes("index")) {
- const index = await getRegistryItem("index", config.style)
- if (index) {
- payload.unshift(index)
- }
-
- // Fetch the theme item if a base color is provided.
- // We do this for index only.
- // Other components will ship with their theme tokens.
  if (config.tailwind.baseColor) {
  const theme = await registryGetTheme(config.tailwind.baseColor, config)
  if (theme) {
@@ -346,6 +335,46 @@ export async function registryResolveItemsTree(
  }
 }
 
+async function resolveRegistryDependencies(
+ url: string,
+ config: Config
+): Promise<string[]> {
+ const visited = new Set<string>()
+ const payload: string[] = []
+
+ async function resolveDependencies(itemUrl: string) {
+ const url = getRegistryUrl(
+ isUrl(itemUrl) ? itemUrl : `styles/${config.style}/${itemUrl}.json`
+ )
+
+ if (visited.has(url)) {
+ return
+ }
+
+ visited.add(url)
+
+ try {
+ const [result] = await fetchRegistry([url])
+ const item = registryItemSchema.parse(result)
+ payload.push(url)
+
+ if (item.registryDependencies) {
+ for (const dependency of item.registryDependencies) {
+ await resolveDependencies(dependency)
+ }
+ }
+ } catch (error) {
+ console.error(
+ `Error fetching or parsing registry item at ${itemUrl}:`,
+ error
+ )
+ }
+ }
+
+ await resolveDependencies(url)
+ return Array.from(new Set(payload))
+}
+
 export async function registryGetTheme(name: string, config: Config) {
  const baseColor = await getRegistryBaseColor(name)
  if (!baseColor) {

packages/shadcn/src/utils/transformers/transform-tw-prefix.ts

@@ -22,7 +22,7 @@ export const transformTwPrefixes: Transformer = async ({
  if (defaultClassNames) {
  defaultClassNames.replaceWithText(
  `"${applyPrefix(
- defaultClassNames.getText()?.replace(/"/g, ""),
+ defaultClassNames.getText()?.replace(/"|'/g, ""),
  config.tailwind.prefix
  )}"`
  )
@@ -46,7 +46,7 @@ export const transformTwPrefixes: Transformer = async ({
  if (classNames) {
  classNames?.replaceWithText(
  `"${applyPrefix(
- classNames.getText()?.replace(/"/g, ""),
+ classNames.getText()?.replace(/"|'/g, ""),
  config.tailwind.prefix
  )}"`
  )
@@ -65,7 +65,7 @@ export const transformTwPrefixes: Transformer = async ({
  if (value) {
  value.replaceWithText(
  `"${applyPrefix(
- value.getText()?.replace(/"/g, ""),
+ value.getText()?.replace(/"|'/g, ""),
  config.tailwind.prefix
  )}"`
  )
@@ -91,7 +91,7 @@ export const transformTwPrefixes: Transformer = async ({
  .forEach((node) => {
  node.replaceWithText(
  `"${applyPrefix(
- node.getText()?.replace(/"/g, ""),
+ node.getText()?.replace(/"|'/g, ""),
  config.tailwind.prefix
  )}"`
  )
@@ -101,7 +101,7 @@ export const transformTwPrefixes: Transformer = async ({
  if (node.isKind(SyntaxKind.StringLiteral)) {
  node.replaceWithText(
  `"${applyPrefix(
- node.getText()?.replace(/"/g, ""),
+ node.getText()?.replace(/"|'/g, ""),
  config.tailwind.prefix
  )}"`
  )
@@ -130,7 +130,7 @@ export const transformTwPrefixes: Transformer = async ({
  .forEach((node) => {
  node.replaceWithText(
  `"${applyPrefix(
- node.getText()?.replace(/"/g, ""),
+ node.getText()?.replace(/"|'/g, ""),
  config.tailwind.prefix
  )}"`
  )
@@ -140,7 +140,7 @@ export const transformTwPrefixes: Transformer = async ({
  if (arg.isKind(SyntaxKind.StringLiteral)) {
  arg.replaceWithText(
  `"${applyPrefix(
- arg.getText()?.replace(/"/g, ""),
+ arg.getText()?.replace(/"|'/g, ""),
  config.tailwind.prefix
  )}"`
  )
@@ -155,7 +155,7 @@ export const transformTwPrefixes: Transformer = async ({
  if (classNames) {
  classNames.replaceWithText(
  `"${applyPrefix(
- classNames.getText()?.replace(/"/g, ""),
+ classNames.getText()?.replace(/"|'/g, ""),
  config.tailwind.prefix
  )}"`
  )

packages/shadcn/src/utils/updaters/update-css-vars.ts

@@ -183,6 +183,27 @@ function updateCssVarsPlugin(
  }
 }
 
+function removeConflictVars(root: Rule | Root) {
+ const rootRule = root.nodes.find(
+ (node): node is Rule => node.type === "rule" && node.selector === ":root"
+ )
+
+ if (rootRule) {
+ const propsToRemove = ["--background", "--foreground"]
+
+ rootRule.nodes
+ .filter(
+ (node): node is postcss.Declaration =>
+ node.type === "decl" && propsToRemove.includes(node.prop)
+ )
+ .forEach((node) => node.remove())
+
+ if (rootRule.nodes.length === 0) {
+ rootRule.remove()
+ }
+ }
+}
+
 function cleanupDefaultNextStylesPlugin() {
  return {
  postcssPlugin: "cleanup-default-next-styles",
@@ -197,7 +218,9 @@ function cleanupDefaultNextStylesPlugin() {
  (node): node is postcss.Declaration =>
  node.type === "decl" &&
  node.prop === "color" &&
- node.value === "rgb(var(--foreground-rgb))"
+ ["rgb(var(--foreground-rgb))", "var(--foreground)"].includes(
+ node.value
+ )
  )
  ?.remove()
 
@@ -208,7 +231,8 @@ function cleanupDefaultNextStylesPlugin() {
  node.type === "decl" &&
  node.prop === "background" &&
  // This is only going to run on create project, so all good.
- node.value.startsWith("linear-gradient")
+ (node.value.startsWith("linear-gradient") ||
+ node.value === "var(--background)")
  )
  })
  ?.remove()
@@ -218,6 +242,21 @@ function cleanupDefaultNextStylesPlugin() {
  bodyRule.remove()
  }
  }
+
+ removeConflictVars(root)
+
+ const darkRootRule = root.nodes.find(
+ (node): node is Rule =>
+ node.type === "atrule" &&
+ node.params === "(prefers-color-scheme: dark)"
+ )
+
+ if (darkRootRule) {
+ removeConflictVars(darkRootRule)
+ if (darkRootRule.nodes.length === 0) {
+ darkRootRule.remove()
+ }
+ }
  },
  }
 }

packages/shadcn/test/utils/__snapshots__/transform-tw-prefix.test.ts.snap

@@ -25,6 +25,14 @@ export function Foo() {
 `;
 
 exports[`transform tailwind prefix 4`] = `
+"import * as React from "react"
+export function Foo() {
+ return <div className={cn("tw-bg-background hover:tw-bg-muted", true && "tw-text-primary-foreground sm:focus:tw-text-accent-foreground")}>foo</div>
+}
+ "
+`;
+
+exports[`transform tailwind prefix 5`] = `
 "@tailwind base;
 @tailwind components;
 @tailwind utilities;

packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap

@@ -12,16 +12,24 @@ exports[`registryResolveItemTree > should resolve index 1`] = `
  "tailwindcss-animate",
  "class-variance-authority",
  "lucide-react",
- "tailwindcss-animate",
- "class-variance-authority",
- "lucide-react",
- "@radix-ui/react-label",
  "clsx",
  "tailwind-merge",
+ "@radix-ui/react-label",
  ],
  "devDependencies": [],
  "docs": "",
  "files": [
+ {
+ "content": "import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
+",
+ "path": "lib/utils.ts",
+ "type": "registry:lib",
+ },
  {
  "content": ""use client"
 
@@ -54,23 +62,11 @@ export { Label }
  "target": "",
  "type": "registry:ui",
  },
- {
- "content": "import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
- return twMerge(clsx(inputs))
-}
-",
- "path": "lib/utils.ts",
- "type": "registry:lib",
- },
  ],
  "tailwind": {
  "config": {
  "plugins": [
  "require("tailwindcss-animate")",
- "require("tailwindcss-animate")",
  ],
  "theme": {
  "extend": {
@@ -251,7 +247,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
  <input
  type={type}
  className={cn(
- "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+ "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
  className
  )}
  ref={ref}