chore(angular,react,vue): copy css with build.watch (#28934)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

CSS is not copied from the `core/` package when running each respective
framework package in watch mode.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Copies the global styles from the `core/` package to each respective
framework package when running the build in watch mode.

Note: This does not register a file watcher to copy CSS updates after
the initial command is ran. This just avoids a scenario of the global
styles being updated and the developer _not_ running a `pnpm build`
prior to running `pnpm build.watch` and the global styles not being
reflected in the framework package.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

packages/angular/package.json

@@ -27,7 +27,7 @@
     "build": "pnpm run clean && pnpm run build.ng && pnpm run build.core && pnpm run clean-generated",
     "build.core": "node scripts/build-core.js",
     "build.ng": "ng-packagr -p ng-package.json -c tsconfig.json",
-    "build.watch": "pnpm run build.ng --watch",
+    "build.watch": "pnpm build.core && pnpm build.ng --watch",
     "clean": "node scripts/clean.js",
     "clean-generated": "node ./scripts/clean-generated.js",
     "lint": "pnpm run eslint && pnpm run prettier --write --cache",

packages/angular/scripts/build-core.js

@@ -4,6 +4,12 @@ const spawn = require('child_process').spawn;
 
 const typescriptPath = path.join(__dirname, '..', 'node_modules', '.bin');
 
+/**
+ * Copy the CSS from the core package to the angular package.
+ * 
+ * This allows developers to import the global stylesheets
+ * from the @ionic/angular package instead of @ionic/core. 
+ */
 function copyCSS() {
   const src = path.join(__dirname, '..', '..', '..', 'core', 'css');
   const dst = path.join(__dirname, '..','dist', 'css');

packages/react/package.json

@@ -21,7 +21,7 @@
   },
   "scripts": {
     "build": "pnpm run clean && pnpm run copy && pnpm run compile",
-    "build.watch": "pnpm run compile --watch",
+    "build.watch": "pnpm copy && pnpm compile --watch",
     "clean": "rimraf dist && rimraf routing",
     "compile": "rollup -c",
     "eslint": "eslint src",

packages/react/scripts/copy.js

@@ -1,6 +1,11 @@
 const fs = require('fs-extra');
 const path = require('path');
-
+/**
+ * Copy the CSS from the core package to the react package.
+ * 
+ * This allows developers to import the global stylesheets
+ * from the @ionic/react package instead of @ionic/core. 
+ */
 function copyCSS() {
   const src = path.join(__dirname, '..', '..', '..', 'core', 'css');
   const dst = path.join(__dirname, '..', 'css');

packages/vue/package.json

@@ -9,7 +9,7 @@
     "lint.fix": "pnpm run eslint --fix && pnpm run prettier --write --cache",
     "test": "jest",
     "build": "pnpm run clean && pnpm run copy && pnpm run copy.overlays && pnpm run bundle && pnpm run build.vetur && pnpm run build.web-types",
-    "build.watch": "pnpm run bundle --watch",
+    "build.watch": "pnpm copy && pnpm bundle --watch",
     "bundle": "rollup --config rollup.config.mjs",
     "clean": "rimraf dist",
     "build.web-types": "node ./scripts/build-web-types.js",

packages/vue/scripts/copy-css.js

@@ -1,6 +1,12 @@
 const fs = require('fs-extra');
 const path = require('path');
 
+/**
+ * Copy the CSS from the core package to the vue package.
+ * 
+ * This allows developers to import the global stylesheets
+ * from the @ionic/vue package instead of @ionic/core. 
+ */
 function copyCSS() {
   const src = path.join(__dirname, '..', '..', '..', 'core', 'css');
   const dst = path.join(__dirname, '..', 'css');