diff --git a/package-lock.json b/package-lock.json index 67fdf94590..6521f46df3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -81,6 +81,7 @@ "tsup": "^8.3.6", "typescript": "^5.7.3", "typescript-plugin-css-modules": "^5.1.0", + "unplugin-lightningcss": "^0.4.1", "xmlbuilder": "^15.1.1" } }, @@ -5939,9 +5940,9 @@ } }, "node_modules/acorn": { - "version": "8.14.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz", - "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==", + "version": "8.14.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz", + "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==", "dev": true, "license": "MIT", "bin": { @@ -8765,6 +8766,16 @@ "npm": "1.2.8000 || >= 1.4.16" } }, + "node_modules/detect-libc": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz", + "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=8" + } + }, "node_modules/detect-newline": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz", @@ -15609,6 +15620,245 @@ "immediate": "~3.0.5" } }, + "node_modules/lightningcss": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz", + "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==", + "dev": true, + "license": "MPL-2.0", + "dependencies": { + "detect-libc": "^2.0.3" + }, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "lightningcss-darwin-arm64": "1.30.1", + "lightningcss-darwin-x64": "1.30.1", + "lightningcss-freebsd-x64": "1.30.1", + "lightningcss-linux-arm-gnueabihf": "1.30.1", + "lightningcss-linux-arm64-gnu": "1.30.1", + "lightningcss-linux-arm64-musl": "1.30.1", + "lightningcss-linux-x64-gnu": "1.30.1", + "lightningcss-linux-x64-musl": "1.30.1", + "lightningcss-win32-arm64-msvc": "1.30.1", + "lightningcss-win32-x64-msvc": "1.30.1" + } + }, + "node_modules/lightningcss-darwin-arm64": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz", + "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-x64": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz", + "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-freebsd-x64": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz", + "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm-gnueabihf": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz", + "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-gnu": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz", + "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-musl": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz", + "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-gnu": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz", + "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-musl": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz", + "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-arm64-msvc": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz", + "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-x64-msvc": { + "version": "1.30.1", + "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz", + "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, "node_modules/lilconfig": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz", @@ -16169,6 +16419,16 @@ "lz-string": "bin/bin.js" } }, + "node_modules/magic-string": { + "version": "0.30.17", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz", + "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.0" + } + }, "node_modules/make-dir": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", @@ -23303,6 +23563,52 @@ "node": ">= 0.8" } }, + "node_modules/unplugin": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.4.tgz", + "integrity": "sha512-m4PjxTurwpWfpMomp8AptjD5yj8qEZN5uQjjGM3TAs9MWWD2tXSSNNj6jGR2FoVGod4293ytyV6SwBbertfyJg==", + "dev": true, + "license": "MIT", + "dependencies": { + "acorn": "^8.14.1", + "picomatch": "^4.0.2", + "webpack-virtual-modules": "^0.6.2" + }, + "engines": { + "node": ">=18.12.0" + } + }, + "node_modules/unplugin-lightningcss": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/unplugin-lightningcss/-/unplugin-lightningcss-0.4.1.tgz", + "integrity": "sha512-CeBw7FRaMKydVUZSqcCfsOlRCcyCWkVeomkJRxMJMYWfx+h4FPEaBg4stmARnMiSx9rRuRjosS7gV/npTFevzQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "lightningcss": "^1.30.1", + "magic-string": "^0.30.17", + "unplugin": "^2.3.4" + }, + "engines": { + "node": ">=20.18.0" + }, + "funding": { + "url": "https://github.com/sponsors/sxzz" + } + }, + "node_modules/unplugin/node_modules/picomatch": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz", + "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/update-browserslist-db": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.2.tgz", @@ -23767,6 +24073,13 @@ "dev": true, "license": "MIT" }, + "node_modules/webpack-virtual-modules": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz", + "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==", + "dev": true, + "license": "MIT" + }, "node_modules/webpack/node_modules/eslint-scope": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", diff --git a/package.json b/package.json index 9eae29693f..0a8fa28770 100644 --- a/package.json +++ b/package.json @@ -208,6 +208,7 @@ "tsup": "^8.3.6", "typescript": "^5.7.3", "typescript-plugin-css-modules": "^5.1.0", + "unplugin-lightningcss": "^0.4.1", "xmlbuilder": "^15.1.1" }, "dependencies": { diff --git a/packages/bundle/tsup.config.ts b/packages/bundle/tsup.config.ts index ebc9213cc4..a6446879fa 100644 --- a/packages/bundle/tsup.config.ts +++ b/packages/bundle/tsup.config.ts @@ -38,7 +38,7 @@ const config: typeof baseConfig = { SPEECH_CONDUCT_OCSP_CHECK: '', SPEECH_OCSP_CACHE_ROOT: '' }, - esbuildPlugins: [...(baseConfig.esbuildPlugins || []), resolveCognitiveServicesToES2015], + esbuildPlugins: [resolveCognitiveServicesToES2015], noExternal: [ '@babel/runtime', 'memoize-one', diff --git a/packages/component/tsup.config.ts b/packages/component/tsup.config.ts index 9d894eb453..90bc5015c0 100644 --- a/packages/component/tsup.config.ts +++ b/packages/component/tsup.config.ts @@ -1,5 +1,5 @@ import { injectCSSPlugin } from 'botframework-webchat-styles/build'; -import { defineConfig } from 'tsup'; +import { defineConfig, Options } from 'tsup'; import baseConfig from '../../tsup.base.config'; import { componentStyleContent as componentStyleContentPlaceholder } from './src/Styles/createStyles'; import { decoratorStyleContent as decoratorStyleContentPlaceholder } from './src/decorator/private/createStyles'; @@ -14,11 +14,7 @@ const config: typeof baseConfig = { esbuildPlugins: [ injectCSSPlugin({ stylesPlaceholder: componentStyleContentPlaceholder }), injectCSSPlugin({ stylesPlaceholder: decoratorStyleContentPlaceholder }) - ], - loader: { - ...baseConfig.loader, - '.css': 'local-css' - } + ] }; export default defineConfig([ diff --git a/packages/fluent-theme/src/components/theme/Theme.module.css b/packages/fluent-theme/src/components/theme/Theme.module.css index a974b68b7f..ef295098fc 100644 --- a/packages/fluent-theme/src/components/theme/Theme.module.css +++ b/packages/fluent-theme/src/components/theme/Theme.module.css @@ -1,11 +1,3 @@ -:global { - /* biome-ignore format: do not print each class on the new line */ - .a, .b, .c, .d, .e, .f, .g, .h, .i, .j, .k, .l, .m, .n, .o, .p, .q, .r, .s, .t, .v, .w, .u, .x, .y, .z, - .A, .B, .C, .D, .E, .F, .G, .H, .I, .J, .K, .L, .M, .N, .O, .P, .Q, .R, .S, .T, .V, .W, .U, .X, .Y, .Z { - /* esbuild considers empty global classes as used and removes them due to lack of rules */ - } -} - :global(.webchat-fluent).theme { display: contents; diff --git a/packages/fluent-theme/tsup.config.ts b/packages/fluent-theme/tsup.config.ts index d890eef93d..1634c7ca3e 100644 --- a/packages/fluent-theme/tsup.config.ts +++ b/packages/fluent-theme/tsup.config.ts @@ -39,32 +39,30 @@ export default defineConfig([ ...baseConfig, entry: { 'botframework-webchat-fluent-theme': './src/index.ts' }, env: { ...baseConfig.env, module_format: 'commonjs' }, - loader: { - ...baseConfig.loader, - '.css': 'local-css' - }, - esbuildPlugins: [...(baseConfig.esbuildPlugins || []), injectCSSPlugin({ stylesPlaceholder: fluentStyleContentPlaceholder })], + esbuildPlugins: [ + ...(baseConfig.esbuildPlugins || []), + injectCSSPlugin({ stylesPlaceholder: fluentStyleContentPlaceholder }) + ], format: ['cjs'], target: [...baseConfig.target, 'es2019'] }, { ...baseConfig, entry: { 'botframework-webchat-fluent-theme': './src/index.ts' }, - loader: { - ...baseConfig.loader, - '.css': 'local-css' - }, - esbuildPlugins: [...(baseConfig.esbuildPlugins || []), injectCSSPlugin({ stylesPlaceholder: fluentStyleContentPlaceholder })], + esbuildPlugins: [ + ...(baseConfig.esbuildPlugins || []), + injectCSSPlugin({ stylesPlaceholder: fluentStyleContentPlaceholder }) + ], format: ['esm'] }, { ...baseConfig, entry: { 'botframework-webchat-fluent-theme.development': './src/bundle.ts' }, - loader: { - ...baseConfig.loader, - '.css': 'local-css' - }, - esbuildPlugins: [...(baseConfig.esbuildPlugins || []), injectCSSPlugin({ stylesPlaceholder: fluentStyleContentPlaceholder }), umdResolvePlugin], + esbuildPlugins: [ + ...(baseConfig.esbuildPlugins || []), + injectCSSPlugin({ stylesPlaceholder: fluentStyleContentPlaceholder }), + umdResolvePlugin + ], format: 'iife', outExtension() { return { js: '.js' }; @@ -75,9 +73,12 @@ export default defineConfig([ entry: { 'botframework-webchat-fluent-theme.production.min': './src/bundle.ts' }, loader: { ...baseConfig.loader, - '.css': 'local-css' }, - esbuildPlugins: [...(baseConfig.esbuildPlugins || []), injectCSSPlugin({ stylesPlaceholder: fluentStyleContentPlaceholder }), umdResolvePlugin], + esbuildPlugins: [ + ...(baseConfig.esbuildPlugins || []), + injectCSSPlugin({ stylesPlaceholder: fluentStyleContentPlaceholder }), + umdResolvePlugin + ], format: 'iife', minify: true, outExtension() { diff --git a/tsup.base.config.ts b/tsup.base.config.ts index 7c853c8732..29728ceb17 100644 --- a/tsup.base.config.ts +++ b/tsup.base.config.ts @@ -1,5 +1,6 @@ import { type Options } from 'tsup'; import { babelPlugin, defaultPredicate, type Predicate } from './esbuildBabelPluginIstanbul'; +import lightningCssPlugin from 'unplugin-lightningcss/esbuild'; type Target = Exclude | undefined>; @@ -7,6 +8,30 @@ const env = process.env.NODE_ENV || 'development'; const { npm_package_version } = process.env; const istanbulPredicate: Predicate = args => defaultPredicate(args) && !/\.worker\.[cm]?[jt]s$/u.test(args.path); +type Plugin = NonNullable[number]; +const disablePlugin = (pluginName: string): Plugin => ({ + name: `disable-plugin-${pluginName}`, + esbuildOptions: options => { + const plugin = options.plugins?.find(({ name }) => name === pluginName); + if (plugin) { + plugin.setup = () => Promise.resolve(); + } + } +}); + +const cssPlugin = lightningCssPlugin({ + include: [/\.module\.css$/u], + options: { + cssModules: { + pattern: 'w[hash]_[local]', + pure: true, + animation: false, + grid: false, + customIdents: false + } + } +}); + const baseConfig: Options & { target: Target[] } = { dts: true, env: { @@ -16,6 +41,7 @@ const baseConfig: Options & { target: Target[] } = { NODE_ENV: env, ...(npm_package_version ? { npm_package_version } : {}) }, + plugins: [disablePlugin('postcss'), disablePlugin('svelte')], esbuildOptions: options => { // esbuild don't touch AMD but it also don't remove AMD glue code. // Some of our packages prefers AMD over CJS via UMD and it also use anonymous modules. @@ -55,9 +81,10 @@ const baseConfig: Options & { target: Target[] } = { loader: 'tsx', name: 'babel-plugin-istanbul:tsx', predicate: istanbulPredicate - }) + }), + cssPlugin ] - : [], + : [cssPlugin], format: 'esm', loader: { '.js': 'jsx' }, metafile: true,