Merge pull request #5286 from payloadcms/feat/pre-compile-css

Feat/pre compile css

.gitignore

@@ -288,3 +288,4 @@ $RECYCLE.BIN/
 # End of https://www.toptal.com/developers/gitignore/api/node,macos,windows,webstorm,sublimetext,visualstudiocode
 
 /build
+.swc

.swcrc

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "sourceMaps": "inline",
+  "jsc": {
+    "target": "esnext",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "dts": true
+    }
+  },
+  "module": {
+    "type": "es6"
+  }
+}

emptyModule.js

@@ -0,0 +1 @@
+export default {}

packages/create-payload-app/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/db-mongodb/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/db-postgres/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/graphql/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/live-preview-react/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/live-preview/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/next/.swcrc

@@ -1,12 +1,22 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {
       "syntax": "typescript",
       "tsx": true,
       "dts": true
+    },
+    "experimental": {
+      "plugins": [
+        [
+          "swc-plugin-transform-remove-imports",
+          {
+            "test": "\\.(scss|css)$"
+          }
+        ]
+      ]
     }
   },
   "module": {

packages/next/package.json

@@ -8,9 +8,10 @@
     "@payloadcms/next": "./dist/bin/index.js"
   },
   "scripts": {
-    "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types",
+    "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types && pnpm build:webpack && rm dist/prod/index.js",
     "build:swc": "swc ./src -d ./dist --config-file .swcrc",
     "build:types": "tsc --emitDeclarationOnly --outDir dist",
+    "build:webpack": "webpack --config webpack.config.js",
     "clean": "rimraf {dist,*.tsbuildinfo}",
     "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" \"src/app/api/**\" dist/ && pnpm copyfiles:api",
     "copyfiles:api": "copyfiles -u 1 \"src/app/(payload)/**\" dist/template",
@@ -50,7 +51,18 @@
     "@types/react": "18.2.15",
     "@types/react-dom": "18.2.7",
     "@types/ws": "^8.5.10",
-    "payload": "workspace:*"
+    "css-loader": "^6.10.0",
+    "css-minimizer-webpack-plugin": "^6.0.0",
+    "mini-css-extract-plugin": "1.6.2",
+    "payload": "workspace:*",
+    "postcss-loader": "^8.1.1",
+    "postcss-preset-env": "^9.5.0",
+    "sass-loader": "^14.1.1",
+    "swc-loader": "^0.2.6",
+    "swc-plugin-transform-remove-imports": "^1.12.1",
+    "terser-webpack-plugin": "^5.3.10",
+    "webpack": "^5.78.0",
+    "webpack-cli": "^5.1.4"
   },
   "dependencies": {
     "@dnd-kit/core": "6.0.8",
@@ -79,6 +91,11 @@
     "main": "./dist/exports/index.js",
     "types": "./dist/exports/index.d.ts",
     "exports": {
+      "./css": {
+        "import": "./dist/prod/styles.css",
+        "require": "./dist/prod/styles.css",
+        "default": "./dist/prod/styles.css"
+      },
       "./withPayload": {
         "import": "./dist/withPayload.js",
         "require": "./dist/withPayload.js",

packages/next/src/layouts/Root/index.tsx

@@ -1,6 +1,5 @@
 import type { SanitizedConfig } from 'payload/types'
 
-import { auth } from '@payloadcms/next/utilities/auth'
 import { translations } from '@payloadcms/translations/client'
 import { RootProvider, buildComponentMap } from '@payloadcms/ui'
 import '@payloadcms/ui/scss/app.scss'
@@ -11,6 +10,7 @@ import React from 'react'
 import 'react-toastify/dist/ReactToastify.css'
 
 import { ClearRouteCache } from '../../elements/ClearRouteCache/index.js'
+import { auth } from '../../utilities/auth.js'
 import { getPayload } from '../../utilities/getPayload.js'
 import { getRequestLanguage } from '../../utilities/getRequestLanguage.js'
 import { DefaultEditView } from '../../views/Edit/Default/index.js'

packages/next/src/scss/app.scss

@@ -1,5 +1,5 @@
-@import 'fonts';
+@import './fonts.scss';
-@import 'styles';
+@import './styles.scss';
 @import './toastify.scss';
 @import './colors.scss';
 

packages/next/webpack.config.js

@@ -0,0 +1,107 @@
+import OptimizeCSSAssetsPlugin from 'css-minimizer-webpack-plugin'
+import MiniCSSExtractPlugin from 'mini-css-extract-plugin'
+import path from 'path'
+import TerserJSPlugin from 'terser-webpack-plugin'
+import { fileURLToPath } from 'url'
+import webpack from 'webpack'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+const componentWebpackConfig = {
+  entry: path.resolve(dirname, './src/index.ts'),
+  externals: ['react', 'react-dom', 'payload', 'payload/config', 'react-image-crop'],
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        oneOf: [
+          {
+            // exclude: /node_modules/,
+            test: /\.(t|j)sx?$/,
+            use: [
+              {
+                loader: 'swc-loader',
+                options: {
+                  jsc: {
+                    experimental: {
+                      plugins: [
+                        // clear the plugins used in .swcrc
+                      ],
+                    },
+                    parser: {
+                      syntax: 'typescript',
+                      tsx: true,
+                    },
+                  },
+                },
+              },
+            ],
+          },
+          {
+            sideEffects: true,
+            test: /\.(scss|css)$/,
+            use: [
+              MiniCSSExtractPlugin.loader,
+              'css-loader',
+              {
+                loader: 'postcss-loader',
+                options: {
+                  postcssOptions: {
+                    plugins: ['postcss-preset-env'],
+                  },
+                },
+              },
+              'sass-loader',
+            ],
+          },
+          {
+            type: 'asset/resource',
+            generator: {
+              filename: 'payload/[name][ext]',
+            },
+            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/, /\.woff$/, /\.woff2$/],
+          },
+        ],
+      },
+    ],
+  },
+  optimization: {
+    minimizer: [
+      new TerserJSPlugin({
+        extractComments: false,
+      }),
+      new OptimizeCSSAssetsPlugin({}),
+    ],
+  },
+  output: {
+    filename: 'index.js',
+    libraryTarget: 'commonjs2',
+    path: path.resolve(dirname, './dist/prod'),
+    publicPath: '/',
+  },
+  plugins: [
+    new MiniCSSExtractPlugin({
+      filename: 'styles.css',
+      ignoreOrder: true,
+    }),
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1,
+    }),
+  ],
+  resolve: {
+    extensionAlias: {
+      '.js': ['.ts', '.tsx', '.js', '.scss', '.css'],
+      '.mjs': ['.mts', '.mjs'],
+    },
+    extensions: ['.js', '.ts', '.tsx', '.scss', '.css'],
+    modules: [
+      'node_modules',
+      path.resolve(dirname, '../../node_modules'),
+      path.resolve(dirname, './node_modules'),
+    ],
+  },
+  stats: 'errors-only',
+}
+
+export default componentWebpackConfig

