9316/update mantine setup (#9388)

Co-authored-by: Daniel Choudhury <dannychoudhury@gmail.com>

.gitignore

@@ -1,4 +1,5 @@
 *.icloud
+.cosine
 .idea
 .DS_Store
 node_modules

packages/cli/src/commands/setup/ui/libraries/mantine.js

@@ -1,6 +1,7 @@
 import path from 'path'
 
 import execa from 'execa'
+import fse from 'fs-extra'
 import { Listr } from 'listr2'
 
 import { recordTelemetryAttributes } from '@redwoodjs/cli-helpers'
@@ -28,10 +29,16 @@ const ALL_MANTINE_PACKAGES = [
 ]
 
 const MANTINE_THEME_AND_COMMENTS = `\
-// This object will be used to override Mantine theme defaults.
-// See https://mantine.dev/theming/mantine-provider/#theme-object for theming options
+import { createTheme } from '@mantine/core'
+
+/**
+ * This object will be used to override Mantine theme defaults.
+ * See https://mantine.dev/theming/mantine-provider/#theme-object for theming options
+ * @type {import("@mantine/core").MantineThemeOverride}
+ */
 const theme = {}
-export default theme
+
+export default createTheme(theme)
 `
 
 export function builder(yargs) {
@@ -68,7 +75,9 @@ export async function handler({ force, install, packages }) {
 
   const installPackages = (
     packages.includes(ALL_KEYWORD) ? ALL_MANTINE_PACKAGES : packages
-  ).map((pack) => `@mantine/${pack}`)
+  )
+    .map((pack) => `@mantine/${pack}`)
+    .concat('postcss', 'postcss-preset-mantine', 'postcss-simple-vars')
 
   const tasks = new Listr(
     [
@@ -108,10 +117,37 @@ export async function handler({ force, install, packages }) {
             },
             imports: [
               "import { MantineProvider } from '@mantine/core'",
-              "import * as theme from 'config/mantine.config'",
+              "import theme from 'config/mantine.config'",
+              "import '@mantine/core/styles.css'",
             ],
           }),
       },
+      {
+        title: 'Configuring PostCSS...',
+        task: () => {
+          /**
+           * Check if PostCSS config already exists.
+           * If it exists, throw an error.
+           */
+          const postCSSConfigPath = rwPaths.web.postcss
+
+          if (!force && fse.existsSync(postCSSConfigPath)) {
+            throw new Error(
+              'PostCSS config already exists.\nUse --force to override existing config.'
+            )
+          } else {
+            const postCSSConfig = fse.readFileSync(
+              path.join(
+                __dirname,
+                '../templates/mantine-postcss.config.js.template'
+              ),
+              'utf-8'
+            )
+
+            return fse.outputFileSync(postCSSConfigPath, postCSSConfig)
+          }
+        },
+      },
       {
         title: `Creating Theme File...`,
         task: () => {

packages/cli/src/commands/setup/ui/templates/mantine-postcss.config.js.template

@@ -0,0 +1,35 @@
+/**
+ * `postcss-preset-mantine` includes the following PostCSS plugins:
+ * - postcss-nested
+ * - postcss-mixins with Mantine specific mixins
+ * - Custom plugin with em/rem functions
+ * Read more: https://mantine.dev/styles/postcss-preset/
+
+ * `postcss-simple-vars` enables use of SCSS-like variables inside CSS files:
+ * ```postcss
+ * $blue    : #056ef0;
+ * $width-sm: rem(37.5);
+ * $selector: .my-component
+ *
+ * @media (min-width: $width-sm) {
+ *   $selector {
+ *     background: $blue;
+ *   }
+ * }
+ * ```
+ * Read more: https://github.com/postcss/postcss-simple-vars
+*/
+module.exports = {
+  plugins: [
+    require('postcss-preset-mantine'),
+    require('postcss-simple-vars')({
+      variables: {
+        'mantine-breakpoint-xs': '36em',
+        'mantine-breakpoint-sm': '48em',
+        'mantine-breakpoint-md': '62em',
+        'mantine-breakpoint-lg': '75em',
+        'mantine-breakpoint-xl': '88em',
+      },
+    }),
+  ],
+}

packages/cli/src/commands/setup/ui/templates/mantine.storybook.preview.js.template

@@ -1,7 +1,9 @@
 import * as React from 'react'
 
 import { MantineProvider } from '@mantine/core'
-import * as theme from 'config/mantine.config'
+import theme from 'config/mantine.config'
+
+import '@mantine/core/styles.css'
 
 const withMantine = (StoryFn) => {
   return (