Mail

frontend/node_modules/goober/global/src/__tests__/__snapshots__/integration.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`createGlobalStyles regular 1`] = `" html, body{background:dodgerblue;}"`;
+
+exports[`createGlobalStyles regular 2`] = `"<div></div>"`;
+
+exports[`createGlobalStyles with theme 1`] = `"html, body{margin:0;background:blue;}"`;
+
+exports[`createGlobalStyles with theme 2`] = `"<div></div>"`;

frontend/node_modules/goober/global/src/__tests__/global.test.js

@@ -0,0 +1,22 @@
+import { glob, createGlobalStyles } from '../index';
+import { css, setup } from 'goober';
+
+jest.mock('goober', () => ({
+    css: jest.fn().mockReturnValue('css()')
+}));
+
+describe('global', () => {
+    beforeEach(() => {
+        css.mockClear();
+    });
+
+    it('type', () => {
+        expect(typeof glob).toEqual('function');
+        expect(typeof createGlobalStyles).toEqual('function');
+    });
+
+    it('glob', () => {
+        glob`a:b`;
+        expect(css).toBeCalledWith(['a:b']);
+    });
+});

frontend/node_modules/goober/global/src/__tests__/integration.test.js

@@ -0,0 +1,56 @@
+import { h, createContext, render } from 'preact';
+import { useContext } from 'preact/hooks';
+import { setup, extractCss } from 'goober';
+import { createGlobalStyles } from '../index';
+
+describe('createGlobalStyles', () => {
+    it('regular', () => {
+        setup(h);
+
+        const target = document.createElement('div');
+
+        const GlobalStyle = createGlobalStyles`
+            html, body {
+                background: dodgerblue;
+            }
+        `;
+
+        render(
+            <div>
+                <GlobalStyle />
+            </div>,
+            target
+        );
+
+        expect(extractCss()).toMatchSnapshot();
+        expect(target.innerHTML).toMatchSnapshot();
+    });
+
+    it('with theme', () => {
+        const ThemeContext = createContext();
+        const useTheme = () => useContext(ThemeContext);
+
+        setup(h, null, useTheme);
+
+        const target = document.createElement('div');
+
+        const GlobalStyle = createGlobalStyles`
+            html, body {
+                margin: 0;
+                background: ${(props) => props.theme.color};
+            }
+        `;
+
+        render(
+            <ThemeContext.Provider value={{ color: 'blue' }}>
+                <div>
+                    <GlobalStyle />
+                </div>
+            </ThemeContext.Provider>,
+            target
+        );
+
+        expect(extractCss()).toMatchSnapshot();
+        expect(target.innerHTML).toMatchSnapshot();
+    });
+});

frontend/node_modules/goober/global/src/index.js

@@ -0,0 +1,26 @@
+import { css, styled } from 'goober';
+
+/**
+ * CSS Global function to declare global styles
+ * @type {Function}
+ */
+export let glob = css.bind({ g: 1 });
+
+/**
+ * Creates the global styles component to be used as part of your tree.
+ * @returns {Function}
+ */
+export function createGlobalStyles() {
+    const fn = styled.call({ g: 1 }, 'div').apply(null, arguments);
+
+    /**
+     * This is the actual component that gets rendered.
+     */
+    return function GlobalStyles(props) {
+        // Call the above styled.
+        fn(props);
+
+        // Returns a hole.
+        return null;
+    };
+}