@griffel/react 1.7.2 → 1.7.3

package/src/stories/FallbackValues.stories.tsx

@@ -0,0 +1,50 @@
+import type { StoryFn } from '@storybook/react-vite';
+
+import { makeStyles, shorthands, TextDirectionProvider } from '../';
+
+const useStyles = makeStyles({
+  shouldFallbackToRed: {
+    color: ['red', 'invalid'],
+    ...shorthands.border(['1px'], 'solid', ['red', 'invalid']),
+    ...shorthands.borderRight('40px', 'solid', ['green', 'invalid']),
+    borderTopStyle: ['hidden', 'dashed'],
+  },
+  shouldBeBlue: {
+    color: ['red', 'blue'],
+    ...shorthands.border('1px', 'solid', ['red', 'blue']),
+    ...shorthands.borderRight('40px', 'solid', ['green', 'grey']),
+    borderRightWidth: '100px',
+  },
+});
+
+const FallbackTest = ({ isRtl = false }: { isRtl?: boolean }) => {
+  const classes = useStyles();
+  return (
+    <>
+      <p className={classes.shouldBeBlue}>
+        Colour and border should be blue, {isRtl ? 'left' : 'right'} wide border grey.
+      </p>
+      <p className={classes.shouldFallbackToRed}>
+        Colour and border should fallback to red, {isRtl ? 'left' : 'right'} wide border to green.
+      </p>
+    </>
+  );
+};
+
+export const FallbackValues: StoryFn = () => {
+  return (
+    <div>
+      <FallbackTest />
+      <TextDirectionProvider dir="rtl">
+        <div dir="rtl">
+          <h2>RTL</h2>
+          <FallbackTest isRtl />
+        </div>
+      </TextDirectionProvider>
+    </div>
+  );
+};
+
+export default {
+  title: 'Fallback values',
+};

package/src/stories/makeStyles.stories.tsx

@@ -0,0 +1,17 @@
+import { makeStyles } from '../../src/index.js';
+
+const useStyles = makeStyles({
+  root: {
+    color: 'deeppink',
+  },
+});
+
+export const MakeStyles = () => {
+  const classes = useStyles();
+
+  return <div className={classes.root}>no stories yet</div>;
+};
+
+export default {
+  title: 'MakeStyles',
+};

package/src/useInsertionEffect.ts

@@ -0,0 +1,11 @@
+'use client';
+
+import React from 'react';
+
+/**
+ * @internal
+ */
+export const useInsertionEffect: typeof React.useInsertionEffect | undefined =
+  // @ts-expect-error Hack to make sure that `useInsertionEffect` will not cause bundling issues in older React versions
+  // eslint-disable-next-line no-useless-concat
+  React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : undefined;

package/src/utils/canUseDOM-node.test.ts

@@ -0,0 +1,14 @@
+/*
+ * @vitest-environment node
+ */
+
+// 👆 this is intentionally to test in SSR like environment
+
+import { describe, it, expect } from 'vitest';
+import { canUseDOM } from './canUseDOM.js';
+
+describe('canUseDOM (node)', () => {
+  it('returns "false"', () => {
+    expect(canUseDOM()).toBe(false);
+  });
+});

package/src/utils/canUseDOM.test.tsx

@@ -0,0 +1,8 @@
+import { describe, it, expect } from 'vitest';
+import { canUseDOM } from './canUseDOM.js';
+
+describe('canUseDOM', () => {
+  it('returns "true"', () => {
+    expect(canUseDOM()).toBe(true);
+  });
+});

package/src/utils/canUseDOM.ts

@@ -0,0 +1,8 @@
+/**
+ * Verifies if an application can use DOM.
+ *
+ * @internal
+ */
+export function canUseDOM(): boolean {
+  return typeof window !== 'undefined' && !!(window.document && window.document.createElement);
+}

package/src/utils/isInsideComponent.ts

