refactor(themes): use igniteui-theming package when generating themes

.storybook/preview.js

@@ -43,6 +43,16 @@ export const globalTypes = {
       showName: 'True',
     },
   },
+  size: {
+    name: 'Size',
+    description: 'Component size',
+    defaultValue: 'attribute',
+    toolbar: {
+      icon: 'grow',
+      items: ['attribute', 'small', 'medium', 'large'],
+      showName: 'True',
+    },
+  }
 };
 
 export const parameters = {
@@ -65,6 +75,16 @@ const getTheme = (themeName, variant) => {
   return Themes[`${themeName}_${variant}`];
 };
 
+const getSize = (size) => {
+  if(size === 'attribute') {
+    return;
+  }
+
+  return `:root {
+    --ig-size: var(--ig-size-${size});
+  }`;
+};
+
 const themeProvider = (Story, context) => {
   const theme = getTheme(context.globals.theme, context.globals.variant);
 
@@ -75,6 +95,7 @@ const themeProvider = (Story, context) => {
   const styles = htmlNoMin`
     <style>
       ${theme.default}
+      ${getSize(context.globals.size)}
     </style>`;
 
   return html` ${styles} ${Story()} `;

package.json

@@ -27,7 +27,7 @@
     "build:docs:vscode-schema": "web-component-analyzer src --format vscode --outFile vscode-html-custom-data.json",
     "build:meta": "node scripts/build-stories.js",
     "watch-meta": "node scripts/stories-watcher.js ",
-    "watch-scss": "node scripts/styles-watcher.js",
+    "watch-scss": "node scripts/styles-watcher.mjs",
     "watch-ts": "tsc --watch --preserveWatchOutput",
     "check": "madge --circular --warning --no-spinner dist/src/index.js",
     "clean": "npm run clean:dist && npm run clean:styles && npm run clean:docs",
@@ -74,6 +74,7 @@
     "eslint-config-prettier": "^8.5.0",
     "globby": "^13.1.2",
     "husky": "^8.0.1",
+    "igniteui-theming": "^1.0.0-release",
     "igniteui-typedoc-theme": "^3.1.0",
     "keep-a-changelog": "^2.1.0",
     "lint-staged": "^13.0.3",

scripts/build-styles.mjs

@@ -1,42 +1,9 @@
-import path from 'path';
-import { promisify } from 'util';
-import { readFile, writeFile } from 'fs/promises';
 import { globby } from 'globby';
-import sass from 'sass';
-import autoprefixer from 'autoprefixer';
-import postcss from 'postcss';
 import report from './report.js';
-
-const renderSass = promisify(sass.render);
-
-async function sassToCss(sassFile) {
-  const result = await renderSass({
-    file: sassFile,
-    outputStyle: 'compressed',
-  });
-
-  let cssStr = result.css.toString();
-
-  cssStr = await postcss([autoprefixer]).process(cssStr).css;
-
-  // Strip BOM if any
-  if (cssStr.charCodeAt(0) === 0xfeff) {
-    cssStr = cssStr.substring(1);
-  }
-  return cssStr;
-}
-
-async function sassRender(sourceFile, templateFile, outputFile) {
-  const regex = /<%\s*content\s*%>/;
-  const template = await readFile(templateFile, 'utf-8');
-  const replacement = await sassToCss(sourceFile);
-  const newContent = template.replace(regex, replacement);
-
-  return writeFile(outputFile, newContent, 'utf-8');
-}
+import { sassRender, template } from './sass.mjs';
 
 (async () => {
-  const template = path.resolve(process.argv[1], '../styles.tmpl');
+  const startTime = new Date();
   const paths = await globby([
     'src/components/**/*.base.scss',
     'src/components/**/*.material.scss',
@@ -52,5 +19,5 @@ async function sassRender(sourceFile, templateFile, outputFile) {
       process.exit(-1);
     });
   }
-  report.success('Styles generation finished');
+  report.success(`Styles generated in ${Math.round((Date.now() - startTime) / 1000)}s`);
 })();

scripts/build.mjs

@@ -1,16 +1,16 @@
-import path from 'path';
+import autoprefixer from 'autoprefixer';
+import { exec as _exec } from 'child_process';
 import { mkdirSync as makeDir } from 'fs';
 import { copyFile, writeFile } from 'fs/promises';
-import { exec as _exec } from 'child_process';
-import { promisify } from 'util';
-import { fileURLToPath } from 'url';
 import { globby } from 'globby';
-import sass from 'sass';
+import path from 'path';
 import postcss from 'postcss';
-import autoprefixer from 'autoprefixer';
+import sass from 'sass';
+import { fileURLToPath } from 'url';
+import { promisify } from 'util';
 
 const exec = promisify(_exec);
-const renderSass = promisify(sass.render);
+const renderSass = sass.compile;
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const DEST_DIR = path.join.bind(null, path.resolve(__dirname, '../dist'));
@@ -20,8 +20,7 @@ async function buildThemes() {
   const paths = await globby(`${THEMES_PATH}/{light,dark}/*.scss`);
 
   for (const sassFile of paths) {
-    const result = await renderSass({
-      file: sassFile,
+    const result = renderSass(sassFile, {
       outputStyle: 'compressed',
     });
 

scripts/sass.mjs

@@ -0,0 +1,32 @@
+import autoprefixer from 'autoprefixer';
+import { readFile, writeFile } from 'fs/promises';
+import path from 'path';
+import postcss from 'postcss';
+import sass from 'sass';
+
+export const template = path.resolve(process.argv[1], '../styles.tmpl');
+const renderSass = sass.compile;
+
+async function sassToCss(sassFile) {
+  const result = renderSass(sassFile, {
+    outputStyle: 'compressed'
+  });
+
+  let cssStr = result.css.toString();
+  cssStr = await postcss([autoprefixer]).process(cssStr).css;
+
+  // Strip BOM if any
+  if (cssStr.charCodeAt(0) === 0xfeff) {
+    cssStr = cssStr.substring(1);
+  }
+  return cssStr;
+}
+
+export async function sassRender(sourceFile, templateFile, outputFile) {
+  const regex = /<%\s*content\s*%>/;
+  const template = await readFile(templateFile, 'utf-8');
+  const replacement = await sassToCss(sourceFile);
+  const newContent = template.replace(regex, replacement);
+
+  return writeFile(outputFile, newContent, 'utf-8');
+}

scripts/stories-watcher.js

@@ -5,7 +5,7 @@ const exec = promisify(require('child_process').exec);
 const watchOptions = {
   recursive: true,
   filter: (path) => {
-    return /^((?!\.spec\.).)*\.ts$/.test(path);
+    return /^((?!\.spec|.css\.).)*\.ts$/.test(path);
   },
 };
 

scripts/styles-watcher.mjs

@@ -0,0 +1,34 @@
+import watch from 'node-watch';
+import report from './report.js';
+import { sassRender, template } from './sass.mjs';
+
+const watchOptions = {
+  recursive: true,
+  filter: (path) => {
+    return /.(?:scss)$/.test(path);
+  },
+};
+
+watch(['src'], watchOptions, function(_event, fileName) {
+  addToQueue(fileName);
+});
+
+let updating = false;
+
+async function addToQueue(fileName) {
+  const output = fileName.replace(/\.scss$/, '.css.ts');
+  if (updating) {
+    return;
+  }
+  report.warn(`Change detected: ${fileName}`);
+  updating = true;
+  console.log('Rebuilding styles...');
+
+  await sassRender(fileName, template, output).catch((err) => {
+    report.error(err);
+  });
+  report.success('Styles rebuilt 🎨');
+  updating = false;
+}
+
+console.log('Styles watcher started...');

src/components/avatar/themes/avatar.base.scss

@@ -2,6 +2,8 @@
 @use '../../../styles/utilities' as *;
 
 :host {
+    --size: #{sizable(rem(40px), rem(64px), rem(88px))};
+
     display: inline-block;
 }
 
@@ -17,7 +19,7 @@
     outline-style: none;
     flex-shrink: 0;
     overflow: hidden;
-    font-family: var(--igc-font-family);
+    font-family: var(--ig-font-family);
     width: var(--size);
     height: var(--size);
 
@@ -40,16 +42,16 @@ img {
     text-transform: uppercase;
 }
 
-:host([size='large']) [part='base'] {
-    --size: #{rem(88px)};
+:host([size='large']) {
+    --component-size: var(--ig-size, var(--ig-size-large));
 }
 
-:host([size='medium']) [part='base'] {
-    --size: #{rem(64px)};
+:host([size='medium']) {
+    --component-size: var(--ig-size, var(--ig-size-medium));
 }
 
-:host([size='small']) [part='base'] {
-    --size: #{rem(40px)};
+:host([size='small']) {
+    --component-size: var(--ig-size, var(--ig-size-small));
 }
 
 :host([shape='rounded']) [part='base'] {

src/components/badge/themes/light/badge.base.scss

@@ -18,8 +18,8 @@ span {
     align-items: center;
     overflow: hidden;
     white-space: nowrap;
-    font-family: var(--igc-font-family);
-    font-size: var(--igc-subtitle-1-font-size);
+    font-family: var(--ig-font-family);
+    font-size: var(--ig-subtitle-1-font-size);
     font-weight: inherit;
 }
 

src/components/badge/themes/light/badge.bootstrap.scss

@@ -2,7 +2,7 @@
 
 :host {
     --size: #{rem(18px)};
-    --igc-subtitle-1-font-size: #{rem(12px)};
+    --ig-subtitle-1-font-size: #{rem(12px)};
 
     font-weight: 700;
 }