@mantine/emotion 9.0.0-alpha.4 → 9.0.0-alpha.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/Global.cjs +11 -11
- package/cjs/Global.cjs.map +1 -1
- package/cjs/MantineEmotionProvider.cjs +17 -20
- package/cjs/MantineEmotionProvider.cjs.map +1 -1
- package/cjs/_virtual/_rolldown/runtime.cjs +24 -0
- package/cjs/create-styles.cjs +33 -31
- package/cjs/create-styles.cjs.map +1 -1
- package/cjs/emotion-transform.cjs +31 -30
- package/cjs/emotion-transform.cjs.map +1 -1
- package/cjs/index.cjs +27 -29
- package/cjs/merge-sx.cjs +14 -14
- package/cjs/merge-sx.cjs.map +1 -1
- package/cjs/ssr.cjs +21 -25
- package/cjs/ssr.cjs.map +1 -1
- package/cjs/use-css.cjs +57 -53
- package/cjs/use-css.cjs.map +1 -1
- package/cjs/use-guaranteed-memo.cjs +13 -15
- package/cjs/use-guaranteed-memo.cjs.map +1 -1
- package/esm/Global.mjs +11 -10
- package/esm/Global.mjs.map +1 -1
- package/esm/MantineEmotionProvider.mjs +15 -17
- package/esm/MantineEmotionProvider.mjs.map +1 -1
- package/esm/create-styles.mjs +32 -29
- package/esm/create-styles.mjs.map +1 -1
- package/esm/emotion-transform.mjs +30 -28
- package/esm/emotion-transform.mjs.map +1 -1
- package/esm/index.mjs +9 -9
- package/esm/merge-sx.mjs +14 -12
- package/esm/merge-sx.mjs.map +1 -1
- package/esm/ssr.mjs +19 -19
- package/esm/ssr.mjs.map +1 -1
- package/esm/use-css.mjs +55 -47
- package/esm/use-css.mjs.map +1 -1
- package/esm/use-guaranteed-memo.mjs +12 -13
- package/esm/use-guaranteed-memo.mjs.map +1 -1
- package/package.json +8 -8
- package/cjs/index.cjs.map +0 -1
- package/esm/index.mjs.map +0 -1
package/cjs/Global.cjs
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
require("./_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
let _emotion_react = require("@emotion/react");
|
|
4
|
+
let _mantine_core = require("@mantine/core");
|
|
5
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
6
|
+
//#region packages/@mantine/emotion/src/Global.tsx
|
|
8
7
|
function Global({ styles }) {
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
const theme = (0, _mantine_core.useMantineTheme)();
|
|
9
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_emotion_react.Global, { styles: (0, _emotion_react.css)(typeof styles === "function" ? styles(theme) : styles) });
|
|
11
10
|
}
|
|
12
|
-
|
|
11
|
+
//#endregion
|
|
13
12
|
exports.Global = Global;
|
|
14
|
-
|
|
13
|
+
|
|
14
|
+
//# sourceMappingURL=Global.cjs.map
|
package/cjs/Global.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Global.cjs","sources":["../src/Global.tsx"],"sourcesContent":["import { css, Global as EmotionGlobal } from '@emotion/react';\nimport { MantineTheme, useMantineTheme } from '@mantine/core';\nimport type { CSSObject } from './types';\n\ntype EmotionStyles = CSSObject | CSSObject[];\n\ninterface GlobalStylesProps {\n styles: EmotionStyles | ((theme: MantineTheme) => EmotionStyles);\n}\n\nexport function Global({ styles }: GlobalStylesProps) {\n const theme = useMantineTheme();\n return (\n <EmotionGlobal styles={css((typeof styles === 'function' ? styles(theme) : styles) as any)} />\n );\n}\n"],"
|
|
1
|
+
{"version":3,"file":"Global.cjs","names":["EmotionGlobal"],"sources":["../src/Global.tsx"],"sourcesContent":["import { css, Global as EmotionGlobal } from '@emotion/react';\nimport { MantineTheme, useMantineTheme } from '@mantine/core';\nimport type { CSSObject } from './types';\n\ntype EmotionStyles = CSSObject | CSSObject[];\n\ninterface GlobalStylesProps {\n styles: EmotionStyles | ((theme: MantineTheme) => EmotionStyles);\n}\n\nexport function Global({ styles }: GlobalStylesProps) {\n const theme = useMantineTheme();\n return (\n <EmotionGlobal styles={css((typeof styles === 'function' ? styles(theme) : styles) as any)} />\n );\n}\n"],"mappings":";;;;;;AAUA,SAAgB,OAAO,EAAE,UAA6B;CACpD,MAAM,SAAA,GAAA,cAAA,kBAAyB;AAC/B,QACE,iBAAA,GAAA,kBAAA,KAACA,eAAAA,QAAD,EAAe,SAAA,GAAA,eAAA,KAAa,OAAO,WAAW,aAAa,OAAO,MAAM,GAAG,OAAe,EAAI,CAAA"}
|
|
@@ -1,25 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
const EmotionCacheContext = react.createContext(null);
|
|
1
|
+
"use client";
|
|
2
|
+
require("./_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
let _emotion_react = require("@emotion/react");
|
|
4
|
+
let react = require("react");
|
|
5
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
6
|
+
//#region packages/@mantine/emotion/src/MantineEmotionProvider.tsx
|
|
7
|
+
const EmotionCacheContext = (0, react.createContext)(null);
|
|
9
8
|
function useEmotionCache() {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
"Emotion cache is not available in context, make sure that you have MantineEmotionProvider in the component tree"
|
|
14
|
-
);
|
|
15
|
-
}
|
|
16
|
-
return cache;
|
|
9
|
+
const cache = (0, react.use)(EmotionCacheContext);
|
|
10
|
+
if (cache === null) throw new Error("Emotion cache is not available in context, make sure that you have MantineEmotionProvider in the component tree");
|
|
11
|
+
return cache;
|
|
17
12
|
}
|
|
18
|
-
const MantineEmotionProvider =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
13
|
+
const MantineEmotionProvider = (0, _emotion_react.withEmotionCache)(({ children, cache }, ctx) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmotionCacheContext, {
|
|
14
|
+
value: cache || ctx,
|
|
15
|
+
children
|
|
16
|
+
}));
|
|
17
|
+
//#endregion
|
|
22
18
|
exports.EmotionCacheContext = EmotionCacheContext;
|
|
23
19
|
exports.MantineEmotionProvider = MantineEmotionProvider;
|
|
24
20
|
exports.useEmotionCache = useEmotionCache;
|
|
25
|
-
|
|
21
|
+
|
|
22
|
+
//# sourceMappingURL=MantineEmotionProvider.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MantineEmotionProvider.cjs","sources":["../src/MantineEmotionProvider.tsx"],"sourcesContent":["import { createContext, use } from 'react';\nimport { EmotionCache, withEmotionCache } from '@emotion/react';\n\nexport const EmotionCacheContext = createContext<EmotionCache | null>(null);\n\nexport function useEmotionCache() {\n const cache = use(EmotionCacheContext);\n\n if (cache === null) {\n throw new Error(\n 'Emotion cache is not available in context, make sure that you have MantineEmotionProvider in the component tree'\n );\n }\n\n return cache;\n}\n\ninterface EmotionCacheProviderProps {\n children: React.ReactNode;\n cache?: EmotionCache;\n}\n\nexport const MantineEmotionProvider = withEmotionCache<EmotionCacheProviderProps>(\n ({ children, cache }, ctx) => (\n <EmotionCacheContext value={cache || ctx}>{children}</EmotionCacheContext>\n )\n);\n"],"
|
|
1
|
+
{"version":3,"file":"MantineEmotionProvider.cjs","names":[],"sources":["../src/MantineEmotionProvider.tsx"],"sourcesContent":["import { createContext, use } from 'react';\nimport { EmotionCache, withEmotionCache } from '@emotion/react';\n\nexport const EmotionCacheContext = createContext<EmotionCache | null>(null);\n\nexport function useEmotionCache() {\n const cache = use(EmotionCacheContext);\n\n if (cache === null) {\n throw new Error(\n 'Emotion cache is not available in context, make sure that you have MantineEmotionProvider in the component tree'\n );\n }\n\n return cache;\n}\n\ninterface EmotionCacheProviderProps {\n children: React.ReactNode;\n cache?: EmotionCache;\n}\n\nexport const MantineEmotionProvider = withEmotionCache<EmotionCacheProviderProps>(\n ({ children, cache }, ctx) => (\n <EmotionCacheContext value={cache || ctx}>{children}</EmotionCacheContext>\n )\n);\n"],"mappings":";;;;;;AAGA,MAAa,uBAAA,GAAA,MAAA,eAAyD,KAAK;AAE3E,SAAgB,kBAAkB;CAChC,MAAM,SAAA,GAAA,MAAA,KAAY,oBAAoB;AAEtC,KAAI,UAAU,KACZ,OAAM,IAAI,MACR,kHACD;AAGH,QAAO;;AAQT,MAAa,0BAAA,GAAA,eAAA,mBACV,EAAE,UAAU,SAAS,QACpB,iBAAA,GAAA,kBAAA,KAAC,qBAAD;CAAqB,OAAO,SAAS;CAAM;CAA+B,CAAA,CAE7E"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
//#region \0rolldown/runtime.js
|
|
3
|
+
var __create = Object.create;
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
11
|
+
key = keys[i];
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
13
|
+
get: ((k) => from[k]).bind(null, key),
|
|
14
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
20
|
+
value: mod,
|
|
21
|
+
enumerable: true
|
|
22
|
+
}) : target, mod));
|
|
23
|
+
//#endregion
|
|
24
|
+
exports.__toESM = __toESM;
|
package/cjs/create-styles.cjs
CHANGED
|
@@ -1,42 +1,44 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
require("./_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
const require_use_css = require("./use-css.cjs");
|
|
4
|
+
let _mantine_core = require("@mantine/core");
|
|
5
|
+
//#region packages/@mantine/emotion/src/create-styles.ts
|
|
7
6
|
function getStylesRef(refName) {
|
|
8
|
-
|
|
7
|
+
return `___ref-${refName || ""}`;
|
|
9
8
|
}
|
|
10
9
|
function getBreakpointValue(theme, breakpoint) {
|
|
11
|
-
|
|
10
|
+
return breakpoint in theme.breakpoints && typeof breakpoint !== "number" ? (0, _mantine_core.px)(theme.breakpoints[breakpoint]) : (0, _mantine_core.px)(breakpoint);
|
|
12
11
|
}
|
|
13
12
|
const getHelpers = (theme) => ({
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
13
|
+
light: "[data-mantine-color-scheme=\"light\"] &",
|
|
14
|
+
dark: "[data-mantine-color-scheme=\"dark\"] &",
|
|
15
|
+
rtl: "[dir=\"rtl\"] &",
|
|
16
|
+
ltr: "[dir=\"ltr\"] &",
|
|
17
|
+
notRtl: "[dir=\"ltr\"] &",
|
|
18
|
+
notLtr: "[dir=\"rtl\"] &",
|
|
19
|
+
ref: getStylesRef,
|
|
20
|
+
smallerThan: (breakpoint) => `@media (max-width: ${(0, _mantine_core.em)(getBreakpointValue(theme, breakpoint) - .1)})`,
|
|
21
|
+
largerThan: (breakpoint) => `@media (min-width: ${(0, _mantine_core.em)(getBreakpointValue(theme, breakpoint))})`
|
|
23
22
|
});
|
|
24
23
|
function createStyles(input) {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
24
|
+
const getCssObject = typeof input === "function" ? input : () => input;
|
|
25
|
+
return function useStyles(params) {
|
|
26
|
+
const theme = (0, _mantine_core.useMantineTheme)();
|
|
27
|
+
const cssObject = getCssObject(theme, params, getHelpers(theme));
|
|
28
|
+
const { css, cx } = require_use_css.useCss();
|
|
29
|
+
return {
|
|
30
|
+
classes: Object.keys(cssObject).reduce((acc, key) => {
|
|
31
|
+
acc[key] = css(cssObject[key]);
|
|
32
|
+
return acc;
|
|
33
|
+
}, {}),
|
|
34
|
+
cx,
|
|
35
|
+
theme
|
|
36
|
+
};
|
|
37
|
+
};
|
|
37
38
|
}
|
|
38
|
-
|
|
39
|
+
//#endregion
|
|
39
40
|
exports.createStyles = createStyles;
|
|
40
41
|
exports.getHelpers = getHelpers;
|
|
41
42
|
exports.getStylesRef = getStylesRef;
|
|
42
|
-
|
|
43
|
+
|
|
44
|
+
//# sourceMappingURL=create-styles.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-styles.cjs","sources":["../src/create-styles.ts"],"sourcesContent":["import { em, MantineBreakpoint, MantineTheme, px, useMantineTheme } from '@mantine/core';\nimport { CSSObject } from './types';\nimport { useCss } from './use-css';\n\nexport function getStylesRef(refName: string) {\n return `___ref-${refName || ''}`;\n}\n\nfunction getBreakpointValue(theme: MantineTheme, breakpoint: MantineBreakpoint | number) {\n return breakpoint in theme.breakpoints && typeof breakpoint !== 'number'\n ? (px(theme.breakpoints[breakpoint]) as number)\n : (px(breakpoint) as number);\n}\n\nexport const getHelpers = (theme: MantineTheme) => ({\n light: '[data-mantine-color-scheme=\"light\"] &',\n dark: '[data-mantine-color-scheme=\"dark\"] &',\n rtl: '[dir=\"rtl\"] &',\n ltr: '[dir=\"ltr\"] &',\n notRtl: '[dir=\"ltr\"] &',\n notLtr: '[dir=\"rtl\"] &',\n ref: getStylesRef,\n smallerThan: (breakpoint: MantineBreakpoint | number) =>\n `@media (max-width: ${em(getBreakpointValue(theme, breakpoint) - 0.1)})`,\n largerThan: (breakpoint: MantineBreakpoint | number) =>\n `@media (min-width: ${em(getBreakpointValue(theme, breakpoint))})`,\n});\n\nexport type EmotionHelpers = ReturnType<typeof getHelpers>;\n\nexport function createStyles<\n Key extends string = string,\n Params = void,\n Input extends Record<Key, CSSObject> = Record<Key, CSSObject>,\n>(input: ((theme: MantineTheme, params: Params, helpers: EmotionHelpers) => Input) | Input) {\n const getCssObject = typeof input === 'function' ? input : () => input;\n\n return function useStyles(params: Params) {\n const theme = useMantineTheme();\n const helpers = getHelpers(theme);\n const cssObject: Record<string, any> = getCssObject(theme, params, helpers);\n const { css, cx } = useCss();\n const classes = Object.keys(cssObject).reduce<Record<string, string>>((acc, key) => {\n acc[key] = css(cssObject[key]);\n return acc;\n }, {}) as { [key in keyof Input]: string };\n\n return { classes, cx, theme };\n };\n}\n"],"
|
|
1
|
+
{"version":3,"file":"create-styles.cjs","names":["useCss"],"sources":["../src/create-styles.ts"],"sourcesContent":["import { em, MantineBreakpoint, MantineTheme, px, useMantineTheme } from '@mantine/core';\nimport { CSSObject } from './types';\nimport { useCss } from './use-css';\n\nexport function getStylesRef(refName: string) {\n return `___ref-${refName || ''}`;\n}\n\nfunction getBreakpointValue(theme: MantineTheme, breakpoint: MantineBreakpoint | number) {\n return breakpoint in theme.breakpoints && typeof breakpoint !== 'number'\n ? (px(theme.breakpoints[breakpoint]) as number)\n : (px(breakpoint) as number);\n}\n\nexport const getHelpers = (theme: MantineTheme) => ({\n light: '[data-mantine-color-scheme=\"light\"] &',\n dark: '[data-mantine-color-scheme=\"dark\"] &',\n rtl: '[dir=\"rtl\"] &',\n ltr: '[dir=\"ltr\"] &',\n notRtl: '[dir=\"ltr\"] &',\n notLtr: '[dir=\"rtl\"] &',\n ref: getStylesRef,\n smallerThan: (breakpoint: MantineBreakpoint | number) =>\n `@media (max-width: ${em(getBreakpointValue(theme, breakpoint) - 0.1)})`,\n largerThan: (breakpoint: MantineBreakpoint | number) =>\n `@media (min-width: ${em(getBreakpointValue(theme, breakpoint))})`,\n});\n\nexport type EmotionHelpers = ReturnType<typeof getHelpers>;\n\nexport function createStyles<\n Key extends string = string,\n Params = void,\n Input extends Record<Key, CSSObject> = Record<Key, CSSObject>,\n>(input: ((theme: MantineTheme, params: Params, helpers: EmotionHelpers) => Input) | Input) {\n const getCssObject = typeof input === 'function' ? input : () => input;\n\n return function useStyles(params: Params) {\n const theme = useMantineTheme();\n const helpers = getHelpers(theme);\n const cssObject: Record<string, any> = getCssObject(theme, params, helpers);\n const { css, cx } = useCss();\n const classes = Object.keys(cssObject).reduce<Record<string, string>>((acc, key) => {\n acc[key] = css(cssObject[key]);\n return acc;\n }, {}) as { [key in keyof Input]: string };\n\n return { classes, cx, theme };\n };\n}\n"],"mappings":";;;;;AAIA,SAAgB,aAAa,SAAiB;AAC5C,QAAO,UAAU,WAAW;;AAG9B,SAAS,mBAAmB,OAAqB,YAAwC;AACvF,QAAO,cAAc,MAAM,eAAe,OAAO,eAAe,YAAA,GAAA,cAAA,IACxD,MAAM,YAAY,YAAY,IAAA,GAAA,cAAA,IAC9B,WAAW;;AAGrB,MAAa,cAAc,WAAyB;CAClD,OAAO;CACP,MAAM;CACN,KAAK;CACL,KAAK;CACL,QAAQ;CACR,QAAQ;CACR,KAAK;CACL,cAAc,eACZ,uBAAA,GAAA,cAAA,IAAyB,mBAAmB,OAAO,WAAW,GAAG,GAAI,CAAC;CACxE,aAAa,eACX,uBAAA,GAAA,cAAA,IAAyB,mBAAmB,OAAO,WAAW,CAAC,CAAC;CACnE;AAID,SAAgB,aAId,OAA0F;CAC1F,MAAM,eAAe,OAAO,UAAU,aAAa,cAAc;AAEjE,QAAO,SAAS,UAAU,QAAgB;EACxC,MAAM,SAAA,GAAA,cAAA,kBAAyB;EAE/B,MAAM,YAAiC,aAAa,OAAO,QAD3C,WAAW,MAAM,CAC0C;EAC3E,MAAM,EAAE,KAAK,OAAOA,gBAAAA,QAAQ;AAM5B,SAAO;GAAE,SALO,OAAO,KAAK,UAAU,CAAC,QAAgC,KAAK,QAAQ;AAClF,QAAI,OAAO,IAAI,UAAU,KAAK;AAC9B,WAAO;MACN,EAAE,CAAC;GAEY;GAAI;GAAO"}
|
|
@@ -1,37 +1,38 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
require("./_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
const require_use_css = require("./use-css.cjs");
|
|
4
|
+
const require_create_styles = require("./create-styles.cjs");
|
|
5
|
+
let _mantine_core = require("@mantine/core");
|
|
6
|
+
//#region packages/@mantine/emotion/src/emotion-transform.ts
|
|
8
7
|
function sxTransform() {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
8
|
+
const theme = (0, _mantine_core.useMantineTheme)();
|
|
9
|
+
const { css } = require_use_css.useCss();
|
|
10
|
+
return (sx) => {
|
|
11
|
+
const parsedSx = typeof sx === "function" ? sx(theme, require_create_styles.getHelpers(theme)) : sx;
|
|
12
|
+
return !parsedSx ? "" : css(parsedSx);
|
|
13
|
+
};
|
|
15
14
|
}
|
|
16
15
|
function stylesTransform() {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
16
|
+
const theme = (0, _mantine_core.useMantineTheme)();
|
|
17
|
+
const { css } = require_use_css.useCss();
|
|
18
|
+
return (styles, payload) => {
|
|
19
|
+
if (!styles) return {};
|
|
20
|
+
const stylesObject = typeof styles === "function" ? styles(theme, payload.props, require_create_styles.getHelpers(theme)) : styles;
|
|
21
|
+
return Object.keys(stylesObject).reduce((acc, key) => {
|
|
22
|
+
const value = stylesObject[key];
|
|
23
|
+
const parsedValue = typeof value === "function" ? value(theme) : value;
|
|
24
|
+
return {
|
|
25
|
+
...acc,
|
|
26
|
+
[key]: css(parsedValue)
|
|
27
|
+
};
|
|
28
|
+
}, {});
|
|
29
|
+
};
|
|
30
30
|
}
|
|
31
31
|
const emotionTransform = {
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
sx: sxTransform,
|
|
33
|
+
styles: stylesTransform
|
|
34
34
|
};
|
|
35
|
-
|
|
35
|
+
//#endregion
|
|
36
36
|
exports.emotionTransform = emotionTransform;
|
|
37
|
-
|
|
37
|
+
|
|
38
|
+
//# sourceMappingURL=emotion-transform.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emotion-transform.cjs","sources":["../src/emotion-transform.ts"],"sourcesContent":["import { MantineStylesTransform, useMantineTheme } from '@mantine/core';\nimport { getHelpers } from './create-styles';\nimport { useCss } from './use-css';\n\nfunction sxTransform() {\n const theme = useMantineTheme();\n const { css } = useCss();\n\n return (sx: any) => {\n const parsedSx = typeof sx === 'function' ? sx(theme, getHelpers(theme)) : sx;\n return !parsedSx ? '' : css(parsedSx);\n };\n}\n\nfunction stylesTransform() {\n const theme = useMantineTheme();\n const { css } = useCss();\n\n return (styles: any, payload: any) => {\n if (!styles) {\n return {};\n }\n\n const stylesObject =\n typeof styles === 'function' ? styles(theme, payload.props, getHelpers(theme)) : styles;\n\n return Object.keys(stylesObject).reduce((acc, key) => {\n const value = stylesObject[key];\n const parsedValue = typeof value === 'function' ? value(theme) : value;\n return { ...acc, [key]: css(parsedValue) };\n }, {});\n };\n}\n\nexport const emotionTransform: MantineStylesTransform = {\n sx: sxTransform,\n styles: stylesTransform,\n};\n"],"
|
|
1
|
+
{"version":3,"file":"emotion-transform.cjs","names":["useCss","getHelpers"],"sources":["../src/emotion-transform.ts"],"sourcesContent":["import { MantineStylesTransform, useMantineTheme } from '@mantine/core';\nimport { getHelpers } from './create-styles';\nimport { useCss } from './use-css';\n\nfunction sxTransform() {\n const theme = useMantineTheme();\n const { css } = useCss();\n\n return (sx: any) => {\n const parsedSx = typeof sx === 'function' ? sx(theme, getHelpers(theme)) : sx;\n return !parsedSx ? '' : css(parsedSx);\n };\n}\n\nfunction stylesTransform() {\n const theme = useMantineTheme();\n const { css } = useCss();\n\n return (styles: any, payload: any) => {\n if (!styles) {\n return {};\n }\n\n const stylesObject =\n typeof styles === 'function' ? styles(theme, payload.props, getHelpers(theme)) : styles;\n\n return Object.keys(stylesObject).reduce((acc, key) => {\n const value = stylesObject[key];\n const parsedValue = typeof value === 'function' ? value(theme) : value;\n return { ...acc, [key]: css(parsedValue) };\n }, {});\n };\n}\n\nexport const emotionTransform: MantineStylesTransform = {\n sx: sxTransform,\n styles: stylesTransform,\n};\n"],"mappings":";;;;;;AAIA,SAAS,cAAc;CACrB,MAAM,SAAA,GAAA,cAAA,kBAAyB;CAC/B,MAAM,EAAE,QAAQA,gBAAAA,QAAQ;AAExB,SAAQ,OAAY;EAClB,MAAM,WAAW,OAAO,OAAO,aAAa,GAAG,OAAOC,sBAAAA,WAAW,MAAM,CAAC,GAAG;AAC3E,SAAO,CAAC,WAAW,KAAK,IAAI,SAAS;;;AAIzC,SAAS,kBAAkB;CACzB,MAAM,SAAA,GAAA,cAAA,kBAAyB;CAC/B,MAAM,EAAE,QAAQD,gBAAAA,QAAQ;AAExB,SAAQ,QAAa,YAAiB;AACpC,MAAI,CAAC,OACH,QAAO,EAAE;EAGX,MAAM,eACJ,OAAO,WAAW,aAAa,OAAO,OAAO,QAAQ,OAAOC,sBAAAA,WAAW,MAAM,CAAC,GAAG;AAEnF,SAAO,OAAO,KAAK,aAAa,CAAC,QAAQ,KAAK,QAAQ;GACpD,MAAM,QAAQ,aAAa;GAC3B,MAAM,cAAc,OAAO,UAAU,aAAa,MAAM,MAAM,GAAG;AACjE,UAAO;IAAE,GAAG;KAAM,MAAM,IAAI,YAAY;IAAE;KACzC,EAAE,CAAC;;;AAIV,MAAa,mBAA2C;CACtD,IAAI;CACJ,QAAQ;CACT"}
|
package/cjs/index.cjs
CHANGED
|
@@ -1,32 +1,30 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
require("./_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
const require_MantineEmotionProvider = require("./MantineEmotionProvider.cjs");
|
|
4
|
+
const require_use_css = require("./use-css.cjs");
|
|
5
|
+
const require_create_styles = require("./create-styles.cjs");
|
|
6
|
+
const require_emotion_transform = require("./emotion-transform.cjs");
|
|
7
|
+
const require_Global = require("./Global.cjs");
|
|
8
|
+
const require_merge_sx = require("./merge-sx.cjs");
|
|
9
|
+
const require_ssr = require("./ssr.cjs");
|
|
10
|
+
let _emotion_react = require("@emotion/react");
|
|
11
|
+
exports.EmotionCacheContext = require_MantineEmotionProvider.EmotionCacheContext;
|
|
12
|
+
exports.Global = require_Global.Global;
|
|
13
|
+
exports.MantineEmotionProvider = require_MantineEmotionProvider.MantineEmotionProvider;
|
|
14
|
+
exports.ServerStyles = require_ssr.ServerStyles;
|
|
15
|
+
exports.createGetInitialProps = require_ssr.createGetInitialProps;
|
|
16
|
+
exports.createStyles = require_create_styles.createStyles;
|
|
17
|
+
exports.cssFactory = require_use_css.cssFactory;
|
|
18
|
+
exports.emotionTransform = require_emotion_transform.emotionTransform;
|
|
19
|
+
exports.getHelpers = require_create_styles.getHelpers;
|
|
20
|
+
exports.getSSRStyles = require_ssr.getSSRStyles;
|
|
21
|
+
exports.getStylesRef = require_create_styles.getStylesRef;
|
|
14
22
|
Object.defineProperty(exports, "keyframes", {
|
|
15
23
|
enumerable: true,
|
|
16
|
-
get: function
|
|
24
|
+
get: function() {
|
|
25
|
+
return _emotion_react.keyframes;
|
|
26
|
+
}
|
|
17
27
|
});
|
|
18
|
-
exports.
|
|
19
|
-
exports.
|
|
20
|
-
exports.
|
|
21
|
-
exports.emotionTransform = emotionTransform.emotionTransform;
|
|
22
|
-
exports.Global = Global.Global;
|
|
23
|
-
exports.mergeSx = mergeSx.mergeSx;
|
|
24
|
-
exports.EmotionCacheContext = MantineEmotionProvider.EmotionCacheContext;
|
|
25
|
-
exports.MantineEmotionProvider = MantineEmotionProvider.MantineEmotionProvider;
|
|
26
|
-
exports.useEmotionCache = MantineEmotionProvider.useEmotionCache;
|
|
27
|
-
exports.cssFactory = useCss.cssFactory;
|
|
28
|
-
exports.useCss = useCss.useCss;
|
|
29
|
-
exports.ServerStyles = ssr.ServerStyles;
|
|
30
|
-
exports.createGetInitialProps = ssr.createGetInitialProps;
|
|
31
|
-
exports.getSSRStyles = ssr.getSSRStyles;
|
|
32
|
-
//# sourceMappingURL=index.cjs.map
|
|
28
|
+
exports.mergeSx = require_merge_sx.mergeSx;
|
|
29
|
+
exports.useCss = require_use_css.useCss;
|
|
30
|
+
exports.useEmotionCache = require_MantineEmotionProvider.useEmotionCache;
|
package/cjs/merge-sx.cjs
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
//#region packages/@mantine/emotion/src/merge-sx.ts
|
|
4
3
|
function mergeSx(...sxs) {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
4
|
+
return (theme, params) => {
|
|
5
|
+
return sxs.filter(Boolean).reduce((merged, sx) => {
|
|
6
|
+
const cssObj = typeof sx === "function" ? sx(theme, params) : sx;
|
|
7
|
+
return {
|
|
8
|
+
...merged,
|
|
9
|
+
...cssObj || {}
|
|
10
|
+
};
|
|
11
|
+
}, {});
|
|
12
|
+
};
|
|
14
13
|
}
|
|
15
|
-
|
|
14
|
+
//#endregion
|
|
16
15
|
exports.mergeSx = mergeSx;
|
|
17
|
-
|
|
16
|
+
|
|
17
|
+
//# sourceMappingURL=merge-sx.cjs.map
|
package/cjs/merge-sx.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"merge-sx.cjs","sources":["../src/merge-sx.ts"],"sourcesContent":["import type { MantineTheme } from '@mantine/core';\nimport { EmotionHelpers } from './create-styles';\nimport { CSSObject, EmotionSx } from './types';\n\nexport function mergeSx(...sxs: (EmotionSx | undefined)[]) {\n return (theme: MantineTheme, params: EmotionHelpers) => {\n return sxs.filter(Boolean).reduce<CSSObject>((merged, sx) => {\n const cssObj = typeof sx === 'function' ? sx(theme, params) : sx;\n return {\n ...merged,\n ...(cssObj || {}),\n };\n }, {});\n };\n}\n"],"
|
|
1
|
+
{"version":3,"file":"merge-sx.cjs","names":[],"sources":["../src/merge-sx.ts"],"sourcesContent":["import type { MantineTheme } from '@mantine/core';\nimport { EmotionHelpers } from './create-styles';\nimport { CSSObject, EmotionSx } from './types';\n\nexport function mergeSx(...sxs: (EmotionSx | undefined)[]) {\n return (theme: MantineTheme, params: EmotionHelpers) => {\n return sxs.filter(Boolean).reduce<CSSObject>((merged, sx) => {\n const cssObj = typeof sx === 'function' ? sx(theme, params) : sx;\n return {\n ...merged,\n ...(cssObj || {}),\n };\n }, {});\n };\n}\n"],"mappings":";;AAIA,SAAgB,QAAQ,GAAG,KAAgC;AACzD,SAAQ,OAAqB,WAA2B;AACtD,SAAO,IAAI,OAAO,QAAQ,CAAC,QAAmB,QAAQ,OAAO;GAC3D,MAAM,SAAS,OAAO,OAAO,aAAa,GAAG,OAAO,OAAO,GAAG;AAC9D,UAAO;IACL,GAAG;IACH,GAAI,UAAU,EAAE;IACjB;KACA,EAAE,CAAC"}
|
package/cjs/ssr.cjs
CHANGED
|
@@ -1,34 +1,30 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
8
|
-
|
|
9
|
-
var htmlReactParser__default = /*#__PURE__*/_interopDefault(htmlReactParser);
|
|
10
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
const require_runtime = require("./_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
4
|
+
let html_react_parser = require("html-react-parser");
|
|
5
|
+
html_react_parser = require_runtime.__toESM(html_react_parser);
|
|
6
|
+
//#region packages/@mantine/emotion/src/ssr.tsx
|
|
11
7
|
function getSSRStyles(html, server) {
|
|
12
|
-
|
|
8
|
+
return server.constructStyleTagsFromChunks(server.extractCriticalToChunks(html));
|
|
13
9
|
}
|
|
14
10
|
function ServerStyles({ html, server }) {
|
|
15
|
-
|
|
16
|
-
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: htmlReactParser__default.default(styles) });
|
|
11
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: (0, html_react_parser.default)(getSSRStyles(html, server)) });
|
|
17
12
|
}
|
|
18
13
|
function createGetInitialProps(NextDocument, server) {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
14
|
+
return async function getInitialProps(ctx) {
|
|
15
|
+
const initialProps = await NextDocument.getInitialProps(ctx);
|
|
16
|
+
return {
|
|
17
|
+
...initialProps,
|
|
18
|
+
styles: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [initialProps.styles, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ServerStyles, {
|
|
19
|
+
html: initialProps.html,
|
|
20
|
+
server
|
|
21
|
+
})] })
|
|
22
|
+
};
|
|
23
|
+
};
|
|
29
24
|
}
|
|
30
|
-
|
|
25
|
+
//#endregion
|
|
31
26
|
exports.ServerStyles = ServerStyles;
|
|
32
27
|
exports.createGetInitialProps = createGetInitialProps;
|
|
33
28
|
exports.getSSRStyles = getSSRStyles;
|
|
34
|
-
|
|
29
|
+
|
|
30
|
+
//# sourceMappingURL=ssr.cjs.map
|
package/cjs/ssr.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ssr.cjs","sources":["../src/ssr.tsx"],"sourcesContent":["import htmlReactParser from 'html-react-parser';\n\n// Type is not imported to avoid dependency on @emotion/server\ntype EmotionServer = any;\ntype NextDocumentType = any;\n\nexport function getSSRStyles(html: string, server: EmotionServer) {\n return server.constructStyleTagsFromChunks(server.extractCriticalToChunks(html));\n}\n\ninterface ServerStylesProps {\n html: string;\n server: EmotionServer;\n}\n\nexport function ServerStyles({ html, server }: ServerStylesProps): any {\n const styles = getSSRStyles(html, server);\n return <>{htmlReactParser(styles)}</>;\n}\n\nexport function createGetInitialProps(\n NextDocument: NextDocumentType,\n server: EmotionServer\n): (ctx: any) => any {\n return async function getInitialProps(ctx: any) {\n const initialProps = await NextDocument.getInitialProps(ctx);\n return {\n ...initialProps,\n styles: (\n <>\n {initialProps.styles}\n <ServerStyles html={initialProps.html} server={server} />\n </>\n ),\n };\n };\n}\n"],"
|
|
1
|
+
{"version":3,"file":"ssr.cjs","names":[],"sources":["../src/ssr.tsx"],"sourcesContent":["import htmlReactParser from 'html-react-parser';\n\n// Type is not imported to avoid dependency on @emotion/server\ntype EmotionServer = any;\ntype NextDocumentType = any;\n\nexport function getSSRStyles(html: string, server: EmotionServer) {\n return server.constructStyleTagsFromChunks(server.extractCriticalToChunks(html));\n}\n\ninterface ServerStylesProps {\n html: string;\n server: EmotionServer;\n}\n\nexport function ServerStyles({ html, server }: ServerStylesProps): any {\n const styles = getSSRStyles(html, server);\n return <>{htmlReactParser(styles)}</>;\n}\n\nexport function createGetInitialProps(\n NextDocument: NextDocumentType,\n server: EmotionServer\n): (ctx: any) => any {\n return async function getInitialProps(ctx: any) {\n const initialProps = await NextDocument.getInitialProps(ctx);\n return {\n ...initialProps,\n styles: (\n <>\n {initialProps.styles}\n <ServerStyles html={initialProps.html} server={server} />\n </>\n ),\n };\n };\n}\n"],"mappings":";;;;;;AAMA,SAAgB,aAAa,MAAc,QAAuB;AAChE,QAAO,OAAO,6BAA6B,OAAO,wBAAwB,KAAK,CAAC;;AAQlF,SAAgB,aAAa,EAAE,MAAM,UAAkC;AAErE,QAAO,iBAAA,GAAA,kBAAA,KAAA,kBAAA,UAAA,EAAA,WAAA,GAAA,kBAAA,SADQ,aAAa,MAAM,OAAO,CACR,EAAI,CAAA;;AAGvC,SAAgB,sBACd,cACA,QACmB;AACnB,QAAO,eAAe,gBAAgB,KAAU;EAC9C,MAAM,eAAe,MAAM,aAAa,gBAAgB,IAAI;AAC5D,SAAO;GACL,GAAG;GACH,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACG,aAAa,QACd,iBAAA,GAAA,kBAAA,KAAC,cAAD;IAAc,MAAM,aAAa;IAAc;IAAU,CAAA,CACxD,EAAA,CAAA;GAEN"}
|