feat(themes): inline themes to js files

.changeset/forty-pumas-taste.md

@@ -0,0 +1,5 @@
+---
+"@alfalab/core-components-themes": patch
+---
+
+Импорт JS-файла темы больше не зависит от webpack-лоадера. Теперь содержимое темы представлено в виде строки.

packages/themes/src/click.ts

@@ -1,4 +0,0 @@
-// eslint-disable-next-line import/no-webpack-loader-syntax
-import styles from '!!css-loader!@alfalab/core-components/themes/click.css';
-
-export default styles.toString();

packages/themes/src/corp.ts

@@ -1,4 +0,0 @@
-// eslint-disable-next-line import/no-webpack-loader-syntax
-import styles from '!!css-loader!@alfalab/core-components/themes/corp.css';
-
-export default styles.toString();

packages/themes/src/dark.ts

@@ -1,4 +0,0 @@
-// eslint-disable-next-line import/no-webpack-loader-syntax
-import styles from '!!css-loader!@alfalab/core-components/themes/dark.css';
-
-export default styles.toString();

packages/themes/src/intranet.ts

@@ -1,4 +0,0 @@
-// eslint-disable-next-line import/no-webpack-loader-syntax
-import styles from '!!css-loader!@alfalab/core-components/themes/intranet.css';
-
-export default styles.toString();

packages/themes/src/mobile.ts

@@ -1,4 +0,0 @@
-// eslint-disable-next-line import/no-webpack-loader-syntax
-import styles from '!!css-loader!@alfalab/core-components/themes/mobile.css';
-
-export default styles.toString();

packages/themes/src/site.ts

@@ -1,4 +0,0 @@
-// eslint-disable-next-line import/no-webpack-loader-syntax
-import styles from '!!css-loader!@alfalab/core-components/themes/site.css';
-
-export default styles.toString();

rollup.config.mjs

@@ -15,6 +15,7 @@ import {
 } from './tools/rollup/core-components-resolver.mjs';
 import ignoreCss from './tools/rollup/ignore-css.mjs';
 import processCss from './tools/rollup/process-css.mjs';
+import inlineThemes from './tools/rollup/inline-themes.mjs';
 import coreComponentsTypingsResolver from './tools/rollup/core-components-typings-resolver.mjs';
 import createPackageJson from './tools/rollup/create-package-json.mjs';
 import { compiledDarkmodeGenerator } from './tools/rollup/compiled-darkmode-generator.mjs';
@@ -119,6 +120,7 @@ const es5 = {
     plugins: [
         ...baseConfig.plugins,
         multiInputPlugin,
+        inlineThemes(),
         typescript({
             tsconfig: (resolvedConfig) => ({
                 ...resolvedConfig,
@@ -155,6 +157,7 @@ const modern = {
     plugins: [
         ...baseConfig.plugins,
         multiInputPlugin,
+        inlineThemes(),
         typescript({
             outDir: 'dist/modern',
             tsconfig: (resolvedConfig) => ({
@@ -264,6 +267,7 @@ const esm = {
     plugins: [
         ...baseConfig.plugins,
         multiInputPlugin,
+        inlineThemes(),
         typescript({
             outDir: 'dist/esm',
             tsconfig: (resolvedConfig) => ({
@@ -326,4 +330,4 @@ const configs = (
           ]
 ).filter(Boolean);
 
-export default configs;
+export default configs;

tools/rollup/inline-themes.mjs

@@ -0,0 +1,26 @@
+import fs from 'fs/promises';
+import path from 'path';
+
+/* Плагин генерации js файлов для подключения тем */
+export default function inlineThemes() {
+    return {
+        name: 'inline-themes',
+        async transform(_, id) {
+            if (/\/packages\/themes\/src\/[^/]+\.ts/.test(id)) {
+                const theme = id.split('/').pop().split('.')[0];
+
+                const cssContent = await fs.readFile(
+                    path.resolve(path.dirname(id), `../dist/${theme}.css`),
+                    'utf8',
+                );
+
+                return {
+                    code: `export default \`${cssContent}\``,
+                    map: { mappings: '' },
+                };
+            }
+
+            return null;
+        },
+    };
+}