simplestyle-js 3.4.0 → 3.4.2-alpha.0

package/src/util/deepEqual.ts

@@ -1,20 +0,0 @@
-export function deepEqual<
-  O1 extends Record<string | number | symbol, any>,
-  O2 extends Record<string | number | symbol, any>,
->(o1: O1, o2: O2): boolean {
-  // We'll sort the keys, just in case the user kept things the same but the object is all wonky, order-wise
-  const o1Keys = Object.keys(o1).sort();
-  const o2Keys = Object.keys(o2).sort();
-  if (o1Keys.length !== o2Keys.length) return false;
-  if (o1Keys.some((key, i) => o2Keys[i] !== key)) return false;
-  // Okay, the keys SHOULD be the same
-  // so we need to test their values, recursively, to verify equality
-  return o1Keys.reduce<boolean>((prev, key) => {
-    if (!prev) return prev; // we've already failed equality checks here
-    if (!(key in o2)) return false;
-    if (typeof o1[key] !== 'object') {
-      return o1[key] === o2[key];
-    }
-    return deepEqual(o1[key], o2[key]);
-  }, true);
-}

package/test/createStyles.spec.ts

@@ -1,330 +0,0 @@
-import { beforeEach, describe, expect, it } from 'vitest';
-
-import { createStyles, rawStyles, setSeed } from '../src/index.js';
-import { SimpleStyleRules } from '../src/types.js';
-
-describe('createStyles tests', () => {
-  beforeEach(() => {
-    Array.from(document.querySelectorAll('style')).forEach(s => s.remove());
-  });
-  it('Should generate some basic styles', () => {
-    const rules: SimpleStyleRules = {
-      one: {
-        display: 'flex',
-        position: 'fixed',
-      },
-      two: {
-        backgroundColor: 'red',
-      },
-    };
-    const { classes, stylesheet } = createStyles(rules);
-
-    Object.keys(rules).forEach(key => {
-      expect(classes[key]).toBeDefined();
-      expect(classes[key]?.length).toBeGreaterThan(0);
-      expect(classes[key]).toContain(key);
-    });
-    expect(stylesheet).toContain(`.${classes.one}{display:flex;position:fixed;}`);
-    expect(stylesheet).toContain(`.${classes.two}{background-color:red;}`);
-  });
-  it('Should generate some basic styles for a simple nested structure', () => {
-    const rules: SimpleStyleRules = {
-      nested: {
-        '& > span': {
-          fontFamily: 'Arial',
-        },
-        fontSize: '20px',
-      },
-      yarg: {
-        '&:hover': {
-          top: '-1px',
-        },
-        '&:focus': {
-          backgroundColor: 'purple',
-        },
-      },
-    };
-    const { classes, stylesheet } = createStyles(rules);
-
-    expect(classes.nested).toBeDefined();
-    expect(classes.nested?.length).toBeGreaterThan(0);
-    expect(classes.nested).toContain('nested');
-
-    expect(classes.yarg).toBeDefined();
-    expect(classes.yarg?.length).toBeGreaterThan(0);
-    expect(classes.yarg).toContain('yarg');
-
-    expect(stylesheet).toContain(`.${classes.nested} > span{font-family:Arial;}`);
-    expect(stylesheet).toContain(`.${classes.nested}{font-size:20px;}`);
-    expect(stylesheet).toContain(`.${classes.yarg}:hover{top:-1px;}`);
-    expect(stylesheet).toContain(`.${classes.yarg}:focus{background-color:purple;}`);
-  });
-  it('Should allow backreferences', () => {
-    const rules: SimpleStyleRules = {
-      a: {
-        textAlign: 'center',
-      },
-      b: {
-        '& $a': {
-          '&:hover': {
-            fontSize: '99px',
-          },
-          fontSize: '30px',
-        },
-        lineHeight: '1.5',
-      },
-    };
-    const { classes, stylesheet } = createStyles(rules);
-
-    expect(stylesheet).toContain(`.${classes.a}{text-align:center;}`);
-    expect(stylesheet).toContain(`.${classes.b}{line-height:1.5;}`);
-    expect(stylesheet).toContain(`.${classes.b} .${classes.a}{font-size:30px;}`);
-    expect(stylesheet).toContain(`.${classes.b} .${classes.a}:hover{font-size:99px;}`);
-  });
-  it('Should allow simple media queries', () => {
-    const rules: SimpleStyleRules = {
-      responsive: {
-        '@media (max-width: 960px)': {
-          '& button': {
-            padding: '24px',
-          },
-        },
-        '& button': {
-          padding: '8px',
-        },
-      },
-    };
-    const { classes, stylesheet } = createStyles(rules);
-
-    expect(stylesheet).toBe(
-      `.${classes.responsive} button{padding:8px;}@media (max-width: 960px){.${classes.responsive} button{padding:24px;}}`,
-    );
-  });
-  it('Should allow multiple media queries, including deeply-nested selector', () => {
-    const rules: SimpleStyleRules = {
-      simple: {
-        width: '100%',
-      },
-      deep: {
-        '& > span, & > div': {
-          '& button': {
-            '@media(max-width: 600px)': {
-              padding: '0.5em',
-            },
-            padding: '1em',
-          },
-        },
-        color: 'pink',
-        gridTemplateColumns: 'repeat(4, 1fr)',
-      },
-    };
-    const { classes, stylesheet } = createStyles(rules);
-
-    expect(stylesheet).toContain(`.${classes.simple}{width:100%;}`);
-    expect(stylesheet).toContain(`.${classes.deep}{color:pink;grid-template-columns:repeat(4, 1fr);}`);
-    expect(stylesheet).toContain(`.${classes.deep} > span button{padding:1em;}`);
-    expect(stylesheet).toContain(`.${classes.deep} > div button{padding:1em;}`);
-    expect(stylesheet).toContain(`@media(max-width: 600px){.${classes.deep} > div button{padding:0.5em;}}`);
-    expect(stylesheet).toContain(`@media(max-width: 600px){.${classes.deep} > span button{padding:0.5em;}}`);
-  });
-  it('Should allow a media query with multiple children', () => {
-    const rules: SimpleStyleRules = {
-      appHeaderHomeLink: {
-        '@media (max-width: 600px)': {
-          '& > b': {
-            display: 'none',
-          },
-          '& > i': {
-            marginLeft: '0 !important',
-          },
-        },
-        position: 'relative',
-        transition: 'background-color .2s ease',
-      },
-    };
-    const { classes, stylesheet } = createStyles(rules);
-
-    // eslint-disable-next-line max-len
-    expect(stylesheet).toBe(
-      `.${classes.appHeaderHomeLink}{position:relative;transition:background-color .2s ease;}@media (max-width: 600px){.${classes.appHeaderHomeLink} > b{display:none;}.${classes.appHeaderHomeLink} > i{margin-left:0 !important;}}`,
-    );
-  });
-  it("Should ensure that multiple media queries of the same type aren't clobbered", () => {
-    const mediaQuery = '@media (max-width: 600px)';
-    const rules: SimpleStyleRules = {
-      appBarGrid: {
-        [mediaQuery]: {
-          gridTemplateColumns: '1fr 2fr',
-        },
-      },
-      appHeaderHomeLink: {
-        [mediaQuery]: {
-          '& > b': {
-            display: 'none',
-          },
-        },
-      },
-    };
-    const { classes, stylesheet } = createStyles(rules);
-
-    expect(stylesheet).toBe(
-      `${mediaQuery}{.${classes.appBarGrid}{grid-template-columns:1fr 2fr;}}${mediaQuery}{.${classes.appHeaderHomeLink} > b{display:none;}}`,
-    );
-  });
-  it('Should allow creation of top-level "raw" styles that can generically apply globally to HTML tags', () => {
-    const rules: SimpleStyleRules = {
-      body: {
-        fontFamily: 'Arial, Helvetica, sans-serif',
-        fontSize: '16px',
-      },
-      a: {
-        '&:hover': {
-          textDecoration: 'none',
-        },
-      },
-    };
-    const styleContents = rawStyles(rules);
-
-    expect(styleContents).toContain('body{font-family:Arial, Helvetica, sans-serif;font-size:16px;}');
-    expect(styleContents).toContain('a:hover{text-decoration:none;}');
-  });
-  it('Should allow creation of top-level "raw" styles with nested media queries', () => {
-    const rules: SimpleStyleRules = {
-      button: {
-        '@media(max-width:300px)': {
-          '& > svg': {
-            fontSize: '1em',
-          },
-          maxWidth: '100%',
-        },
-        minWidth: '300px',
-      },
-    };
-    const styleContents = rawStyles(rules);
-    expect(styleContents).toBe(
-      'button{min-width:300px;}@media(max-width:300px){button > svg{font-size:1em;}button{max-width:100%;}}',
-    );
-  });
-  it('Should generate different classnames across multiple passes', () => {
-    const rules: SimpleStyleRules = {
-      simple: {
-        width: '100%',
-      },
-      deep: {
-        '& > span, & > div': {
-          '& button': {
-            '@media(max-width: 600px)': {
-              padding: '0.5em',
-            },
-            padding: '1em',
-          },
-        },
-        color: 'pink',
-        gridTemplateColumns: 'repeat(4, 1fr)',
-      },
-      finder: {
-        backgroundColor: 'pink',
-        marginLeft: '40px',
-        padding: '1rem',
-      },
-    };
-    const { classes: s1, stylesheet: rendered1 } = createStyles(rules, { flush: false });
-    const { classes: s2, stylesheet: rendered2 } = createStyles(rules, { flush: false });
-    const { classes: s3, stylesheet: rendered3 } = createStyles(rules, { flush: false });
-    expect(s1).not.toEqual(s2);
-    expect(s1).not.toEqual(s3);
-    expect(s2).not.toEqual(s3);
-    expect(rendered1).not.toEqual(rendered2);
-    expect(rendered1).not.toEqual(rendered3);
-    expect(rendered2).not.toEqual(rendered3);
-  });
-  it('Should generate the same classnames across multiple passes if a custom seed is set', () => {
-    const rules: SimpleStyleRules = {
-      simple: {
-        width: '100%',
-      },
-      deep: {
-        '& > span, & > div': {
-          '& button': {
-            '@media(max-width: 600px)': {
-              padding: '0.5em',
-            },
-            padding: '1em',
-          },
-        },
-        color: 'pink',
-        gridTemplateColumns: 'repeat(4, 1fr)',
-      },
-      finder: {
-        backgroundColor: 'pink',
-        marginLeft: '40px',
-        padding: '1rem',
-      },
-    };
-    const seed = 1234;
-    setSeed(seed);
-    const { classes: s1, stylesheet: rendered1 } = createStyles(rules, { flush: false });
-    setSeed(seed);
-    const { classes: s2, stylesheet: rendered2 } = createStyles(rules, { flush: false });
-    setSeed(seed);
-    const { classes: s3, stylesheet: rendered3 } = createStyles(rules, { flush: false });
-    expect(s1).toEqual(s2);
-    expect(s1).toEqual(s3);
-    expect(s2).toEqual(s3);
-    expect(rendered1).toEqual(rendered2);
-    expect(rendered1).toEqual(rendered3);
-    expect(rendered2).toEqual(rendered3);
-  });
-  it('Should generate styles and allow inserting after a desired element', () => {
-    const insertAfter = document.createElement('div');
-    document.body.appendChild(insertAfter);
-    const { stylesheet: styleContents } = createStyles(
-      {
-        test: {
-          backgroundColor: 'purple',
-          fontSize: '40px',
-        },
-      },
-      { insertAfter },
-    );
-    const foundStyle = document.body.querySelector('style');
-    expect(foundStyle?.innerHTML).toBe(styleContents);
-    const children = Array.from(document.body.children);
-    let success = false;
-    for (let i = 0; i < children.length; i += 1) {
-      const child = children[i];
-      if (child === insertAfter) {
-        success = true;
-        expect(children[i + 1]).toBe(foundStyle);
-        break;
-      }
-    }
-    expect(success).toBeTruthy();
-  });
-  it('Should generate styles and allow inserting before desired element', () => {
-    const insertBefore = document.createElement('div');
-    document.body.appendChild(insertBefore);
-    const { stylesheet: styleContents } = createStyles(
-      {
-        test: {
-          backgroundColor: 'purple',
-          fontSize: '40px',
-        },
-      },
-      { insertBefore },
-    );
-    const foundStyle = document.body.querySelector('style');
-    expect(foundStyle?.innerHTML).toBe(styleContents);
-    const children = Array.from(document.body.children);
-    let success = false;
-    for (let i = 0; i < children.length; i += 1) {
-      const child = children[i];
-      if (child === insertBefore) {
-        success = true;
-        expect(children[i - 1]).toBe(foundStyle);
-        break;
-      }
-    }
-    expect(success).toBeTruthy();
-  });
-});