@@ -0,0 +1,41 @@
+'use client';
+
+import React from 'react';
+
+function getDispatcher() {
+  try {
+    return (React as any)[''.concat('__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE')].H;
+  } catch {
+    // React 19+
+  }
+
+  try {
+    return (React as any)[''.concat('__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')].ReactCurrentDispatcher
+      .current;
+  } catch {
+    // React 18 and below
+  }
+}
+
+/**
+ * @internal
+ */
+export function isInsideComponent() {
+  // React 18 always logs errors if a dispatcher is not present:
+  // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36
+  try {
+    const dispatcher = getDispatcher();
+
+    // Before any React component was rendered "dispatcher" will be "null"
+    if (dispatcher === null || dispatcher === undefined) {
+      return false;
+    }
+
+    // A check with hooks call (i.e. call "React.useContext()" outside a component) will always produce errors, but
+    // a call on the dispatcher wont
+    dispatcher.useContext({});
+    return true;
+  } catch {
+    return false;
+  }
+}

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.storybook.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,28 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "stripInternal": true,
+    "types": ["node", "environment"]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "**/*.stories.ts",
+    "**/*.stories.js",
+    "**/*.stories.jsx",
+    "**/*.stories.tsx",
+    "jest.config.ts",
+    "vitest.config.ts"
+  ],
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,21 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "allowSyntheticDefaultImports": true,
+    "typeRoots": ["../../node_modules", "../../node_modules/@types", "../../typings"],
+    "types": ["vitest/importMeta", "vite/client", "node", "vitest", "environment"]
+  },
+  "include": [
+    "vitest.config.ts",
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.spec.js",
+    "**/*.test.jsx",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}

package/tsconfig.storybook.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "noEmit": true,
+    "outDir": ""
+  },
+  "exclude": ["src/**/*.spec.ts", "src/**/*.spec.js", "src/**/*.spec.tsx", "src/**/*.spec.jsx", "jest.config.ts"],
+  "include": ["src/**/*", ".storybook/*.js"]
+}

package/vitest.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vitest/config';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/packages/react',
+  plugins: [nxViteTsPaths()],
+  define: {
+    IS_REACT_ACT_ENVIRONMENT: true,
+  },
+  test: {
+    watch: false,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/packages/react',
+      provider: 'v8',
+    },
+  },
+});

package/LICENSE.md

@@ -1,21 +0,0 @@
-    MIT License
-
-    Copyright (c) Microsoft Corporation.
-
-    Permission is hereby granted, free of charge, to any person obtaining a copy
-    of this software and associated documentation files (the "Software"), to deal
-    in the Software without restriction, including without limitation the rights
-    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-    copies of the Software, and to permit persons to whom the Software is
-    furnished to do so, subject to the following conditions:
-
-    The above copyright notice and this permission notice shall be included in all
-    copies or substantial portions of the Software.
-
-    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-    SOFTWARE

package/lib/RendererContext.cjs

@@ -1,45 +0,0 @@
-'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get RendererProvider () {
-        return RendererProvider;
-    },
-    get useRenderer () {
-        return useRenderer;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _core = require("@griffel/core");
-const _react = require("react");
-const _canUseDOM = require("./utils/canUseDOM.cjs");
-/**
- * @private
- */ const RendererContext = /*#__PURE__*/ (0, _react.createContext)(/*#__PURE__*/ (0, _core.createDOMRenderer)());
-const RendererProvider = ({ children, renderer, targetDocument })=>{
-    (0, _react.useMemo)(()=>{
-        if ((0, _canUseDOM.canUseDOM)()) {
-            // "rehydrateCache()" can't be called in effects as it needs to be called before any component will be rendered to
-            // avoid double insertion of classes
-            (0, _core.rehydrateRendererCache)(renderer, targetDocument);
-        }
-    }, [
-        renderer,
-        targetDocument
-    ]);
-    return (0, _jsxruntime.jsx)(RendererContext.Provider, {
-        value: renderer,
-        children: children
-    });
-};
-function useRenderer() {
-    return (0, _react.useContext)(RendererContext);
-} //# sourceMappingURL=RendererContext.js.map

package/lib/TextDirectionContext.cjs

@@ -1,33 +0,0 @@
-'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get TextDirectionProvider () {
-        return TextDirectionProvider;
-    },
-    get useTextDirection () {
-        return useTextDirection;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-/**
- * @private
- */ const TextDirectionContext = /*#__PURE__*/ (0, _react.createContext)('ltr');
-const TextDirectionProvider = ({ children, dir })=>{
-    return (0, _jsxruntime.jsx)(TextDirectionContext.Provider, {
-        value: dir,
-        children: children
-    });
-};
-function useTextDirection() {
-    return (0, _react.useContext)(TextDirectionContext);
-} //# sourceMappingURL=TextDirectionContext.js.map

package/lib/__css.cjs

@@ -1,22 +0,0 @@
-'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "__css", {
-    enumerable: true,
-    get: function() {
-        return __css;
-    }
-});
-const _core = require("@griffel/core");
-const _TextDirectionContext = require("./TextDirectionContext.cjs");
-function __css(classesMapBySlot) {
-    const getStyles = (0, _core.__css)(classesMapBySlot);
-    return function useClasses() {
-        const dir = (0, _TextDirectionContext.useTextDirection)();
-        return getStyles({
-            dir
-        });
-    };
-} //# sourceMappingURL=__css.js.map

