feat: allows for adding custom CSS in addition to SCSS overrides

payloadcms · Dec 29, 2020 · 544a4db · 544a4db
1 parent c84bcde
commit 544a4db
Show file tree

Hide file tree

Showing 8 changed files with 13 additions and 13 deletions.
diff --git a/demo/payload.config.ts b/demo/payload.config.ts
@@ -42,6 +42,7 @@ export default buildConfig({
     //   // favicon: '/img/whatever.png',
     // },
     disable: false,
+    scss: path.resolve(__dirname, './client/scss/overrides.scss'),
     components: {
       // Nav: () => (
       //   <div>Hello</div>
@@ -101,9 +102,6 @@ export default buildConfig({
     graphQLPlayground: '/graphql-playground',
   },
   defaultDepth: 2,
-  paths: {
-    scss: path.resolve(__dirname, './client/scss/overrides.scss'),
-  },
   graphQL: {
     maxComplexity: 1000,
     mutations: {}, // TODO: needs typing

diff --git a/src/admin/scss/app.scss b/src/admin/scss/app.scss
@@ -124,3 +124,5 @@ dialog {
 .payload__modal-item--enterDone {
   z-index: $z-modal;
 }
+
+@import '~payload-user-css';
diff --git a/src/admin/scss/custom.css b/src/admin/scss/custom.css
@@ -0,0 +1 @@
+/* Used as a placeholder for when the Payload app does not have custom CSS */
diff --git a/src/admin/scss/overrides.scss b/src/admin/scss/overrides.scss
@@ -0,0 +1 @@
+/* Used as a placeholder for when the Payload app does not have custom SCSS */
diff --git a/src/config/defaults.ts b/src/config/defaults.ts
@@ -14,6 +14,8 @@ export const defaults = {
     disable: false,
     indexHTML: path.resolve(__dirname, '../admin/index.html'),
     components: {},
+    css: path.resolve(__dirname, '../admin/scss/custom.css'),
+    scss: path.resolve(__dirname, '../admin/scss/overrides.scss'),
   },
   upload: {},
   email: {
@@ -44,7 +46,4 @@ export const defaults = {
   },
   hooks: {},
   localization: false,
-  paths: {
-    scss: path.resolve(__dirname, '../admin/scss/overrides.scss'),
-  },
 };
diff --git a/src/config/schema.ts b/src/config/schema.ts
@@ -31,6 +31,8 @@ export default joi.object({
       }),
     disable: joi.bool(),
     indexHTML: joi.string(),
+    css: joi.string(),
+    scss: joi.string(),
     components: joi.object()
       .keys({
         Nav: component,
@@ -109,10 +111,4 @@ export default joi.object({
   hooks: joi.object().keys({
     afterError: joi.func(),
   }),
-  paths: joi.object()
-    .keys({
-      configDir: joi.string(),
-      config: joi.string(),
-      scss: joi.string(),
-    }),
 });
diff --git a/src/config/types.ts b/src/config/types.ts
@@ -62,6 +62,8 @@ export type PayloadConfig = {
     }
     disable?: boolean;
     indexHTML?: string;
+    css?: string
+    scss?: string
     components?: {
       Nav?: React.ComponentType
       Account?: React.ComponentType

diff --git a/src/webpack/getBaseConfig.ts b/src/webpack/getBaseConfig.ts
@@ -54,7 +54,8 @@ export default (config: Config): Configuration => ({
     alias: {
       'payload/config': config.paths.config,
       '@payloadcms/payload$': mockModulePath,
-      'payload-scss-overrides': config.paths.scss,
+      'payload-user-css': config.admin.css,
+      'payload-scss-overrides': config.admin.scss,
       dotenv: mockDotENVPath,
     },
     extensions: ['.ts', '.tsx', '.js', '.json'],
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		/* Used as a placeholder for when the Payload app does not have custom CSS */