chore(release): version packages (#4938)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

packages/shadcn/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @shadcn/ui
 
+## 2.0.8
+
+### Patch Changes
+
+- [#4922](https://github.com/shadcn-ui/ui/pull/4922) [`c62167a`](https://github.com/shadcn-ui/ui/commit/c62167a449a5cf82d8ed93a7af986d5e503893bb) Thanks [@sapenlei](https://github.com/sapenlei)! - remove next.js default vars
+
+- [#4871](https://github.com/shadcn-ui/ui/pull/4871) [`ce3adfa`](https://github.com/shadcn-ui/ui/commit/ce3adfa075793a46b4fb2ff797ce87ad22bfa2cd) Thanks [@bcorbold](https://github.com/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/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

@@ -251,7 +251,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}

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

@@ -73,6 +73,29 @@ export function Foo() {
     })
   ).toMatchSnapshot()
 
+  expect(
+    await transform({
+      filename: "test.ts",
+      raw: `import * as React from "react"
+export function Foo() {
+	return <div className={cn('bg-background hover:bg-muted', true && 'text-primary-foreground sm:focus:text-accent-foreground')}>foo</div>
+}
+    `,
+      config: {
+        tailwind: {
+          baseColor: "stone",
+          cssVariables: false,
+          prefix: "tw-",
+        },
+        aliases: {
+          components: "@/components",
+          utils: "@/lib/utils",
+        },
+      },
+      baseColor: stone,
+    })
+  ).toMatchSnapshot()
+
   expect(
     applyPrefixesCss(
       "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 224 71.4% 4.1%;\n \n    --muted: 220 14.3% 95.9%;\n    --muted-foreground: 220 8.9% 46.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 224 71.4% 4.1%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 224 71.4% 4.1%;\n \n    --border: 220 13% 91%;\n    --input: 220 13% 91%;\n \n    --primary: 220.9 39.3% 11%;\n    --primary-foreground: 210 20% 98%;\n \n    --secondary: 220 14.3% 95.9%;\n    --secondary-foreground: 220.9 39.3% 11%;\n \n    --accent: 220 14.3% 95.9%;\n    --accent-foreground: 220.9 39.3% 11%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 20% 98%;\n \n    --ring: 217.9 10.6% 64.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 224 71.4% 4.1%;\n    --foreground: 210 20% 98%;\n \n    --muted: 215 27.9% 16.9%;\n    --muted-foreground: 217.9 10.6% 64.9%;\n \n    --popover: 224 71.4% 4.1%;\n    --popover-foreground: 210 20% 98%;\n \n    --card: 224 71.4% 4.1%;\n    --card-foreground: 210 20% 98%;\n \n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n \n    --primary: 210 20% 98%;\n    --primary-foreground: 220.9 39.3% 11%;\n \n    --secondary: 215 27.9% 16.9%;\n    --secondary-foreground: 210 20% 98%;\n \n    --accent: 215 27.9% 16.9%;\n    --accent-foreground: 210 20% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 85.7% 97.3%;\n \n    --ring: 215 27.9% 16.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}",