From d78b0eb3acf69f4adb7ae1d1bf18b066adbf2090 Mon Sep 17 00:00:00 2001
From: An Phi <aphi@skidmore.edu>
Date: Sat, 13 Nov 2021 20:49:48 -0500
Subject: [PATCH] improve sass building workflow and optimize bot script (#665)

* update PR template

* revamp sass dev and build workflow

* move github bot/automation to its own package

* bump dependencies

* add changeset

* exclude bot package from checks
---
 .changeset/chilly-olives-drum.md              | 23 ++++++
 .changeset/good-snails-collect.md             | 20 +++++
 .github/PULL_REQUEST_TEMPLATE.md              |  2 +
 .github/workflows/bot-new-issue-label.yml     |  8 +-
 CONTRIBUTING.md                               | 35 +++------
 package.json                                  |  9 ++-
 .../legend-application/_package.config.js     |  9 ---
 packages/legend-application/package.json      |  4 +-
 packages/legend-art/_package.config.js        |  9 ---
 packages/legend-art/package.json              |  4 +-
 packages/legend-dev-utils/CopyrightUtils.js   | 51 +-----------
 packages/legend-dev-utils/DevUtils.js         |  5 ++
 .../_package.config.js                        |  9 ---
 .../package.json                              |  4 +-
 .../_package.config.js                        |  9 ---
 .../legend-extension-dsl-diagram/package.json |  4 +-
 .../_package.config.js                        |  9 ---
 .../package.json                              |  4 +-
 .../_package.config.js                        |  9 ---
 .../legend-extension-dsl-text/package.json    |  4 +-
 .../_package.config.js                        |  9 ---
 .../_package.config.js                        |  9 ---
 packages/legend-graph/_package.config.js      |  9 ---
 packages/legend-query-app/_package.config.js  |  9 ---
 packages/legend-query-app/package.json        |  4 +-
 packages/legend-query-deployment/package.json |  2 +-
 packages/legend-query/_package.config.js      |  9 ---
 packages/legend-query/package.json            |  4 +-
 .../legend-server-depot/_package.config.js    |  9 ---
 .../legend-server-sdlc/_package.config.js     |  9 ---
 packages/legend-studio-app/_package.config.js |  9 ---
 packages/legend-studio-app/package.json       |  4 +-
 .../legend-studio-deployment/package.json     |  2 +-
 .../_package.config.js                        |  9 ---
 .../package.json                              |  4 +-
 .../_package.config.js                        |  9 ---
 .../package.json                              |  2 +-
 packages/legend-studio/_package.config.js     |  9 ---
 packages/legend-studio/package.json           |  4 +-
 .../addBundledCodeCopyrightHeader.js          | 49 ------------
 scripts/github-bot/README.md                  | 11 +++
 .../{workflow => github-bot}/labelNewIssue.js |  0
 scripts/github-bot/package.json               | 17 ++++
 scripts/github-bot/yarn.lock                  |  2 +
 scripts/release/preparePublishContent.js      | 16 +---
 scripts/workflow/buildSass.js                 | 75 ++++++++++++++++++
 scripts/workflow/devSassAll.js                | 77 +++++++++++++++++++
 yarn.lock                                     | 23 ++++--
 48 files changed, 302 insertions(+), 324 deletions(-)
 create mode 100644 .changeset/chilly-olives-drum.md
 create mode 100644 .changeset/good-snails-collect.md
 delete mode 100644 scripts/copyright/addBundledCodeCopyrightHeader.js
 create mode 100644 scripts/github-bot/README.md
 rename scripts/{workflow => github-bot}/labelNewIssue.js (100%)
 create mode 100644 scripts/github-bot/package.json
 create mode 100644 scripts/github-bot/yarn.lock
 create mode 100644 scripts/workflow/buildSass.js
 create mode 100644 scripts/workflow/devSassAll.js

diff --git a/.changeset/chilly-olives-drum.md b/.changeset/chilly-olives-drum.md
new file mode 100644
index 0000000000..937c1ccf4a
--- /dev/null
+++ b/.changeset/chilly-olives-drum.md
@@ -0,0 +1,23 @@
+---
+'@finos/legend-application': patch
+'@finos/legend-art': patch
+'@finos/legend-dev-utils': patch
+'@finos/legend-extension-dsl-data-space': patch
+'@finos/legend-extension-dsl-diagram': patch
+'@finos/legend-extension-dsl-serializer': patch
+'@finos/legend-extension-dsl-text': patch
+'@finos/legend-extension-external-format-json-schema': patch
+'@finos/legend-extension-external-store-service': patch
+'@finos/legend-graph': patch
+'@finos/legend-query': patch
+'@finos/legend-query-app': patch
+'@finos/legend-query-deployment': patch
+'@finos/legend-server-depot': patch
+'@finos/legend-server-sdlc': patch
+'@finos/legend-studio': patch
+'@finos/legend-studio-app': patch
+'@finos/legend-studio-deployment': patch
+'@finos/legend-studio-extension-management-toolkit': patch
+'@finos/legend-studio-extension-query-builder': patch
+'@finos/legend-github-bot': patch
+---
diff --git a/.changeset/good-snails-collect.md b/.changeset/good-snails-collect.md
new file mode 100644
index 0000000000..41a3b279a5
--- /dev/null
+++ b/.changeset/good-snails-collect.md
@@ -0,0 +1,20 @@
+---
+'@finos/legend-application': patch
+'@finos/legend-art': patch
+'@finos/legend-dev-utils': patch
+'@finos/legend-extension-dsl-data-space': patch
+'@finos/legend-extension-dsl-diagram': patch
+'@finos/legend-extension-dsl-serializer': patch
+'@finos/legend-extension-dsl-text': patch
+'@finos/legend-extension-external-format-json-schema': patch
+'@finos/legend-extension-external-store-service': patch
+'@finos/legend-graph': patch
+'@finos/legend-query': patch
+'@finos/legend-query-app': patch
+'@finos/legend-server-depot': patch
+'@finos/legend-server-sdlc': patch
+'@finos/legend-studio': patch
+'@finos/legend-studio-app': patch
+'@finos/legend-studio-extension-management-toolkit': patch
+'@finos/legend-studio-extension-query-builder': patch
+---
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 7347d924ea..6d54102b4c 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -23,6 +23,8 @@
 ## How did you test this change?
 
 - [ ] Test(s) added
+- [ ] Manual testing (please provide screenshots/recordings)
+- [ ] No testing (please provide an explanation)
 
 <!--
   Demonstrate the code is solid. Screenshots/videos if the pull request changes the user interface.
diff --git a/.github/workflows/bot-new-issue-label.yml b/.github/workflows/bot-new-issue-label.yml
index 72408d6338..338243c2c3 100644
--- a/.github/workflows/bot-new-issue-label.yml
+++ b/.github/workflows/bot-new-issue-label.yml
@@ -26,7 +26,10 @@ jobs:
         with:
           node-version: 14.x
       - name: Install dependencies
-        run: yarn
+        working-directory: ./scripts/bot
+        # Avoid Yarn failing installation due to modified lock file
+        # See https://github.com/finos/legend-studio/tree/master/scripts/bot
+        run: yarn --immutable=false
       - name: Label new issue
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -34,4 +37,5 @@ jobs:
           ORGANIZATION_NAME: finos
           TEAM_NAME: legend-contributors
           TEAM_LABEL: 'Studio Core Team'
-        run: node ./scripts/workflow/labelNewIssue.js
+        working-directory: ./scripts/bot
+        run: node ./labelNewIssue.js
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 8c230ba944..c68bddabc3 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -124,37 +124,20 @@ Now, you're good to start. After the setup step, you can start the application y
 yarn dev # alias: `yarn start` - this by default will start Studio
 ```
 
-Each workspace in the monorepo should have a `dev` script. Run these (in separate terminal tabs) when you are making changes in these workspaces to rebuild on change. Otherwise, after making change, you have to manually rebuild the workspace using the `build` script. Following are some useful scripts for development.
+Each workspace in the monorepo should have a `dev` script. Run these (in separate terminal tabs) when you are making changes in these workspaces to rebuild on change. However, this requires building packages following the dependency order. As such, we recommend the following workflow using multiple terminal tabs:
 
 ```sh
-# Clean and build all workspaces.
-#
-# NOTE: To save time, keep the build scope as close to your changes as possible.
-#
-# In general, you can call a script from a particular workspace using
-# the following command construct
-#   yarn workspace <workspace-name> <workspace-script>
-# e.g. To call `build` script of workspace `lib1`:
-#   yarn workspace lib1 build
-#
-# There are also other build scripts within each workspace which targets a smaller build scopes.
-yarn build
-
-# Using project reference, build and develop Typescript files in all workspaces.
-# This is usually sufficient if you make code change not related to styling.
-yarn dev:tsc
-```
-
-As such, the recommended workflow is to have multiple terminal tabs opened
-
-```sh
-# one for the application served with Webpack
+# keep one terminal tab for auto-building and serving the web application using Webpack
 yarn dev
 
-# another tab is for Typescript compiler
-# NOTE: this process could take some time in certain cases
-# so if you need to fine tune, you can use `yarn workspace ... dev` instead
+# have other terminal tabs for auto-building code and style
 yarn dev:tsc
+yarn dev:sass
+
+# NOTE: Sometimes, it might be better to call `dev` for each workspace, either `cd`
+# to the workspace and run the script, or using `yarn workspace <workspace-name> <workspace-script>`
+# syntax to call the script from anywhere in the project.
+# e.g. To call `build` script of workspace `lib1`, use the command `yarn workspace lib1 build`
 ```
 
 #### :construction: Testing your code
diff --git a/package.json b/package.json
index 05dcf7bb21..309644435b 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,8 @@
   "private": true,
   "type": "module",
   "workspaces": [
-    "packages/*"
+    "packages/*",
+    "scripts/github-bot"
   ],
   "scripts": {
     "build": "yarn clean && yarn workspaces foreach --topological-dev --verbose run build",
@@ -23,12 +24,13 @@
     "clean": "rimraf \"build\" && yarn workspaces foreach --all --topological-dev --parallel --verbose run clean",
     "dev": "yarn dev:studio",
     "dev:query": "yarn workspace @finos/legend-query-deployment dev",
+    "dev:sass": "node ./scripts/workflow/devSassAll.js",
     "dev:studio": "yarn workspace @finos/legend-studio-deployment dev",
     "dev:tsc": "tsc --build --watch",
     "fix": "yarn fix:copyright && yarn fix:style && yarn fix:js && yarn fix:format",
     "fix:copyright": "node ./scripts/copyright/checkCopyrightHeaders.js --update",
     "fix:format": "prettier --write --loglevel=warn \"(scripts|docs)/**/*.{md,json,mjs,cjs,js,ts,tsx,html,scss,css}\" \"packages/*/**/*.{md,json,mjs,cjs,js,ts,tsx,html,scss,css}\" && yarn sort-package-json \"package.json\" \"packages/*/package.json\"",
-    "fix:js": "cross-env NODE_ENV=production FORCE_COLOR=1 eslint --cache --cache-location ./build/.eslintcache \"scripts/**/*.{mjs,cjs,js,ts,tsx}\" --report-unused-disable-directives --fix && cross-env FORCE_COLOR=1 yarn workspaces foreach --all --topological-dev --parallel --exclude legend-studio --verbose run lint:js --fix",
+    "fix:js": "cross-env NODE_ENV=production FORCE_COLOR=1 eslint --cache --cache-location ./build/.eslintcache \"scripts/**/*.{mjs,cjs,js,ts,tsx}\" --report-unused-disable-directives --fix && cross-env FORCE_COLOR=1 yarn workspaces foreach --all --topological-dev --parallel --exclude legend-studio --exclude \"@finos/legend-internal-*\" --verbose run lint:js --fix",
     "fix:style": "yarn lint:style --fix",
     "git:install-hooks": "husky install",
     "git:pre-commit": "lint-staged",
@@ -37,7 +39,7 @@
     "postinstall": "husky install",
     "lint": "yarn lint:js && yarn lint:style",
     "lint:ci": "yarn lint:js --max-warnings=0 && yarn lint:style --max-warnings=0",
-    "lint:js": "cross-env NODE_ENV=production FORCE_COLOR=1 eslint --cache --cache-location ./build/.eslintcache \"scripts/**/*.{mjs,cjs,js,ts,tsx}\" --report-unused-disable-directives && cross-env FORCE_COLOR=1 yarn workspaces foreach --all --topological-dev --parallel --verbose run lint:js",
+    "lint:js": "cross-env NODE_ENV=production FORCE_COLOR=1 eslint --cache --cache-location ./build/.eslintcache \"scripts/**/*.{mjs,cjs,js,ts,tsx}\" --report-unused-disable-directives && cross-env FORCE_COLOR=1 yarn workspaces foreach --all --topological-dev --parallel --exclude legend-studio --exclude \"@finos/legend-internal-*\" --verbose run lint:js",
     "lint:style": "stylelint --cache --cache-location ./build/.stylelintcache \"packages/*/style/**/*.{scss,css}\"",
     "publish:prepare": "cross-env FORCE_COLOR=1 yarn build && cross-env FORCE_COLOR=1 yarn workspaces foreach --all --no-private --topological-dev --parallel --verbose run publish:prepare",
     "publish:snapshot": "yarn publish:prepare && cross-env FORCE_COLOR=1 yarn workspaces foreach --all --no-private --topological-dev --parallel --verbose run publish:snapshot",
@@ -92,6 +94,7 @@
     "lint-staged": "11.2.6",
     "prettier": "2.4.1",
     "rimraf": "3.0.2",
+    "sass": "1.43.4",
     "semver": "7.3.5",
     "sort-package-json": "1.53.1",
     "stylelint": "14.0.1",
diff --git a/packages/legend-application/_package.config.js b/packages/legend-application/_package.config.js
index cc9ec5d80e..1f24aee008 100644
--- a/packages/legend-application/_package.config.js
+++ b/packages/legend-application/_package.config.js
@@ -14,12 +14,6 @@
  * limitations under the License.
  */
 
-import { generateBundleCopyrightText } from '../../scripts/copyright/PackageCopyrightHelper.js';
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default {
   publish: {
     typescript: {
@@ -27,7 +21,4 @@ export default {
       others: ['./tsconfig.package.json'],
     },
   },
-  build: {
-    copyrightText: generateBundleCopyrightText(__dirname),
-  },
 };
diff --git a/packages/legend-application/package.json b/packages/legend-application/package.json
index d5ad81a519..fa51d1e227 100644
--- a/packages/legend-application/package.json
+++ b/packages/legend-application/package.json
@@ -25,11 +25,11 @@
   "types": "lib/index.d.ts",
   "scripts": {
     "build": "yarn clean && yarn build:sass && yarn build:tsc",
-    "build:sass": "cross-env INIT_CWD=$INIT_CWD sass ./style/index.scss ./lib/index.css --style=compressed && node ../../scripts/copyright/addBundledCodeCopyrightHeader.js ./lib/index.css",
+    "build:sass": "cross-env INIT_CWD=$INIT_CWD node ../../scripts/workflow/buildSass.js",
     "build:tsc": "tsc --project ./tsconfig.build.json",
     "clean": "rimraf \"lib\" \"build\"",
     "dev": "npm-run-all --parallel dev:sass dev:tsc",
-    "dev:sass": "sass ./style/index.scss ./lib/index.css --watch",
+    "dev:sass": "sass style lib --watch",
     "dev:tsc": "tsc --watch --preserveWatchOutput",
     "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location ./build/.eslintcache --report-unused-disable-directives --parser-options=project:\"./tsconfig.json\" \"./src/**/*.{js,ts,tsx}\"",
     "publish:prepare": "node ../../scripts/release/preparePublishContent.js",
diff --git a/packages/legend-art/_package.config.js b/packages/legend-art/_package.config.js
index bbbf194e6f..88d03c45e9 100644
--- a/packages/legend-art/_package.config.js
+++ b/packages/legend-art/_package.config.js
@@ -14,19 +14,10 @@
  * limitations under the License.
  */
 
-import { generateBundleCopyrightText } from '../../scripts/copyright/PackageCopyrightHelper.js';
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default {
   publish: {
     typescript: {
       main: './tsconfig.build.json',
     },
   },
-  build: {
-    copyrightText: generateBundleCopyrightText(__dirname),
-  },
 };
diff --git a/packages/legend-art/package.json b/packages/legend-art/package.json
index ab6cf58e45..1fc0a4ed7c 100644
--- a/packages/legend-art/package.json
+++ b/packages/legend-art/package.json
@@ -27,11 +27,11 @@
   "types": "lib/index.d.ts",
   "scripts": {
     "build": "yarn clean && yarn build:sass && yarn build:tsc",
-    "build:sass": "cross-env INIT_CWD=$INIT_CWD sass ./style/index.scss ./lib/index.css --style=compressed && node ../../scripts/copyright/addBundledCodeCopyrightHeader.js ./lib/index.css",
+    "build:sass": "cross-env INIT_CWD=$INIT_CWD node ../../scripts/workflow/buildSass.js",
     "build:tsc": "tsc --project ./tsconfig.build.json",
     "clean": "rimraf \"lib\" \"build\"",
     "dev": "npm-run-all --parallel dev:sass dev:tsc",
-    "dev:sass": "sass ./style/index.scss ./lib/index.css --watch",
+    "dev:sass": "sass style lib --watch",
     "dev:tsc": "tsc --watch --preserveWatchOutput",
     "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location ./build/.eslintcache --report-unused-disable-directives --parser-options=project:\"./tsconfig.json\" \"./src/**/*.{js,ts,tsx}\"",
     "publish:prepare": "node ../../scripts/release/preparePublishContent.js",
diff --git a/packages/legend-dev-utils/CopyrightUtils.js b/packages/legend-dev-utils/CopyrightUtils.js
index 82b09e07d2..2634db9684 100644
--- a/packages/legend-dev-utils/CopyrightUtils.js
+++ b/packages/legend-dev-utils/CopyrightUtils.js
@@ -14,19 +14,13 @@
  * limitations under the License.
  */
 
-import { resolve } from 'path';
-import { existsSync, lstatSync, writeFile, writeFileSync } from 'fs';
-import { EOL, platform } from 'os';
+import { existsSync, lstatSync, writeFile } from 'fs';
+import { EOL } from 'os';
 import micromatch from 'micromatch';
 import { execSync } from 'child_process';
 import { isBinaryFileSync } from 'isbinaryfile';
 import chalk from 'chalk';
-import {
-  getFileContent,
-  createRegExp,
-  exitWithError,
-  exitWithSuccess,
-} from './DevUtils.js';
+import { getFileContent, createRegExp, exitWithError } from './DevUtils.js';
 
 const GENERIC_INCLUDE_PATTERNS = [
   /\.[^/]+$/, // files with extension
@@ -228,42 +222,3 @@ export const updateCopyrightHeaders = async ({
     console.log('All files look good!');
   }
 };
-
-export const addCopyrightHeaderToBundledOutput = async ({
-  basePath,
-  configPath,
-  file,
-}) => {
-  // NOTE: Windows requires prefix `file://` for absolute path
-  const config = (
-    await import(`${platform() === 'win32' ? 'file://' : ''}${configPath}`)
-  ).default;
-  const copyrightText = config?.build?.copyrightText;
-  if (!copyrightText) {
-    exitWithError(
-      `'build.copyrightText' is not specified in config file: ${configPath}`,
-    );
-  }
-  const bundledOutputFile = resolve(basePath, file);
-  if (!existsSync(bundledOutputFile)) {
-    exitWithError(
-      `Can't find bundled output file '${bundledOutputFile}'. Make sure to build before running this script`,
-    );
-  }
-
-  writeFileSync(
-    bundledOutputFile,
-    `${copyrightText}\n\n${getFileContent(bundledOutputFile)}`,
-    (err) => {
-      exitWithError(
-        `Failed to add copyright header to bundled output file: ${bundledOutputFile}. Error:\n${
-          err.message || err
-        }`,
-      );
-    },
-  );
-
-  exitWithSuccess(
-    `Added copyright header to bundled output file: ${bundledOutputFile}`,
-  );
-};
diff --git a/packages/legend-dev-utils/DevUtils.js b/packages/legend-dev-utils/DevUtils.js
index 4ca6a1578c..210eee23ed 100644
--- a/packages/legend-dev-utils/DevUtils.js
+++ b/packages/legend-dev-utils/DevUtils.js
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { platform } from 'os';
 import { readFileSync } from 'fs';
 
 export const getFileContent = (file) =>
