fix: build system improvements for package-level scripts (#263)

## **Description**

This PR improves the build system across the monorepo to properly handle
individual package build scripts and ensure consistent building
behavior.

Key improvements:
1. Updates root build script to use Yarn workspaces for better package
management
2. Ensures CSS files are properly built and placed in dist directories
3. Fixes issues with individual package builds using `yarn workspace`
4. Standardizes build scripts across packages

## **Related issues**

Fixes: #262

## **Manual testing steps**

1. Clean all builds: `yarn build:clean`
2. Run root build: `yarn build`
3. Run build types: `yarn build:types`
4. Verify CSS files are present in design-tokens/dist
5. Test individual package build: `yarn workspace
@metamask/design-tokens run build`
6. Verify all build artifacts are generated correctly

## **Screen recordings**

### Before

Preview build of design tokens doesn't work because stylesheet is not
included in build

<img width="1350" alt="Screenshot 2024-12-02 at 7 33 42 AM"
src="https://github.com/user-attachments/assets/63e5be37-1951-4ffc-9818-ad9db8dce6c7">

Styles not being built in design tokens and not all types being built


https://github.com/user-attachments/assets/238f1b2d-02dd-4d06-bdb5-3475bbd5cd62

### After

Preview build of design tokens works because stylesheet is included in
build

<img width="1386" alt="Screenshot 2024-12-02 at 7 35 05 AM"
src="https://github.com/user-attachments/assets/a9baa4a7-b9d8-4656-8aad-fd40f9d18087">

Build scripts working as expected and stylesheeet in design tokens
package being built


https://github.com/user-attachments/assets/236078ed-2584-437c-ac37-b957edcab8f6

## **Pre-merge author checklist**

- [x] I've followed MetaMask Contributor Docs
- [x] I've completed the PR template
- [x] I've included tests (build verification)
- [x] I've documented the build process
- [x] I've applied appropriate labels

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR
- [ ] I confirm this PR addresses all acceptance criteria

Author: georgewrmarshall

package.json

@@ -13,8 +13,8 @@
     "packages/*"
   ],
   "scripts": {
-    "build": "yarn ts-bridge --project tsconfig.build.json --verbose && yarn workspace @metamask/design-system-twrnc-preset build && yarn workspace @metamask/design-system-react-native build",
-    "build:clean": "rimraf dist '**/*.tsbuildinfo' && yarn build",
+    "build": "yarn workspaces foreach --all --topological-dev run build",
+    "build:clean": "rimraf 'packages/*/dist' '**/*.tsbuildinfo' && yarn build",
     "build:types": "tsc --build tsconfig.build.json --verbose",
     "changelog:update": "yarn workspaces foreach --all --no-private --parallel --interlaced --verbose run changelog:update",
     "changelog:validate": "yarn workspaces foreach --all --no-private --parallel --interlaced --verbose run changelog:validate",
@@ -59,7 +59,6 @@
     "@metamask/eslint-config-nodejs": "^12.1.0",
     "@metamask/eslint-config-typescript": "^12.1.0",
     "@metamask/utils": "^9.1.0",
-    "@ts-bridge/cli": "^0.5.1",
     "@types/jest": "^27.4.1",
     "@types/lodash": "^4.14.191",
     "@types/node": "^16.18.54",

packages/design-system-react-native/package.json

@@ -43,7 +43,6 @@
   },
   "dependencies": {
     "@metamask/design-system-twrnc-preset": "workspace:^",
-    "@types/react": "^18.2.0",
     "react": "^18.2.0",
     "react-native": "^0.72.15"
   },
@@ -57,6 +56,7 @@
     "@testing-library/react-native": "^12.8.1",
     "@types/babel__preset-env": "^7",
     "@types/jest": "^27.4.1",
+    "@types/react": "^18.2.0",
     "@types/react-test-renderer": "^18",
     "babel-jest": "^29.7.0",
     "deepmerge": "^4.2.2",

packages/design-system-react-native/tsconfig.build.json

@@ -9,9 +9,7 @@
     "emitDeclarationOnly": false
   },
   "references": [
-    {
-      "path": "../design-system-twrnc-preset/tsconfig.build.json"
-    }
+    { "path": "../design-system-twrnc-preset/tsconfig.build.json" }
   ],
   "include": ["./src"]
 }

packages/design-system-react/package.json

@@ -56,6 +56,7 @@
     "@storybook/test": "^8.3.5",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
+    "@ts-bridge/cli": "^0.5.1",
     "@types/jest": "^27.4.1",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",

packages/design-system-tailwind-preset/package.json