package/test/deepEqual.spec.ts

@@ -1,97 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { deepEqual } from '../src/util/index.js';
-
-describe('Deep Object Equality utility', () => {
-  it('Should veryify two simple objects are not equal', () => {
-    const o1 = {
-      one: 'uno',
-      two: 'dos',
-    };
-    const o2 = {
-      one: 'uno',
-      two: 'dos',
-      three: 'tres',
-    };
-    expect(deepEqual(o1, o2)).toBeFalsy();
-  });
-  it('Should veryify two simple objects are equal', () => {
-    const o1 = {
-      one: 'uno',
-      two: 'dos',
-    };
-    const o2 = {
-      one: 'uno',
-      two: 'dos',
-    };
-    expect(deepEqual(o1, o2)).toBeTruthy();
-  });
-  it('Should veryify two simple objects with the same keys but different values are not equal', () => {
-    const o1 = {
-      one: 'one',
-      two: 'dos',
-    };
-    const o2 = {
-      one: 'uno',
-      two: 'dos',
-    };
-    expect(deepEqual(o1, o2)).toBeFalsy();
-  });
-  it('Should verify two 1-layer deep objects are equal', () => {
-    const o1 = {
-      one: 'uno',
-      two: 'dos',
-      nested: {
-        yes: 'yes',
-        no: 'nopers',
-      },
-    };
-    const o2 = {
-      one: 'uno',
-      two: 'dos',
-      nested: {
-        yes: 'yes',
-        no: 'nopers',
-      },
-    };
-    expect(deepEqual(o1, o2)).toBeTruthy();
-  });
-  it('Should verify two 1-layer deep objects with the same keys are not equal', () => {
-    const o1 = {
-      one: 'uno',
-      two: 'dos',
-      nested: {
-        yes: 'yes',
-        no: 'nopers',
-      },
-    };
-    const o2 = {
-      one: 'uno',
-      two: 'dos',
-      nested: {
-        yes: 'absolutely',
-        no: 'nopers',
-      },
-    };
-    expect(deepEqual(o1, o2)).toBeFalsy();
-  });
-  it('Should verify two 1-layer deep objects with different keys are not equal', () => {
-    const o1 = {
-      one: 'uno',
-      two: 'dos',
-      nested: {
-        color: 'pink',
-        width: 10,
-      },
-    };
-    const o2 = {
-      one: 'uno',
-      two: 'dos',
-      nested: {
-        yes: 'absolutely',
-        no: 'nopers',
-      },
-    };
-    expect(deepEqual(o1, o2)).toBeFalsy();
-  });
-});

