@griffel/react 1.7.1 → 1.7.3

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.
Files changed (115) hide show
  1. package/.storybook/main.js +20 -0
  2. package/.storybook/preview.js +1 -0
  3. package/CHANGELOG.json +1281 -0
  4. package/CHANGELOG.md +501 -0
  5. package/README.md +4 -0
  6. package/bundle-size/__css.fixture.js +7 -0
  7. package/bundle-size/__styles.fixture.js +7 -0
  8. package/bundle-size/makeResetStyles.fixture.js +7 -0
  9. package/bundle-size/makeStaticStyles.fixture.js +7 -0
  10. package/bundle-size/makeStyles.fixture.js +7 -0
  11. package/eslint.config.mjs +31 -0
  12. package/package.json +3 -3
  13. package/project.json +96 -0
  14. package/src/RendererContext.tsx +52 -0
  15. package/src/TextDirectionContext.tsx +34 -0
  16. package/src/__css.ts +21 -0
  17. package/src/__resetCSS.ts +19 -0
  18. package/src/__resetStyles.ts +28 -0
  19. package/src/{__staticCSS.js → __staticCSS.ts} +7 -6
  20. package/src/__staticStyles.ts +22 -0
  21. package/src/__styles.ts +27 -0
  22. package/src/createDOMRenderer.test.tsx +133 -0
  23. package/src/{index.d.ts → index.ts} +6 -0
  24. package/src/insertionFactory-node.test.ts +31 -0
  25. package/src/insertionFactory.test.ts +29 -0
  26. package/src/insertionFactory.ts +27 -0
  27. package/src/makeResetStyles.test.tsx +27 -0
  28. package/src/makeResetStyles.ts +31 -0
  29. package/src/makeStaticStyles.ts +23 -0
  30. package/src/makeStyles.test.tsx +27 -0
  31. package/src/makeStyles.ts +31 -0
  32. package/src/renderToStyleElements-node.test.tsx +418 -0
  33. package/src/renderToStyleElements.test.tsx +103 -0
  34. package/src/renderToStyleElements.ts +61 -0
  35. package/src/stories/ComponentStyles.stories.tsx +55 -0
  36. package/src/stories/DOMRendererFilter.stories.tsx +76 -0
  37. package/src/stories/FallbackValues.stories.tsx +50 -0
  38. package/src/stories/makeStyles.stories.tsx +17 -0
  39. package/src/useInsertionEffect.ts +11 -0
  40. package/src/utils/canUseDOM-node.test.ts +14 -0
  41. package/src/utils/canUseDOM.test.tsx +8 -0
  42. package/src/utils/canUseDOM.ts +8 -0
  43. package/src/utils/isInsideComponent.ts +41 -0
  44. package/tsconfig.json +20 -0
  45. package/tsconfig.lib.json +28 -0
  46. package/tsconfig.spec.json +21 -0
  47. package/tsconfig.storybook.json +12 -0
  48. package/vitest.config.ts +21 -0
  49. package/LICENSE.md +0 -21
  50. package/lib/RendererContext.cjs +0 -45
  51. package/lib/TextDirectionContext.cjs +0 -33
  52. package/lib/__css.cjs +0 -22
  53. package/lib/__resetCSS.cjs +0 -22
  54. package/lib/__resetStyles.cjs +0 -26
  55. package/lib/__staticCSS.cjs +0 -18
  56. package/lib/__staticStyles.cjs +0 -23
  57. package/lib/__styles.cjs +0 -26
  58. package/lib/index.cjs +0 -78
  59. package/lib/insertionFactory.cjs +0 -33
  60. package/lib/makeResetStyles.cjs +0 -35
  61. package/lib/makeStaticStyles.cjs +0 -28
  62. package/lib/makeStyles.cjs +0 -35
  63. package/lib/renderToStyleElements.cjs +0 -50
  64. package/lib/useInsertionEffect.cjs +0 -20
  65. package/lib/utils/canUseDOM.cjs +0 -17
  66. package/lib/utils/isInsideComponent.cjs +0 -46
  67. package/src/RendererContext.d.ts +0 -24
  68. package/src/RendererContext.js +0 -31
  69. package/src/RendererContext.js.map +0 -1
  70. package/src/TextDirectionContext.d.ts +0 -19
  71. package/src/TextDirectionContext.js +0 -22
  72. package/src/TextDirectionContext.js.map +0 -1
  73. package/src/__css.d.ts +0 -7
  74. package/src/__css.js +0 -17
  75. package/src/__css.js.map +0 -1
  76. package/src/__resetCSS.d.ts +0 -6
  77. package/src/__resetCSS.js +0 -17
  78. package/src/__resetCSS.js.map +0 -1
  79. package/src/__resetStyles.d.ts +0 -7
  80. package/src/__resetStyles.js +0 -20
  81. package/src/__resetStyles.js.map +0 -1
  82. package/src/__staticCSS.d.ts +0 -6
  83. package/src/__staticCSS.js.map +0 -1
  84. package/src/__staticStyles.d.ts +0 -7
  85. package/src/__staticStyles.js +0 -18
  86. package/src/__staticStyles.js.map +0 -1
  87. package/src/__styles.d.ts +0 -7
  88. package/src/__styles.js +0 -20
  89. package/src/__styles.js.map +0 -1
  90. package/src/index.js +0 -16
  91. package/src/index.js.map +0 -1
  92. package/src/insertionFactory.d.ts +0 -2
  93. package/src/insertionFactory.js +0 -21
  94. package/src/insertionFactory.js.map +0 -1
  95. package/src/makeResetStyles.d.ts +0 -2
  96. package/src/makeResetStyles.js +0 -23
  97. package/src/makeResetStyles.js.map +0 -1
  98. package/src/makeStaticStyles.d.ts +0 -2
  99. package/src/makeStaticStyles.js +0 -17
  100. package/src/makeStaticStyles.js.map +0 -1
  101. package/src/makeStyles.d.ts +0 -2
  102. package/src/makeStyles.js +0 -23
  103. package/src/makeStyles.js.map +0 -1
  104. package/src/renderToStyleElements.d.ts +0 -8
  105. package/src/renderToStyleElements.js +0 -51
  106. package/src/renderToStyleElements.js.map +0 -1
  107. package/src/useInsertionEffect.d.ts +0 -1
  108. package/src/useInsertionEffect.js +0 -10
  109. package/src/useInsertionEffect.js.map +0 -1
  110. package/src/utils/canUseDOM.d.ts +0 -1
  111. package/src/utils/canUseDOM.js +0 -9
  112. package/src/utils/canUseDOM.js.map +0 -1
  113. package/src/utils/isInsideComponent.d.ts +0 -1
  114. package/src/utils/isInsideComponent.js +0 -39
  115. package/src/utils/isInsideComponent.js.map +0 -1
