chore(ui): reduce prod deps (#8955)

* chore(ui): reduce prod deps

* fixup!

* fixup!

Author: avivkeller

.github/workflows/build.yml

@@ -44,8 +44,6 @@ jobs:
         with:
           pnpm: true
           use-version-file: true
-          # We only want to install required production packages
-          install-flags: --prod
 
       - name: Use GNU tar instead BSD tar
         # This ensures that we use GNU `tar` which is more efficient for extracting caches's

apps/site/.stylelintrc.mjs

@@ -26,7 +26,7 @@ export default {
   plugins: [
     'stylelint-order',
     'stylelint-selector-bem-pattern',
-    '@node-core/ui-components/stylelint/one-utility-class-per-line.mjs',
+    '@node-core/ui-components/src/stylelint/one-utility-class-per-line.mjs',
   ],
   rules: {
     // Enforces Element Class Names to be camelCase

apps/site/styles/index.css

@@ -6,6 +6,17 @@
  * @see https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint
 */
 
-@import '@node-core/ui-components/styles/index.css';
+@import 'tailwindcss';
+@import '@node-core/ui-components/src/styles/index.css';
 @import '@node-core/rehype-shiki/index.css';
-@import './locales.css';
+
+/**
+ * To enhance readability for Korean users, line spacing is increased,
+ * line breaks in the middle of words are prevented, and long words are
+ * managed to avoid disrupting the layout.
+ */
+html[lang='ko'] {
+  @apply leading-7
+    break-words
+    break-keep;
+}

apps/site/styles/locales.css

@@ -3,7 +3,7 @@
   "extends": ["//"],
   "tasks": {
     "dev": {
-      "dependsOn": ["build:blog-data"],
+      "dependsOn": ["build:blog-data", "build:twoslash-fsmap", "^build"],
       "cache": false,
       "persistent": true,
       "env": [
@@ -115,7 +115,7 @@
       "cache": false
     },
     "test:unit": {
-      "dependsOn": ["build:blog-data"],
+      "dependsOn": ["build:blog-data", "build:twoslash-fsmap", "^build"],
       "inputs": [
         "{app,components,hooks,i18n,layouts,middlewares,pages,providers,types,util}/**/*.{ts,tsx,mjs}",
         "{app,components,layouts,pages,styles}/**/*.css",
@@ -142,7 +142,7 @@
       "outputs": ["generated/twoslash-fsmap.json"]
     },
     "cloudflare:build:worker": {
-      "dependsOn": ["build:blog-data", "build:twoslash-fsmap"],
+      "dependsOn": ["build:blog-data", "build:twoslash-fsmap", "^build"],
       "inputs": [
         "{app,components,hooks,i18n,layouts,middlewares,pages,providers,types,util}/**/*.{ts,tsx}",
         "{app,components,layouts,pages,styles}/**/*.css",

apps/site/turbo.json

@@ -1,5 +1,5 @@
 {
   "$schema": "https://openapi.vercel.sh/vercel.json",
-  "installCommand": "pnpm install --prod --frozen-lockfile",
+  "installCommand": "pnpm install --frozen-lockfile",
   "ignoreCommand": "[[ \"$VERCEL_GIT_COMMIT_REF\" =~ \"^dependabot/.*\" || \"$VERCEL_GIT_COMMIT_REF\" =~ \"^gh-readonly-queue/.*\" ]]"
 }

apps/site/vercel.json

@@ -13,7 +13,6 @@
     "name": "Node.js Website Team and Contributors"
   },
   "scripts": {
-    "compile": "turbo compile",
     "build": "turbo build",
     "cloudflare:deploy": "turbo cloudflare:deploy",
     "cloudflare:preview": "turbo cloudflare:preview",

package.json

@@ -20,9 +20,9 @@
     "directory": "packages/rehype-shiki"
   },
   "scripts": {
-    "compile:ts": "tsc",
-    "compile": "node --run compile:ts",
-    "release": "node --run compile",
+    "build:ts": "tsc",
+    "build": "node --run build:ts",
+    "release": "node --run build",
     "lint": "node --run lint:js",
     "lint:fix": "node --run lint:js:fix",
     "lint:js": "eslint \"**/*.mjs\"",

packages/rehype-shiki/package.json

@@ -17,7 +17,7 @@ compiled outputs and keep them updated while you work.
 ```bash
 # From nodejs.org/packages/ui-components
 pnpm install
-node --run compile:watch
+node --run build:watch
 
 # In another terminal, still in nodejs.org/packages/ui-components
 npm link
@@ -26,5 +26,5 @@ npm link
 npm link @node-core/ui-components
 ```
 
-The `compile:watch` script keeps `dist/` up to date so consumers resolve compiled
+The `build:watch` script keeps `dist/` up to date so consumers resolve compiled
 CSS and JavaScript instead of the raw Tailwind source.

packages/ui-components/README.md

@@ -1,41 +1,48 @@
 {
   "name": "@node-core/ui-components",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "type": "module",
   "exports": {
     "./*": {
-      "rolldown": [
-        "./dist/*",
-        "./dist/*.js",
-        "./dist/*/index.js"
-      ],
-      "default": [
+      "types": [
         "./src/*",
         "./src/*.tsx",
         "./src/*/index.tsx",
         "./src/*.ts",
         "./src/*/index.ts"
+      ],
+      "default": [
+        "./dist/*",
+        "./dist/*.js",
+        "./dist/*/index.js"
       ]
-    }
+    },
+    "./src/*": [
+      "./src/*",
+      "./src/*.tsx",
+      "./src/*/index.tsx",
+      "./src/*.ts",
+      "./src/*/index.ts"
+    ]
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/nodejs/nodejs.org",
     "directory": "packages/ui-components"
   },
   "scripts": {
-    "compile:ts": "tsc",
-    "compile:css": "postcss --dir dist --base src \"src/**/*.module.css\" src/styles/index.css",
-    "compile": "node --run compile:ts && node --run compile:css",
-    "compile:watch": "concurrently -k \"node --run compile:ts -- --watch\" \"node --run compile:css -- --watch\"",
-    "release": "node --run compile",
+    "build": "node --run build:ts && node --run build:css",
+    "build:css": "postcss --dir dist --base src \"src/**/*.module.css\" src/styles/index.css",
+    "build:ts": "tsc",
+    "build:watch": "concurrently -k \"node --run build:ts -- --watch\" \"node --run build:css -- --watch\"",
     "lint": "node --run lint:js && node --run lint:css",
     "lint:css": "stylelint \"**/*.css\" --allow-empty-input --cache --cache-strategy=content --cache-location=.stylelintcache",
     "lint:css:fix": "node --run lint:css -- --fix",
     "lint:fix": "node --run lint:js:fix && node --run lint:css:fix",
     "lint:js": "eslint \"**/*.{js,mjs,ts,tsx}\"",
     "lint:js:fix": "node --run lint:js -- --fix",
     "lint:types": "tsc --noEmit",
+    "release": "node --run build",
     "storybook": "cross-env NODE_NO_WARNINGS=1 storybook dev -p 6006 --quiet",
     "storybook:build": "cross-env NODE_NO_WARNINGS=1 storybook build --quiet --webpack-stats-json",
     "test": "node --run test:unit",
@@ -54,15 +61,9 @@
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@tailwindcss/postcss": "~4.3.0",
-    "@types/react": "catalog:",
     "@vcarl/remark-headings": "~0.1.0",
     "classnames": "catalog:",
-    "postcss-calc": "10.1.1",
-    "postcss-cli": "11.0.1",
-    "react": "catalog:",
-    "tailwindcss": "catalog:",
-    "typescript": "catalog:"
+    "react": "catalog:"
   },
   "devDependencies": {
     "@eslint-react/eslint-plugin": "~5.8.6",
@@ -71,23 +72,29 @@
     "@storybook/addon-themes": "~10.4.1",
     "@storybook/addon-webpack5-compiler-swc": "~4.0.3",
     "@storybook/react-webpack5": "~10.4.1",
+    "@tailwindcss/postcss": "~4.3.0",
     "@testing-library/user-event": "~14.6.1",
     "@types/node": "catalog:",
+    "@types/react": "catalog:",
     "concurrently": "9.2.1",
     "cross-env": "catalog:",
     "css-loader": "7.1.4",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "7.1.1",
     "eslint-plugin-storybook": "10.3.3",
     "global-jsdom": "29.0.0",
+    "postcss-calc": "~10.1.1",
+    "postcss-cli": "^11.0.1",
     "postcss-loader": "8.2.1",
     "storybook": "~10.4.1",
     "style-loader": "4.0.0",
     "stylelint": "17.9.1",
     "stylelint-config-standard": "40.0.0",
     "stylelint-order": "8.1.1",
     "stylelint-selector-bem-pattern": "4.0.1",
-    "tsx": "4.22.3"
+    "tailwindcss": "catalog:",
+    "tsx": "4.22.3",
+    "typescript": "catalog:"
   },
   "imports": {
     "#ui/*": {