Merge pull request #7490 from weseek/support/prebuild-css-with-vite

support: Prebuild CSS with Vite

apps/app/.gitignore

@@ -14,17 +14,9 @@ test/cypress/videos
 /public/static/js
 /public/static/styles
 /public/uploads
+/src/styles/prebuilt
 /tmp/
 
 # transpiled configuration files for production build
 /config/next-i18next.config.js
 /src/utils/next.config.utils.js
-
-# dist (for GROWI v4.x and below)
-/public/*.chunk.js
-/public/*.chunk.js.LICENSE.txt
-/public/*.bundle.js
-/public/manifest.json
-/public/dll
-/public/js
-/public/styles

apps/app/.stylelintrc.json

@@ -4,7 +4,7 @@
   ],
   "customSyntax": "postcss-scss",
   "ignoreFiles": [
-    "src/styles/_override-bootstrap-variables.scss",
+    "src/styles/prebuilt/*.css",
     "src/linter-checker/test.scss"
   ],
   "rules": {

apps/app/package.json

@@ -14,9 +14,11 @@
     "server": "yarn cross-env NODE_ENV=production node -r dotenv-flow/config dist/server/app.js",
     "server:ci": "yarn server --ci",
     "preserver": "yarn cross-env NODE_ENV=production yarn migrate",
+    "styles-prebuilt": "vite build -c vite.styles-prebuilt.config.ts",
     "migrate": "node -r dotenv-flow/config node_modules/.bin/migrate-mongo up -f config/migrate-mongo-config.js",
     "//// for development": "",
     "dev": "yarn cross-env NODE_ENV=development yarn ts-node-dev --inspect --transpile-only src/server/app.ts",
+    "dev:styles-prebuilt": "yarn styles-prebuilt --mode dev",
     "dev:analyze": "yarn cross-env ANALYZE=true yarn dev",
     "dev:migrate-mongo": "yarn cross-env NODE_ENV=development yarn ts-node node_modules/.bin/migrate-mongo",
     "dev:migrate": "yarn dev:migrate:status > tmp/cache/migration-status.out && yarn dev:migrate:up",

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 '~/styles/prebuilt/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 '~/styles/prebuilt/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,18 @@
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  publicDir: false,
+  build: {
+    outDir: 'src/styles/prebuilt',
+    rollupOptions: {
+      input: [
+        '/src/styles/theme/apply-colors.scss',
+        '/src/styles/vendor.scss',
+      ],
+      output: {
+        assetFileNames: '[name].[ext]', // not attach hash
+      },
+    },
+  },
+});

turbo.json

@@ -12,7 +12,7 @@
       "outputMode": "new-only"
     },
     "@growi/app#build": {
-      "dependsOn": ["^build"],
+      "dependsOn": ["^build", "@growi/app#styles-prebuilt"],
       "outputs": [".next/**", "config/**", "dist/**"],
       "outputMode": "new-only"
     },
@@ -48,13 +48,20 @@
       "inputs": ["src/migration/*.js"],
       "outputMode": "new-only"
     },
+    "@growi/app#dev:styles-prebuilt": {
+      "outputs": ["src/styles/prebuilt/**"],
+      "inputs": [
+        "src/styles/**/*.scss"
+      ],
+      "outputMode": "new-only"
+    },
     "@growi/app#dev": {
-      "dependsOn": ["^dev", "@growi/app#dev:migrate"],
+      "dependsOn": ["^dev", "@growi/app#dev:migrate", "@growi/app#dev:styles-prebuilt"],
       "cache": false,
       "persistent": true
     },
     "@growi/app#dev:ci": {
-      "dependsOn": ["^dev", "@growi/app#dev:migrate"],
+      "dependsOn": ["^dev", "@growi/app#dev:migrate", "@growi/app#dev:styles-prebuilt"],
       "cache": false
     },
     "@growi/slackbot-proxy#dev": {
@@ -97,7 +104,7 @@
       "dependsOn": ["@growi/core#dev", "@growi/remark-growi-directive#dev", "@growi/ui#dev"]
     },
     "@growi/app#lint": {
-      "dependsOn": ["^dev"]
+      "dependsOn": ["^dev", "@growi/app#dev:styles-prebuilt"]
     },
     "@growi/slackbot-proxy#lint": {
       "dependsOn": ["@growi/slack#dev"]