package/test/generateClassName.spec.ts

@@ -1,48 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { generateClassName, setSeed } from '../src/generateClassName.js';
-
-describe('generateClassName tests', () => {
-  it('Should generate multiple unique classnames', () => {
-    const input = ['one', 'deux', 'tres', 'four'];
-    const output = input.map(generateClassName);
-    expect(output[0]).not.toBe(output[1]);
-    expect(output[0]).not.toBe(output[2]);
-    expect(output[0]).not.toBe(output[3]);
-    expect(output[0]).not.toBe(output[1]);
-    expect(output[1]).not.toBe(output[2]);
-    expect(output[1]).not.toBe(output[3]);
-    expect(output[2]).not.toBe(output[0]);
-    expect(output[2]).not.toBe(output[3]);
-  });
-  it('Should throw errors if an invalid seed is provided', () => {
-    try {
-      setSeed('bad' as any);
-    } catch (error) {
-      const e = error as Error;
-      expect(e).toBeInstanceOf(Error);
-      expect(e.message).toContain('not a valid number');
-    }
-    try {
-      setSeed(Number.MAX_SAFE_INTEGER);
-    } catch (error) {
-      const e = error as Error;
-      expect(e).toBeInstanceOf(Error);
-      expect(e.message).toContain('maximum safe JavaScript');
-    }
-    try {
-      setSeed(Number.POSITIVE_INFINITY);
-    } catch (error) {
-      const e = error as Error;
-      expect(e).toBeInstanceOf(Error);
-      expect(e.message).toContain('Positive or negative');
-    }
-    try {
-      setSeed(-1);
-    } catch (error) {
-      const e = error as Error;
-      expect(e).toBeInstanceOf(Error);
-      expect(e.message).toContain('number >= 0');
-    }
-  });
-});

