feat: provide minified distribution of themes (#10223)

Author: sissbruecker

package.json

@@ -4,7 +4,7 @@
   "author": "Vaadin Ltd",
   "type": "module",
   "scripts": {
-    "analyze": "polymer analyze packages/**/vaadin-*.js > analysis.json && node scripts/prepareDocs.js && node scripts/buildWebtypes.js",
+    "analyze": "polymer analyze packages/**/vaadin-*.js > analysis.json && node scripts/prepareDocs.js && node scripts/buildWebtypes.js && yarn workspace @vaadin/aura build && yarn workspace @vaadin/vaadin-lumo-styles build",
     "api-docs:start": "yarn analyze && yarn workspace api-docs generate ../analysis.json && yarn workspace api-docs start",
     "api-docs:build": "yarn analyze && yarn workspace api-docs generate ../analysis.json && yarn workspace api-docs build",
     "debug": "yarn test --watch",

packages/aura/package.json

@@ -18,7 +18,11 @@
   },
   "main": "aura.css",
   "type": "module",
+  "scripts": {
+    "build": "postcss ./aura.css --dir dist"
+  },
   "files": [
+    "dist",
     "src",
     "*.css"
   ],
@@ -28,5 +32,12 @@
     "design-system",
     "web-components",
     "web-component"
-  ]
+  ],
+  "devDependencies": {
+    "cssnano": "^7.1.1",
+    "postcss": "^8.1.0",
+    "postcss-cli": "^11.0.1",
+    "postcss-import": "^16.1.1",
+    "postcss-url": "^10.1.3"
+  }
 }

packages/aura/postcss.config.js

@@ -0,0 +1,25 @@
+import cssNano from 'cssnano';
+import fs from 'fs';
+import path from 'path';
+import postCssImport from 'postcss-import';
+import postCssUrl from 'postcss-url';
+
+export default {
+  plugins: [
+    postCssImport(),
+    postCssUrl({
+      filter: 'src/fonts/**',
+      url: (asset) => {
+        // Copy font files to the dist directory, while dropping "src" from the relative path
+        const relativePath = path.relative('src', asset.relativePath);
+        const distPath = path.join('dist', relativePath);
+        fs.mkdirSync(path.dirname(distPath), { recursive: true });
+        fs.copyFileSync(asset.absolutePath, distPath);
+        return relativePath;
+      },
+    }),
+    cssNano({
+      preset: 'default',
+    }),
+  ],
+};

packages/vaadin-lumo-styles/package.json

@@ -20,6 +20,7 @@
   "module": "all-imports.js",
   "type": "module",
   "scripts": {
+    "build": "postcss ./{lumo,utility}.css --dir dist",
     "icons": "gulp icons"
   },
   "files": [
@@ -28,6 +29,7 @@
     "*.js",
     "!gulpfile.js",
     "components/*.css",
+    "dist",
     "mixins/*.d.ts",
     "mixins/*.js",
     "presets",
@@ -46,11 +48,15 @@
     "@vaadin/vaadin-themable-mixin": "25.0.0-alpha19"
   },
   "devDependencies": {
+    "cssnano": "^7.1.1",
     "gulp": "^5.0.1",
     "gulp-cli": "^3.1.0",
     "gulp-iconfont": "^12.0.0",
     "gulp-plugin-extras": "^1.0.0",
     "imagemin": "^9.0.0",
-    "imagemin-svgo": "^10.0.1"
+    "imagemin-svgo": "^10.0.1",
+    "postcss": "^8.1.0",
+    "postcss-cli": "^11.0.1",
+    "postcss-import": "^16.1.1"
   }
 }

packages/vaadin-lumo-styles/postcss.config.js

@@ -0,0 +1,11 @@
+import cssNano from 'cssnano';
+import postCssImport from 'postcss-import';
+
+export default {
+  plugins: [
+    postCssImport(),
+    cssNano({
+      preset: 'default',
+    }),
+  ],
+};