fix(core/styles): reduce css file size (#739)

siemens · Sep 6, 2023 · c7e601c · c7e601c
1 parent e4fe29d
commit c7e601c
Show file tree

Hide file tree

Showing 7 changed files with 460 additions and 144 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -69,6 +69,7 @@
     "animate.css": "~4.1.1",
     "autoprefixer": "10.4.5",
     "bootstrap": "^5.2.0",
+    "cssnano": "^6.0.1",
     "cz-conventional-changelog": "^3.3.0",
     "eslint-config-ix": "*",
     "eslint-plugin-react": "^7.32.2",
@@ -77,6 +78,7 @@
     "jest": "^27.5.1",
     "jest-cli": "^27.5.1",
     "mustache": "^4.2.0",
+    "postcss": "^8.4.29",
     "puppeteer": "^19.5.2",
     "sass": "^1.58.3",
     "start-server-and-test": "^1.14.0",

diff --git a/packages/core/scripts/build/build-css.ts b/packages/core/scripts/build/build-css.ts
@@ -6,8 +6,10 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import cssnano from 'cssnano';
 import fse from 'fs-extra';
 import path from 'path';
+import postcss from 'postcss';
 import rimraf from 'rimraf';
 import sass from 'sass';
 
@@ -41,12 +43,16 @@ function compileThemes() {
   console.log('Compile themes');
 
   const themes = collectThemeFiles();
-  themes.forEach(({ filePath, themeName }) => {
+  return themes.map(({ filePath, themeName }) => {
     console.log(`\t${themeName}`);
     const { css } = sass.compile(filePath, {
       sourceMap: false,
     });
-    fse.writeFileSync(path.join(DIST_THEME, `${themeName}.css`), css);
+
+    return {
+      path: path.join(DIST_THEME, `${themeName}.css`),
+      css,
+    };
   });
 }
 
@@ -61,16 +67,56 @@ function compileCore() {
       path.join(ROOT, '..', '..', 'node_modules'),
     ],
   });
-  fse.writeFileSync(path.join(DIST_CSS, 'siemens-ix-core.css'), css);
+
+  return [
+    {
+      path: path.join(DIST_CSS, 'siemens-ix-core.css'),
+      css,
+    },
+  ];
 }
 
 function copyDistCssToDist() {
   console.log(`Copy dist-css to dist (${DIST})`);
   fse.copySync(DIST_CSS, DIST);
 }
 