package/test/keyframes.spec.ts

@@ -1,19 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { keyframes } from '../src/index.js';
-
-describe('Keyframes generation', () => {
-  it('Should generate simple animation keyframes', () => {
-    const [keyframeName, sheetContents] = keyframes({
-      '0%': {
-        width: '100px',
-      },
-      '100%': {
-        width: '200px',
-      },
-    });
-    expect(keyframeName).toBeDefined();
-    expect(keyframeName.length).toBeGreaterThan(0);
-    expect(sheetContents).toBe(`@keyframes ${keyframeName}{0%{width:100px;}100%{width:200px;}}`);
-  });
-});

package/test/plugins.spec.ts

@@ -1,43 +0,0 @@
-import autoprefixer from 'autoprefixer';
-import postcss from 'postcss';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-
-import { createStyles, PosthookPlugin, registerPosthook, SimpleStyleRules } from '../src/index.js';
-import { getPosthooks } from '../src/plugins.js';
-
-describe('Plugin hooks', () => {
-  beforeEach(() => {
-    Array.from(document.head.querySelectorAll('style')).forEach(s => s.remove());
-    getPosthooks().length = 0;
-  });
-  it('Should execute a posthook with the proper arguments', () => {
-    const rules: SimpleStyleRules = {
-      posthook: {
-        backgroundSize: 'contain',
-        backgroundRepeat: 'no-repeat',
-      },
-    };
-    const posthook: PosthookPlugin = vi.fn(sheetContents => {
-      expect(sheetContents.length).toBeGreaterThan(0);
-      expect(sheetContents.startsWith('.posthook')).toBeTruthy();
-      expect(sheetContents).toContain('{background-size:contain;background-repeat:no-repeat;}');
-      return sheetContents;
-    });
-    registerPosthook(posthook);
-    createStyles(rules);
-    expect(posthook).toBeCalled();
-  });
-  it('Should execute a posthook and transform the contents', () => {
-    const rules: SimpleStyleRules = {
-      posthook: {
-        userSelect: 'none',
-      },
-    };
-    // Post CSS and autoprefixer types have changed
-    // so we just brute-force the typings
-    const posthook: PosthookPlugin = sheetContents => postcss([autoprefixer() as any]).process(sheetContents).css;
-    registerPosthook(posthook);
-    const { classes, stylesheet } = createStyles(rules);
-    expect(stylesheet).toBe(`.${classes.posthook}{-webkit-user-select:none;-moz-user-select:none;user-select:none;}`);
-  });
-});

