WIP: add vite.styles-prebuilt.config.ts

apps/app/src/pages/_app.page.tsx

@@ -17,10 +17,10 @@ import { swrGlobalConfiguration } from '~/utils/swr-utils';
 import { CommonProps } from './utils/commons';
 import { registerTransformerForObjectId } from './utils/objectid-transformer';
 
+import '^/dist/assets/vendor.css';
+import '~/styles/font-icons.scss';
 import '~/styles/style-app.scss';
-import '~/styles/theme/_apply-colors-light.scss';
-import '~/styles/theme/_apply-colors-dark.scss';
-import '~/styles/theme/_apply-colors.scss';
+import '^/dist/assets/apply-colors.css';
 
 const isDev = process.env.NODE_ENV === 'development';
 

apps/app/src/styles/bootstrap/_apply.scss

@@ -1,40 +1,40 @@
 @use 'init' as *;
 
 // apply bootstrap
-@import '~bootstrap/scss/root';
-@import '~bootstrap/scss/reboot';
-@import '~bootstrap/scss/type';
-@import '~bootstrap/scss/images';
-@import '~bootstrap/scss/code';
-@import '~bootstrap/scss/grid';
-@import '~bootstrap/scss/tables';
-@import '~bootstrap/scss/forms';
-@import '~bootstrap/scss/buttons';
-@import '~bootstrap/scss/transitions';
-@import '~bootstrap/scss/dropdown';
-@import '~bootstrap/scss/button-group';
-@import '~bootstrap/scss/input-group';
-@import '~bootstrap/scss/custom-forms';
-@import '~bootstrap/scss/nav';
-@import '~bootstrap/scss/navbar';
-@import '~bootstrap/scss/card';
-@import '~bootstrap/scss/breadcrumb';
-@import '~bootstrap/scss/pagination';
-@import '~bootstrap/scss/badge';
-@import '~bootstrap/scss/jumbotron';
-@import '~bootstrap/scss/alert';
-@import '~bootstrap/scss/progress';
-@import '~bootstrap/scss/media';
-@import '~bootstrap/scss/list-group';
-@import '~bootstrap/scss/close';
-@import '~bootstrap/scss/toasts';
-@import '~bootstrap/scss/modal';
-@import '~bootstrap/scss/tooltip';
-@import '~bootstrap/scss/popover';
-@import '~bootstrap/scss/carousel';
-@import '~bootstrap/scss/spinners';
-@import '~bootstrap/scss/utilities';
-@import '~bootstrap/scss/print';
+@import 'bootstrap/scss/root';
+@import 'bootstrap/scss/reboot';
+@import 'bootstrap/scss/type';
+@import 'bootstrap/scss/images';
+@import 'bootstrap/scss/code';
+@import 'bootstrap/scss/grid';
+@import 'bootstrap/scss/tables';
+@import 'bootstrap/scss/forms';
+@import 'bootstrap/scss/buttons';
+@import 'bootstrap/scss/transitions';
+@import 'bootstrap/scss/dropdown';
+@import 'bootstrap/scss/button-group';
+@import 'bootstrap/scss/input-group';
+@import 'bootstrap/scss/custom-forms';
+@import 'bootstrap/scss/nav';
+@import 'bootstrap/scss/navbar';
+@import 'bootstrap/scss/card';
+@import 'bootstrap/scss/breadcrumb';
+@import 'bootstrap/scss/pagination';
+@import 'bootstrap/scss/badge';
+@import 'bootstrap/scss/jumbotron';
+@import 'bootstrap/scss/alert';
+@import 'bootstrap/scss/progress';
+@import 'bootstrap/scss/media';
+@import 'bootstrap/scss/list-group';
+@import 'bootstrap/scss/close';
+@import 'bootstrap/scss/toasts';
+@import 'bootstrap/scss/modal';
+@import 'bootstrap/scss/tooltip';
+@import 'bootstrap/scss/popover';
+@import 'bootstrap/scss/carousel';
+@import 'bootstrap/scss/spinners';
+@import 'bootstrap/scss/utilities';
+@import 'bootstrap/scss/print';
 
 // override
 @import './override';

