@griffel/react 1.6.1 → 1.6.2
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/lib/RendererContext.cjs +48 -0
- package/lib/TextDirectionContext.cjs +36 -0
- package/lib/__css.cjs +22 -0
- package/lib/__resetCSS.cjs +22 -0
- package/lib/__resetStyles.cjs +26 -0
- package/lib/__staticCSS.cjs +18 -0
- package/lib/__staticStyles.cjs +23 -0
- package/lib/__styles.cjs +26 -0
- package/lib/index.cjs +78 -0
- package/lib/insertionFactory.cjs +33 -0
- package/lib/makeResetStyles.cjs +35 -0
- package/lib/makeStaticStyles.cjs +28 -0
- package/lib/makeStyles.cjs +35 -0
- package/lib/renderToStyleElements.cjs +50 -0
- package/lib/useInsertionEffect.cjs +20 -0
- package/lib/utils/canUseDOM.cjs +15 -0
- package/lib/utils/isInsideComponent.cjs +46 -0
- package/package.json +15 -6
- package/src/RendererContext.d.ts +1 -1
- package/src/RendererContext.js +30 -0
- package/src/RendererContext.js.map +1 -0
- package/src/TextDirectionContext.d.ts +2 -2
- package/src/TextDirectionContext.js +21 -0
- package/src/TextDirectionContext.js.map +1 -0
- package/src/__css.js +17 -0
- package/src/__css.js.map +1 -0
- package/src/__resetCSS.js +17 -0
- package/src/__resetCSS.js.map +1 -0
- package/src/__resetStyles.js +20 -0
- package/src/__resetStyles.js.map +1 -0
- package/src/__staticCSS.js +15 -0
- package/src/__staticCSS.js.map +1 -0
- package/src/__staticStyles.js +18 -0
- package/src/__staticStyles.js.map +1 -0
- package/src/__styles.js +20 -0
- package/src/__styles.js.map +1 -0
- package/src/index.d.ts +12 -12
- package/src/index.js +16 -0
- package/src/index.js.map +1 -0
- package/src/insertionFactory.js +21 -0
- package/src/insertionFactory.js.map +1 -0
- package/src/makeResetStyles.js +23 -0
- package/src/makeResetStyles.js.map +1 -0
- package/src/makeStaticStyles.js +17 -0
- package/src/makeStaticStyles.js.map +1 -0
- package/src/makeStyles.js +23 -0
- package/src/makeStyles.js.map +1 -0
- package/src/renderToStyleElements.d.ts +2 -2
- package/src/renderToStyleElements.js +51 -0
- package/src/renderToStyleElements.js.map +1 -0
- package/src/useInsertionEffect.d.ts +1 -1
- package/{useInsertionEffect.esm.js → src/useInsertionEffect.js} +4 -7
- package/src/useInsertionEffect.js.map +1 -0
- package/src/utils/canUseDOM.js +7 -0
- package/src/utils/canUseDOM.js.map +1 -0
- package/src/utils/isInsideComponent.js +36 -0
- package/src/utils/isInsideComponent.js.map +1 -0
- package/RendererContext.cjs.js +0 -62
- package/RendererContext.cjs.js.map +0 -1
- package/RendererContext.esm.js +0 -39
- package/RendererContext.esm.js.map +0 -1
- package/TextDirectionContext.cjs.js +0 -52
- package/TextDirectionContext.cjs.js.map +0 -1
- package/TextDirectionContext.esm.js +0 -29
- package/TextDirectionContext.esm.js.map +0 -1
- package/__css.cjs.js +0 -24
- package/__css.cjs.js.map +0 -1
- package/__css.esm.js +0 -22
- package/__css.esm.js.map +0 -1
- package/__resetCSS.cjs.js +0 -24
- package/__resetCSS.cjs.js.map +0 -1
- package/__resetCSS.esm.js +0 -22
- package/__resetCSS.esm.js.map +0 -1
- package/__resetStyles.cjs.js +0 -28
- package/__resetStyles.cjs.js.map +0 -1
- package/__resetStyles.esm.js +0 -26
- package/__resetStyles.esm.js.map +0 -1
- package/__staticCSS.cjs.js +0 -20
- package/__staticCSS.cjs.js.map +0 -1
- package/__staticCSS.esm.js +0 -18
- package/__staticCSS.esm.js.map +0 -1
- package/__staticStyles.cjs.js +0 -25
- package/__staticStyles.cjs.js.map +0 -1
- package/__staticStyles.esm.js +0 -23
- package/__staticStyles.esm.js.map +0 -1
- package/__styles.cjs.js +0 -28
- package/__styles.cjs.js.map +0 -1
- package/__styles.esm.js +0 -26
- package/__styles.esm.js.map +0 -1
- package/index.cjs.js +0 -49
- package/index.cjs.js.map +0 -1
- package/index.d.ts +0 -1
- package/index.esm.js +0 -15
- package/index.esm.js.map +0 -1
- package/insertionFactory.cjs.js +0 -26
- package/insertionFactory.cjs.js.map +0 -1
- package/insertionFactory.esm.js +0 -24
- package/insertionFactory.esm.js.map +0 -1
- package/makeResetStyles.cjs.js +0 -28
- package/makeResetStyles.cjs.js.map +0 -1
- package/makeResetStyles.esm.js +0 -26
- package/makeResetStyles.esm.js.map +0 -1
- package/makeStaticStyles.cjs.js +0 -24
- package/makeStaticStyles.cjs.js.map +0 -1
- package/makeStaticStyles.esm.js +0 -22
- package/makeStaticStyles.esm.js.map +0 -1
- package/makeStyles.cjs.js +0 -28
- package/makeStyles.cjs.js.map +0 -1
- package/makeStyles.esm.js +0 -26
- package/makeStyles.esm.js.map +0 -1
- package/renderToStyleElements.cjs.js +0 -72
- package/renderToStyleElements.cjs.js.map +0 -1
- package/renderToStyleElements.esm.js +0 -50
- package/renderToStyleElements.esm.js.map +0 -1
- package/useInsertionEffect.cjs.js +0 -32
- package/useInsertionEffect.cjs.js.map +0 -1
- package/useInsertionEffect.esm.js.map +0 -1
- package/utils/canUseDOM.cjs.js +0 -11
- package/utils/canUseDOM.cjs.js.map +0 -1
- package/utils/canUseDOM.esm.js +0 -9
- package/utils/canUseDOM.esm.js.map +0 -1
- package/utils/isInsideComponent.cjs.js +0 -57
- package/utils/isInsideComponent.cjs.js.map +0 -1
- package/utils/isInsideComponent.esm.js +0 -35
- package/utils/isInsideComponent.esm.js.map +0 -1
package/makeResetStyles.esm.js
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { makeResetStyles as makeResetStyles$1 } from '@griffel/core';
|
|
3
|
-
import { insertionFactory } from './insertionFactory.esm.js';
|
|
4
|
-
import { useRenderer } from './RendererContext.esm.js';
|
|
5
|
-
import { useTextDirection } from './TextDirectionContext.esm.js';
|
|
6
|
-
import { isInsideComponent } from './utils/isInsideComponent.esm.js';
|
|
7
|
-
|
|
8
|
-
function makeResetStyles(styles) {
|
|
9
|
-
const getStyles = makeResetStyles$1(styles, insertionFactory);
|
|
10
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
11
|
-
if (isInsideComponent()) {
|
|
12
|
-
throw new Error(["makeResetStyles(): this function cannot be called in component's scope.", 'All makeResetStyles() calls should be top level i.e. in a root scope of a file.'].join(' '));
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
return function useClassName() {
|
|
16
|
-
const dir = useTextDirection();
|
|
17
|
-
const renderer = useRenderer();
|
|
18
|
-
return getStyles({
|
|
19
|
-
dir,
|
|
20
|
-
renderer
|
|
21
|
-
});
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export { makeResetStyles };
|
|
26
|
-
//# sourceMappingURL=makeResetStyles.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"makeResetStyles.esm.js","sources":["../../../packages/react/src/makeResetStyles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles as vanillaMakeResetStyles } from '@griffel/core';\nimport type { GriffelResetStyle } from '@griffel/core';\n\nimport { insertionFactory } from './insertionFactory';\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\nimport { isInsideComponent } from './utils/isInsideComponent';\n\nexport function makeResetStyles(styles: GriffelResetStyle) {\n const getStyles = vanillaMakeResetStyles(styles, insertionFactory);\n\n if (process.env.NODE_ENV !== 'production') {\n if (isInsideComponent()) {\n throw new Error(\n [\n \"makeResetStyles(): this function cannot be called in component's scope.\",\n 'All makeResetStyles() calls should be top level i.e. in a root scope of a file.',\n ].join(' '),\n );\n }\n }\n\n return function useClassName(): string {\n const dir = useTextDirection();\n const renderer = useRenderer();\n\n return getStyles({ dir, renderer });\n };\n}\n"],"names":["renderer"],"mappings":";;;;;;;AAUM;AACJ;AAEA;;AAEI;AAMF;AACF;;AAGE;AACA;AAEA;;AAAwBA;AAAQ;;AAEpC;;"}
|
package/makeStaticStyles.cjs.js
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
'use strict';
|
|
3
|
-
|
|
4
|
-
var core = require('@griffel/core');
|
|
5
|
-
var insertionFactory = require('./insertionFactory.cjs.js');
|
|
6
|
-
var RendererContext = require('./RendererContext.cjs.js');
|
|
7
|
-
|
|
8
|
-
function makeStaticStyles(styles) {
|
|
9
|
-
const getStyles = core.makeStaticStyles(styles, insertionFactory.insertionFactory);
|
|
10
|
-
if (process.env.NODE_ENV === 'test') {
|
|
11
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
12
|
-
return () => {};
|
|
13
|
-
}
|
|
14
|
-
return function useStaticStyles() {
|
|
15
|
-
const renderer = RendererContext.useRenderer();
|
|
16
|
-
const options = {
|
|
17
|
-
renderer
|
|
18
|
-
};
|
|
19
|
-
return getStyles(options);
|
|
20
|
-
};
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
exports.makeStaticStyles = makeStaticStyles;
|
|
24
|
-
//# sourceMappingURL=makeStaticStyles.cjs.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"makeStaticStyles.cjs.js","sources":["../../../packages/react/src/makeStaticStyles.ts"],"sourcesContent":["'use client';\n\nimport { makeStaticStyles as vanillaMakeStaticStyles } from '@griffel/core';\nimport type { GriffelStaticStyles, MakeStaticStylesOptions } from '@griffel/core';\n\nimport { insertionFactory } from './insertionFactory';\nimport { useRenderer } from './RendererContext';\n\nexport function makeStaticStyles(styles: GriffelStaticStyles | GriffelStaticStyles[]) {\n const getStyles = vanillaMakeStaticStyles(styles, insertionFactory);\n\n if (process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n return () => {};\n }\n\n return function useStaticStyles(): void {\n const renderer = useRenderer();\n const options: MakeStaticStylesOptions = { renderer };\n\n return getStyles(options);\n };\n}\n"],"names":["renderer"],"mappings":";;;;;;;AAQM;AACJ;AAEA;AACE;;AAEF;;AAGE;AACA;AAA2CA;;;;AAI/C;;"}
|
package/makeStaticStyles.esm.js
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { makeStaticStyles as makeStaticStyles$1 } from '@griffel/core';
|
|
3
|
-
import { insertionFactory } from './insertionFactory.esm.js';
|
|
4
|
-
import { useRenderer } from './RendererContext.esm.js';
|
|
5
|
-
|
|
6
|
-
function makeStaticStyles(styles) {
|
|
7
|
-
const getStyles = makeStaticStyles$1(styles, insertionFactory);
|
|
8
|
-
if (process.env.NODE_ENV === 'test') {
|
|
9
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
10
|
-
return () => {};
|
|
11
|
-
}
|
|
12
|
-
return function useStaticStyles() {
|
|
13
|
-
const renderer = useRenderer();
|
|
14
|
-
const options = {
|
|
15
|
-
renderer
|
|
16
|
-
};
|
|
17
|
-
return getStyles(options);
|
|
18
|
-
};
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export { makeStaticStyles };
|
|
22
|
-
//# sourceMappingURL=makeStaticStyles.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"makeStaticStyles.esm.js","sources":["../../../packages/react/src/makeStaticStyles.ts"],"sourcesContent":["'use client';\n\nimport { makeStaticStyles as vanillaMakeStaticStyles } from '@griffel/core';\nimport type { GriffelStaticStyles, MakeStaticStylesOptions } from '@griffel/core';\n\nimport { insertionFactory } from './insertionFactory';\nimport { useRenderer } from './RendererContext';\n\nexport function makeStaticStyles(styles: GriffelStaticStyles | GriffelStaticStyles[]) {\n const getStyles = vanillaMakeStaticStyles(styles, insertionFactory);\n\n if (process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n return () => {};\n }\n\n return function useStaticStyles(): void {\n const renderer = useRenderer();\n const options: MakeStaticStylesOptions = { renderer };\n\n return getStyles(options);\n };\n}\n"],"names":["renderer"],"mappings":";;;;;AAQM;AACJ;AAEA;AACE;;AAEF;;AAGE;AACA;AAA2CA;;;;AAI/C;;"}
|
package/makeStyles.cjs.js
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
'use strict';
|
|
3
|
-
|
|
4
|
-
var core = require('@griffel/core');
|
|
5
|
-
var insertionFactory = require('./insertionFactory.cjs.js');
|
|
6
|
-
var RendererContext = require('./RendererContext.cjs.js');
|
|
7
|
-
var TextDirectionContext = require('./TextDirectionContext.cjs.js');
|
|
8
|
-
var isInsideComponent = require('./utils/isInsideComponent.cjs.js');
|
|
9
|
-
|
|
10
|
-
function makeStyles(stylesBySlots) {
|
|
11
|
-
const getStyles = core.makeStyles(stylesBySlots, insertionFactory.insertionFactory);
|
|
12
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
13
|
-
if (isInsideComponent.isInsideComponent()) {
|
|
14
|
-
throw new Error(["makeStyles(): this function cannot be called in component's scope.", 'All makeStyles() calls should be top level i.e. in a root scope of a file.'].join(' '));
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
return function useClasses() {
|
|
18
|
-
const dir = TextDirectionContext.useTextDirection();
|
|
19
|
-
const renderer = RendererContext.useRenderer();
|
|
20
|
-
return getStyles({
|
|
21
|
-
dir,
|
|
22
|
-
renderer
|
|
23
|
-
});
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
exports.makeStyles = makeStyles;
|
|
28
|
-
//# sourceMappingURL=makeStyles.cjs.js.map
|
package/makeStyles.cjs.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"makeStyles.cjs.js","sources":["../../../packages/react/src/makeStyles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles as vanillaMakeStyles } from '@griffel/core';\nimport type { GriffelStyle } from '@griffel/core';\n\nimport { insertionFactory } from './insertionFactory';\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\nimport { isInsideComponent } from './utils/isInsideComponent';\n\nexport function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>) {\n const getStyles = vanillaMakeStyles(stylesBySlots, insertionFactory);\n\n if (process.env.NODE_ENV !== 'production') {\n if (isInsideComponent()) {\n throw new Error(\n [\n \"makeStyles(): this function cannot be called in component's scope.\",\n 'All makeStyles() calls should be top level i.e. in a root scope of a file.',\n ].join(' '),\n );\n }\n }\n\n return function useClasses(): Record<Slots, string> {\n const dir = useTextDirection();\n const renderer = useRenderer();\n\n return getStyles({ dir, renderer });\n };\n}\n"],"names":["renderer"],"mappings":";;;;;;;;;AAUM;AACJ;AAEA;;AAEI;AAMF;AACF;;AAGE;AACA;AAEA;;AAAwBA;AAAQ;;AAEpC;;"}
|
package/makeStyles.esm.js
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { makeStyles as makeStyles$1 } from '@griffel/core';
|
|
3
|
-
import { insertionFactory } from './insertionFactory.esm.js';
|
|
4
|
-
import { useRenderer } from './RendererContext.esm.js';
|
|
5
|
-
import { useTextDirection } from './TextDirectionContext.esm.js';
|
|
6
|
-
import { isInsideComponent } from './utils/isInsideComponent.esm.js';
|
|
7
|
-
|
|
8
|
-
function makeStyles(stylesBySlots) {
|
|
9
|
-
const getStyles = makeStyles$1(stylesBySlots, insertionFactory);
|
|
10
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
11
|
-
if (isInsideComponent()) {
|
|
12
|
-
throw new Error(["makeStyles(): this function cannot be called in component's scope.", 'All makeStyles() calls should be top level i.e. in a root scope of a file.'].join(' '));
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
return function useClasses() {
|
|
16
|
-
const dir = useTextDirection();
|
|
17
|
-
const renderer = useRenderer();
|
|
18
|
-
return getStyles({
|
|
19
|
-
dir,
|
|
20
|
-
renderer
|
|
21
|
-
});
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export { makeStyles };
|
|
26
|
-
//# sourceMappingURL=makeStyles.esm.js.map
|
package/makeStyles.esm.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"makeStyles.esm.js","sources":["../../../packages/react/src/makeStyles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles as vanillaMakeStyles } from '@griffel/core';\nimport type { GriffelStyle } from '@griffel/core';\n\nimport { insertionFactory } from './insertionFactory';\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\nimport { isInsideComponent } from './utils/isInsideComponent';\n\nexport function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>) {\n const getStyles = vanillaMakeStyles(stylesBySlots, insertionFactory);\n\n if (process.env.NODE_ENV !== 'production') {\n if (isInsideComponent()) {\n throw new Error(\n [\n \"makeStyles(): this function cannot be called in component's scope.\",\n 'All makeStyles() calls should be top level i.e. in a root scope of a file.',\n ].join(' '),\n );\n }\n }\n\n return function useClasses(): Record<Slots, string> {\n const dir = useTextDirection();\n const renderer = useRenderer();\n\n return getStyles({ dir, renderer });\n };\n}\n"],"names":["renderer"],"mappings":";;;;;;;AAUM;AACJ;AAEA;;AAEI;AAMF;AACF;;AAGE;AACA;AAEA;;AAAwBA;AAAQ;;AAEpC;;"}
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
'use strict';
|
|
3
|
-
|
|
4
|
-
var core = require('@griffel/core');
|
|
5
|
-
var React = require('react');
|
|
6
|
-
|
|
7
|
-
function _interopNamespaceCompat(e) {
|
|
8
|
-
if (e && typeof e === 'object' && 'default' in e) return e;
|
|
9
|
-
var n = Object.create(null);
|
|
10
|
-
if (e) {
|
|
11
|
-
Object.keys(e).forEach(function (k) {
|
|
12
|
-
if (k !== 'default') {
|
|
13
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
14
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
15
|
-
enumerable: true,
|
|
16
|
-
get: function () { return e[k]; }
|
|
17
|
-
});
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
n.default = e;
|
|
22
|
-
return Object.freeze(n);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
|
|
26
|
-
|
|
27
|
-
/**
|
|
28
|
-
* This method returns a list of <style> React elements with the rendered CSS. This is useful for Server-Side rendering.
|
|
29
|
-
*
|
|
30
|
-
* @public
|
|
31
|
-
*/
|
|
32
|
-
function renderToStyleElements(renderer) {
|
|
33
|
-
const stylesheets = Object.values(renderer.stylesheets)
|
|
34
|
-
// first sort: bucket by order [data-priority]
|
|
35
|
-
.sort((a, b) => {
|
|
36
|
-
return Number(a.elementAttributes['data-priority']) - Number(b.elementAttributes['data-priority']);
|
|
37
|
-
})
|
|
38
|
-
// second sort: bucket by bucket name
|
|
39
|
-
.sort((a, b) => {
|
|
40
|
-
return core.styleBucketOrdering.indexOf(a.bucketName) - core.styleBucketOrdering.indexOf(b.bucketName);
|
|
41
|
-
})
|
|
42
|
-
// third sort: media queries
|
|
43
|
-
.sort((a, b) => {
|
|
44
|
-
const mediaA = a.elementAttributes['media'];
|
|
45
|
-
const mediaB = b.elementAttributes['media'];
|
|
46
|
-
if (mediaA && mediaB) {
|
|
47
|
-
return renderer.compareMediaQueries(mediaA, mediaB);
|
|
48
|
-
}
|
|
49
|
-
if (mediaA || mediaB) {
|
|
50
|
-
return mediaA ? 1 : -1;
|
|
51
|
-
}
|
|
52
|
-
return 0;
|
|
53
|
-
});
|
|
54
|
-
return stylesheets.map(stylesheet => {
|
|
55
|
-
const cssRules = stylesheet.cssRules();
|
|
56
|
-
// don't want to create any empty style elements
|
|
57
|
-
if (!cssRules.length) {
|
|
58
|
-
return null;
|
|
59
|
-
}
|
|
60
|
-
return /*#__PURE__*/React__namespace.createElement('style', Object.assign({
|
|
61
|
-
key: stylesheet.bucketName
|
|
62
|
-
}, stylesheet.elementAttributes, {
|
|
63
|
-
'data-make-styles-rehydration': 'true',
|
|
64
|
-
dangerouslySetInnerHTML: {
|
|
65
|
-
__html: cssRules.join('')
|
|
66
|
-
}
|
|
67
|
-
}));
|
|
68
|
-
}).filter(Boolean);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
exports.renderToStyleElements = renderToStyleElements;
|
|
72
|
-
//# sourceMappingURL=renderToStyleElements.cjs.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"renderToStyleElements.cjs.js","sources":["../../../packages/react/src/renderToStyleElements.ts"],"sourcesContent":["'use client';\n\nimport { styleBucketOrdering } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelRenderer } from '@griffel/core';\n\n/**\n * This method returns a list of <style> React elements with the rendered CSS. This is useful for Server-Side rendering.\n *\n * @public\n */\nexport function renderToStyleElements(renderer: GriffelRenderer): React.ReactElement[] {\n const stylesheets = Object.values(renderer.stylesheets)\n // first sort: bucket by order [data-priority]\n .sort((a, b) => {\n return Number(a.elementAttributes['data-priority']) - Number(b.elementAttributes['data-priority']);\n })\n // second sort: bucket by bucket name\n .sort((a, b) => {\n return styleBucketOrdering.indexOf(a.bucketName) - styleBucketOrdering.indexOf(b.bucketName);\n })\n // third sort: media queries\n .sort((a, b) => {\n const mediaA = a.elementAttributes['media'];\n const mediaB = b.elementAttributes['media'];\n\n if (mediaA && mediaB) {\n return renderer.compareMediaQueries(mediaA, mediaB);\n }\n\n if (mediaA || mediaB) {\n return mediaA ? 1 : -1;\n }\n\n return 0;\n });\n\n return stylesheets\n .map(stylesheet => {\n const cssRules = stylesheet.cssRules();\n // don't want to create any empty style elements\n if (!cssRules.length) {\n return null;\n }\n\n return React.createElement('style', {\n key: stylesheet.bucketName,\n\n // TODO: support \"nonce\"\n // ...renderer.styleNodeAttributes,\n ...stylesheet.elementAttributes,\n 'data-make-styles-rehydration': 'true',\n\n dangerouslySetInnerHTML: {\n __html: cssRules.join(''),\n },\n });\n })\n .filter(Boolean) as React.ReactElement[];\n}\n"],"names":["dangerouslySetInnerHTML","__html"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;AAIG;AACG;;AAEF;AAAA;AAEE;;AAEF;AAAA;AAEE;;AAEF;AAAA;AAEE;AACA;;AAGE;AACF;;AAGE;AACF;AAEA;AACF;AAEF;AAEI;AACA;AACA;AACE;AACF;;;;AAQE;AAEAA;AACEC;AACD;AAAA;AAEL;AAEJ;;"}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { styleBucketOrdering } from '@griffel/core';
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* This method returns a list of <style> React elements with the rendered CSS. This is useful for Server-Side rendering.
|
|
7
|
-
*
|
|
8
|
-
* @public
|
|
9
|
-
*/
|
|
10
|
-
function renderToStyleElements(renderer) {
|
|
11
|
-
const stylesheets = Object.values(renderer.stylesheets)
|
|
12
|
-
// first sort: bucket by order [data-priority]
|
|
13
|
-
.sort((a, b) => {
|
|
14
|
-
return Number(a.elementAttributes['data-priority']) - Number(b.elementAttributes['data-priority']);
|
|
15
|
-
})
|
|
16
|
-
// second sort: bucket by bucket name
|
|
17
|
-
.sort((a, b) => {
|
|
18
|
-
return styleBucketOrdering.indexOf(a.bucketName) - styleBucketOrdering.indexOf(b.bucketName);
|
|
19
|
-
})
|
|
20
|
-
// third sort: media queries
|
|
21
|
-
.sort((a, b) => {
|
|
22
|
-
const mediaA = a.elementAttributes['media'];
|
|
23
|
-
const mediaB = b.elementAttributes['media'];
|
|
24
|
-
if (mediaA && mediaB) {
|
|
25
|
-
return renderer.compareMediaQueries(mediaA, mediaB);
|
|
26
|
-
}
|
|
27
|
-
if (mediaA || mediaB) {
|
|
28
|
-
return mediaA ? 1 : -1;
|
|
29
|
-
}
|
|
30
|
-
return 0;
|
|
31
|
-
});
|
|
32
|
-
return stylesheets.map(stylesheet => {
|
|
33
|
-
const cssRules = stylesheet.cssRules();
|
|
34
|
-
// don't want to create any empty style elements
|
|
35
|
-
if (!cssRules.length) {
|
|
36
|
-
return null;
|
|
37
|
-
}
|
|
38
|
-
return /*#__PURE__*/React.createElement('style', Object.assign({
|
|
39
|
-
key: stylesheet.bucketName
|
|
40
|
-
}, stylesheet.elementAttributes, {
|
|
41
|
-
'data-make-styles-rehydration': 'true',
|
|
42
|
-
dangerouslySetInnerHTML: {
|
|
43
|
-
__html: cssRules.join('')
|
|
44
|
-
}
|
|
45
|
-
}));
|
|
46
|
-
}).filter(Boolean);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
export { renderToStyleElements };
|
|
50
|
-
//# sourceMappingURL=renderToStyleElements.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"renderToStyleElements.esm.js","sources":["../../../packages/react/src/renderToStyleElements.ts"],"sourcesContent":["'use client';\n\nimport { styleBucketOrdering } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelRenderer } from '@griffel/core';\n\n/**\n * This method returns a list of <style> React elements with the rendered CSS. This is useful for Server-Side rendering.\n *\n * @public\n */\nexport function renderToStyleElements(renderer: GriffelRenderer): React.ReactElement[] {\n const stylesheets = Object.values(renderer.stylesheets)\n // first sort: bucket by order [data-priority]\n .sort((a, b) => {\n return Number(a.elementAttributes['data-priority']) - Number(b.elementAttributes['data-priority']);\n })\n // second sort: bucket by bucket name\n .sort((a, b) => {\n return styleBucketOrdering.indexOf(a.bucketName) - styleBucketOrdering.indexOf(b.bucketName);\n })\n // third sort: media queries\n .sort((a, b) => {\n const mediaA = a.elementAttributes['media'];\n const mediaB = b.elementAttributes['media'];\n\n if (mediaA && mediaB) {\n return renderer.compareMediaQueries(mediaA, mediaB);\n }\n\n if (mediaA || mediaB) {\n return mediaA ? 1 : -1;\n }\n\n return 0;\n });\n\n return stylesheets\n .map(stylesheet => {\n const cssRules = stylesheet.cssRules();\n // don't want to create any empty style elements\n if (!cssRules.length) {\n return null;\n }\n\n return React.createElement('style', {\n key: stylesheet.bucketName,\n\n // TODO: support \"nonce\"\n // ...renderer.styleNodeAttributes,\n ...stylesheet.elementAttributes,\n 'data-make-styles-rehydration': 'true',\n\n dangerouslySetInnerHTML: {\n __html: cssRules.join(''),\n },\n });\n })\n .filter(Boolean) as React.ReactElement[];\n}\n"],"names":["dangerouslySetInnerHTML","__html"],"mappings":";;;;AAMA;;;;AAIG;AACG;;AAEF;AAAA;AAEE;;AAEF;AAAA;AAEE;;AAEF;AAAA;AAEE;AACA;;AAGE;AACF;;AAGE;AACF;AAEA;AACF;AAEF;AAEI;AACA;AACA;AACE;AACF;;;;AAQE;AAEAA;AACEC;AACD;AAAA;AAEL;AAEJ;;"}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
'use strict';
|
|
3
|
-
|
|
4
|
-
var React = require('react');
|
|
5
|
-
|
|
6
|
-
function _interopNamespaceCompat(e) {
|
|
7
|
-
if (e && typeof e === 'object' && 'default' in e) return e;
|
|
8
|
-
var n = Object.create(null);
|
|
9
|
-
if (e) {
|
|
10
|
-
Object.keys(e).forEach(function (k) {
|
|
11
|
-
if (k !== 'default') {
|
|
12
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
13
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
14
|
-
enumerable: true,
|
|
15
|
-
get: function () { return e[k]; }
|
|
16
|
-
});
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
}
|
|
20
|
-
n.default = e;
|
|
21
|
-
return Object.freeze(n);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
|
|
25
|
-
|
|
26
|
-
const useInsertionEffect =
|
|
27
|
-
// @ts-expect-error Hack to make sure that `useInsertionEffect` will not cause bundling issues in older React versions
|
|
28
|
-
// eslint-disable-next-line no-useless-concat
|
|
29
|
-
React__namespace['useInsertion' + 'Effect'] ? React__namespace['useInsertion' + 'Effect'] : undefined;
|
|
30
|
-
|
|
31
|
-
exports.useInsertionEffect = useInsertionEffect;
|
|
32
|
-
//# sourceMappingURL=useInsertionEffect.cjs.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useInsertionEffect.cjs.js","sources":["../../../packages/react/src/useInsertionEffect.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nexport const useInsertionEffect: typeof React.useInsertionEffect | undefined =\n // @ts-expect-error Hack to make sure that `useInsertionEffect` will not cause bundling issues in older React versions\n // eslint-disable-next-line no-useless-concat\n React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : undefined;\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAKE;AACA;AACAA;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useInsertionEffect.esm.js","sources":["../../../packages/react/src/useInsertionEffect.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nexport const useInsertionEffect: typeof React.useInsertionEffect | undefined =\n // @ts-expect-error Hack to make sure that `useInsertionEffect` will not cause bundling issues in older React versions\n // eslint-disable-next-line no-useless-concat\n React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : undefined;\n"],"names":["React"],"mappings":";;;;AAKE;AACA;AACAA;;"}
|
package/utils/canUseDOM.cjs.js
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Verifies if an application can use DOM.
|
|
5
|
-
*/
|
|
6
|
-
function canUseDOM() {
|
|
7
|
-
return typeof window !== 'undefined' && !!(window.document && window.document.createElement);
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
exports.canUseDOM = canUseDOM;
|
|
11
|
-
//# sourceMappingURL=canUseDOM.cjs.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"canUseDOM.cjs.js","sources":["../../../../packages/react/src/utils/canUseDOM.ts"],"sourcesContent":["/**\n * Verifies if an application can use DOM.\n */\nexport function canUseDOM(): boolean {\n return typeof window !== 'undefined' && !!(window.document && window.document.createElement);\n}\n"],"names":["canUseDOM","window","document","createElement"],"mappings":";;AAAA;;AAEG;SACaA,SAASA,GAAA;AACvB,EAAA,OAAO,OAAOC,MAAM,KAAK,WAAW,IAAI,CAAC,EAAEA,MAAM,CAACC,QAAQ,IAAID,MAAM,CAACC,QAAQ,CAACC,aAAa,CAAC;AAC9F;;;;"}
|
package/utils/canUseDOM.esm.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"canUseDOM.esm.js","sources":["../../../../packages/react/src/utils/canUseDOM.ts"],"sourcesContent":["/**\n * Verifies if an application can use DOM.\n */\nexport function canUseDOM(): boolean {\n return typeof window !== 'undefined' && !!(window.document && window.document.createElement);\n}\n"],"names":["canUseDOM","window","document","createElement"],"mappings":"AAAA;;AAEG;SACaA,SAASA,GAAA;AACvB,EAAA,OAAO,OAAOC,MAAM,KAAK,WAAW,IAAI,CAAC,EAAEA,MAAM,CAACC,QAAQ,IAAID,MAAM,CAACC,QAAQ,CAACC,aAAa,CAAC;AAC9F;;;;"}
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
'use strict';
|
|
3
|
-
|
|
4
|
-
var React = require('react');
|
|
5
|
-
|
|
6
|
-
function _interopNamespaceCompat(e) {
|
|
7
|
-
if (e && typeof e === 'object' && 'default' in e) return e;
|
|
8
|
-
var n = Object.create(null);
|
|
9
|
-
if (e) {
|
|
10
|
-
Object.keys(e).forEach(function (k) {
|
|
11
|
-
if (k !== 'default') {
|
|
12
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
13
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
14
|
-
enumerable: true,
|
|
15
|
-
get: function () { return e[k]; }
|
|
16
|
-
});
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
}
|
|
20
|
-
n.default = e;
|
|
21
|
-
return Object.freeze(n);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
|
|
25
|
-
|
|
26
|
-
function getDispatcher() {
|
|
27
|
-
try {
|
|
28
|
-
return React__namespace[''.concat('__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE')].H;
|
|
29
|
-
} catch (_unused) {
|
|
30
|
-
// React 19+
|
|
31
|
-
}
|
|
32
|
-
try {
|
|
33
|
-
return React__namespace[''.concat('__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')].ReactCurrentDispatcher.current;
|
|
34
|
-
} catch (_unused2) {
|
|
35
|
-
// React 18 and below
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
function isInsideComponent() {
|
|
39
|
-
// React 18 always logs errors if a dispatcher is not present:
|
|
40
|
-
// https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36
|
|
41
|
-
try {
|
|
42
|
-
const dispatcher = getDispatcher();
|
|
43
|
-
// Before any React component was rendered "dispatcher" will be "null"
|
|
44
|
-
if (dispatcher === null || dispatcher === undefined) {
|
|
45
|
-
return false;
|
|
46
|
-
}
|
|
47
|
-
// A check with hooks call (i.e. call "React.useContext()" outside a component) will always produce errors, but
|
|
48
|
-
// a call on the dispatcher wont
|
|
49
|
-
dispatcher.useContext({});
|
|
50
|
-
return true;
|
|
51
|
-
} catch (e) {
|
|
52
|
-
return false;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
exports.isInsideComponent = isInsideComponent;
|
|
57
|
-
//# sourceMappingURL=isInsideComponent.cjs.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"isInsideComponent.cjs.js","sources":["../../../../packages/react/src/utils/isInsideComponent.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nfunction getDispatcher() {\n try {\n return (React as any)[''.concat('__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE')].H;\n } catch {\n // React 19+\n }\n\n try {\n return (React as any)[''.concat('__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')].ReactCurrentDispatcher\n .current;\n } catch {\n // React 18 and below\n }\n}\n\nexport function isInsideComponent() {\n // React 18 always logs errors if a dispatcher is not present:\n // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36\n try {\n const dispatcher = getDispatcher();\n\n // Before any React component was rendered \"dispatcher\" will be \"null\"\n if (dispatcher === null || dispatcher === undefined) {\n return false;\n }\n\n // A check with hooks call (i.e. call \"React.useContext()\" outside a component) will always produce errors, but\n // a call on the dispatcher wont\n dispatcher.useContext({});\n return true;\n } catch (e) {\n return false;\n }\n}\n"],"names":["dispatcher"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;;AAII;AAAA;;AAIA;;AAGA;AAAA;AAEJ;;AAGE;AACA;;AAEE;AAEA;AACA;AACE;AACF;AAEA;AACA;AACAA;AACA;;AAEA;AACF;AACF;;"}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
|
|
4
|
-
function getDispatcher() {
|
|
5
|
-
try {
|
|
6
|
-
return React[''.concat('__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE')].H;
|
|
7
|
-
} catch (_unused) {
|
|
8
|
-
// React 19+
|
|
9
|
-
}
|
|
10
|
-
try {
|
|
11
|
-
return React[''.concat('__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')].ReactCurrentDispatcher.current;
|
|
12
|
-
} catch (_unused2) {
|
|
13
|
-
// React 18 and below
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
function isInsideComponent() {
|
|
17
|
-
// React 18 always logs errors if a dispatcher is not present:
|
|
18
|
-
// https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36
|
|
19
|
-
try {
|
|
20
|
-
const dispatcher = getDispatcher();
|
|
21
|
-
// Before any React component was rendered "dispatcher" will be "null"
|
|
22
|
-
if (dispatcher === null || dispatcher === undefined) {
|
|
23
|
-
return false;
|
|
24
|
-
}
|
|
25
|
-
// A check with hooks call (i.e. call "React.useContext()" outside a component) will always produce errors, but
|
|
26
|
-
// a call on the dispatcher wont
|
|
27
|
-
dispatcher.useContext({});
|
|
28
|
-
return true;
|
|
29
|
-
} catch (e) {
|
|
30
|
-
return false;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
export { isInsideComponent };
|
|
35
|
-
//# sourceMappingURL=isInsideComponent.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"isInsideComponent.esm.js","sources":["../../../../packages/react/src/utils/isInsideComponent.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nfunction getDispatcher() {\n try {\n return (React as any)[''.concat('__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE')].H;\n } catch {\n // React 19+\n }\n\n try {\n return (React as any)[''.concat('__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')].ReactCurrentDispatcher\n .current;\n } catch {\n // React 18 and below\n }\n}\n\nexport function isInsideComponent() {\n // React 18 always logs errors if a dispatcher is not present:\n // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36\n try {\n const dispatcher = getDispatcher();\n\n // Before any React component was rendered \"dispatcher\" will be \"null\"\n if (dispatcher === null || dispatcher === undefined) {\n return false;\n }\n\n // A check with hooks call (i.e. call \"React.useContext()\" outside a component) will always produce errors, but\n // a call on the dispatcher wont\n dispatcher.useContext({});\n return true;\n } catch (e) {\n return false;\n }\n}\n"],"names":["dispatcher"],"mappings":";;;AAIA;;;;AAII;AAAA;;AAIA;;AAGA;AAAA;AAEJ;;AAGE;AACA;;AAEE;AAEA;AACA;AACE;AACF;AAEA;AACA;AACAA;AACA;;AAEA;AACF;AACF;;"}
|