package/test/react/useCreateStyles.spec.tsx

@@ -1,65 +0,0 @@
-import { fireEvent, render } from '@testing-library/react';
-import { useState } from 'react';
-import { describe, expect, it } from 'vitest';
-
-import { useCreateStyles } from '../../src/react/useCreateStyles.js';
-
-describe('React utilities tests', () => {
-  it('Should verify useCreateStyles hook generates classnames and inserts the stylesheet', () => {
-    const Bogus = () => {
-      const classes = useCreateStyles({
-        app: {
-          backgroundColor: 'purple',
-          fontSize: '16px',
-        },
-      });
-      return (
-        <section className={classes.app} data-testid='app'>
-          Testing
-        </section>
-      );
-    };
-    const result = render(<Bogus />);
-    const section = result.getByTestId('app');
-    expect(section.classList.length).toBeGreaterThan(0);
-    expect(section.className.startsWith('app_')).toBeTruthy();
-    const sheet = document.head.querySelector('style');
-    expect(sheet).not.toBeNull();
-    expect(sheet?.innerHTML).toContain(section.className);
-    expect(sheet?.innerHTML).toContain('background-color:purple;');
-    expect(sheet?.innerHTML).toContain('font-size:16px;');
-  });
-  it('Should verify useCreateStyles hook updates the generated styles when they change', () => {
-    const Bogus = () => {
-      const [changeFont, setChangeFont] = useState(false);
-      if (changeFont) debugger;
-      const classes = useCreateStyles({
-        button: {
-          color: changeFont ? 'blue' : 'yellow',
-        },
-        app: {
-          backgroundColor: 'purple',
-          fontSize: '16px',
-        },
-      });
-      return (
-        <section className={classes.app} data-testid='app'>
-          Testing
-          <div>
-            <button data-testid='button' className={classes.button} onClick={() => setChangeFont(true)}>
-              Change Color
-            </button>
-          </div>
-        </section>
-      );
-    };
-    const result = render(<Bogus />);
-    const button = result.getByTestId('button');
-    const { className: initialButtonClassName } = button;
-    // shortcut - https://testing-library.com/docs/dom-testing-library/api-events/#fireeventeventname
-    fireEvent['click'](button);
-
-    const updatedButton = result.getByTestId('button');
-    expect(initialButtonClassName).not.toBe(updatedButton.className);
-  });
-});

