@mantine/emotion 9.0.0-alpha.5 → 9.0.0-alpha.7
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 +3 -3
- package/cjs/index.cjs.map +0 -1
- package/esm/index.mjs.map +0 -1
package/cjs/use-css.cjs
CHANGED
|
@@ -1,61 +1,65 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
-
|
|
12
|
-
var clsx__default = /*#__PURE__*/_interopDefault(clsx);
|
|
13
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
const require_runtime = require("./_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
const require_MantineEmotionProvider = require("./MantineEmotionProvider.cjs");
|
|
4
|
+
const require_use_guaranteed_memo = require("./use-guaranteed-memo.cjs");
|
|
5
|
+
let _emotion_serialize = require("@emotion/serialize");
|
|
6
|
+
let _emotion_utils = require("@emotion/utils");
|
|
7
|
+
let clsx = require("clsx");
|
|
8
|
+
clsx = require_runtime.__toESM(clsx);
|
|
9
|
+
//#region packages/@mantine/emotion/src/use-css.ts
|
|
14
10
|
const refPropertyName = "ref";
|
|
15
11
|
function getRef(args) {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
12
|
+
let ref;
|
|
13
|
+
if (args.length !== 1) return {
|
|
14
|
+
args,
|
|
15
|
+
ref
|
|
16
|
+
};
|
|
17
|
+
const [arg] = args;
|
|
18
|
+
if (!(arg instanceof Object)) return {
|
|
19
|
+
args,
|
|
20
|
+
ref
|
|
21
|
+
};
|
|
22
|
+
if (!(refPropertyName in arg)) return {
|
|
23
|
+
args,
|
|
24
|
+
ref
|
|
25
|
+
};
|
|
26
|
+
ref = arg[refPropertyName];
|
|
27
|
+
const argCopy = { ...arg };
|
|
28
|
+
delete argCopy[refPropertyName];
|
|
29
|
+
return {
|
|
30
|
+
args: [argCopy],
|
|
31
|
+
ref
|
|
32
|
+
};
|
|
31
33
|
}
|
|
32
|
-
const { cssFactory } =
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
34
|
+
const { cssFactory } = (() => {
|
|
35
|
+
function merge(registered, css, className) {
|
|
36
|
+
const registeredStyles = [];
|
|
37
|
+
const rawClassName = (0, _emotion_utils.getRegisteredStyles)(registered, registeredStyles, className);
|
|
38
|
+
if (registeredStyles.length < 2) return className;
|
|
39
|
+
return rawClassName + css(registeredStyles);
|
|
40
|
+
}
|
|
41
|
+
function _cssFactory(params) {
|
|
42
|
+
const { cache } = params;
|
|
43
|
+
const css = (...styles) => {
|
|
44
|
+
const { ref, args } = getRef(styles);
|
|
45
|
+
const serialized = (0, _emotion_serialize.serializeStyles)(args, cache.registered);
|
|
46
|
+
(0, _emotion_utils.insertStyles)(cache, serialized, false);
|
|
47
|
+
return `${cache.key}-${serialized.name}${ref === void 0 ? "" : ` ${ref}`}`;
|
|
48
|
+
};
|
|
49
|
+
const cx = (...args) => merge(cache.registered, css, (0, clsx.default)(args));
|
|
50
|
+
return {
|
|
51
|
+
css,
|
|
52
|
+
cx
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
return { cssFactory: _cssFactory };
|
|
53
56
|
})();
|
|
54
57
|
function useCss() {
|
|
55
|
-
|
|
56
|
-
|
|
58
|
+
const cache = require_MantineEmotionProvider.useEmotionCache();
|
|
59
|
+
return require_use_guaranteed_memo.useGuaranteedMemo(() => cssFactory({ cache }), [cache]);
|
|
57
60
|
}
|
|
58
|
-
|
|
61
|
+
//#endregion
|
|
59
62
|
exports.cssFactory = cssFactory;
|
|
60
63
|
exports.useCss = useCss;
|
|
61
|
-
|
|
64
|
+
|
|
65
|
+
//# sourceMappingURL=use-css.cjs.map
|
package/cjs/use-css.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-css.cjs","sources":["../src/use-css.ts"],"sourcesContent":["/* eslint-disable prefer-const */\nimport type { EmotionCache } from '@emotion/cache';\nimport { RegisteredCache, serializeStyles } from '@emotion/serialize';\nimport { getRegisteredStyles, insertStyles } from '@emotion/utils';\nimport clsx from 'clsx';\nimport { useEmotionCache } from './MantineEmotionProvider';\nimport type { CSS } from './types';\nimport { useGuaranteedMemo } from './use-guaranteed-memo';\n\nconst refPropertyName = 'ref' as const;\n\nfunction getRef(args: any[]) {\n let ref: string | undefined;\n\n if (args.length !== 1) {\n return { args, ref };\n }\n\n const [arg] = args;\n\n if (!(arg instanceof Object)) {\n return { args, ref };\n }\n\n if (!(refPropertyName in arg)) {\n return { args, ref };\n }\n\n ref = arg[refPropertyName];\n const argCopy = { ...arg };\n delete argCopy[refPropertyName];\n return { args: [argCopy], ref };\n}\n\nexport const { cssFactory } = (() => {\n function merge(registered: RegisteredCache, css: CSS, className: string) {\n const registeredStyles: string[] = [];\n\n const rawClassName = getRegisteredStyles(registered, registeredStyles, className);\n\n if (registeredStyles.length < 2) {\n return className;\n }\n\n return rawClassName + css(registeredStyles);\n }\n\n function _cssFactory(params: { cache: EmotionCache }) {\n const { cache } = params;\n\n const css: CSS = (...styles: any) => {\n const { ref, args } = getRef(styles);\n const serialized = serializeStyles(args, cache.registered);\n insertStyles(cache as any, serialized, false);\n return `${cache.key}-${serialized.name}${ref === undefined ? '' : ` ${ref}`}`;\n };\n\n const cx = (...args: any) => merge(cache.registered, css, clsx(args));\n\n return { css, cx };\n }\n\n return { cssFactory: _cssFactory };\n})();\n\nexport function useCss() {\n const cache = useEmotionCache();\n return useGuaranteedMemo(() => cssFactory({ cache }), [cache]);\n}\n"],"
|
|
1
|
+
{"version":3,"file":"use-css.cjs","names":["useEmotionCache","useGuaranteedMemo"],"sources":["../src/use-css.ts"],"sourcesContent":["/* eslint-disable prefer-const */\nimport type { EmotionCache } from '@emotion/cache';\nimport { RegisteredCache, serializeStyles } from '@emotion/serialize';\nimport { getRegisteredStyles, insertStyles } from '@emotion/utils';\nimport clsx from 'clsx';\nimport { useEmotionCache } from './MantineEmotionProvider';\nimport type { CSS } from './types';\nimport { useGuaranteedMemo } from './use-guaranteed-memo';\n\nconst refPropertyName = 'ref' as const;\n\nfunction getRef(args: any[]) {\n let ref: string | undefined;\n\n if (args.length !== 1) {\n return { args, ref };\n }\n\n const [arg] = args;\n\n if (!(arg instanceof Object)) {\n return { args, ref };\n }\n\n if (!(refPropertyName in arg)) {\n return { args, ref };\n }\n\n ref = arg[refPropertyName];\n const argCopy = { ...arg };\n delete argCopy[refPropertyName];\n return { args: [argCopy], ref };\n}\n\nexport const { cssFactory } = (() => {\n function merge(registered: RegisteredCache, css: CSS, className: string) {\n const registeredStyles: string[] = [];\n\n const rawClassName = getRegisteredStyles(registered, registeredStyles, className);\n\n if (registeredStyles.length < 2) {\n return className;\n }\n\n return rawClassName + css(registeredStyles);\n }\n\n function _cssFactory(params: { cache: EmotionCache }) {\n const { cache } = params;\n\n const css: CSS = (...styles: any) => {\n const { ref, args } = getRef(styles);\n const serialized = serializeStyles(args, cache.registered);\n insertStyles(cache as any, serialized, false);\n return `${cache.key}-${serialized.name}${ref === undefined ? '' : ` ${ref}`}`;\n };\n\n const cx = (...args: any) => merge(cache.registered, css, clsx(args));\n\n return { css, cx };\n }\n\n return { cssFactory: _cssFactory };\n})();\n\nexport function useCss() {\n const cache = useEmotionCache();\n return useGuaranteedMemo(() => cssFactory({ cache }), [cache]);\n}\n"],"mappings":";;;;;;;;;AASA,MAAM,kBAAkB;AAExB,SAAS,OAAO,MAAa;CAC3B,IAAI;AAEJ,KAAI,KAAK,WAAW,EAClB,QAAO;EAAE;EAAM;EAAK;CAGtB,MAAM,CAAC,OAAO;AAEd,KAAI,EAAE,eAAe,QACnB,QAAO;EAAE;EAAM;EAAK;AAGtB,KAAI,EAAE,mBAAmB,KACvB,QAAO;EAAE;EAAM;EAAK;AAGtB,OAAM,IAAI;CACV,MAAM,UAAU,EAAE,GAAG,KAAK;AAC1B,QAAO,QAAQ;AACf,QAAO;EAAE,MAAM,CAAC,QAAQ;EAAE;EAAK;;AAGjC,MAAa,EAAE,sBAAsB;CACnC,SAAS,MAAM,YAA6B,KAAU,WAAmB;EACvE,MAAM,mBAA6B,EAAE;EAErC,MAAM,gBAAA,GAAA,eAAA,qBAAmC,YAAY,kBAAkB,UAAU;AAEjF,MAAI,iBAAiB,SAAS,EAC5B,QAAO;AAGT,SAAO,eAAe,IAAI,iBAAiB;;CAG7C,SAAS,YAAY,QAAiC;EACpD,MAAM,EAAE,UAAU;EAElB,MAAM,OAAY,GAAG,WAAgB;GACnC,MAAM,EAAE,KAAK,SAAS,OAAO,OAAO;GACpC,MAAM,cAAA,GAAA,mBAAA,iBAA6B,MAAM,MAAM,WAAW;AAC1D,IAAA,GAAA,eAAA,cAAa,OAAc,YAAY,MAAM;AAC7C,UAAO,GAAG,MAAM,IAAI,GAAG,WAAW,OAAO,QAAQ,KAAA,IAAY,KAAK,IAAI;;EAGxE,MAAM,MAAM,GAAG,SAAc,MAAM,MAAM,YAAY,MAAA,GAAA,KAAA,SAAU,KAAK,CAAC;AAErE,SAAO;GAAE;GAAK;GAAI;;AAGpB,QAAO,EAAE,YAAY,aAAa;IAChC;AAEJ,SAAgB,SAAS;CACvB,MAAM,QAAQA,+BAAAA,iBAAiB;AAC/B,QAAOC,4BAAAA,wBAAwB,WAAW,EAAE,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC"}
|
|
@@ -1,18 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
require("./_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
let react = require("react");
|
|
4
|
+
//#region packages/@mantine/emotion/src/use-guaranteed-memo.ts
|
|
6
5
|
function useGuaranteedMemo(fn, deps) {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}
|
|
14
|
-
return ref.current.v;
|
|
6
|
+
const ref = (0, react.useRef)(null);
|
|
7
|
+
if (!ref.current || deps.length !== ref.current.prevDeps.length || ref.current.prevDeps.map((v, i) => v === deps[i]).indexOf(false) >= 0) ref.current = {
|
|
8
|
+
v: fn(),
|
|
9
|
+
prevDeps: [...deps]
|
|
10
|
+
};
|
|
11
|
+
return ref.current.v;
|
|
15
12
|
}
|
|
16
|
-
|
|
13
|
+
//#endregion
|
|
17
14
|
exports.useGuaranteedMemo = useGuaranteedMemo;
|
|
18
|
-
|
|
15
|
+
|
|
16
|
+
//# sourceMappingURL=use-guaranteed-memo.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-guaranteed-memo.cjs","sources":["../src/use-guaranteed-memo.ts"],"sourcesContent":["import { useRef } from 'react';\n\nexport function useGuaranteedMemo<T>(fn: () => T, deps: React.DependencyList): T {\n const ref = useRef<{ v: T; prevDeps: unknown[] }>(null);\n\n if (\n !ref.current ||\n deps.length !== ref.current.prevDeps.length ||\n ref.current.prevDeps.map((v, i) => v === deps[i]).indexOf(false) >= 0\n ) {\n ref.current = {\n v: fn(),\n prevDeps: [...deps],\n };\n }\n\n return ref.current.v;\n}\n"],"
|
|
1
|
+
{"version":3,"file":"use-guaranteed-memo.cjs","names":[],"sources":["../src/use-guaranteed-memo.ts"],"sourcesContent":["import { useRef } from 'react';\n\nexport function useGuaranteedMemo<T>(fn: () => T, deps: React.DependencyList): T {\n const ref = useRef<{ v: T; prevDeps: unknown[] }>(null);\n\n if (\n !ref.current ||\n deps.length !== ref.current.prevDeps.length ||\n ref.current.prevDeps.map((v, i) => v === deps[i]).indexOf(false) >= 0\n ) {\n ref.current = {\n v: fn(),\n prevDeps: [...deps],\n };\n }\n\n return ref.current.v;\n}\n"],"mappings":";;;;AAEA,SAAgB,kBAAqB,IAAa,MAA+B;CAC/E,MAAM,OAAA,GAAA,MAAA,QAA4C,KAAK;AAEvD,KACE,CAAC,IAAI,WACL,KAAK,WAAW,IAAI,QAAQ,SAAS,UACrC,IAAI,QAAQ,SAAS,KAAK,GAAG,MAAM,MAAM,KAAK,GAAG,CAAC,QAAQ,MAAM,IAAI,EAEpE,KAAI,UAAU;EACZ,GAAG,IAAI;EACP,UAAU,CAAC,GAAG,KAAK;EACpB;AAGH,QAAO,IAAI,QAAQ"}
|
package/esm/Global.mjs
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
function Global({ styles }) {
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import { Global, css } from "@emotion/react";
|
|
3
|
+
import { useMantineTheme } from "@mantine/core";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
//#region packages/@mantine/emotion/src/Global.tsx
|
|
6
|
+
function Global$1({ styles }) {
|
|
7
|
+
const theme = useMantineTheme();
|
|
8
|
+
return /* @__PURE__ */ jsx(Global, { styles: css(typeof styles === "function" ? styles(theme) : styles) });
|
|
9
9
|
}
|
|
10
|
+
//#endregion
|
|
11
|
+
export { Global$1 as Global };
|
|
10
12
|
|
|
11
|
-
|
|
12
|
-
//# sourceMappingURL=Global.mjs.map
|
|
13
|
+
//# sourceMappingURL=Global.mjs.map
|
package/esm/Global.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Global.mjs","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.mjs","names":["Global","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,SAAgBA,SAAO,EAAE,UAA6B;CACpD,MAAM,QAAQ,iBAAiB;AAC/B,QACE,oBAACC,QAAD,EAAe,QAAQ,IAAK,OAAO,WAAW,aAAa,OAAO,MAAM,GAAG,OAAe,EAAI,CAAA"}
|
|
@@ -1,21 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import { createContext, use } from
|
|
4
|
-
import {
|
|
5
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import { withEmotionCache } from "@emotion/react";
|
|
3
|
+
import { createContext, use } from "react";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
//#region packages/@mantine/emotion/src/MantineEmotionProvider.tsx
|
|
6
6
|
const EmotionCacheContext = createContext(null);
|
|
7
7
|
function useEmotionCache() {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
"Emotion cache is not available in context, make sure that you have MantineEmotionProvider in the component tree"
|
|
12
|
-
);
|
|
13
|
-
}
|
|
14
|
-
return cache;
|
|
8
|
+
const cache = use(EmotionCacheContext);
|
|
9
|
+
if (cache === null) throw new Error("Emotion cache is not available in context, make sure that you have MantineEmotionProvider in the component tree");
|
|
10
|
+
return cache;
|
|
15
11
|
}
|
|
16
|
-
const MantineEmotionProvider = withEmotionCache(
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
12
|
+
const MantineEmotionProvider = withEmotionCache(({ children, cache }, ctx) => /* @__PURE__ */ jsx(EmotionCacheContext, {
|
|
13
|
+
value: cache || ctx,
|
|
14
|
+
children
|
|
15
|
+
}));
|
|
16
|
+
//#endregion
|
|
20
17
|
export { EmotionCacheContext, MantineEmotionProvider, useEmotionCache };
|
|
21
|
-
|
|
18
|
+
|
|
19
|
+
//# sourceMappingURL=MantineEmotionProvider.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MantineEmotionProvider.mjs","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.mjs","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,sBAAsB,cAAmC,KAAK;AAE3E,SAAgB,kBAAkB;CAChC,MAAM,QAAQ,IAAI,oBAAoB;AAEtC,KAAI,UAAU,KACZ,OAAM,IAAI,MACR,kHACD;AAGH,QAAO;;AAQT,MAAa,yBAAyB,kBACnC,EAAE,UAAU,SAAS,QACpB,oBAAC,qBAAD;CAAqB,OAAO,SAAS;CAAM;CAA+B,CAAA,CAE7E"}
|
package/esm/create-styles.mjs
CHANGED
|
@@ -1,38 +1,41 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import { useCss } from "./use-css.mjs";
|
|
3
|
+
import { em, px, useMantineTheme } from "@mantine/core";
|
|
4
|
+
//#region packages/@mantine/emotion/src/create-styles.ts
|
|
5
5
|
function getStylesRef(refName) {
|
|
6
|
-
|
|
6
|
+
return `___ref-${refName || ""}`;
|
|
7
7
|
}
|
|
8
8
|
function getBreakpointValue(theme, breakpoint) {
|
|
9
|
-
|
|
9
|
+
return breakpoint in theme.breakpoints && typeof breakpoint !== "number" ? px(theme.breakpoints[breakpoint]) : px(breakpoint);
|
|
10
10
|
}
|
|
11
11
|
const getHelpers = (theme) => ({
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
12
|
+
light: "[data-mantine-color-scheme=\"light\"] &",
|
|
13
|
+
dark: "[data-mantine-color-scheme=\"dark\"] &",
|
|
14
|
+
rtl: "[dir=\"rtl\"] &",
|
|
15
|
+
ltr: "[dir=\"ltr\"] &",
|
|
16
|
+
notRtl: "[dir=\"ltr\"] &",
|
|
17
|
+
notLtr: "[dir=\"rtl\"] &",
|
|
18
|
+
ref: getStylesRef,
|
|
19
|
+
smallerThan: (breakpoint) => `@media (max-width: ${em(getBreakpointValue(theme, breakpoint) - .1)})`,
|
|
20
|
+
largerThan: (breakpoint) => `@media (min-width: ${em(getBreakpointValue(theme, breakpoint))})`
|
|
21
21
|
});
|
|
22
22
|
function createStyles(input) {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
23
|
+
const getCssObject = typeof input === "function" ? input : () => input;
|
|
24
|
+
return function useStyles(params) {
|
|
25
|
+
const theme = useMantineTheme();
|
|
26
|
+
const cssObject = getCssObject(theme, params, getHelpers(theme));
|
|
27
|
+
const { css, cx } = useCss();
|
|
28
|
+
return {
|
|
29
|
+
classes: Object.keys(cssObject).reduce((acc, key) => {
|
|
30
|
+
acc[key] = css(cssObject[key]);
|
|
31
|
+
return acc;
|
|
32
|
+
}, {}),
|
|
33
|
+
cx,
|
|
34
|
+
theme
|
|
35
|
+
};
|
|
36
|
+
};
|
|
35
37
|
}
|
|
36
|
-
|
|
38
|
+
//#endregion
|
|
37
39
|
export { createStyles, getHelpers, getStylesRef };
|
|
38
|
-
|
|
40
|
+
|
|
41
|
+
//# sourceMappingURL=create-styles.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-styles.mjs","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.mjs","names":[],"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,WAC3D,GAAG,MAAM,YAAY,YAAY,GACjC,GAAG,WAAW;;AAGrB,MAAa,cAAc,WAAyB;CAClD,OAAO;CACP,MAAM;CACN,KAAK;CACL,KAAK;CACL,QAAQ;CACR,QAAQ;CACR,KAAK;CACL,cAAc,eACZ,sBAAsB,GAAG,mBAAmB,OAAO,WAAW,GAAG,GAAI,CAAC;CACxE,aAAa,eACX,sBAAsB,GAAG,mBAAmB,OAAO,WAAW,CAAC,CAAC;CACnE;AAID,SAAgB,aAId,OAA0F;CAC1F,MAAM,eAAe,OAAO,UAAU,aAAa,cAAc;AAEjE,QAAO,SAAS,UAAU,QAAgB;EACxC,MAAM,QAAQ,iBAAiB;EAE/B,MAAM,YAAiC,aAAa,OAAO,QAD3C,WAAW,MAAM,CAC0C;EAC3E,MAAM,EAAE,KAAK,OAAO,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,35 +1,37 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import { getHelpers } from
|
|
4
|
-
import {
|
|
5
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import { useCss } from "./use-css.mjs";
|
|
3
|
+
import { getHelpers } from "./create-styles.mjs";
|
|
4
|
+
import { useMantineTheme } from "@mantine/core";
|
|
5
|
+
//#region packages/@mantine/emotion/src/emotion-transform.ts
|
|
6
6
|
function sxTransform() {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
7
|
+
const theme = useMantineTheme();
|
|
8
|
+
const { css } = useCss();
|
|
9
|
+
return (sx) => {
|
|
10
|
+
const parsedSx = typeof sx === "function" ? sx(theme, getHelpers(theme)) : sx;
|
|
11
|
+
return !parsedSx ? "" : css(parsedSx);
|
|
12
|
+
};
|
|
13
13
|
}
|
|
14
14
|
function stylesTransform() {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
15
|
+
const theme = useMantineTheme();
|
|
16
|
+
const { css } = useCss();
|
|
17
|
+
return (styles, payload) => {
|
|
18
|
+
if (!styles) return {};
|
|
19
|
+
const stylesObject = typeof styles === "function" ? styles(theme, payload.props, getHelpers(theme)) : styles;
|
|
20
|
+
return Object.keys(stylesObject).reduce((acc, key) => {
|
|
21
|
+
const value = stylesObject[key];
|
|
22
|
+
const parsedValue = typeof value === "function" ? value(theme) : value;
|
|
23
|
+
return {
|
|
24
|
+
...acc,
|
|
25
|
+
[key]: css(parsedValue)
|
|
26
|
+
};
|
|
27
|
+
}, {});
|
|
28
|
+
};
|
|
28
29
|
}
|
|
29
30
|
const emotionTransform = {
|
|
30
|
-
|
|
31
|
-
|
|
31
|
+
sx: sxTransform,
|
|
32
|
+
styles: stylesTransform
|
|
32
33
|
};
|
|
33
|
-
|
|
34
|
+
//#endregion
|
|
34
35
|
export { emotionTransform };
|
|
35
|
-
|
|
36
|
+
|
|
37
|
+
//# sourceMappingURL=emotion-transform.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"emotion-transform.mjs","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.mjs","names":[],"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,QAAQ,iBAAiB;CAC/B,MAAM,EAAE,QAAQ,QAAQ;AAExB,SAAQ,OAAY;EAClB,MAAM,WAAW,OAAO,OAAO,aAAa,GAAG,OAAO,WAAW,MAAM,CAAC,GAAG;AAC3E,SAAO,CAAC,WAAW,KAAK,IAAI,SAAS;;;AAIzC,SAAS,kBAAkB;CACzB,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,EAAE,QAAQ,QAAQ;AAExB,SAAQ,QAAa,YAAiB;AACpC,MAAI,CAAC,OACH,QAAO,EAAE;EAGX,MAAM,eACJ,OAAO,WAAW,aAAa,OAAO,OAAO,QAAQ,OAAO,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/esm/index.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
import { EmotionCacheContext, MantineEmotionProvider, useEmotionCache } from "./MantineEmotionProvider.mjs";
|
|
2
|
+
import { cssFactory, useCss } from "./use-css.mjs";
|
|
3
|
+
import { createStyles, getHelpers, getStylesRef } from "./create-styles.mjs";
|
|
4
|
+
import { emotionTransform } from "./emotion-transform.mjs";
|
|
5
|
+
import { Global } from "./Global.mjs";
|
|
6
|
+
import { mergeSx } from "./merge-sx.mjs";
|
|
7
|
+
import { ServerStyles, createGetInitialProps, getSSRStyles } from "./ssr.mjs";
|
|
8
|
+
import { keyframes } from "@emotion/react";
|
|
9
|
+
export { EmotionCacheContext, Global, MantineEmotionProvider, ServerStyles, createGetInitialProps, createStyles, cssFactory, emotionTransform, getHelpers, getSSRStyles, getStylesRef, keyframes, mergeSx, useCss, useEmotionCache };
|
package/esm/merge-sx.mjs
CHANGED
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
//#region packages/@mantine/emotion/src/merge-sx.ts
|
|
2
3
|
function mergeSx(...sxs) {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
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
|
+
};
|
|
12
13
|
}
|
|
13
|
-
|
|
14
|
+
//#endregion
|
|
14
15
|
export { mergeSx };
|
|
15
|
-
|
|
16
|
+
|
|
17
|
+
//# sourceMappingURL=merge-sx.mjs.map
|
package/esm/merge-sx.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"merge-sx.mjs","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.mjs","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/esm/ssr.mjs
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import htmlReactParser from
|
|
4
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import htmlReactParser from "html-react-parser";
|
|
4
|
+
//#region packages/@mantine/emotion/src/ssr.tsx
|
|
5
5
|
function getSSRStyles(html, server) {
|
|
6
|
-
|
|
6
|
+
return server.constructStyleTagsFromChunks(server.extractCriticalToChunks(html));
|
|
7
7
|
}
|
|
8
8
|
function ServerStyles({ html, server }) {
|
|
9
|
-
|
|
10
|
-
return /* @__PURE__ */ jsx(Fragment, { children: htmlReactParser(styles) });
|
|
9
|
+
return /* @__PURE__ */ jsx(Fragment, { children: htmlReactParser(getSSRStyles(html, server)) });
|
|
11
10
|
}
|
|
12
11
|
function createGetInitialProps(NextDocument, server) {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
12
|
+
return async function getInitialProps(ctx) {
|
|
13
|
+
const initialProps = await NextDocument.getInitialProps(ctx);
|
|
14
|
+
return {
|
|
15
|
+
...initialProps,
|
|
16
|
+
styles: /* @__PURE__ */ jsxs(Fragment, { children: [initialProps.styles, /* @__PURE__ */ jsx(ServerStyles, {
|
|
17
|
+
html: initialProps.html,
|
|
18
|
+
server
|
|
19
|
+
})] })
|
|
20
|
+
};
|
|
21
|
+
};
|
|
23
22
|
}
|
|
24
|
-
|
|
23
|
+
//#endregion
|
|
25
24
|
export { ServerStyles, createGetInitialProps, getSSRStyles };
|
|
26
|
-
|
|
25
|
+
|
|
26
|
+
//# sourceMappingURL=ssr.mjs.map
|