Merge branch 'master' into didimmova/update-button-schemas

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx lint-staged

package.json

@@ -49,31 +49,31 @@
     "build:typedoc:ja": "set NODE_ENV=production && node scripts/build-typedoc.js buildJA",
     "build:typedoc:en": "set NODE_ENV=production && node scripts/build-typedoc.js buildEN",
     "deploy-storybook": "storybook-to-ghpages --ci --existing-output-dir=./storybook-static",
-    "prepare": "husky install"
+    "prepare": "husky"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.5.4",
+    "@floating-ui/dom": "^1.6.1",
     "@lit-labs/virtualizer": "^2.0.12",
-    "lit": "^3.1.1"
+    "lit": "^3.1.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",
     "@igniteui/material-icons-extended": "^3.0.2",
     "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-a11y": "^7.6.7",
-    "@storybook/addon-actions": "^7.6.7",
-    "@storybook/addon-essentials": "^7.6.7",
-    "@storybook/addon-links": "^7.6.7",
+    "@storybook/addon-a11y": "^7.6.12",
+    "@storybook/addon-actions": "^7.6.12",
+    "@storybook/addon-essentials": "^7.6.12",
+    "@storybook/addon-links": "^7.6.12",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/web-components": "^7.6.7",
-    "@storybook/web-components-vite": "^7.6.7",
+    "@storybook/web-components": "^7.6.12",
+    "@storybook/web-components-vite": "^7.6.12",
     "@types/mocha": "^10.0.6",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
-    "@typescript-eslint/parser": "^6.18.1",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
     "@web/test-runner": "^0.18.0",
     "@web/test-runner-playwright": "^0.11.0",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.17",
     "browser-sync": "^3.0.2",
     "concurrently": "^8.2.2",
     "eslint": "^8.56.0",
@@ -83,33 +83,33 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-storybook": "^0.6.15",
     "globby": "^14.0.0",
-    "husky": "^8.0.3",
-    "ig-typedoc-theme": "^5.0.2",
-    "igniteui-theming": "^4.0.1",
+    "husky": "^9.0.7",
+    "ig-typedoc-theme": "^5.0.3",
+    "igniteui-theming": "^4.1.0",
     "keep-a-changelog": "^2.5.3",
-    "lint-staged": "^15.2.0",
+    "lint-staged": "^15.2.1",
     "lit-analyzer": "^2.0.3",
     "madge": "^6.1.0",
     "node-watch": "^0.7.4",
     "postcss": "^8.4.33",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
-    "sass": "^1.69.7",
-    "sass-embedded": "^1.69.7",
+    "sass": "^1.70.0",
+    "sass-embedded": "^1.70.0",
     "sinon": "^17.0.1",
-    "storybook": "^7.6.7",
-    "stylelint": "^16.1.0",
+    "storybook": "^7.6.12",
+    "stylelint": "^16.2.0",
     "stylelint-config-standard-scss": "^13.0.0",
     "stylelint-prettier": "^5.0.0",
-    "stylelint-scss": "^6.0.0",
+    "stylelint-scss": "^6.1.0",
     "ts-lit-plugin": "^2.0.2",
     "tslib": "^2.6.2",
     "typedoc": "^0.25.7",
     "typedoc-plugin-localization": "^3.0.4",
     "typescript": "^5.3.3",