package/test/updateStyles.spec.ts

@@ -1,41 +0,0 @@
-import { beforeAll, describe, expect, it } from 'vitest';
-
-import { createStyles } from '../src/index.js';
-
-describe('updateStyles tests', () => {
-  beforeAll(() => {
-    document.querySelectorAll('style').forEach(s => s.remove());
-  });
-  it('Should create styles, then update them without creating a new sheet', () => {
-    const {
-      classes: originalStyles,
-      stylesheet: originalContents,
-      updateSheet,
-    } = createStyles({
-      one: {
-        backgroundColor: 'grape',
-        boxSizing: 'border-box',
-      },
-      two: {
-        height: '100px',
-      },
-    });
-    expect(typeof updateSheet).toBe('function');
-    const sheet = document.head.querySelector('style');
-    expect(sheet?.innerHTML).toBe(originalContents);
-    const updates = updateSheet({
-      one: {
-        backgroundColor: 'red',
-      },
-    });
-    expect(updates).not.toBeNull();
-    const { classes: updatedStyles, stylesheet: updatedContents } = updates!;
-    expect(originalStyles).not.toBe(updatedStyles);
-    expect(originalContents).not.toBe(updatedContents);
-    expect(document.head.querySelectorAll('style').length).toBe(1);
-    expect(document.head.querySelector('style')?.innerHTML).toBe(updatedContents);
-    expect(updatedContents).toBe(
-      `.${updatedStyles.one}{background-color:red;box-sizing:border-box;}.${updatedStyles.two}{height:100px;}`,
-    );
-  });
-});

package/tsconfig.build.json

@@ -1,8 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "isolatedModules": false
-  },
-  "include": ["src"]
-}