tailwind-preset-mantine 4.0.2 → 4.0.3

package/README.md

@@ -35,6 +35,8 @@ When importing the styles, instead of importing the tailwind css file, importing
 @import "tailwind-preset-mantine";
 ```
 
+(No extra tailwind / mantine styles imported mantually.)
+
 That's it!
 
 Now you can use tailwind with mantine's style applied:
@@ -49,9 +51,38 @@ export default function Page() {
 }
 ```
 
-2. Manual import (advanced)
+2. More styles from other mantine libraries
+
+If you use additional Mantine packages with their own styles, import them after the preset:
+
+```css
+@import "tailwind-preset-mantine";
+
+@import "@mantine/dates/styles.layer.css";
+@import "@mantine/dropzone/styles.layer.css";
+@import "@mantine/carousel/styles.layer.css";
+@import "@mantine/notifications/styles.layer.css";
+@import "mantine-react-table/styles.css";
+```
+
+`@mantine/core/styles.layer.css` is already included by `tailwind-preset-mantine`, so you do not need to import it again in the all-in-one setup.
+
+3. Manual import (advanced)
+
+If you want to take more control on the import, you can expand and use the `./theme.css` file:
+
+```css
+@layer theme, base, mantine, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css" layer(utilities);
 
-Note that you don't have to import tailwind or mantine styles, this preset will handle that for you. If you want to import it yourself, you can use the `./theme.css` file:
+@import "@mantine/core/styles.layer.css";
+
+@import "tailwind-preset-mantine/theme.css"; /* <-- import the preset */
+```
+
+With more styles you have:
 
 ```css
 @layer theme, base, mantine, components, utilities;
@@ -60,10 +91,17 @@ Note that you don't have to import tailwind or mantine styles, this preset will
 @import "tailwindcss/utilities.css" layer(utilities);
 
 @import "@mantine/core/styles.layer.css";
+@import "@mantine/dates/styles.layer.css";
+@import "@mantine/dropzone/styles.layer.css";
+@import "@mantine/carousel/styles.layer.css";
+@import "@mantine/notifications/styles.layer.css";
 
 @import "tailwind-preset-mantine/theme.css"; /* <-- import the preset */
+@import "mantine-react-table/styles.css"; /* regular CSS, placement relative to theme.css is flexible */
 ```
 
+Additional Mantine package `styles.layer.css` imports can be placed either before or after `tailwind-preset-mantine/theme.css`. The important part is that they are imported after the `@layer theme, base, mantine, components, utilities;` declaration so they participate in the `mantine` layer correctly. The example above keeps them grouped with other Mantine imports for readability.
+
 > What's `@layer`?
 >
 > Note that here we setup tailwind slightly different from [the official docs](https://arc.net/l/quote/vtfxbocq). We use the [CSS `@layer` directive](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) to control the order of the css. This is because we want to make sure that the mantine styles doesn't get overridden by tailwind reset (base). In this case, the order is `theme -> base -> mantine -> components -> utilities`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-preset-mantine",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "description": "Integrate Mantine with Tailwind CSS",
   "keywords": [
     "mantine",

package/src/core/generate.js

@@ -50,6 +50,12 @@ function indentCSS(css) {
 		.join("\n");
 }
 
+function cssVar(name, fallback) {
+	return fallback == null || fallback === ""
+		? `var(${name})`
+		: `var(${name}, ${fallback})`;
+}
+
 /**
  * @param {import("@mantine/core").MantineTheme} theme
  */
@@ -195,7 +201,10 @@ export function generateTheme(theme = DEFAULT_THEME) {
 
 	/* font weight */
 	${fontWeightKeys
-		.map((key) => `--font-weight-${key}: var(--mantine-font-weight-${key});`)
+		.map(
+			(key) =>
+				`--font-weight-${key}: ${cssVar(`--mantine-font-weight-${key}`, mergedTheme.fontWeights?.[key])};`,
+		)
 		.join("\n\t")}
 	${headingKeys
 		.map((key) => `--font-weight-${key}: var(--mantine-${key}-font-weight);`)

package/src/core/theme-loader.js

@@ -133,6 +133,21 @@ async function loadThemeFromFileInProcess(themePath, baseDir = process.cwd()) {
 	return { absolutePath, theme };
 }
 
+/**
+ * @param {string} themePath
+ * @param {string} baseDir
+ */
+export function getThemeLoaderChildArgs(themePath, baseDir = process.cwd()) {
+	return [
+		"--import",
+		TSX_LOADER_URL,
+		THIS_FILE,
+		"--child",
+		themePath,
+		resolve(baseDir),
+	];
+}
+
 /**
  * @param {string} themePath
  * @param {string} baseDir
@@ -140,7 +155,7 @@ async function loadThemeFromFileInProcess(themePath, baseDir = process.cwd()) {
 export async function loadThemeFromFile(themePath, baseDir = process.cwd()) {
 	const { stdout } = await execFile(
 		process.execPath,
-		["--import", TSX_LOADER_URL, THIS_FILE, "--child", themePath, baseDir],
+		getThemeLoaderChildArgs(themePath, baseDir),
 		{
 			cwd: resolve(baseDir),
 			maxBuffer: 5 * 1024 * 1024,

package/src/integrations/postcss.js

@@ -1,5 +1,5 @@
-import createMantineThemePostCSS from "./postcss-shared.cjs";
 import { writeThemeOutput } from "../core/output.js";
+import createMantineThemePostCSS from "./postcss-shared.cjs";
 
 const mantineTheme = createMantineThemePostCSS(writeThemeOutput);
 

package/src/theme.css

@@ -358,9 +358,9 @@
 	--text-base--line-height: var(--mantine-line-height);
 
 	/* font weight */
-	--font-weight-regular: var(--mantine-font-weight-regular);
-	--font-weight-medium: var(--mantine-font-weight-medium);
-	--font-weight-bold: var(--mantine-font-weight-bold);
+	--font-weight-regular: var(--mantine-font-weight-regular, 400);
+	--font-weight-medium: var(--mantine-font-weight-medium, 600);
+	--font-weight-bold: var(--mantine-font-weight-bold, 700);
 	--font-weight-h1: var(--mantine-h1-font-weight);
 	--font-weight-h2: var(--mantine-h2-font-weight);
 	--font-weight-h3: var(--mantine-h3-font-weight);