chore(clerk-js): Remove UI and tailwind transformer packages

.changeset/witty-apes-scream.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Remove an internally used package called `@clerk/ui` that is no longer being used. You'll see no difference in your current usage of `@clerk/clerk-js`.

eslint.config.mjs

@@ -392,13 +392,6 @@ export default tseslint.config([
       ],
     },
   },
-  {
-    name: 'packages/ui',
-    files: ['packages/ui/src/**/*'],
-    rules: {
-      'import/no-unresolved': ['error', { ignore: ['^#', '^~', '@clerk/elements/*'] }],
-    },
-  },
   {
     name: 'packages/upgrade',
     files: ['packages/upgrade/src/**/*'],

package.json

@@ -9,7 +9,7 @@
     "changeset": "changeset",
     "changeset:empty": "pnpm changeset --empty",
     "clean": "turbo clean",
-    "dev": "TURBO_UI=0 FORCE_COLOR=1 turbo dev --filter=@clerk/* --filter=!@clerk/clerk-expo --filter=!@clerk/tanstack-start --filter=!@clerk/elements --filter=!@clerk/tailwindcss-transformer --filter=!@clerk/remix --filter=!@clerk/ui --filter=!@clerk/chrome-extension",
+    "dev": "TURBO_UI=0 FORCE_COLOR=1 turbo dev --filter=@clerk/* --filter=!@clerk/clerk-expo --filter=!@clerk/tanstack-start --filter=!@clerk/elements --filter=!@clerk/remix --filter=!@clerk/chrome-extension",
     "dev:js": "TURBO_UI=0 FORCE_COLOR=1 turbo dev:current --filter=@clerk/clerk-js",
     "format": "prettier --write .",
     "format:check": "prettier --cache --check .",

packages/clerk-js/bundlewatch.config.json

@@ -2,7 +2,7 @@
   "files": [
     { "path": "./dist/clerk.js", "maxSize": "560kB" },
     { "path": "./dist/clerk.browser.js", "maxSize": "75kB" },
-    { "path": "./dist/clerk.headless.js", "maxSize": "48kB" },
+    { "path": "./dist/clerk.headless.js", "maxSize": "48.1kB" },
     { "path": "./dist/ui-common*.js", "maxSize": "89KB" },
     { "path": "./dist/vendors*.js", "maxSize": "25KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },

packages/clerk-js/rspack.config.js

@@ -89,26 +89,14 @@ const common = ({ mode, disableRHC = false }) => {
             minChunks: 1,
             name: 'ui-common',
             priority: -20,
-            test: module =>
-              module.resource &&
-              !module.resource.includes('/ui/components') &&
-              !module.resource.includes('packages/elements') &&
-              !module.resource.includes('packages/ui'),
+            test: module => module.resource && !module.resource.includes('/ui/components'),
           },
           defaultVendors: {
             minChunks: 1,
             test: /[\\/]node_modules[\\/]/,
             name: 'vendors',
             priority: -10,
           },
-          commonNew: {
-            minChunks: 2,
-            name: 'common-new',
-            chunks(chunk) {
-              return !!chunk.name?.startsWith('rebuild--');
-            },
-            priority: 0,
-          },
           react: {
             chunks: 'all',
             test: /[\\/]node_modules[\\/](react-dom|scheduler)[\\/]/,
@@ -216,38 +204,14 @@ const typescriptLoaderDev = () => {
   ];
 };
 
-/**
- * Used in outputs that utilize chunking, and returns a URL to the stylesheet.
- * @type { () => (import('@rspack/core').RuleSetRule) }
- */
-const clerkUICSSLoader = () => {
-  // This emits a module exporting a URL to the styles.css file.
-  return {
-    test: /packages\/ui\/dist\/styles\.css/,
-    type: 'asset/resource',
-  };
-};
-
-/**
- * Used in outputs that _do not_ utilize chunking, and returns the contents of the stylesheet.
- * @type { () => (import('@rspack/core').RuleSetRule) }
- */
-const clerkUICSSSourceLoader = () => {
-  // This emits a module exporting the contents of the styles.css file.
-  return {
-    test: /packages\/ui\/dist\/styles\.css/,
-    type: 'asset/source',
-  };
-};
-
 /**
  * Used for production builds that have dynamicly loaded chunks.
  * @type { () => (import('@rspack/core').Configuration) }
  * */
 const commonForProdChunked = () => {
   return {
     module: {
-      rules: [svgLoader(), ...typescriptLoaderProd(), clerkUICSSLoader()],
+      rules: [svgLoader(), ...typescriptLoaderProd()],
     },
   };
 };
@@ -259,7 +223,7 @@ const commonForProdChunked = () => {
 const commonForProdBundled = () => {
   return {
     module: {
-      rules: [svgLoader(), ...typescriptLoaderProd(), clerkUICSSSourceLoader()],
+      rules: [svgLoader(), ...typescriptLoaderProd()],
     },
   };
 };
@@ -495,7 +459,7 @@ const devConfig = ({ mode, env }) => {
   const commonForDev = () => {
     return {
       module: {
-        rules: [svgLoader(), ...typescriptLoaderDev(), clerkUICSSLoader()],
+        rules: [svgLoader(), ...typescriptLoaderDev()],
       },
       plugins: [
         new ReactRefreshPlugin(/** @type {any} **/ ({ overlay: { sockHost: devUrl.host } })),

packages/clerk-js/src/global.d.ts

@@ -1,8 +1,3 @@
-declare module '@clerk/ui/styles.css' {
-  const content: string;
-  export default content;
-}
-
 declare module '*.svg' {
   const value: React.FC<React.SVGAttributes<SVGElement>>;
   export default value;

packages/elements/package.json

@@ -63,7 +63,6 @@
     "build:declarations": "tsc --env.NODE_ENV production -p tsconfig.json",
     "dev": "tsup --env.NODE_ENV development --watch",
     "dev:example": "concurrently \"pnpm dev\" \"pnpm app:dev\"",
-    "dev:theme-builder": "TURBO_UI=0 concurrently --prefix-colors auto --names \"elements,ui,theme-builder\" \"turbo dev --filter=@clerk/elements\" \"pnpm dev -w @clerk/ui\" \"cd ../ui/theme-builder && pnpm dev\"",
     "lint": "eslint src/",
     "lint:attw": "attw --pack . --profile node16",
     "lint:publint": "publint",