@@ -47,6 +47,7 @@
   },
   "devDependencies": {
     "@metamask/auto-changelog": "^3.4.4",
+    "@ts-bridge/cli": "^0.5.1",
     "@types/jest": "^27.4.1",
     "@types/node": "^16.18.54",
     "deepmerge": "^4.2.2",

packages/design-system-twrnc-preset/tsconfig.build.json

@@ -8,6 +8,6 @@
     "types": ["react-native", "jest"],
     "emitDeclarationOnly": false
   },
-  "references": [],
+  "references": [{ "path": "../design-tokens/tsconfig.build.json" }],
   "include": ["./src"]
 }

packages/design-tokens/package.json

@@ -33,13 +33,11 @@
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.cts",
   "files": [
-    "dist",
     "dist/"
   ],
   "scripts": {
     "build": "ts-bridge --project tsconfig.build.json --verbose --clean --no-references && yarn build:css",
     "build:css": "cleancss -o dist/styles.css src/css/index.css",
-    "build:types": "tsc --project tsconfig.build.json",
     "changelog:update": "../../scripts/update-changelog.sh @metamask/design-tokens",
     "changelog:validate": "../../scripts/validate-changelog.sh @metamask/design-tokens",
     "publish:preview": "yarn npm publish --tag preview",
@@ -52,6 +50,7 @@
   "devDependencies": {
     "@metamask/auto-changelog": "^3.4.4",
     "@metamask/design-system-react": "workspace:^",
+    "@ts-bridge/cli": "^0.5.1",
     "@types/jest": "^27.4.1",
     "@types/node": "^16.18.54",
     "clean-css-cli": "^5.6.3",

scripts/prepare-preview-builds.jq

@@ -8,13 +8,6 @@
 # This is just for testing, it doesn't need to strictly follow SemVer.
 .version |= split("-")[0] + "-preview.\($hash)" |
 
-# Update the build script in the root package.json to use the preview scope
-if .scripts and .scripts.build then
-  .scripts.build |= gsub("@metamask/"; "\($npm_scope)/")
-else
-  .
-end |
-
 # The workspace dependencies are updated to point to the exact preview build
 # version, so that Yarn does not try to resolve a different version from the
 # registry.

tsconfig.build.json

@@ -1,8 +1,10 @@
 {
   "references": [
-    { "path": "./packages/design-system-react/tsconfig.build.json" },
+    { "path": "./packages/design-tokens/tsconfig.build.json" },
+    { "path": "./packages/design-system-twrnc-preset/tsconfig.build.json" },
     { "path": "./packages/design-system-tailwind-preset/tsconfig.build.json" },
-    { "path": "./packages/design-tokens/tsconfig.build.json" }
+    { "path": "./packages/design-system-react-native/tsconfig.build.json" },
+    { "path": "./packages/design-system-react/tsconfig.build.json" }
   ],
   "files": [],
   "include": []

yarn.lock

@@ -3208,6 +3208,7 @@ __metadata:
     "@storybook/test": "npm:^8.3.5"
     "@testing-library/jest-dom": "npm:^6.6.3"
     "@testing-library/react": "npm:^16.0.1"
+    "@ts-bridge/cli": "npm:^0.5.1"
     "@types/jest": "npm:^27.4.1"
     "@types/react": "npm:^18.2.0"
     "@types/react-dom": "npm:^18.2.0"
@@ -3230,6 +3231,7 @@ __metadata:
   resolution: "@metamask/design-system-tailwind-preset@workspace:packages/design-system-tailwind-preset"
   dependencies:
     "@metamask/auto-changelog": "npm:^3.4.4"
+    "@ts-bridge/cli": "npm:^0.5.1"
     "@types/jest": "npm:^27.4.1"
     "@types/node": "npm:^16.18.54"
     deepmerge: "npm:^4.2.2"
@@ -3277,6 +3279,7 @@ __metadata:
   dependencies:
     "@metamask/auto-changelog": "npm:^3.4.4"
     "@metamask/design-system-react": "workspace:^"
+    "@ts-bridge/cli": "npm:^0.5.1"
     "@types/jest": "npm:^27.4.1"
     "@types/node": "npm:^16.18.54"
     clean-css-cli: "npm:^5.6.3"
@@ -3352,7 +3355,6 @@ __metadata:
     "@metamask/eslint-config-nodejs": "npm:^12.1.0"
     "@metamask/eslint-config-typescript": "npm:^12.1.0"
     "@metamask/utils": "npm:^9.1.0"
-    "@ts-bridge/cli": "npm:^0.5.1"
     "@types/jest": "npm:^27.4.1"
     "@types/lodash": "npm:^4.14.191"
     "@types/node": "npm:^16.18.54"