package/lib/__resetCSS.cjs

@@ -1,22 +0,0 @@
-'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "__resetCSS", {
-    enumerable: true,
-    get: function() {
-        return __resetCSS;
-    }
-});
-const _core = require("@griffel/core");
-const _TextDirectionContext = require("./TextDirectionContext.cjs");
-function __resetCSS(ltrClassName, rtlClassName) {
-    const getStyles = (0, _core.__resetCSS)(ltrClassName, rtlClassName);
-    return function useClasses() {
-        const dir = (0, _TextDirectionContext.useTextDirection)();
-        return getStyles({
-            dir
-        });
-    };
-} //# sourceMappingURL=__resetCSS.js.map

package/lib/__resetStyles.cjs

@@ -1,26 +0,0 @@
-'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "__resetStyles", {
-    enumerable: true,
-    get: function() {
-        return __resetStyles;
-    }
-});
-const _core = require("@griffel/core");
-const _insertionFactory = require("./insertionFactory.cjs");
-const _RendererContext = require("./RendererContext.cjs");
-const _TextDirectionContext = require("./TextDirectionContext.cjs");
-function __resetStyles(ltrClassName, rtlClassName, cssRules) {
-    const getStyles = (0, _core.__resetStyles)(ltrClassName, rtlClassName, cssRules, _insertionFactory.insertionFactory);
-    return function useClasses() {
-        const dir = (0, _TextDirectionContext.useTextDirection)();
-        const renderer = (0, _RendererContext.useRenderer)();
-        return getStyles({
-            dir,
-            renderer
-        });
-    };
-} //# sourceMappingURL=__resetStyles.js.map

package/lib/__staticCSS.cjs

@@ -1,18 +0,0 @@
-'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "__staticCSS", {
-    enumerable: true,
-    get: function() {
-        return __staticCSS;
-    }
-});
-const _core = require("@griffel/core");
-function __staticCSS() {
-    const getStyles = (0, _core.__staticCSS)();
-    return function useStaticStyles() {
-        return getStyles();
-    };
-} //# sourceMappingURL=__staticCSS.js.map

package/lib/__staticStyles.cjs

@@ -1,23 +0,0 @@
-'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "__staticStyles", {
-    enumerable: true,
-    get: function() {
-        return __staticStyles;
-    }
-});
-const _core = require("@griffel/core");
-const _insertionFactory = require("./insertionFactory.cjs");
-const _RendererContext = require("./RendererContext.cjs");
-function __staticStyles(cssRules) {
-    const getStyles = (0, _core.__staticStyles)(cssRules, _insertionFactory.insertionFactory);
-    return function useStaticStyles() {
-        const renderer = (0, _RendererContext.useRenderer)();
-        return getStyles({
-            renderer
-        });
-    };
-} //# sourceMappingURL=__staticStyles.js.map

package/lib/__styles.cjs

@@ -1,26 +0,0 @@
-'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "__styles", {
-    enumerable: true,
-    get: function() {
-        return __styles;
-    }
-});
-const _core = require("@griffel/core");
-const _insertionFactory = require("./insertionFactory.cjs");
-const _RendererContext = require("./RendererContext.cjs");
-const _TextDirectionContext = require("./TextDirectionContext.cjs");
-function __styles(classesMapBySlot, cssRules) {
-    const getStyles = (0, _core.__styles)(classesMapBySlot, cssRules, _insertionFactory.insertionFactory);
-    return function useClasses() {
-        const dir = (0, _TextDirectionContext.useTextDirection)();
-        const renderer = (0, _RendererContext.useRenderer)();
-        return getStyles({
-            dir,
-            renderer
-        });
-    };
-} //# sourceMappingURL=__styles.js.map

package/lib/index.cjs