apps/app/src/styles/bootstrap/_init.scss

@@ -1,9 +1,9 @@
 @import './variables';
 
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
 
 // merge $colors to $theme-colors
 $theme-colors: map-merge($theme-colors, $colors);
 
-@import '~bootstrap/scss/mixins';
+@import 'bootstrap/scss/mixins';

apps/app/src/styles/font-icons.scss

@@ -0,0 +1,6 @@
+// DO NOT CHANGE THER OERDER OF font-awesome AND simple-line-icons.
+// font-familiy used in simple-line-icons has to be prioritized than the one used in font-awesome.
+@import 'font-awesome';
+@import 'simple-line-icons';
+@import 'material-icons/iconfont/filled';
+@import '@icon/themify-icons/themify-icons';

apps/app/src/styles/style-app.scss

@@ -1,32 +1,5 @@
-@import './bootstrap/apply';
-
 @import 'mixins';
 
-// react-bootstrap-typeahead
-@import '~react-bootstrap-typeahead/css/Typeahead';
-@import 'override-rbt';
-
-// SimpleBar
-@import '~simplebar/dist/simplebar.min.css';
-@import 'override-simplebar';
-
-// Emoji-mart style
-@import '~emoji-mart/css/emoji-mart.css';
-
-// KaTeX
-@import '~katex/dist/katex.min';
-
-@import '~@growi/remark-lsx/dist/client/style.css';
-
-// icons
-
-// DO NOT CHANGE THER OERDER OF font-awesome AND simple-line-icons.
-// font-familiy used in simple-line-icons has to be prioritized than the one used in font-awesome.
-@import '~font-awesome';
-@import '~simple-line-icons';
-@import '~material-icons/iconfont/filled';
-@import '~@icon/themify-icons/themify-icons';
-
 // atoms
 @import 'atoms/buttons';
 @import 'atoms/spinners';

apps/app/src/styles/theme/_hsl-functions.scss

@@ -1,4 +1,4 @@
-@use '~bootstrap/scss/functions' as bs;
+@use 'bootstrap/scss/functions' as bs;
 
 @function contrast($color, $darken-degrees: 0%, $alpha-degrees: 100%) {
   $color: bs.str-replace($color, 'var(');

apps/app/src/styles/theme/_apply-colors.scss → apps/app/src/styles/theme/apply-colors.scss

@@ -5,6 +5,9 @@
 @use './mixins/hsl-button';
 @use './hsl-functions' as hsl;
 
+@import 'apply-colors-dark';
+@import 'apply-colors-light';
+
 //
 //== Apply to Bootstrap
 //

apps/app/src/styles/vendor.scss

@@ -0,0 +1,15 @@
+@import './bootstrap/apply';
+
+// react-bootstrap-typeahead
+@import 'react-bootstrap-typeahead/css/Typeahead';
+@import './override-rbt';
+
+// SimpleBar
+@import 'simplebar/dist/simplebar.min.css';
+@import './override-simplebar';
+
+// Emoji-mart style
+@import 'emoji-mart/css/emoji-mart.css';
+
+// KaTeX
+// @import 'katex/dist/katex.min';

apps/app/vite.styles-prebuilt.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+  const isProd = mode === 'production';
+
+  return {
+    publicDir: false,
+    build: {
+      manifest: true,
+      rollupOptions: {
+        input: [
+          '/src/styles/theme/apply-colors.scss',
+          '/src/styles/vendor.scss',
+        ],
+        output: {
+          assetFileNames: isProd
+            ? undefined
+            : 'assets/[name].[ext]', // not attach hash
+        },
+      },
+    },
+  };
+});