@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/esm/ssr.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ssr.mjs","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.mjs","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,oBAAA,UAAA,EAAA,UAAG,gBADK,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,qBAAA,UAAA,EAAA,UAAA,CACG,aAAa,QACd,oBAAC,cAAD;IAAc,MAAM,aAAa;IAAc;IAAU,CAAA,CACxD,EAAA,CAAA;GAEN"}
|
package/esm/use-css.mjs
CHANGED
|
@@ -1,54 +1,62 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
import
|
|
7
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import { useEmotionCache } from "./MantineEmotionProvider.mjs";
|
|
3
|
+
import { useGuaranteedMemo } from "./use-guaranteed-memo.mjs";
|
|
4
|
+
import { serializeStyles } from "@emotion/serialize";
|
|
5
|
+
import { getRegisteredStyles, insertStyles } from "@emotion/utils";
|
|
6
|
+
import clsx from "clsx";
|
|
7
|
+
//#region packages/@mantine/emotion/src/use-css.ts
|
|
8
8
|
const refPropertyName = "ref";
|
|
9
9
|
function getRef(args) {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
10
|
+
let ref;
|
|
11
|
+
if (args.length !== 1) return {
|
|
12
|
+
args,
|
|
13
|
+
ref
|
|
14
|
+
};
|
|
15
|
+
const [arg] = args;
|
|
16
|
+
if (!(arg instanceof Object)) return {
|
|
17
|
+
args,
|
|
18
|
+
ref
|
|
19
|
+
};
|
|
20
|
+
if (!(refPropertyName in arg)) return {
|
|
21
|
+
args,
|
|
22
|
+
ref
|
|
23
|
+
};
|
|
24
|
+
ref = arg[refPropertyName];
|
|
25
|
+
const argCopy = { ...arg };
|
|
26
|
+
delete argCopy[refPropertyName];
|
|
27
|
+
return {
|
|
28
|
+
args: [argCopy],
|
|
29
|
+
ref
|
|
30
|
+
};
|
|
25
31
|
}
|
|
26
|
-
const { cssFactory } =
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
32
|
+
const { cssFactory } = (() => {
|
|
33
|
+
function merge(registered, css, className) {
|
|
34
|
+
const registeredStyles = [];
|
|
35
|
+
const rawClassName = getRegisteredStyles(registered, registeredStyles, className);
|
|
36
|
+
if (registeredStyles.length < 2) return className;
|
|
37
|
+
return rawClassName + css(registeredStyles);
|
|
38
|
+
}
|
|
39
|
+
function _cssFactory(params) {
|
|
40
|
+
const { cache } = params;
|
|
41
|
+
const css = (...styles) => {
|
|
42
|
+
const { ref, args } = getRef(styles);
|
|
43
|
+
const serialized = serializeStyles(args, cache.registered);
|
|
44
|
+
insertStyles(cache, serialized, false);
|
|
45
|
+
return `${cache.key}-${serialized.name}${ref === void 0 ? "" : ` ${ref}`}`;
|
|
46
|
+
};
|
|
47
|
+
const cx = (...args) => merge(cache.registered, css, clsx(args));
|
|
48
|
+
return {
|
|
49
|
+
css,
|
|
50
|
+
cx
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
return { cssFactory: _cssFactory };
|
|
47
54
|
})();
|
|
48
55
|
function useCss() {
|
|
49
|
-
|
|
50
|
-
|
|
56
|
+
const cache = useEmotionCache();
|
|
57
|
+
return useGuaranteedMemo(() => cssFactory({ cache }), [cache]);
|
|
51
58
|
}
|
|
52
|
-
|
|
59
|
+
//#endregion
|
|
53
60
|
export { cssFactory, useCss };
|
|
54
|
-
|
|
61
|
+
|
|
62
|
+
//# sourceMappingURL=use-css.mjs.map
|
package/esm/use-css.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-css.mjs","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.mjs","names":[],"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,eAAe,oBAAoB,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,aAAa,gBAAgB,MAAM,MAAM,WAAW;AAC1D,gBAAa,OAAc,YAAY,MAAM;AAC7C,UAAO,GAAG,MAAM,IAAI,GAAG,WAAW,OAAO,QAAQ,KAAA,IAAY,KAAK,IAAI;;EAGxE,MAAM,MAAM,GAAG,SAAc,MAAM,MAAM,YAAY,KAAK,KAAK,KAAK,CAAC;AAErE,SAAO;GAAE;GAAK;GAAI;;AAGpB,QAAO,EAAE,YAAY,aAAa;IAChC;AAEJ,SAAgB,SAAS;CACvB,MAAM,QAAQ,iBAAiB;AAC/B,QAAO,wBAAwB,WAAW,EAAE,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC"}
|
|
@@ -1,16 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
import { useRef } from
|
|
3
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import { useRef } from "react";
|
|
3
|
+
//#region packages/@mantine/emotion/src/use-guaranteed-memo.ts
|
|
4
4
|
function useGuaranteedMemo(fn, deps) {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
}
|
|
12
|
-
return ref.current.v;
|
|
5
|
+
const ref = useRef(null);
|
|
6
|
+
if (!ref.current || deps.length !== ref.current.prevDeps.length || ref.current.prevDeps.map((v, i) => v === deps[i]).indexOf(false) >= 0) ref.current = {
|
|
7
|
+
v: fn(),
|
|
8
|
+
prevDeps: [...deps]
|
|
9
|
+
};
|
|
10
|
+
return ref.current.v;
|
|
13
11
|
}
|
|
14
|
-
|
|
12
|
+
//#endregion
|
|
15
13
|
export { useGuaranteedMemo };
|
|
16
|
-
|
|
14
|
+
|
|
15
|
+
//# sourceMappingURL=use-guaranteed-memo.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-guaranteed-memo.mjs","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.mjs","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,MAAM,OAAsC,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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantine/emotion",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.6",
|
|
4
4
|
"description": "Emotion bindings for Mantine",
|
|
5
5
|
"homepage": "https://mantine.dev/",
|
|
6
6
|
"license": "MIT",
|
|
@@ -35,20 +35,20 @@
|
|
|
35
35
|
"@emotion/react": "^11.11.4",
|
|
36
36
|
"@emotion/serialize": "^1.1.4",
|
|
37
37
|
"@emotion/utils": "^1.2.1",
|
|
38
|
-
"@mantine/core": "9.0.0-alpha.
|
|
39
|
-
"@mantine/hooks": "9.0.0-alpha.
|
|
40
|
-
"react": "^
|
|
41
|
-
"react-dom": "^
|
|
38
|
+
"@mantine/core": "9.0.0-alpha.6",
|
|
39
|
+
"@mantine/hooks": "9.0.0-alpha.6",
|
|
40
|
+
"react": "^19.2.0",
|
|
41
|
+
"react-dom": "^19.2.0"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"csstype": "^3.2.3",
|
|
45
|
-
"html-react-parser": "^5.2.
|
|
45
|
+
"html-react-parser": "^5.2.17"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@mantine-tests/core": "workspace:*",
|
|
49
49
|
"@mantine/core": "workspace:*",
|
|
50
50
|
"@mantine/hooks": "workspace:*",
|
|
51
|
-
"react": "19.2.
|
|
52
|
-
"react-dom": "19.2.
|
|
51
|
+
"react": "19.2.4",
|
|
52
|
+
"react-dom": "19.2.4"
|
|
53
53
|
}
|
|
54
54
|
}
|
package/cjs/index.cjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/esm/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
|