@@ -1,78 +0,0 @@
-'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get RESET () {
-        return _core.RESET;
-    },
-    get RendererProvider () {
-        return _RendererContext.RendererProvider;
-    },
-    get TextDirectionProvider () {
-        return _TextDirectionContext.TextDirectionProvider;
-    },
-    get __css () {
-        return __css.__css;
-    },
-    get __resetCSS () {
-        return __resetCSS.__resetCSS;
-    },
-    get __resetStyles () {
-        return __resetStyles.__resetStyles;
-    },
-    get __staticCSS () {
-        return __staticCSS.__staticCSS;
-    },
-    get __staticStyles () {
-        return __staticStyles.__staticStyles;
-    },
-    get __styles () {
-        return __styles.__styles;
-    },
-    get createDOMRenderer () {
-        return _core.createDOMRenderer;
-    },
-    get makeResetStyles () {
-        return _makeResetStyles.makeResetStyles;
-    },
-    get makeStaticStyles () {
-        return _makeStaticStyles.makeStaticStyles;
-    },
-    get makeStyles () {
-        return _makeStyles.makeStyles;
-    },
-    get mergeClasses () {
-        return _core.mergeClasses;
-    },
-    get renderToStyleElements () {
-        return _renderToStyleElements.renderToStyleElements;
-    },
-    get shorthands () {
-        return _core.shorthands;
-    },
-    get useRenderer_unstable () {
-        return _RendererContext.useRenderer;
-    }
-});
-const _core = require("@griffel/core");
-const _makeStyles = require("./makeStyles.cjs");
-const _makeResetStyles = require("./makeResetStyles.cjs");
-const _makeStaticStyles = require("./makeStaticStyles.cjs");
-const _renderToStyleElements = require("./renderToStyleElements.cjs");
-const _RendererContext = require("./RendererContext.cjs");
-const _TextDirectionContext = require("./TextDirectionContext.cjs");
-const __css = require("./__css.cjs");
-const __styles = require("./__styles.cjs");
-const __resetCSS = require("./__resetCSS.cjs");
-const __resetStyles = require("./__resetStyles.cjs");
-const __staticCSS = require("./__staticCSS.cjs");
-const __staticStyles = require("./__staticStyles.cjs");
- //# sourceMappingURL=index.js.map

package/lib/insertionFactory.cjs

@@ -1,33 +0,0 @@
-'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "insertionFactory", {
-    enumerable: true,
-    get: function() {
-        return insertionFactory;
-    }
-});
-const _canUseDOM = require("./utils/canUseDOM.cjs");
-const _useInsertionEffect = require("./useInsertionEffect.cjs");
-const insertionFactory = ()=>{
-    const insertionCache = {};
-    return function insert(renderer, cssRules) {
-        // Even if `useInsertionEffect` is available, we can use it on a client only as it will not be executed in SSR
-        if (_useInsertionEffect.useInsertionEffect && (0, _canUseDOM.canUseDOM)()) {
-            // eslint-disable-next-line react-hooks/rules-of-hooks
-            (0, _useInsertionEffect.useInsertionEffect)(()=>{
-                renderer.insertCSSRules(cssRules);
-            }, [
-                renderer,
-                cssRules
-            ]);
-            return;
-        }
-        if (insertionCache[renderer.id] === undefined) {
-            renderer.insertCSSRules(cssRules);
-            insertionCache[renderer.id] = true;
-        }
-    };
-}; //# sourceMappingURL=insertionFactory.js.map

package/lib/makeResetStyles.cjs

@@ -1,35 +0,0 @@
-'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "makeResetStyles", {
-    enumerable: true,
-    get: function() {
-        return makeResetStyles;
-    }
-});
-const _core = require("@griffel/core");
-const _insertionFactory = require("./insertionFactory.cjs");
-const _RendererContext = require("./RendererContext.cjs");
-const _TextDirectionContext = require("./TextDirectionContext.cjs");
-const _isInsideComponent = require("./utils/isInsideComponent.cjs");
-function makeResetStyles(styles) {
-    const getStyles = (0, _core.makeResetStyles)(styles, _insertionFactory.insertionFactory);
-    if (process.env.NODE_ENV !== 'production') {
-        if ((0, _isInsideComponent.isInsideComponent)()) {
-            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(' '));
-        }
-    }
-    return function useClassName() {
-        const dir = (0, _TextDirectionContext.useTextDirection)();
-        const renderer = (0, _RendererContext.useRenderer)();
-        return getStyles({
-            dir,
-            renderer
-        });
-    };
-} //# sourceMappingURL=makeResetStyles.js.map