packages/payload/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/plugin-cloud-storage/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/plugin-cloud/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "exclude": ["/**/*.spec.ts", "/**/mocks"],
   "jsc": {
     "target": "esnext",

packages/plugin-form-builder/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "exclude": ["/**/mocks"],
   "jsc": {
     "target": "esnext",

packages/plugin-nested-docs/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/plugin-redirects/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/plugin-search/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/plugin-sentry/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "exclude": ["/**/*.spec.ts"],
   "jsc": {
     "target": "esnext",

packages/plugin-seo/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/plugin-stripe/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/richtext-lexical/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/richtext-slate/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/translations/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/ui/.swcrc

@@ -1,12 +1,22 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {
       "syntax": "typescript",
       "tsx": true,
       "dts": true
+    },
+    "experimental": {
+      "plugins": [
+        [
+          "swc-plugin-transform-remove-imports",
+          {
+            "test": "\\.(scss|css)$"
+          }
+        ]
+      ]
     }
   },
   "module": {

packages/ui/package.json

@@ -5,9 +5,10 @@
   "types": "./dist/index.d.ts",
   "type": "module",
   "scripts": {
-    "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types",
+    "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types && pnpm build:webpack && rm dist/prod/index.js",
     "build:swc": "swc ./src -d ./dist --config-file .swcrc",
     "build:types": "tsc --emitDeclarationOnly --outDir dist",
+    "build:webpack": "webpack --config webpack.config.js",
     "clean": "rimraf {dist,*.tsbuildinfo}",
     "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
     "fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
@@ -37,6 +38,11 @@
         "require": "./dist/exports/*.js",
         "types": "./dist/exports/*.d.ts"
       },
+      "./css": {
+        "import": "./dist/prod/styles.css",
+        "require": "./dist/prod/styles.css",
+        "default": "./dist/prod/styles.css"
+      },
       "./scss": {
         "import": "./dist/scss.scss",
         "require": "./dist/scss.scss",
@@ -54,7 +60,18 @@
     "@types/react-datepicker": "4.11.2",
     "@types/react-dom": "18.2.7",
     "@types/uuid": "8.3.4",
-    "payload": "workspace:*"
+    "postcss-loader": "^8.1.1",
+    "postcss-preset-env": "^9.5.0",
+    "sass-loader": "^14.1.1",
+    "swc-loader": "^0.2.6",
+    "swc-plugin-transform-remove-imports": "^1.12.1",
+    "css-loader": "^6.10.0",
+    "css-minimizer-webpack-plugin": "^6.0.0",
+    "mini-css-extract-plugin": "1.6.2",
+    "payload": "workspace:*",
+    "terser-webpack-plugin": "^5.3.10",
+    "webpack": "^5.78.0",
+    "webpack-cli": "^5.1.4"
   },
   "dependencies": {
     "@dnd-kit/core": "6.0.8",

packages/ui/webpack.config.js

@@ -0,0 +1,107 @@
+import OptimizeCSSAssetsPlugin from 'css-minimizer-webpack-plugin'
+import MiniCSSExtractPlugin from 'mini-css-extract-plugin'
+import path from 'path'
+import TerserJSPlugin from 'terser-webpack-plugin'
+import { fileURLToPath } from 'url'
+import webpack from 'webpack'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+const componentWebpackConfig = {
+  entry: path.resolve(dirname, './src/index.ts'),
+  externals: ['react', 'react-dom', 'payload', 'payload/config', 'react-image-crop'],
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        oneOf: [
+          {
+            // exclude: /node_modules/,
+            test: /\.(t|j)sx?$/,
+            use: [
+              {
+                loader: 'swc-loader',
+                options: {
+                  jsc: {
+                    experimental: {
+                      plugins: [
+                        // clear the plugins used in .swcrc
+                      ],
+                    },
+                    parser: {
+                      syntax: 'typescript',
+                      tsx: true,
+                    },
+                  },
+                },
+              },
+            ],
+          },
+          {
+            sideEffects: true,
+            test: /\.(scss|css)$/,
+            use: [
+              MiniCSSExtractPlugin.loader,
+              'css-loader',
+              {
+                loader: 'postcss-loader',
+                options: {
+                  postcssOptions: {
+                    plugins: ['postcss-preset-env'],
+                  },
+                },
+              },
+              'sass-loader',
+            ],
+          },
+          {
+            type: 'asset/resource',
+            generator: {
+              filename: 'payload/[name][ext]',
+            },
+            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/, /\.woff$/, /\.woff2$/],
+          },
+        ],
+      },
+    ],
+  },
+  optimization: {
+    minimizer: [
+      new TerserJSPlugin({
+        extractComments: false,
+      }),
+      new OptimizeCSSAssetsPlugin({}),
+    ],
+  },
+  output: {
+    filename: 'index.js',
+    libraryTarget: 'commonjs2',
+    path: path.resolve(dirname, './dist/prod'),
+    publicPath: '/',
+  },
+  plugins: [
+    new MiniCSSExtractPlugin({
+      filename: 'styles.css',
+      ignoreOrder: true,
+    }),
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1,
+    }),
+  ],
+  resolve: {
+    extensionAlias: {
+      '.js': ['.ts', '.tsx', '.js', '.scss', '.css'],
+      '.mjs': ['.mts', '.mjs'],
+    },
+    extensions: ['.js', '.ts', '.tsx', '.scss', '.css'],
+    modules: [
+      'node_modules',
+      path.resolve(dirname, '../../node_modules'),
+      path.resolve(dirname, './node_modules'),
+    ],
+  },
+  stats: 'errors-only',
+}
+
+export default componentWebpackConfig