-setupDistFolder();
-compileThemes();
-compileCore();
+(async () => {
+  setupDistFolder();
+
+  let cssFiles: {
+    path: string;
+    css: string;
+  }[] = [];
+
+  cssFiles = [...cssFiles, ...compileThemes()];
+  cssFiles = [...cssFiles, ...compileCore()];
+
+  const optimizedCss = await Promise.all(
+    cssFiles.map(async (result) => {
+      const { path, css } = result;
+
+      return postcss([
+        cssnano({
+          preset: [
+            'default',
+            {
+              discardComments: {
+                removeAll: true,
+              },
+            },
+          ],
+        }),
+      ]).process(css, {
+        from: path,
+        to: path,
+      });
+    })
+  );
+
+  optimizedCss.forEach((result) => {
+    fse.writeFileSync(result.opts.to, result.css);
+  });
 
-copyDistCssToDist();
+  copyDistCssToDist();
+})();
diff --git a/packages/core/scss/_core.scss b/packages/core/scss/_core.scss
@@ -0,0 +1,66 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* Import global stylings for Web Components */
+@import './../src/components/toast/styles/toast-container';
+
+@import './legacy/mixins/fonts';
+@import './legacy/fonts';
+
+/* Common */
+@import './common-variables';
+@import 'z-index';
+
+/* Components */
+@import 'legacy/components/modal';
+@import 'legacy/components/buttons';
+@import 'legacy/components/button-group';
+@import 'legacy/components/dropdown';
+@import 'legacy/components/forms';
+@import './components/links';
+@import './components/checkboxes';
+@import './components/radiobuttons';
+@import './components/shadows';
+@import './components/input-group';
+@import './components/table';
+@import './components/fonts';
+
+@import 'mixins/scrollbar';
+
+:root {
+  --animate-duration: #{$default-time};
+  --bs-font-sans-serif: Siemens Sans, system-ui, -apple-system, 'Segoe UI',
+    Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+body {
+  @include typography-body();
+  color: var(--theme-color-std-text);
+  background-color: var(--theme-color-1);
+  margin: 0;
+}
+
+body:not(.disable-scrollbar) {
+  @include scrollbar();
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
diff --git a/packages/core/scss/ix-core.scss b/packages/core/scss/ix-core.scss
@@ -7,85 +7,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/* Include 3rd party libraries */
-@import 'bootstrap/scss/bootstrap';
-
-/* Import global stylings for Web Components */
-@import './../src/components/toast/styles/toast-container';
-
-/* Legacy Global styles */
-@import './legacy/fonts';
-
-/* Common */
-@import './common-variables';
-@import 'z-index';
-
-/* Components */
-@import 'legacy/components/modal';
-@import 'legacy/components/buttons';
-@import 'legacy/components/button-group';
-@import 'legacy/components/dropdown';
-@import 'legacy/components/forms';
-@import './components/links';
-@import './components/checkboxes';
-@import './components/radiobuttons';
-@import './components/shadows';
-@import './components/input-group';
-@import './components/table';
-@import './components/fonts';
-
-:root {
-  --animate-duration: #{$default-time};
-  --bs-font-sans-serif: Siemens Sans, system-ui, -apple-system, 'Segoe UI',
-    Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-}
-
-body {
-  @include typography-body();
-  background-color: var(--theme-color-1);
-  margin: 0;
-}
-
-body:not(.disable-scrollbar) {
-  ::-webkit-scrollbar-button {
-    display: none;
-  }
-
-  /* width */
-  ::-webkit-scrollbar {
-    width: $small-space;
-    height: $small-space;
-  }
-
-  /* Track */
-  ::-webkit-scrollbar-track {
-    border-radius: 5px;
-    background: var(--theme-scrollbar-track--background);
-  }
-
-  ::-webkit-scrollbar-track:hover {
-    background: var(--theme-scrollbar-track--background--hover);
-  }
-
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
-    border-radius: 5px;
-    background: var(--theme-scrollbar-thumb--background);
-  }
-
-  /* Handle on hover */
-  ::-webkit-scrollbar-thumb:hover {
-    background: var(--theme-scrollbar-thumb--background--hover);
-  }
-
-  ::-webkit-scrollbar-corner {
-    display: none;
-  }
-}
-
-*,
-*::after,
-*::before {
-  box-sizing: border-box;
-}
+/* Core Style */
+@import './core';
diff --git a/packages/core/scss/ix.scss b/packages/core/scss/ix.scss
@@ -10,61 +10,14 @@
 /* Include 3rd party libraries */
 @import '~bootstrap/scss/bootstrap';
 
-/* Import global stylings for Web Components */
-@import './../src/components/toast/styles/toast-container';
-
 /* Default Theme */
 @import './theme/classic-dark';
 @import './theme/classic-light';
 
-/* Legacy Global styles */
-@import './legacy/mixins/fonts';
-@import './legacy/fonts';
-
-/* Common */
-@import './common-variables';
-@import 'z-index';
-
-/* Components */
-@import 'legacy/components/modal';
-@import 'legacy/components/buttons';
-@import 'legacy/components/button-group';
-@import 'legacy/components/dropdown';
-@import 'legacy/components/forms';
-@import './components/links';
-@import './components/checkboxes';
-@import './components/radiobuttons';
-@import './components/shadows';
-@import './components/input-group';
-@import './components/table';
-@import './components/fonts';
-
-@import 'mixins/scrollbar';
-
-:root {
-  --animate-duration: #{$default-time};
-  --bs-font-sans-serif: Siemens Sans, system-ui, -apple-system, 'Segoe UI',
-    Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-}
+/* Core Style */
+@import './core';
 
+/* Load embedded theme */
 body:not([class*='theme-']) {
   @extend .theme-classic-dark;
 }
-
-body {
-  @include typography-body();
-  color: var(--theme-color-std-text);
-  background-color: var(--theme-color-1);
-  margin: 0;
-}
-
-body:not(.disable-scrollbar) {
-  @include scrollbar();
-}
-
-*,
-*::after,
-*::before {
-  box-sizing: border-box;
-}
diff --git a/packages/documentation/docs/guidelines/theme.md b/packages/documentation/docs/guidelines/theme.md
@@ -42,7 +42,7 @@ The default theme is `theme-classic-dark`. To set a different theme change the `
 
 ## Applying only one theme to reduce build size
 
-Importing `siemens-ix-core.css` will load core related functionalities only, without any preloading any theme.
+Importing `siemens-ix-core.css` will load core related functionalities only, without preloading any theme or bootstrap.
 
 You can load a specific theme by importing the corresponding CSS file.
 
@@ -53,14 +53,14 @@ You can load a specific theme by importing the corresponding CSS file.
 import '@siemens/ix/dist/siemens-ix/siemens-ix-core.css';
 
 // Load theme
-import '@siemens/ix/dist/siemens-ix/theme/classic-new-light.css';
-import '@siemens/ix/dist/siemens-ix/theme/classic-new-dark.css';
+import '@siemens/ix/dist/siemens-ix/theme/classic-light.css';
+import '@siemens/ix/dist/siemens-ix/theme/classic-dark.css';
 ```
 
 ***Set theme***
 
 ```html
-<body class="theme-classic-new-dark">
+<body class="theme-classic-dark">
   ...
 </body>
 ```