fix: core build tasks

- add css optimization as part of the watcher
- prevent duplicate builds in the build:ci with clr/react
- remove unused npm scripts
- update outdated build command docs

Signed-off-by: Cory Rylan <[email protected]>

docs/BUILD.md

@@ -33,7 +33,7 @@ mode while you develop.
 
 ## Full Project Build
 
-To build the entire repo and all projects run the command `yarn build:ci`.
+To build the entire repo and all projects run the command `yarn build`.
 This command is useful to run before submitting a PR to ensure everything will
 pass the CI build.
 
@@ -103,7 +103,7 @@ This entry file now lives in src/clr-angular/test.tsand is now confined to what'
 
 ##### `yarn build:ci`
 
-The `build:ci` script is used by Travis-CI to run all of the checks, such as format, lint, and unit tests.
+The `build:ci` script is used by Github CI to run all of the library build checks, such as format, lint, and unit tests.
 If the code doesn't pass both the format and lint checkers, then the build fails before running the unit tests.
 
 ##### `yarn format` and `yarn format:fix`

docs/CONTRIBUTING_DEVELOPMENT.md

@@ -125,7 +125,7 @@ steps.
 
 1.  Have [NodeJS](https://nodejs.org) installed and [Yarn](https://yarnpkg.com)
 2.  In the root project directory run, `yarn`
-3.  Run `yarn build:ci` to build entire project (this may take several minutes)
+3.  Run `yarn build` to build entire project (this may take several minutes)
 4.  Startup the project
     - If Angular change run `yarn start`
     - If Web Component change run `yarn core:start`
@@ -234,7 +234,14 @@ you should:
 - Make sure `yarn test` passes for each of them.
   For individual lint failures, you will have to fix them manually.
 
-To test the same thing that the CI will test you could run `yarn build:ci`
+The CI runs three parallel Jobs for performance.
+
+1. Build and test libraries
+2. Build website and storybook
+3. Build angular dev app
+
+To ensure your PR will pass the CI you can run `yarn run build` which will run
+all three CI checks locally on your machine. This may take several minutes.
 
 If everything passes, you can push your changes to your fork of Clarity, and [submit a pull request](https://help.github.com/articles/about-pull-requests/).
 

package.json

@@ -27,15 +27,14 @@
   "scripts": {
     "ng": "ng",
     "clean:modules": "del ./**/node_modules",
-    "clean": "del ./dist",
+    "clean": "del ./dist && yarn run schematics:clean",
     "start": "yarn angular:dev:start",
-    "build": "npm-run-all build:ci",
-    "build:ci": "npm-run-all clean schematics:clean format lint build:libs core:dev:build react:build test",
+    "build": "npm-run-all build:ci build:website build:storybook:angular build:storybook:core angular:dev:build",
+    "build:ci": "npm-run-all clean format lint build:libs test",
     "build:libs": "npm-run-all -p ui:build icons:build core:build -s angular:build schematics:build react:build",
-    "build:apps": "npm-run-all -p angular:dev:build core:dev:build",
     "build:website": "yarn --cwd apps/website run build",
     "build:storybook:angular": "yarn --cwd packages/angular run build-storybook",
-    "build:storybook:core": "yarn --cwd packages/core run dev:build",
+    "build:storybook:core": "yarn --cwd packages/core run storybook:build",
     "test": "npm-run-all -p angular:test core:test icons:test react:test",
     "test:a11y": "node scripts/axe",
     "lint": "npm-run-all core:lint angular:lint react:lint",
@@ -76,7 +75,6 @@
     "core:test": "yarn --cwd packages/core run test",
     "core:test:watch": "yarn --cwd packages/core run test:watch",
     "core:lint": "yarn --cwd packages/core run lint",
-    "core:dev:build": "yarn --cwd packages/core run dev:build",
     "react:start": "yarn --cwd packages/react run start",
     "react:build": "yarn --cwd packages/react run build",
     "react:lint": "yarn --cwd packages/react run lint",

packages/core/package-css.js

@@ -19,9 +19,15 @@ read('./dist/core')
   .filter(f => f.endsWith('.css') && !f.endsWith('.min.css'))
   .forEach(file => {
     // remove internal shadow dom selectors from global light dom styles + ie11 fix with error on ::slotted
-    let css = fs.readFileSync(file, 'utf8').replace(/(,|,\n  \[)[^,]*(::slotted).*{/g, '{');
-    fs.writeFileSync(file, css);
-    fs.writeFileSync(file.replace('.css', '.min.css'), csso.minify(css).css);
+    const optimizedFilePath = file.replace('.css', '.min.css');
+    const updated = fs.readFileSync(file, 'utf8').replace(/(,|,\n  \[)[^,]*(::slotted).*{/g, '{');
+    const current = fs.existsSync(optimizedFilePath) ? fs.readFileSync(optimizedFilePath, 'utf8') : '';
+    const optimized = csso.minify(updated).css;
+
+    if (current !== optimized) {
+      fs.writeFileSync(file, updated);
+      fs.writeFileSync(optimizedFilePath, optimized);
+    }
   });
 
 // This will remove unused utilities from cds-layout and typography from core components

packages/core/package.json

@@ -2,31 +2,24 @@
   "name": "@clr/core",
   "version": "4.0.0",
   "scripts": {
-    "start": "npm-run-all build -p build:watch storybook",
-    "storybook": "start-storybook -s .storybook/public -p 6006 --config-dir=.storybook",
-    "dev:build": "build-storybook -s .storybook/public -c .storybook -o ../../dist/website/storybook/core --quiet",
+    "start": "npm-run-all build -p build:watch storybook:start",
+    "storybook:start": "start-storybook -s .storybook/public -p 6006 --config-dir=.storybook",
+    "storybook:build": "build-storybook -s .storybook/public -c .storybook -o ../../dist/website/storybook/core --quiet",
     "lint": "eslint \"**/*.ts\" --ignore-pattern \"dist\" && stylelint \"./**/*.scss\" && lit-analyzer ./src",
     "lint:fix": "eslint --fix \"./**/*.ts\" && stylelint --fix \"./**/*.scss\"",
-    "golden": "yarn build:api",
-    "golden:fix": "yarn golden && cpy ./../dist/core/custom-elements.json ./",
-    "golden:test": "diff -u ./custom-elements.json ./dist/core/custom-elements.json",
-    "test": "npm-run-all -s test:unit test:treeshaking",
-    "test:watch": "yarn test:karma -- --auto-watch=true --single-run=false --coverage=false",
-    "test:unit": "npm-run-all -s build:ts:spec test:karma build:sass:min build:package",
-    "test:karma": "karma start ./karma.conf.js",
-    "test:treeshaking": "webpack --config ./test-bundles/webpack.config.js && bundlesize --config ./test-bundles/bundlesize.json",
+    "test": "npm-run-all -s test:unit test:performance",
+    "test:watch": "karma start ./karma.conf.js --auto-watch=true --single-run=false --coverage=false",
+    "test:unit": "tsc --b ./tsconfig.spec.json --force && karma start ./karma.conf.js && yarn run build:package",
+    "test:performance": "webpack --config ./test-bundles/webpack.config.js && bundlesize --config ./test-bundles/bundlesize.json",
     "test:bundles": "source-map-explorer dist/test-bundles/webpack.bundle.js",
-    "build": "npm-run-all -s build:tokens build:sass build:ts build:sass:min build:package",
+    "build": "npm-run-all -s build:tokens build:sass build:ts build:package",
     "build:watch": "npm-run-all -p build:sass:watch build:ts:watch",
-    "build:package": "node ./package.js",
+    "build:package": "node ./package-css.js && node ./package.js",
     "build:ts": "tsc --b ./tsconfig.project.json --force",
     "build:ts:watch": "del ./dist/*.tsbuildinfo && tsc --p ./tsconfig.spec.json -w",
-    "build:ts:spec": "tsc --b ./tsconfig.spec.json --force",
-    "build:src": "npm-run-all build:sass:components build:ts",
     "build:tokens": "node ./tokens-build.js",
     "build:sass": "npm-run-all 'build:sass:modules' -p 'build:sass:components'",
-    "build:sass:min": "node ./package-css.js",
-    "build:sass:watch": "npm-run-all 'build:sass' -p 'build:sass:components -- -w' 'build:sass:modules -- --watch'",
+    "build:sass:watch": "npm-run-all 'build:sass' -p 'build:sass:components -- -w' 'build:sass:modules -- --watch' & chokidar './dist/core/**/*.css' -c 'node ./package-css.js' -i './dist/core/**/*.min.css'",
     "build:sass:modules": "sass --no-source-map ./src/styles:./dist/core/styles ./src/styles/global.scss:./dist/core/global.css ./src/list:./dist/core/list",
     "build:sass:components": "sass-render --q --suffix '.css.ts' -t ./sass-template.js './**/*.element.scss' './**/*.global.scss'"
   },
@@ -76,6 +69,7 @@
     "@typescript-eslint/eslint-plugin": "2.30.0",
     "@typescript-eslint/parser": "2.30.0",
     "bundlesize": "1.0.0-beta.2",
+    "chokidar-cli": "2.1.0",
     "cpy-cli": "3.1.0",
     "csso-cli": "3.0.0",
     "custom-elements-hmr-polyfill": "1.0.0",