@@ -1,28 +0,0 @@
1
- 'use client';
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "makeStaticStyles", {
7
- enumerable: true,
8
- get: function() {
9
- return makeStaticStyles;
10
- }
11
- });
12
- const _core = require("@griffel/core");
13
- const _insertionFactory = require("./insertionFactory.cjs");
14
- const _RendererContext = require("./RendererContext.cjs");
15
- function makeStaticStyles(styles) {
16
- const getStyles = (0, _core.makeStaticStyles)(styles, _insertionFactory.insertionFactory);
17
- if (process.env.NODE_ENV === 'test') {
18
- // eslint-disable-next-line @typescript-eslint/no-empty-function
19
- return ()=>{};
20
- }
21
- return function useStaticStyles() {
22
- const renderer = (0, _RendererContext.useRenderer)();
23
- const options = {
24
- renderer
25
- };
26
- return getStyles(options);
27
- };
28
- } //# sourceMappingURL=makeStaticStyles.js.map
@@ -1,35 +0,0 @@
1
- 'use client';
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "makeStyles", {
7
- enumerable: true,
8
- get: function() {
9
- return makeStyles;
10
- }
11
- });
12
- const _core = require("@griffel/core");
13
- const _insertionFactory = require("./insertionFactory.cjs");
14
- const _RendererContext = require("./RendererContext.cjs");
15
- const _TextDirectionContext = require("./TextDirectionContext.cjs");
16
- const _isInsideComponent = require("./utils/isInsideComponent.cjs");
17
- function makeStyles(stylesBySlots) {
18
- const getStyles = (0, _core.makeStyles)(stylesBySlots, _insertionFactory.insertionFactory);
19
- if (process.env.NODE_ENV !== 'production') {
20
- if ((0, _isInsideComponent.isInsideComponent)()) {
21
- throw new Error([
22
- "makeStyles(): this function cannot be called in component's scope.",
23
- 'All makeStyles() calls should be top level i.e. in a root scope of a file.'
24
- ].join(' '));
25
- }
26
- }
27
- return function useClasses() {
28
- const dir = (0, _TextDirectionContext.useTextDirection)();
29
- const renderer = (0, _RendererContext.useRenderer)();
30
- return getStyles({
31
- dir,
32
- renderer
33
- });
34
- };
35
- } //# sourceMappingURL=makeStyles.js.map
@@ -1,50 +0,0 @@
1
- 'use client';
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "renderToStyleElements", {
7
- enumerable: true,
8
- get: function() {
9
- return renderToStyleElements;
10
- }
11
- });
12
- const _core = require("@griffel/core");
13
- const _react = require("react");
14
- function renderToStyleElements(renderer) {
15
- const stylesheets = Object.values(renderer.stylesheets)// first sort: bucket by order [data-priority]
16
- .sort((a, b)=>{
17
- return Number(a.elementAttributes['data-priority']) - Number(b.elementAttributes['data-priority']);
18
- })// second sort: bucket by bucket name
19
- .sort((a, b)=>{
20
- return _core.styleBucketOrdering.indexOf(a.bucketName) - _core.styleBucketOrdering.indexOf(b.bucketName);
21
- })// third sort: media queries
22
- .sort((a, b)=>{
23
- const mediaA = a.elementAttributes['media'];
24
- const mediaB = b.elementAttributes['media'];
25
- if (mediaA && mediaB) {
26
- return renderer.compareMediaQueries(mediaA, mediaB);
27
- }
28
- if (mediaA || mediaB) {
29
- return mediaA ? 1 : -1;
30
- }
31
- return 0;
32
- });
33
- return stylesheets.map((stylesheet)=>{
34
- const cssRules = stylesheet.cssRules();
35
- // don't want to create any empty style elements
36
- if (!cssRules.length) {
37
- return null;
38
- }
39
- return (0, _react.createElement)('style', {
40
- key: stylesheet.bucketName,
41
- // TODO: support "nonce"
42
- // ...renderer.styleNodeAttributes,
43
- ...stylesheet.elementAttributes,
44
- 'data-make-styles-rehydration': 'true',
45
- dangerouslySetInnerHTML: {
46
- __html: cssRules.join('')
47
- }
48
- });
49
- }).filter(Boolean);
50
- } //# sourceMappingURL=renderToStyleElements.js.map
@@ -1,20 +0,0 @@
1
- 'use client';
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "useInsertionEffect", {
7
- enumerable: true,
8
- get: function() {
9
- return useInsertionEffect;
10
- }
11
- });
12
- const _react = /*#__PURE__*/ _interop_require_default(require("react"));
13
- function _interop_require_default(obj) {
14
- return obj && obj.__esModule ? obj : {
15
- default: obj
16
- };
17
- }
18
- const useInsertionEffect = // @ts-expect-error Hack to make sure that `useInsertionEffect` will not cause bundling issues in older React versions
19
- // eslint-disable-next-line no-useless-concat
20
- _react.default['useInsertion' + 'Effect'] ? _react.default['useInsertion' + 'Effect'] : undefined; //# sourceMappingURL=useInsertionEffect.js.map
@@ -1,17 +0,0 @@
1
- /**
2
- * Verifies if an application can use DOM.
3
- *
4
- * @internal
5
- */ "use strict";
6
- Object.defineProperty(exports, "__esModule", {
7
- value: true
8
- });
9
- Object.defineProperty(exports, "canUseDOM", {
10
- enumerable: true,
11
- get: function() {
12
- return canUseDOM;
13
- }
14
- });
15
- function canUseDOM() {
16
- return typeof window !== 'undefined' && !!(window.document && window.document.createElement);
17
- } //# sourceMappingURL=canUseDOM.js.map
@@ -1,46 +0,0 @@
1
- 'use client';
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "isInsideComponent", {
7
- enumerable: true,
8
- get: function() {
9
- return isInsideComponent;
10
- }
11
- });
12
- const _react = /*#__PURE__*/ _interop_require_default(require("react"));
13
- function _interop_require_default(obj) {
14
- return obj && obj.__esModule ? obj : {
15
- default: obj
16
- };
17
- }
18
- function getDispatcher() {
19
- try {
20
- return _react.default[''.concat('__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE')].H;
21
- } catch {
22
- // React 19+
23
- }
24
- try {
25
- return _react.default[''.concat('__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')].ReactCurrentDispatcher.current;
26
- } catch {
27
- // React 18 and below
28
- }
29
- }
30
- function isInsideComponent() {
31
- // React 18 always logs errors if a dispatcher is not present:
32
- // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36
33
- try {
34
- const dispatcher = getDispatcher();
35
- // Before any React component was rendered "dispatcher" will be "null"
36
- if (dispatcher === null || dispatcher === undefined) {
37
- return false;
38
- }
39
- // A check with hooks call (i.e. call "React.useContext()" outside a component) will always produce errors, but
40
- // a call on the dispatcher wont
41
- dispatcher.useContext({});
42
- return true;
43
- } catch {
44
- return false;
45
- }
46
- } //# sourceMappingURL=isInsideComponent.js.map
@@ -1,24 +0,0 @@
1
- import type { GriffelRenderer } from '@griffel/core';
2
- import { type FC, type ReactNode } from 'react';
3
- export interface RendererProviderProps {
4
- /** An instance of Griffel renderer. */
5
- renderer: GriffelRenderer;
6
- /**
7
- * Document used to insert CSS variables to head
8
- */
9
- targetDocument?: Document;
10
- /**
11
- * Content wrapped by the RendererProvider
12
- */
13
- children: ReactNode;
14
- }
15
- /**
16
- * @public
17
- */
18
- export declare const RendererProvider: FC<RendererProviderProps>;
19
- /**
20
- * Returns an instance of current makeStyles() renderer.
21
- *
22
- * @private Exported as "useRenderer_unstable" use it on own risk. Can be changed or removed without a notice.
23
- */
24
- export declare function useRenderer(): GriffelRenderer;
@@ -1,31 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- import { createDOMRenderer, rehydrateRendererCache } from '@griffel/core';
4
- import { createContext, useContext, useMemo } from 'react';
5
- import { canUseDOM } from './utils/canUseDOM.js';
6
- /**
7
- * @private
8
- */
9
- const RendererContext = /*#__PURE__*/ createContext(/*#__PURE__*/ createDOMRenderer());
10
- /**
11
- * @public
12
- */
13
- export const RendererProvider = ({ children, renderer, targetDocument }) => {
14
- useMemo(() => {
15
- if (canUseDOM()) {
16
- // "rehydrateCache()" can't be called in effects as it needs to be called before any component will be rendered to
17
- // avoid double insertion of classes
18
- rehydrateRendererCache(renderer, targetDocument);
19
- }
20
- }, [renderer, targetDocument]);
21
- return _jsx(RendererContext.Provider, { value: renderer, children: children });
22
- };
23
- /**
24
- * Returns an instance of current makeStyles() renderer.
25
- *
26
- * @private Exported as "useRenderer_unstable" use it on own risk. Can be changed or removed without a notice.
27
- */
28
- export function useRenderer() {
29
- return useContext(RendererContext);
30
- }
31
- //# sourceMappingURL=RendererContext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"RendererContext.js","sourceRoot":"","sources":["../../../../packages/react/src/RendererContext.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAA2B,MAAM,OAAO,CAAC;AAEpF,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAiBjD;;GAEG;AACH,MAAM,eAAe,GAAG,aAAa,CAAC,aAAa,CAAkB,aAAa,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAExG;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA8B,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,EAAE;IACpG,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,SAAS,EAAE,EAAE,CAAC;YAChB,kHAAkH;YAClH,oCAAoC;YACpC,sBAAsB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACnD,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC;IAE/B,OAAO,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YAAG,QAAQ,GAA4B,CAAC;AAC1F,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,WAAW;IACzB,OAAO,UAAU,CAAC,eAAe,CAAC,CAAC;AACrC,CAAC"}
@@ -1,19 +0,0 @@
1
- import { type FC, type ReactNode } from 'react';
2
- export interface TextDirectionProviderProps {
3
- /** Indicates the directionality of the element's text. */
4
- dir: 'ltr' | 'rtl';
5
- /**
6
- * Content wrapped by the TextDirectionProvider.
7
- */
8
- children: ReactNode;
9
- }
10
- /**
11
- * @public
12
- */
13
- export declare const TextDirectionProvider: FC<TextDirectionProviderProps>;
14
- /**
15
- * Returns current directionality of the element's text.
16
- *
17
- * @private
18
- */
19
- export declare function useTextDirection(): "rtl" | "ltr";
@@ -1,22 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- import { createContext, useContext } from 'react';
4
- /**
5
- * @private
6
- */
7
- const TextDirectionContext = /*#__PURE__*/ createContext('ltr');
8
- /**
9
- * @public
10
- */
11
- export const TextDirectionProvider = ({ children, dir }) => {
12
- return _jsx(TextDirectionContext.Provider, { value: dir, children: children });
13
- };
14
- /**
15
- * Returns current directionality of the element's text.
16
- *
17
- * @private
18
- */
19
- export function useTextDirection() {
20
- return useContext(TextDirectionContext);
21
- }
22
- //# sourceMappingURL=TextDirectionContext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextDirectionContext.js","sourceRoot":"","sources":["../../../../packages/react/src/TextDirectionContext.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,aAAa,EAAE,UAAU,EAA2B,MAAM,OAAO,CAAC;AAY3E;;GAEG;AACH,MAAM,oBAAoB,GAAG,aAAa,CAAC,aAAa,CAAgB,KAAK,CAAC,CAAC;AAE/E;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAmC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE;IACzF,OAAO,KAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,YAAG,QAAQ,GAAiC,CAAC;AAC/F,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,gBAAgB;IAC9B,OAAO,UAAU,CAAC,oBAAoB,CAAC,CAAC;AAC1C,CAAC"}
package/src/__css.d.ts DELETED
@@ -1,7 +0,0 @@
1
- import type { CSSClassesMapBySlot } from '@griffel/core';
2
- /**
3
- * A version of makeStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
4
- *
5
- * @private
6
- */
7
- export declare function __css<Slots extends string>(classesMapBySlot: CSSClassesMapBySlot<Slots>): () => Record<Slots, string>;
package/src/__css.js DELETED
@@ -1,17 +0,0 @@
1
- 'use client';
2
- import { __css as vanillaCSS } from '@griffel/core';
3
- import { useTextDirection } from './TextDirectionContext.js';
4
- /**
5
- * A version of makeStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
6
- *
7
- * @private
8
- */
9
- // eslint-disable-next-line @typescript-eslint/naming-convention
10
- export function __css(classesMapBySlot) {
11
- const getStyles = vanillaCSS(classesMapBySlot);
12
- return function useClasses() {
13
- const dir = useTextDirection();
14
- return getStyles({ dir });
15
- };
16
- }
17
- //# sourceMappingURL=__css.js.map
package/src/__css.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"__css.js","sourceRoot":"","sources":["../../../../packages/react/src/__css.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AAGpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D;;;;GAIG;AACH,gEAAgE;AAChE,MAAM,UAAU,KAAK,CAAuB,gBAA4C;IACtF,MAAM,SAAS,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAE/C,OAAO,SAAS,UAAU;QACxB,MAAM,GAAG,GAAG,gBAAgB,EAAE,CAAC;QAE/B,OAAO,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IAC5B,CAAC,CAAC;AACJ,CAAC"}
@@ -1,6 +0,0 @@
1
- /**
2
- * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
3
- *
4
- * @private
5
- */
6
- export declare function __resetCSS(ltrClassName: string, rtlClassName: string | null): () => string;
package/src/__resetCSS.js DELETED
@@ -1,17 +0,0 @@
1
- 'use client';
2
- import { __resetCSS as vanillaResetCSS } from '@griffel/core';
3
- import { useTextDirection } from './TextDirectionContext.js';
4
- /**
5
- * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
6
- *
7
- * @private
8
- */
9
- // eslint-disable-next-line @typescript-eslint/naming-convention
10
- export function __resetCSS(ltrClassName, rtlClassName) {
11
- const getStyles = vanillaResetCSS(ltrClassName, rtlClassName);
12
- return function useClasses() {
13
- const dir = useTextDirection();
14
- return getStyles({ dir });
15
- };
16
- }
17
- //# sourceMappingURL=__resetCSS.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"__resetCSS.js","sourceRoot":"","sources":["../../../../packages/react/src/__resetCSS.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D;;;;GAIG;AACH,gEAAgE;AAChE,MAAM,UAAU,UAAU,CAAC,YAAoB,EAAE,YAA2B;IAC1E,MAAM,SAAS,GAAG,eAAe,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;IAE9D,OAAO,SAAS,UAAU;QACxB,MAAM,GAAG,GAAG,gBAAgB,EAAE,CAAC;QAE/B,OAAO,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IAC5B,CAAC,CAAC;AACJ,CAAC"}
@@ -1,7 +0,0 @@
1
- import type { CSSRulesByBucket } from '@griffel/core';
2
- /**
3
- * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms.
4
- *
5
- * @private
6
- */
7
- export declare function __resetStyles(ltrClassName: string, rtlClassName: string | null, cssRules: CSSRulesByBucket | string[]): () => string;
@@ -1,20 +0,0 @@
1
- 'use client';
2
- import { __resetStyles as vanillaResetStyles } from '@griffel/core';
3
- import { insertionFactory } from './insertionFactory.js';
4
- import { useRenderer } from './RendererContext.js';
5
- import { useTextDirection } from './TextDirectionContext.js';
6
- /**
7
- * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms.
8
- *
9
- * @private
10
- */
11
- // eslint-disable-next-line @typescript-eslint/naming-convention
12
- export function __resetStyles(ltrClassName, rtlClassName, cssRules) {
13
- const getStyles = vanillaResetStyles(ltrClassName, rtlClassName, cssRules, insertionFactory);
14
- return function useClasses() {
15
- const dir = useTextDirection();
16
- const renderer = useRenderer();
17
- return getStyles({ dir, renderer });
18
- };
19
- }
20
- //# sourceMappingURL=__resetStyles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"__resetStyles.js","sourceRoot":"","sources":["../../../../packages/react/src/__resetStyles.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,aAAa,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D;;;;GAIG;AACH,gEAAgE;AAChE,MAAM,UAAU,aAAa,CAC3B,YAAoB,EACpB,YAA2B,EAC3B,QAAqC;IAErC,MAAM,SAAS,GAAG,kBAAkB,CAAC,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAC;IAE7F,OAAO,SAAS,UAAU;QACxB,MAAM,GAAG,GAAG,gBAAgB,EAAE,CAAC;QAC/B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;QAE/B,OAAO,SAAS,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC;IACtC,CAAC,CAAC;AACJ,CAAC"}
@@ -1,6 +0,0 @@
1
- /**
2
- * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
3
- *
4
- * @private
5
- */
6
- export declare function __staticCSS(): () => void;
@@ -1 +0,0 @@
1
- {"version":3,"file":"__staticCSS.js","sourceRoot":"","sources":["../../../../packages/react/src/__staticCSS.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,WAAW,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEhE;;;;GAIG;AACH,gEAAgE;AAChE,MAAM,UAAU,WAAW;IACzB,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,OAAO,SAAS,eAAe;QAC7B,OAAO,SAAS,EAAE,CAAC;IACrB,CAAC,CAAC;AACJ,CAAC"}
@@ -1,7 +0,0 @@
1
- import type { CSSRulesByBucket } from '@griffel/core';
2
- /**
3
- * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms.
4
- *
5
- * @private
6
- */
7
- export declare function __staticStyles(cssRules: CSSRulesByBucket): () => void;
@@ -1,18 +0,0 @@
1
- 'use client';
2
- import { __staticStyles as vanillaStaticStyles } from '@griffel/core';
3
- import { insertionFactory } from './insertionFactory.js';
4
- import { useRenderer } from './RendererContext.js';
5
- /**
6
- * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms.
7
- *
8
- * @private
9
- */
10
- // eslint-disable-next-line @typescript-eslint/naming-convention
11
- export function __staticStyles(cssRules) {
12
- const getStyles = vanillaStaticStyles(cssRules, insertionFactory);
13
- return function useStaticStyles() {
14
- const renderer = useRenderer();
15
- return getStyles({ renderer });
16
- };
17
- }
18
- //# sourceMappingURL=__staticStyles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"__staticStyles.js","sourceRoot":"","sources":["../../../../packages/react/src/__staticStyles.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,cAAc,IAAI,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAGtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD;;;;GAIG;AACH,gEAAgE;AAChE,MAAM,UAAU,cAAc,CAAC,QAA0B;IACvD,MAAM,SAAS,GAAG,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;IAElE,OAAO,SAAS,eAAe;QAC7B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;QAE/B,OAAO,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;IACjC,CAAC,CAAC;AACJ,CAAC"}
package/src/__styles.d.ts DELETED
@@ -1,7 +0,0 @@
1
- import type { CSSClassesMapBySlot, CSSRulesByBucket } from '@griffel/core';
2
- /**
3
- * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.
4
- *
5
- * @private
6
- */
7
- export declare function __styles<Slots extends string>(classesMapBySlot: CSSClassesMapBySlot<Slots>, cssRules: CSSRulesByBucket): () => Record<Slots, string>;
package/src/__styles.js DELETED
@@ -1,20 +0,0 @@
1
- 'use client';
2
- import { __styles as vanillaStyles } from '@griffel/core';
3
- import { insertionFactory } from './insertionFactory.js';
4
- import { useRenderer } from './RendererContext.js';
5
- import { useTextDirection } from './TextDirectionContext.js';
6
- /**
7
- * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.
8
- *
9
- * @private
10
- */
11
- // eslint-disable-next-line @typescript-eslint/naming-convention
12
- export function __styles(classesMapBySlot, cssRules) {
13
- const getStyles = vanillaStyles(classesMapBySlot, cssRules, insertionFactory);
14
- return function useClasses() {
15
- const dir = useTextDirection();
16
- const renderer = useRenderer();
17
- return getStyles({ dir, renderer });
18
- };
19
- }
20
- //# sourceMappingURL=__styles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"__styles.js","sourceRoot":"","sources":["../../../../packages/react/src/__styles.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,eAAe,CAAC;AAG1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D;;;;GAIG;AACH,gEAAgE;AAChE,MAAM,UAAU,QAAQ,CACtB,gBAA4C,EAC5C,QAA0B;IAE1B,MAAM,SAAS,GAAG,aAAa,CAAC,gBAAgB,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAC;IAE9E,OAAO,SAAS,UAAU;QACxB,MAAM,GAAG,GAAG,gBAAgB,EAAE,CAAC;QAC/B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;QAE/B,OAAO,SAAS,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC;IACtC,CAAC,CAAC;AACJ,CAAC"}
package/src/index.js DELETED
@@ -1,16 +0,0 @@
1
- 'use client';
2
- export { RESET, shorthands, mergeClasses, createDOMRenderer } from '@griffel/core';
3
- export { makeStyles } from './makeStyles.js';
4
- export { makeResetStyles } from './makeResetStyles.js';
5
- export { makeStaticStyles } from './makeStaticStyles.js';
6
- export { renderToStyleElements } from './renderToStyleElements.js';
7
- export { RendererProvider, useRenderer as useRenderer_unstable } from './RendererContext.js';
8
- export { TextDirectionProvider } from './TextDirectionContext.js';
9
- // Private exports, are used by build time transforms
10
- export { __css } from './__css.js';
11
- export { __styles } from './__styles.js';
12
- export { __resetCSS } from './__resetCSS.js';
13
- export { __resetStyles } from './__resetStyles.js';
14
- export { __staticCSS } from './__staticCSS.js';
15
- export { __staticStyles } from './__staticStyles.js';
16
- //# sourceMappingURL=index.js.map
package/src/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/react/src/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGnF,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAEnE,OAAO,EAAE,gBAAgB,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC7F,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAElE,qDAAqD;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}
@@ -1,2 +0,0 @@
1
- import type { GriffelInsertionFactory } from '@griffel/core';
2
- export declare const insertionFactory: GriffelInsertionFactory;
@@ -1,21 +0,0 @@
1
- 'use client';
2
- import { canUseDOM } from './utils/canUseDOM.js';
3
- import { useInsertionEffect } from './useInsertionEffect.js';
4
- export const insertionFactory = () => {
5
- const insertionCache = {};
6
- return function insert(renderer, cssRules) {
7
- // Even if `useInsertionEffect` is available, we can use it on a client only as it will not be executed in SSR
8
- if (useInsertionEffect && canUseDOM()) {
9
- // eslint-disable-next-line react-hooks/rules-of-hooks
10
- useInsertionEffect(() => {
11
- renderer.insertCSSRules(cssRules);
12
- }, [renderer, cssRules]);
13
- return;
14
- }
15
- if (insertionCache[renderer.id] === undefined) {
16
- renderer.insertCSSRules(cssRules);
17
- insertionCache[renderer.id] = true;
18
- }
19
- };
20
- };
21
- //# sourceMappingURL=insertionFactory.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"insertionFactory.js","sourceRoot":"","sources":["../../../../packages/react/src/insertionFactory.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAIb,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,CAAC,MAAM,gBAAgB,GAA4B,GAAG,EAAE;IAC5D,MAAM,cAAc,GAA4B,EAAE,CAAC;IAEnD,OAAO,SAAS,MAAM,CAAC,QAAyB,EAAE,QAA0B;QAC1E,8GAA8G;QAC9G,IAAI,kBAAkB,IAAI,SAAS,EAAE,EAAE,CAAC;YACtC,sDAAsD;YACtD,kBAAkB,CAAC,GAAG,EAAE;gBACtB,QAAQ,CAAC,cAAc,CAAC,QAAS,CAAC,CAAC;YACrC,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;YAEzB,OAAO;QACT,CAAC;QAED,IAAI,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,SAAS,EAAE,CAAC;YAC9C,QAAQ,CAAC,cAAc,CAAC,QAAS,CAAC,CAAC;YACnC,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;QACrC,CAAC;IACH,CAAC,CAAC;AACJ,CAAC,CAAC"}
@@ -1,2 +0,0 @@
1
- import type { GriffelResetStyle } from '@griffel/core';
2
- export declare function makeResetStyles(styles: GriffelResetStyle): () => string;
@@ -1,23 +0,0 @@
1
- 'use client';
2
- import { makeResetStyles as vanillaMakeResetStyles } from '@griffel/core';
3
- import { insertionFactory } from './insertionFactory.js';
4
- import { useRenderer } from './RendererContext.js';
5
- import { useTextDirection } from './TextDirectionContext.js';
6
- import { isInsideComponent } from './utils/isInsideComponent.js';
7
- export function makeResetStyles(styles) {
8
- const getStyles = vanillaMakeResetStyles(styles, insertionFactory);
9
- if (process.env.NODE_ENV !== 'production') {
10
- if (isInsideComponent()) {
11
- throw new Error([
12
- "makeResetStyles(): this function cannot be called in component's scope.",
13
- 'All makeResetStyles() calls should be top level i.e. in a root scope of a file.',
14
- ].join(' '));
15
- }
16
- }
17
- return function useClassName() {
18
- const dir = useTextDirection();
19
- const renderer = useRenderer();
20
- return getStyles({ dir, renderer });
21
- };
22
- }
23
- //# sourceMappingURL=makeResetStyles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"makeResetStyles.js","sourceRoot":"","sources":["../../../../packages/react/src/makeResetStyles.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,eAAe,IAAI,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAG1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEjE,MAAM,UAAU,eAAe,CAAC,MAAyB;IACvD,MAAM,SAAS,GAAG,sBAAsB,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAEnE,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;QAC1C,IAAI,iBAAiB,EAAE,EAAE,CAAC;YACxB,MAAM,IAAI,KAAK,CACb;gBACE,yEAAyE;gBACzE,iFAAiF;aAClF,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;QACJ,CAAC;IACH,CAAC;IAED,OAAO,SAAS,YAAY;QAC1B,MAAM,GAAG,GAAG,gBAAgB,EAAE,CAAC;QAC/B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;QAE/B,OAAO,SAAS,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC;IACtC,CAAC,CAAC;AACJ,CAAC"}
@@ -1,2 +0,0 @@
1
- import type { GriffelStaticStyles } from '@griffel/core';
2
- export declare function makeStaticStyles(styles: GriffelStaticStyles | GriffelStaticStyles[]): () => void;
@@ -1,17 +0,0 @@
1
- 'use client';
2
- import { makeStaticStyles as vanillaMakeStaticStyles } from '@griffel/core';
3
- import { insertionFactory } from './insertionFactory.js';
4
- import { useRenderer } from './RendererContext.js';
5
- export function makeStaticStyles(styles) {
6
- const getStyles = vanillaMakeStaticStyles(styles, insertionFactory);
7
- if (process.env.NODE_ENV === 'test') {
8
- // eslint-disable-next-line @typescript-eslint/no-empty-function
9
- return () => { };
10
- }
11
- return function useStaticStyles() {
12
- const renderer = useRenderer();
13
- const options = { renderer };
14
- return getStyles(options);
15
- };
16
- }
17
- //# sourceMappingURL=makeStaticStyles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"makeStaticStyles.js","sourceRoot":"","sources":["../../../../packages/react/src/makeStaticStyles.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,gBAAgB,IAAI,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAG5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,UAAU,gBAAgB,CAAC,MAAmD;IAClF,MAAM,SAAS,GAAG,uBAAuB,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAEpE,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,MAAM,EAAE,CAAC;QACpC,gEAAgE;QAChE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IAClB,CAAC;IAED,OAAO,SAAS,eAAe;QAC7B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;QAC/B,MAAM,OAAO,GAA4B,EAAE,QAAQ,EAAE,CAAC;QAEtD,OAAO,SAAS,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC,CAAC;AACJ,CAAC"}
@@ -1,2 +0,0 @@
1
- import type { GriffelStyle } from '@griffel/core';
2
- export declare function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>): () => Record<Slots, string>;
package/src/makeStyles.js DELETED
@@ -1,23 +0,0 @@
1
- 'use client';
2
- import { makeStyles as vanillaMakeStyles } from '@griffel/core';
3
- import { insertionFactory } from './insertionFactory.js';
4
- import { useRenderer } from './RendererContext.js';
5
- import { useTextDirection } from './TextDirectionContext.js';
6
- import { isInsideComponent } from './utils/isInsideComponent.js';
7
- export function makeStyles(stylesBySlots) {
8
- const getStyles = vanillaMakeStyles(stylesBySlots, insertionFactory);
9
- if (process.env.NODE_ENV !== 'production') {
10
- if (isInsideComponent()) {
11
- throw new Error([
12
- "makeStyles(): this function cannot be called in component's scope.",
13
- 'All makeStyles() calls should be top level i.e. in a root scope of a file.',
14
- ].join(' '));
15
- }
16
- }
17
- return function useClasses() {
18
- const dir = useTextDirection();
19
- const renderer = useRenderer();
20
- return getStyles({ dir, renderer });
21
- };
22
- }
23
- //# sourceMappingURL=makeStyles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"makeStyles.js","sourceRoot":"","sources":["../../../../packages/react/src/makeStyles.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEjE,MAAM,UAAU,UAAU,CAAgC,aAA0C;IAClG,MAAM,SAAS,GAAG,iBAAiB,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC;IAErE,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;QAC1C,IAAI,iBAAiB,EAAE,EAAE,CAAC;YACxB,MAAM,IAAI,KAAK,CACb;gBACE,oEAAoE;gBACpE,4EAA4E;aAC7E,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;QACJ,CAAC;IACH,CAAC;IAED,OAAO,SAAS,UAAU;QACxB,MAAM,GAAG,GAAG,gBAAgB,EAAE,CAAC;QAC/B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;QAE/B,OAAO,SAAS,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC;IACtC,CAAC,CAAC;AACJ,CAAC"}