feat(admin-ui): Export minified theme css for ui extensions dev

packages/admin-ui/package.json

@@ -6,7 +6,7 @@
     "ng": "ng",
     "start": "node scripts/set-version.js && ng serve",
     "build:app": "ng build --prod",
-    "build": "node scripts/copy-package-json.js && node scripts/set-version.js && node scripts/build-public-api.js && ng build vendure-admin-lib --prod",
+    "build": "node scripts/copy-package-json.js && node scripts/set-version.js && node scripts/build-public-api.js && ng build vendure-admin-lib --prod && node scripts/compile-styles.js",
     "watch": "ng build --watch=true",
     "test": "ng test --watch=false --browsers=ChromeHeadlessCI --progress=false",
     "lint": "tslint --fix",
@@ -35,8 +35,8 @@
     "@ng-select/ng-select": "^3.7.2",
     "@ngx-translate/core": "^11.0.1",
     "@ngx-translate/http-loader": "^4.0.0",
-    "@vendure/common": "^0.9.0",
-    "@vendure/ui-devkit": "^0.9.0",
+    "@vendure/common": "^0.10.0",
+    "@vendure/ui-devkit": "^0.10.0",
     "@webcomponents/custom-elements": "^1.2.4",
     "apollo-angular": "^1.8.0",
     "apollo-cache-inmemory": "^1.6.5",

packages/admin-ui/scripts/compile-styles.js

@@ -0,0 +1,37 @@
+const path = require('path');
+const fs = require('fs');
+const sass = require('sass');
+
+// Compiles the Admin UI styles into a css file for consumption by
+// non-Angular ui extensions.
+const outFile = path.join(__dirname, '../package/static/theme.min.css');
+const result = sass.renderSync({
+    file: path.join(__dirname, '../src/lib/static/styles/theme.scss'),
+    importer,
+    includePaths: [path.join(__dirname, '../src/lib/static/styles')],
+    outputStyle: 'compressed',
+    outFile,
+});
+
+fs.writeFileSync(outFile, result.css, 'utf8');
+
+
+function importer(url, prev, done) {
+    let file = url;
+    // Handle the imports prefixed with ~
+    // which are usually resolved by Webpack.
+    if (/^~@clr/.test(url)) {
+        const sansTilde = url.substr(1);
+        const fullPath = path.extname(sansTilde) === '' ? sansTilde + '.scss' : sansTilde;
+        file = require.resolve(fullPath);
+    }
+
+    // Ignore the contents of the Angular-specific
+    // library styles which are not needed in external
+    // apps.
+    if (/^~@(ng-select|angular)/.test(url)) {
+        return false;
+    }
+
+    return { file };
+}

packages/admin-ui/src/lib/static/styles/styles.scss

@@ -1,8 +1,4 @@
-// Clarity Component SCSS
-@import "~@clr/ui/src/main";
+@import "theme";
 @import "~@clr/icons/clr-icons.min.css";
-
-@import "theme/theme";
-
 @import "~@ng-select/ng-select/themes/default.theme.css";
 @import '~@angular/cdk/overlay-prebuilt.css';

packages/admin-ui/src/lib/static/styles/theme.scss

@@ -0,0 +1,6 @@
+// This file is used to compile the theme.min.css file which can be used
+// by ui extensions to get the same styles as the main app.
+
+// Clarity Component SCSS
+@import "~@clr/ui/src/main";
+@import "theme/theme";