-    "vite": "^5.0.11"
+    "vite": "^5.0.12"
   },
   "lint-staged": {
     "*.ts": [

scripts/_package.json

@@ -60,7 +60,7 @@
   ],
   "customElements": "custom-elements.json",
   "dependencies": {
-    "@floating-ui/dom": "^1.5.3",
+    "@floating-ui/dom": "^1.6.0",
     "@lit-labs/virtualizer": "^2.0.10",
     "lit": "^3.1.0"
   }

scripts/build-styles.mjs

@@ -1,42 +1,36 @@
 import { globby } from 'globby';
 import report from './report.js';
-import { sassRender, template, postProcessor } from './sass.mjs';
-import path from 'path';
-import { mkdirSync as makeDir } from 'fs';
-import * as sass from 'sass';
-import { fileURLToPath } from 'url';
-import { writeFile } from 'fs/promises';
-
-const renderSass = sass.compile;
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
+import { fromTemplate, compileSass } from './sass.mjs';
+import path from 'node:path';
+import { mkdirSync as makeDir } from 'node:fs';
+import * as sass from 'sass-embedded';
+import { fileURLToPath } from 'node:url';
+import { writeFile } from 'node:fs/promises';
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const DEST_DIR = path.join.bind(null, path.resolve(__dirname, '../dist'));
-const THEMES_PATH = `src/styles/themes`;
 
 export async function buildThemes() {
-  const paths = await globby(`${THEMES_PATH}/{light,dark}/*.scss`);
+  const compiler = await sass.initAsyncCompiler();
+  const paths = await globby(`src/styles/themes/{light,dark}/*.scss`);
 
   for (const sassFile of paths) {
-    const result = renderSass(sassFile, {
-      style: 'compressed',
-      loadPaths: ['node_modules', 'src']
-    });
-
-    let outCss = postProcessor.process(result.css).css;
-    if (outCss.charCodeAt(0) === 0xfeff) {
-      outCss = outCss.substring(1);
-    }
+    const css = await compileSass(sassFile, compiler);
 
     const outputFile = DEST_DIR(
       sassFile.replace(/\.scss$/, '.css').replace('src/styles/', '')
     );
     makeDir(path.dirname(outputFile), { recursive: true });
-    await writeFile(outputFile, outCss, 'utf-8');
+    await writeFile(outputFile, css, 'utf-8');
   }
+
+  await compiler.dispose();
 }
 
 (async () => {
-  const startTime = new Date();
+  const compiler = await sass.initAsyncCompiler();
+  const start = performance.now();
+
   const paths = await globby([
     'src/components/**/*.base.scss',
     'src/components/**/*.common.scss',
@@ -46,15 +40,25 @@ export async function buildThemes() {
     'src/components/**/*.fluent.scss',
   ]);
 
-  for (const sourceFile of paths) {
-    const output = sourceFile.replace(/\.scss$/, '.css.ts');
-    await sassRender(sourceFile, template, output).catch((err) => {
-      report.error(err);
-      process.exit(-1);
-    });
+  try {
+    await Promise.all(
+      paths.map(async (path) => {
+        writeFile(
+          path.replace(/\.scss$/, '.css.ts'),
+          fromTemplate(await compileSass(path, compiler)),
+          'utf8'
+        );
+      })
+    );
+  } catch (err) {
+    await compiler.dispose();
+    report.error(err);
+    process.exit(1);
   }
 
+  await compiler.dispose();
+
   report.success(
-    `Styles generated in ${Math.round((Date.now() - startTime) / 1000)}s`
+    `Styles generated in ${((performance.now() - start) / 1000).toFixed(2)}s`
   );
 })();

scripts/sass.mjs

@@ -1,8 +1,7 @@
 import autoprefixer from 'autoprefixer';
-import { readFile, writeFile } from 'fs/promises';
-import path from 'path';
+import { readFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
 import postcss from 'postcss';
-import * as sass from 'sass-embedded';
 
 const stripComments = () => {
   return {
@@ -12,34 +11,24 @@ const stripComments = () => {
     },
   };
 };
-
 stripComments.postcss = true;
 
-export const template = path.resolve(process.argv[1], '../styles.tmpl');
-export const postProcessor = postcss([autoprefixer, stripComments]);
+const _template = await readFile(
+  resolve(process.argv[1], '../styles.tmpl'),
+  'utf8'
+);
+const _postProcessor = postcss([autoprefixer, stripComments]);
 
-const renderSass = sass.compileAsync;
+export function fromTemplate(content) {
+  return _template.replace(/<%\s*content\s*%>/, content);
+}
 
-async function sassToCss(sassFile) {
-  const result = await renderSass(sassFile, {
+export async function compileSass(src, compiler) {
+  const compiled = await compiler.compileAsync(src, {
     style: 'compressed',
-    loadPaths: ['node_modules', 'src']
+    loadPaths: ['node_modules', 'src'],
   });
 
-  let cssStr = postProcessor.process(result.css).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');
+  const out = _postProcessor.process(compiled.css).css;
+  return out.charCodeAt(0) === 0xfeff ? out.slice(1) : out;
 }

scripts/styles-watcher.mjs

@@ -1,6 +1,8 @@
+import { writeFile } from 'node:fs/promises';
 import watch from 'node-watch';
+import * as sass from 'sass-embedded';
 import report from './report.js';
-import { sassRender, template } from './sass.mjs';
+import { compileSass, fromTemplate } from './sass.mjs';
 
 const watchOptions = {
   recursive: true,
@@ -9,26 +11,31 @@ const watchOptions = {
   },
 };
 
-watch(['src'], watchOptions, function(_event, fileName) {
-  addToQueue(fileName);
-});
-
 let updating = false;
+const compiler = await sass.initAsyncCompiler();
 
-async function addToQueue(fileName) {
-  const output = fileName.replace(/\.scss$/, '.css.ts');
+const watcher = watch(['src'], watchOptions, async (_, fileName) => {
   if (updating) {
     return;
   }
+
   report.warn(`Change detected: ${fileName}`);
   updating = true;
-  console.log('Rebuilding styles...');
 
-  await sassRender(fileName, template, output).catch((err) => {
+  try {
+    await writeFile(
+      fileName.replace(/\.scss$/, '.css.ts'),
+      fromTemplate(await compileSass(fileName, compiler)),
+      'utf8'
+    );
+  } catch (err) {
     report.error(err);
-  });
+  }
+
   report.success('Styles rebuilt 🎨');
   updating = false;
-}
+});
+
+watcher.on('close', () => compiler.dispose());
 
 console.log('Styles watcher started...');