@@ -37,3 +38,7 @@ export const exitOrThrowError = (msg, throwError = true) => {
 // NOTE: unlike `require`, ESM `import` does not support JSON files without the flag --experimental-json-modules
 // being specified, which is not convenient at all in our setup. So we will use the following approach to load them
 export const loadJSON = (path) => JSON.parse(getFileContent(path));
+
+export const loadJSModule = (path) =>
+  // NOTE: Windows requires prefix `file://` for absolute path
+  import(`${platform() === 'win32' ? 'file://' : ''}${path}`);
diff --git a/packages/legend-extension-dsl-data-space/_package.config.js b/packages/legend-extension-dsl-data-space/_package.config.js
index cc9ec5d80e..1f24aee008 100644
--- a/packages/legend-extension-dsl-data-space/_package.config.js
+++ b/packages/legend-extension-dsl-data-space/_package.config.js
@@ -14,12 +14,6 @@
  * limitations under the License.
  */
 
-import { generateBundleCopyrightText } from '../../scripts/copyright/PackageCopyrightHelper.js';
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default {
   publish: {
     typescript: {
@@ -27,7 +21,4 @@ export default {
       others: ['./tsconfig.package.json'],
     },
   },
-  build: {
-    copyrightText: generateBundleCopyrightText(__dirname),
-  },
 };
diff --git a/packages/legend-extension-dsl-data-space/package.json b/packages/legend-extension-dsl-data-space/package.json
index 359599d55b..50d931eddc 100644
--- a/packages/legend-extension-dsl-data-space/package.json
+++ b/packages/legend-extension-dsl-data-space/package.json
@@ -25,11 +25,11 @@
   "types": "lib/index.d.ts",
   "scripts": {
     "build": "yarn clean && yarn build:sass && yarn build:tsc",
-    "build:sass": "cross-env INIT_CWD=$INIT_CWD sass ./style/index.scss ./lib/index.css --style=compressed && node ../../scripts/copyright/addBundledCodeCopyrightHeader.js ./lib/index.css",
+    "build:sass": "cross-env INIT_CWD=$INIT_CWD node ../../scripts/workflow/buildSass.js",
     "build:tsc": "tsc --project ./tsconfig.build.json",
     "clean": "rimraf \"lib\" \"build\"",
     "dev": "npm-run-all --parallel dev:sass dev:tsc",
-    "dev:sass": "sass ./style/index.scss ./lib/index.css --watch",
+    "dev:sass": "sass style lib --watch",
     "dev:tsc": "tsc --watch --preserveWatchOutput",
     "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location ./build/.eslintcache --report-unused-disable-directives --parser-options=project:\"./tsconfig.json\" \"./src/**/*.{js,ts,tsx}\"",
     "publish:prepare": "node ../../scripts/release/preparePublishContent.js",
diff --git a/packages/legend-extension-dsl-diagram/_package.config.js b/packages/legend-extension-dsl-diagram/_package.config.js
index cc9ec5d80e..1f24aee008 100644
--- a/packages/legend-extension-dsl-diagram/_package.config.js
+++ b/packages/legend-extension-dsl-diagram/_package.config.js
@@ -14,12 +14,6 @@
  * limitations under the License.
  */
 
-import { generateBundleCopyrightText } from '../../scripts/copyright/PackageCopyrightHelper.js';
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default {
   publish: {
     typescript: {
@@ -27,7 +21,4 @@ export default {
       others: ['./tsconfig.package.json'],
     },
   },
-  build: {
-    copyrightText: generateBundleCopyrightText(__dirname),
-  },
 };
diff --git a/packages/legend-extension-dsl-diagram/package.json b/packages/legend-extension-dsl-diagram/package.json
index 77b609e071..ff9902e893 100644
--- a/packages/legend-extension-dsl-diagram/package.json
+++ b/packages/legend-extension-dsl-diagram/package.json
@@ -25,11 +25,11 @@
   "types": "lib/index.d.ts",
   "scripts": {
     "build": "yarn clean && yarn build:sass && yarn build:tsc",
-    "build:sass": "cross-env INIT_CWD=$INIT_CWD sass ./style/index.scss ./lib/index.css --style=compressed && node ../../scripts/copyright/addBundledCodeCopyrightHeader.js ./lib/index.css",
+    "build:sass": "cross-env INIT_CWD=$INIT_CWD node ../../scripts/workflow/buildSass.js",
     "build:tsc": "tsc --project ./tsconfig.build.json",
     "clean": "rimraf \"lib\" \"build\"",
     "dev": "npm-run-all --parallel dev:sass dev:tsc",
-    "dev:sass": "sass ./style/index.scss ./lib/index.css --watch",
+    "dev:sass": "sass style lib --watch",
     "dev:tsc": "tsc --watch --preserveWatchOutput",
     "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location ./build/.eslintcache --report-unused-disable-directives --parser-options=project:\"./tsconfig.json\" \"./src/**/*.{js,ts,tsx}\"",
     "publish:prepare": "node ../../scripts/release/preparePublishContent.js",
diff --git a/packages/legend-extension-dsl-serializer/_package.config.js b/packages/legend-extension-dsl-serializer/_package.config.js
index cc9ec5d80e..1f24aee008 100644
--- a/packages/legend-extension-dsl-serializer/_package.config.js
+++ b/packages/legend-extension-dsl-serializer/_package.config.js
@@ -14,12 +14,6 @@
  * limitations under the License.
  */
 
-import { generateBundleCopyrightText } from '../../scripts/copyright/PackageCopyrightHelper.js';
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default {
   publish: {
     typescript: {
@@ -27,7 +21,4 @@ export default {
       others: ['./tsconfig.package.json'],
     },
   },
-  build: {
-    copyrightText: generateBundleCopyrightText(__dirname),
-  },
 };
diff --git a/packages/legend-extension-dsl-serializer/package.json b/packages/legend-extension-dsl-serializer/package.json
index 7abbf3c630..f91e176aa1 100644
--- a/packages/legend-extension-dsl-serializer/package.json
+++ b/packages/legend-extension-dsl-serializer/package.json
@@ -27,11 +27,11 @@
   "types": "lib/index.d.ts",
   "scripts": {
     "build": "yarn clean && yarn build:sass && yarn build:tsc",
-    "build:sass": "cross-env INIT_CWD=$INIT_CWD sass ./style/index.scss ./lib/index.css --style=compressed && node ../../scripts/copyright/addBundledCodeCopyrightHeader.js ./lib/index.css",
+    "build:sass": "cross-env INIT_CWD=$INIT_CWD node ../../scripts/workflow/buildSass.js",
     "build:tsc": "tsc --project ./tsconfig.build.json",
     "clean": "rimraf \"lib\" \"build\"",
     "dev": "npm-run-all --parallel dev:sass dev:tsc",
-    "dev:sass": "sass ./style/index.scss ./lib/index.css --watch",
+    "dev:sass": "sass style lib --watch",
     "dev:tsc": "tsc --watch --preserveWatchOutput",
     "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location ./build/.eslintcache --report-unused-disable-directives --parser-options=project:\"./tsconfig.json\" \"./src/**/*.{js,ts,tsx}\"",
     "publish:prepare": "node ../../scripts/release/preparePublishContent.js",
diff --git a/packages/legend-extension-dsl-text/_package.config.js b/packages/legend-extension-dsl-text/_package.config.js
index cc9ec5d80e..1f24aee008 100644
--- a/packages/legend-extension-dsl-text/_package.config.js
+++ b/packages/legend-extension-dsl-text/_package.config.js
@@ -14,12 +14,6 @@
  * limitations under the License.
  */
 
-import { generateBundleCopyrightText } from '../../scripts/copyright/PackageCopyrightHelper.js';
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default {
   publish: {
     typescript: {
@@ -27,7 +21,4 @@ export default {
       others: ['./tsconfig.package.json'],
     },
   },
-  build: {
-    copyrightText: generateBundleCopyrightText(__dirname),
-  },
 };
diff --git a/packages/legend-extension-dsl-text/package.json b/packages/legend-extension-dsl-text/package.json
index 57b911f0e5..570cf1beb2 100644
--- a/packages/legend-extension-dsl-text/package.json
+++ b/packages/legend-extension-dsl-text/package.json
@@ -25,11 +25,11 @@
   "types": "lib/index.d.ts",
   "scripts": {
     "build": "yarn clean && yarn build:sass && yarn build:tsc",
-    "build:sass": "cross-env INIT_CWD=$INIT_CWD sass ./style/index.scss ./lib/index.css --style=compressed && node ../../scripts/copyright/addBundledCodeCopyrightHeader.js ./lib/index.css",
+    "build:sass": "cross-env INIT_CWD=$INIT_CWD node ../../scripts/workflow/buildSass.js",
     "build:tsc": "tsc --project ./tsconfig.build.json",
     "clean": "rimraf \"lib\" \"build\"",
     "dev": "npm-run-all --parallel dev:sass dev:tsc",
-    "dev:sass": "sass ./style/index.scss ./lib/index.css --watch",
+    "dev:sass": "sass style lib --watch",
     "dev:tsc": "tsc --watch --preserveWatchOutput",
     "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location ./build/.eslintcache --report-unused-disable-directives --parser-options=project:\"./tsconfig.json\" \"./src/**/*.{js,ts,tsx}\"",
     "publish:prepare": "node ../../scripts/release/preparePublishContent.js",
diff --git a/packages/legend-extension-external-format-json-schema/_package.config.js b/packages/legend-extension-external-format-json-schema/_package.config.js
index ee54506cdf..a81e6dc4b4 100644
--- a/packages/legend-extension-external-format-json-schema/_package.config.js
+++ b/packages/legend-extension-external-format-json-schema/_package.config.js
@@ -14,17 +14,8 @@
  * limitations under the License.
  */
 
-import { generateBundleCopyrightText } from '../../scripts/copyright/PackageCopyrightHelper.js';
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default {
   publish: {
     tsConfigPath: './tsconfig.build.json',
   },
-  build: {
-    copyrightText: generateBundleCopyrightText(__dirname),
-  },
 };
diff --git a/packages/legend-extension-external-store-service/_package.config.js b/packages/legend-extension-external-store-service/_package.config.js
index cc9ec5d80e..1f24aee008 100644
--- a/packages/legend-extension-external-store-service/_package.config.js
+++ b/packages/legend-extension-external-store-service/_package.config.js
@@ -14,12 +14,6 @@
  * limitations under the License.
  */
 
-import { generateBundleCopyrightText } from '../../scripts/copyright/PackageCopyrightHelper.js';
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default {
   publish: {
     typescript: {
@@ -27,7 +21,4 @@ export default {
       others: ['./tsconfig.package.json'],
     },
   },
-  build: {
-    copyrightText: generateBundleCopyrightText(__dirname),
-  },
 };
diff --git a/packages/legend-graph/_package.config.js b/packages/legend-graph/_package.config.js
index cc9ec5d80e..1f24aee008 100644
--- a/packages/legend-graph/_package.config.js
+++ b/packages/legend-graph/_package.config.js
@@ -14,12 +14,6 @@
  * limitations under the License.
  */
 
-import { generateBundleCopyrightText } from '../../scripts/copyright/PackageCopyrightHelper.js';
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default {
   publish: {
     typescript: {
@@ -27,7 +21,4 @@ export default {
       others: ['./tsconfig.package.json'],
     },
   },
-  build: {
-    copyrightText: generateBundleCopyrightText(__dirname),
-  },
 };
diff --git a/packages/legend-query-app/_package.config.js b/packages/legend-query-app/_package.config.js
index cc9ec5d80e..1f24aee008 100644
--- a/packages/legend-query-app/_package.config.js
+++ b/packages/legend-query-app/_package.config.js
@@ -14,12 +14,6 @@
  * limitations under the License.
  */
 
-import { generateBundleCopyrightText } from '../../scripts/copyright/PackageCopyrightHelper.js';
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default {
   publish: {
     typescript: {
@@ -27,7 +21,4 @@ export default {
       others: ['./tsconfig.package.json'],
     },
   },
-  build: {
-    copyrightText: generateBundleCopyrightText(__dirname),
-  },
 };
diff --git a/packages/legend-query-app/package.json b/packages/legend-query-app/package.json
index 739105f145..85dd6a0512 100644
--- a/packages/legend-query-app/package.json
+++ b/packages/legend-query-app/package.json
@@ -27,11 +27,11 @@
   "types": "lib/index.d.ts",
   "scripts": {
     "build": "yarn clean && yarn build:sass && yarn build:tsc",
-    "build:sass": "cross-env INIT_CWD=$INIT_CWD sass ./style/index.scss ./lib/index.css --style=compressed && node ../../scripts/copyright/addBundledCodeCopyrightHeader.js ./lib/index.css",
+    "build:sass": "cross-env INIT_CWD=$INIT_CWD node ../../scripts/workflow/buildSass.js",
     "build:tsc": "tsc --project ./tsconfig.build.json",
     "clean": "rimraf \"lib\" \"build\"",
     "dev": "npm-run-all --parallel dev:sass dev:tsc",
-    "dev:sass": "sass ./style/index.scss ./lib/index.css --watch",
+    "dev:sass": "sass style lib --watch",
     "dev:tsc": "tsc --watch --preserveWatchOutput",
     "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location ./build/.eslintcache --report-unused-disable-directives --parser-options=project:\"./tsconfig.json\" \"./src/**/*.{js,ts,tsx}\"",
     "publish:prepare": "node ../../scripts/release/preparePublishContent.js",
diff --git a/packages/legend-query-deployment/package.json b/packages/legend-query-deployment/package.json
index 51859ec0f1..bd1028c0ff 100644
--- a/packages/legend-query-deployment/package.json
+++ b/packages/legend-query-deployment/package.json
@@ -48,6 +48,6 @@
     "webpack": "5.64.0",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-cli": "4.9.1",
-    "webpack-dev-server": "4.4.0"
+    "webpack-dev-server": "4.5.0"
   }
 }
diff --git a/packages/legend-query/_package.config.js b/packages/legend-query/_package.config.js
index ee54506cdf..a81e6dc4b4 100644
--- a/packages/legend-query/_package.config.js
+++ b/packages/legend-query/_package.config.js
@@ -14,17 +14,8 @@
  * limitations under the License.
  */
 
-import { generateBundleCopyrightText } from '../../scripts/copyright/PackageCopyrightHelper.js';
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default {
   publish: {
     tsConfigPath: './tsconfig.build.json',
   },
-  build: {
-    copyrightText: generateBundleCopyrightText(__dirname),
-  },
 };
diff --git a/packages/legend-query/package.json b/packages/legend-query/package.json
index 8a4dbd3281..5bf5af24a0 100644
--- a/packages/legend-query/package.json
+++ b/packages/legend-query/package.json
@@ -25,11 +25,11 @@
   "types": "lib/index.d.ts",
   "scripts": {
     "build": "yarn clean && yarn build:sass && yarn build:tsc",
-    "build:sass": "cross-env INIT_CWD=$INIT_CWD sass ./style/index.scss ./lib/index.css --style=compressed",
+    "build:sass": "cross-env INIT_CWD=$INIT_CWD node ../../scripts/workflow/buildSass.js",
     "build:tsc": "tsc --project ./tsconfig.build.json",
     "clean": "rimraf \"lib\" \"build\"",
     "dev": "npm-run-all --parallel dev:sass dev:tsc",
-    "dev:sass": "sass ./style/index.scss ./lib/index.css --watch",
+    "dev:sass": "sass style lib --watch",
     "dev:tsc": "tsc --watch --preserveWatchOutput",
     "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location ./build/.eslintcache --report-unused-disable-directives --parser-options=project:\"./tsconfig.json\" \"./src/**/*.{js,ts,tsx}\"",
     "publish:prepare": "node ../../scripts/release/preparePublishContent.js",
diff --git a/packages/legend-server-depot/_package.config.js b/packages/legend-server-depot/_package.config.js
index bbbf194e6f..88d03c45e9 100644
--- a/packages/legend-server-depot/_package.config.js
+++ b/packages/legend-server-depot/_package.config.js
@@ -14,19 +14,10 @@
  * limitations under the License.
  */
 
-import { generateBundleCopyrightText } from '../../scripts/copyright/PackageCopyrightHelper.js';
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default {
   publish: {
     typescript: {
       main: './tsconfig.build.json',
     },
   },
-  build: {
-    copyrightText: generateBundleCopyrightText(__dirname),
-  },
 };
diff --git a/packages/legend-server-sdlc/_package.config.js b/packages/legend-server-sdlc/_package.config.js
index bbbf194e6f..88d03c45e9 100644
--- a/packages/legend-server-sdlc/_package.config.js
+++ b/packages/legend-server-sdlc/_package.config.js
@@ -14,19 +14,10 @@
  * limitations under the License.
  */
 
-import { generateBundleCopyrightText } from '../../scripts/copyright/PackageCopyrightHelper.js';
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default {
   publish: {
     typescript: {
       main: './tsconfig.build.json',
     },
   },
-  build: {
-    copyrightText: generateBundleCopyrightText(__dirname),
-  },
 };
diff --git a/packages/legend-studio-app/_package.config.js b/packages/legend-studio-app/_package.config.js
index cc9ec5d80e..1f24aee008 100644
--- a/packages/legend-studio-app/_package.config.js
+++ b/packages/legend-studio-app/_package.config.js
@@ -14,12 +14,6 @@
  * limitations under the License.
  */
 
-import { generateBundleCopyrightText } from '../../scripts/copyright/PackageCopyrightHelper.js';
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default {
   publish: {
     typescript: {
@@ -27,7 +21,4 @@ export default {
       others: ['./tsconfig.package.json'],
     },
   },
-  build: {
-    copyrightText: generateBundleCopyrightText(__dirname),
-  },
 };
diff --git a/packages/legend-studio-app/package.json b/packages/legend-studio-app/package.json
index 67b169f2d7..1b2966a0dc 100644
--- a/packages/legend-studio-app/package.json
+++ b/packages/legend-studio-app/package.json
@@ -27,11 +27,11 @@
   "types": "lib/index.d.ts",
   "scripts": {
     "build": "yarn clean && yarn build:sass && yarn build:tsc",
-    "build:sass": "cross-env INIT_CWD=$INIT_CWD sass ./style/index.scss ./lib/index.css --style=compressed && node ../../scripts/copyright/addBundledCodeCopyrightHeader.js ./lib/index.css",
+    "build:sass": "cross-env INIT_CWD=$INIT_CWD node ../../scripts/workflow/buildSass.js",
     "build:tsc": "tsc --project ./tsconfig.build.json",
     "clean": "rimraf \"lib\" \"build\"",
     "dev": "npm-run-all --parallel dev:sass dev:tsc",
-    "dev:sass": "sass ./style/index.scss ./lib/index.css --watch",
+    "dev:sass": "sass style lib --watch",
     "dev:tsc": "tsc --watch --preserveWatchOutput",
     "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location ./build/.eslintcache --report-unused-disable-directives --parser-options=project:\"./tsconfig.json\" \"./src/**/*.{js,ts,tsx}\"",
     "publish:prepare": "node ../../scripts/release/preparePublishContent.js",
diff --git a/packages/legend-studio-deployment/package.json b/packages/legend-studio-deployment/package.json
index 48188af5c6..4ad168b012 100644
--- a/packages/legend-studio-deployment/package.json
+++ b/packages/legend-studio-deployment/package.json
@@ -48,6 +48,6 @@
     "webpack": "5.64.0",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-cli": "4.9.1",
-    "webpack-dev-server": "4.4.0"
+    "webpack-dev-server": "4.5.0"
   }
 }
diff --git a/packages/legend-studio-extension-management-toolkit/_package.config.js b/packages/legend-studio-extension-management-toolkit/_package.config.js
index cc9ec5d80e..1f24aee008 100644
--- a/packages/legend-studio-extension-management-toolkit/_package.config.js
+++ b/packages/legend-studio-extension-management-toolkit/_package.config.js
@@ -14,12 +14,6 @@
  * limitations under the License.
  */
 
-import { generateBundleCopyrightText } from '../../scripts/copyright/PackageCopyrightHelper.js';
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default {
   publish: {
     typescript: {
@@ -27,7 +21,4 @@ export default {
       others: ['./tsconfig.package.json'],
     },
   },
-  build: {
-    copyrightText: generateBundleCopyrightText(__dirname),
-  },
 };
diff --git a/packages/legend-studio-extension-management-toolkit/package.json b/packages/legend-studio-extension-management-toolkit/package.json
index 07e4a27f51..34d68476bc 100644
--- a/packages/legend-studio-extension-management-toolkit/package.json
+++ b/packages/legend-studio-extension-management-toolkit/package.json
@@ -27,11 +27,11 @@
   "types": "lib/index.d.ts",
   "scripts": {
     "build": "yarn clean && yarn build:sass && yarn build:tsc",
-    "build:sass": "cross-env INIT_CWD=$INIT_CWD sass ./style/index.scss ./lib/index.css --style=compressed && node ../../scripts/copyright/addBundledCodeCopyrightHeader.js ./lib/index.css",
+    "build:sass": "cross-env INIT_CWD=$INIT_CWD node ../../scripts/workflow/buildSass.js",
     "build:tsc": "tsc --project ./tsconfig.build.json",
     "clean": "rimraf \"lib\" \"build\"",
     "dev": "npm-run-all --parallel dev:sass dev:tsc",
-    "dev:sass": "sass ./style/index.scss ./lib/index.css --watch",
+    "dev:sass": "sass style lib --watch",
     "dev:tsc": "tsc --watch --preserveWatchOutput",
     "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location ./build/.eslintcache --report-unused-disable-directives --parser-options=project:\"./tsconfig.json\" \"./src/**/*.{js,ts,tsx}\"",
     "publish:prepare": "node ../../scripts/release/preparePublishContent.js",
diff --git a/packages/legend-studio-extension-query-builder/_package.config.js b/packages/legend-studio-extension-query-builder/_package.config.js
index ee54506cdf..a81e6dc4b4 100644
--- a/packages/legend-studio-extension-query-builder/_package.config.js
+++ b/packages/legend-studio-extension-query-builder/_package.config.js
@@ -14,17 +14,8 @@
  * limitations under the License.
  */
 
-import { generateBundleCopyrightText } from '../../scripts/copyright/PackageCopyrightHelper.js';
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default {
   publish: {
     tsConfigPath: './tsconfig.build.json',
   },
-  build: {
-    copyrightText: generateBundleCopyrightText(__dirname),
-  },
 };
diff --git a/packages/legend-studio-extension-query-builder/package.json b/packages/legend-studio-extension-query-builder/package.json
index f788709b84..a01f21bf4d 100644
--- a/packages/legend-studio-extension-query-builder/package.json
+++ b/packages/legend-studio-extension-query-builder/package.json
@@ -31,7 +31,7 @@
     "build:tsc": "tsc --project ./tsconfig.build.json",
     "clean": "rimraf \"lib\" \"build\"",
     "dev": "npm-run-all --parallel dev:sass dev:tsc",
-    "dev:sass": "sass ./style/index.scss ./lib/index.css --watch",
+    "dev:sass": "sass style lib --watch",
     "dev:tsc": "tsc --watch --preserveWatchOutput",
     "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location ./build/.eslintcache --report-unused-disable-directives --parser-options=project:\"./tsconfig.json\" \"./src/**/*.{js,ts,tsx}\"",
     "publish:prepare": "node ../../scripts/release/preparePublishContent.js",
diff --git a/packages/legend-studio/_package.config.js b/packages/legend-studio/_package.config.js
index cc9ec5d80e..1f24aee008 100644
--- a/packages/legend-studio/_package.config.js
+++ b/packages/legend-studio/_package.config.js
@@ -14,12 +14,6 @@
  * limitations under the License.
  */
 
-import { generateBundleCopyrightText } from '../../scripts/copyright/PackageCopyrightHelper.js';
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 export default {
   publish: {
     typescript: {
@@ -27,7 +21,4 @@ export default {
       others: ['./tsconfig.package.json'],
     },
   },
-  build: {
-    copyrightText: generateBundleCopyrightText(__dirname),
-  },
 };
diff --git a/packages/legend-studio/package.json b/packages/legend-studio/package.json
index e0f259dbf9..e3b60218d5 100644
--- a/packages/legend-studio/package.json
+++ b/packages/legend-studio/package.json
@@ -25,11 +25,11 @@
   "types": "lib/index.d.ts",
   "scripts": {
     "build": "yarn clean && yarn build:sass && yarn build:tsc",
-    "build:sass": "cross-env INIT_CWD=$INIT_CWD sass ./style/index.scss ./lib/index.css --style=compressed && node ../../scripts/copyright/addBundledCodeCopyrightHeader.js ./lib/index.css",
+    "build:sass": "cross-env INIT_CWD=$INIT_CWD node ../../scripts/workflow/buildSass.js",
     "build:tsc": "tsc --project ./tsconfig.build.json",
     "clean": "rimraf \"lib\" \"build\"",
     "dev": "npm-run-all --parallel dev:sass dev:tsc",
-    "dev:sass": "sass ./style/index.scss ./lib/index.css --watch",
+    "dev:sass": "sass style lib --watch",
     "dev:tsc": "tsc --watch --preserveWatchOutput",
     "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location ./build/.eslintcache --report-unused-disable-directives --parser-options=project:\"./tsconfig.json\" \"./src/**/*.{js,ts,tsx}\"",
     "publish:prepare": "node ../../scripts/release/preparePublishContent.js",
diff --git a/scripts/copyright/addBundledCodeCopyrightHeader.js b/scripts/copyright/addBundledCodeCopyrightHeader.js
deleted file mode 100644
index a6ebae451f..0000000000
--- a/scripts/copyright/addBundledCodeCopyrightHeader.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * Copyright (c) 2020-present, Goldman Sachs
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { existsSync } from 'fs';
-import { resolve } from 'path';
-import { exitWithError } from '@finos/legend-dev-utils/DevUtils';
-import { addCopyrightHeaderToBundledOutput } from '@finos/legend-dev-utils/CopyrightUtils';
-
-const file = process.argv[2];
-
-/**
- * There are various ways this script can be called and each combination results
- * in a different set of values for `INIT_CWD` and `process.cwd()` or `CWD`
- *
- * e.g.
- * cd && yarn run: INIT_CWD=workspaceDir, CWD=workspaceDir
- * yarn workspace run: INIT_CWD=workspaceDir, CWD=workspaceDir
- * yarn workspace foreach run: INIT_CWD=workspaceDir, CWD=rootDir
- * lerna run: INIT_CWD=rootDir, CWD=workspaceDir
- *
- * As such, the best way to make this work agnostic of setup is to
- * find the path from where we can retrieve the file
- */
-[process.env.INIT_CWD, process.cwd()].forEach(async (basePath) => {
-  const configPath = resolve(basePath, '_package.config.js');
-  if (!existsSync(configPath)) {
-    exitWithError(
-      `Failed to add copyright header to bundled output file: ${file}`,
-    );
-  }
-  await addCopyrightHeaderToBundledOutput({
-    basePath,
-    configPath,
-    file,
-  });
-});
diff --git a/scripts/github-bot/README.md b/scripts/github-bot/README.md
new file mode 100644
index 0000000000..014798fd34
--- /dev/null
+++ b/scripts/github-bot/README.md
@@ -0,0 +1,11 @@
+# legend-studio-bot
+
+De-facto bot with an arsenal of automation scripts for [finos/legend-studio](https://github.com/finos/legend-studio) repository.
+
+### Overview
+
+Technically, to achieve these sorts of automation, we could create proper Github bot (see [probot](https://github.com/probot/probot) for example), but that comes with some deployment complexity, we could achieve roughly the same effect using Github actions, hence the existence of this package.
+
+One operation that is particularly expensive is to run `yarn install` in the root directory as that will go through the repo code's dependencies. That is unnecessary since we only need minimum dependencies to run these automations. As such, we make this a separate package (with its own `yarn.lock` file) to narrow the scope of installation.
+
+> Dependencies in this package will be kept up-to-date thanks to `Yarn` workspace, however this package's `yarn.lock` file will become outdated and out of sync with its `package.json` after every upgrade. As such, we opt to keep the `yarn.lock` file always empty and in the pipeline, we must run `yarn --immutable=false` to [not fail the CI build](https://yarnpkg.com/cli/install#details).
diff --git a/scripts/workflow/labelNewIssue.js b/scripts/github-bot/labelNewIssue.js
similarity index 100%
rename from scripts/workflow/labelNewIssue.js
rename to scripts/github-bot/labelNewIssue.js
diff --git a/scripts/github-bot/package.json b/scripts/github-bot/package.json
new file mode 100644
index 0000000000..ffefa3b2f9
--- /dev/null
+++ b/scripts/github-bot/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@finos/legend-internal-github-bot",
+  "private": true,
+  "description": "Github bot/automation for finos/legend-studio repository",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/finos/legend-studio.git",
+    "directory": "scripts/github-bot"
+  },
+  "license": "Apache-2.0",
+  "type": "module",
+  "devDependencies": {
+    "@actions/core": "1.6.0",
+    "@actions/github": "5.0.0",
+    "chalk": "4.1.2"
+  }
+}
diff --git a/scripts/github-bot/yarn.lock b/scripts/github-bot/yarn.lock
new file mode 100644
index 0000000000..87d07577df
--- /dev/null
+++ b/scripts/github-bot/yarn.lock
@@ -0,0 +1,2 @@
+# DO NOT MODIFY THIS FILE
+# This file is meant to be kept empty, see README.md for the detailed explanation
diff --git a/scripts/release/preparePublishContent.js b/scripts/release/preparePublishContent.js
index e6eafe5cd8..607ad30e08 100644
--- a/scripts/release/preparePublishContent.js
+++ b/scripts/release/preparePublishContent.js
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { platform } from 'os';
 import { existsSync, readdirSync, copyFileSync, writeFileSync } from 'fs';
 import chalk from 'chalk';
 import { resolve, dirname } from 'path';
@@ -22,7 +21,7 @@ import { execSync } from 'child_process';
 import { resolveFullTsConfig } from '@finos/legend-dev-utils/TypescriptConfigUtils';
 import { mkdirs, copySync } from 'fs-extra';
 import { fileURLToPath } from 'url';
-import { loadJSON } from '@finos/legend-dev-utils/DevUtils';
+import { loadJSModule, loadJSON } from '@finos/legend-dev-utils/DevUtils';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -32,16 +31,9 @@ const packageJson = loadJSON(resolve(workspaceDir, 'package.json'));
 const workspaceName = packageJson.name;
 
 const preparePublishContent = async () => {
-  const packageConfig = existsSync(resolve(workspaceDir, '_package.config.js'))
-    ? // NOTE: Windows requires prefix `file://` for absolute path
-      (
-        await import(
-          `${platform() === 'win32' ? 'file://' : ''}${resolve(
-            workspaceDir,
-            '_package.config.js',
-          )}`
-        )
-      ).default
+  const packageConfigPath = resolve(workspaceDir, '_package.config.js');
+  const packageConfig = existsSync(packageConfigPath)
+    ? (await loadJSModule(packageConfigPath)).default
     : undefined;
   console.log(`Preparing publish content for workspace ${workspaceName}...`);
 
diff --git a/scripts/workflow/buildSass.js b/scripts/workflow/buildSass.js
new file mode 100644
index 0000000000..2f98b24bc6
--- /dev/null
+++ b/scripts/workflow/buildSass.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { existsSync, readdirSync, writeFileSync } from 'fs';
+import { resolve, extname } from 'path';
+import { execSync } from 'child_process';
+import {
+  exitWithError,
+  getFileContent,
+  loadJSModule,
+} from '@finos/legend-dev-utils/DevUtils';
+import { generateBundleCopyrightText } from '../copyright/PackageCopyrightHelper.js';
+
+/**
+ * This script makes the assumption about the structure of each package
+ *    style/index.scss -> lib/index.css
+ *
+ * If a package style code does not follow this structure, one can specify
+ * the input and output style sheet in the package config
+ */
+const buildSass = async () => {
+  const workspaceDir = process.env.INIT_CWD ?? process.cwd();
+  const packageConfigPath = resolve(workspaceDir, '_package.config.js');
+  const packageConfig = existsSync(packageConfigPath)
+    ? (await loadJSModule(packageConfigPath)).default
+    : undefined;
+  const inputPath = resolve(
+    workspaceDir,
+    packageConfig?.style?.inputPath ?? 'style',
+  );
+  const outputPath = resolve(
+    workspaceDir,
+    packageConfig?.style?.outputPath ?? 'lib',
+  );
+  if (!existsSync(inputPath)) {
+    exitWithError(`Can't find Sass input path (default to './style')`);
+  }
+
+  execSync(`yarn sass ${inputPath}:${outputPath} --style=compressed`);
+
+  await Promise.all(
+    readdirSync(outputPath).map(async (fileOrDir) => {
+      if (extname(fileOrDir) === '.css') {
+        const filePath = resolve(outputPath, fileOrDir);
+        const copyrightText = generateBundleCopyrightText(workspaceDir);
+        writeFileSync(
+          filePath,
+          `${copyrightText}\n\n${getFileContent(filePath)}`,
+          (err) => {
+            exitWithError(
+              `Failed to add copyright header to bundled output file: ${filePath}. Error:\n${
+                err.message || err
+              }`,
+            );
+          },
+        );
+      }
+    }),
+  );
+};
+
+buildSass();
diff --git a/scripts/workflow/devSassAll.js b/scripts/workflow/devSassAll.js
new file mode 100644
index 0000000000..4b4899ca8a
--- /dev/null
+++ b/scripts/workflow/devSassAll.js
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { existsSync } from 'fs';
+import { resolve, dirname } from 'path';
+import { execSync, spawn } from 'child_process';
+import { fileURLToPath } from 'url';
+import { loadJSModule } from '@finos/legend-dev-utils/DevUtils';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const ROOT_DIR = resolve(__dirname, '../../');
+
+/**
+ * This script makes the assumption about the structure of each package
+ *    style/index.scss -> lib/index.css
+ *
+ * If a package style code does not follow this structure, one can specify
+ * the input and output style sheet in the package config
+ */
+const devSassAll = async () => {
+  const packageInfos = execSync('yarn workspaces list --json', {
+    encoding: 'utf-8',
+    cwd: ROOT_DIR,
+  })
+    .split('\n')
+    .filter(Boolean)
+    .map((text) => JSON.parse(text));
+
+  const entries = (
+    await Promise.all(
+      packageInfos.map(async (pkgInfo) => {
+        const workspaceDir = resolve(ROOT_DIR, pkgInfo.location);
+        const packageConfigPath = resolve(workspaceDir, '_package.config.js');
+        const packageConfig = existsSync(packageConfigPath)
+          ? (await loadJSModule(packageConfigPath)).default
+          : undefined;
+        const inputPath = resolve(
+          workspaceDir,
+          packageConfig?.style?.inputPath ?? 'style',
+        );
+        const outputPath = resolve(
+          workspaceDir,
+          packageConfig?.style?.outputPath ?? 'lib',
+        );
+        if (existsSync(inputPath)) {
+          return `${inputPath}:${outputPath}`;
+        }
+        return undefined;
+      }),
+    )
+  ).filter(Boolean);
+
+  // NOTE: we use `spawn` to stream output to `stdout` (with color)
+  // Compile many-to-many Sass files
+  // See https://sass-lang.com/documentation/cli/dart-sass#many-to-many-mode
+  spawn(`yarn`, ['sass', ...entries, `--watch`], {
+    cwd: ROOT_DIR,
+    shell: true,
+    stdio: 'inherit',
+  });
+};
+
+devSassAll();
diff --git a/yarn.lock b/yarn.lock
index 6297ee9320..57089e443e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2476,6 +2476,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@finos/legend-internal-github-bot@workspace:scripts/github-bot":
+  version: 0.0.0-use.local
+  resolution: "@finos/legend-internal-github-bot@workspace:scripts/github-bot"
+  dependencies:
+    "@actions/core": 1.6.0
+    "@actions/github": 5.0.0
+    chalk: 4.1.2
+  languageName: unknown
+  linkType: soft
+
 "@finos/legend-manual-tests@workspace:packages/legend-manual-tests":
   version: 0.0.0-use.local
   resolution: "@finos/legend-manual-tests@workspace:packages/legend-manual-tests"
@@ -2555,7 +2565,7 @@ __metadata:
     webpack: 5.64.0
     webpack-bundle-analyzer: 4.5.0
     webpack-cli: 4.9.1
-    webpack-dev-server: 4.4.0
+    webpack-dev-server: 4.5.0
   languageName: unknown
   linkType: soft
 
@@ -2720,7 +2730,7 @@ __metadata:
     webpack: 5.64.0
     webpack-bundle-analyzer: 4.5.0
     webpack-cli: 4.9.1
-    webpack-dev-server: 4.4.0
+    webpack-dev-server: 4.5.0
   languageName: unknown
   linkType: soft
 
@@ -9632,6 +9642,7 @@ __metadata:
     lint-staged: 11.2.6
     prettier: 2.4.1
     rimraf: 3.0.2
+    sass: 1.43.4
     semver: 7.3.5
     sort-package-json: 1.53.1
     stylelint: 14.0.1
@@ -14431,9 +14442,9 @@ typescript@4.4.4:
   languageName: node
   linkType: hard
 
-"webpack-dev-server@npm:4.4.0":
-  version: 4.4.0
-  resolution: "webpack-dev-server@npm:4.4.0"
+"webpack-dev-server@npm:4.5.0":
+  version: 4.5.0
+  resolution: "webpack-dev-server@npm:4.5.0"
   dependencies:
     ansi-html-community: ^0.0.8
     bonjour: ^3.5.0
@@ -14467,7 +14478,7 @@ typescript@4.4.4:
       optional: true
   bin:
     webpack-dev-server: bin/webpack-dev-server.js
-  checksum: c317b5029b6f8caad47a257edb68b2dad5cd7087f4481ebda3359701c981037ce387486bdf992fb6e23213685d8e25e306b25a62541a42d0154562b1999563a5
+  checksum: 9167420dd0d3e836058154d58ec78c7c53f26652f51785d91a01e4fde24290dab86533a39e069b4087dc8460b1cb0ba8128239ebf21de4f100f08ee238ac58a3
   languageName: node
   linkType: hard