simplestyle-js 3.1.2 → 3.1.4-beta.1

package/.prettierrc

@@ -1,7 +0,0 @@
-{
-  "endOfLine": "lf",
-  "printWidth": 180,
-  "semi": true,
-  "trailingComma": "all",
-  "singleQuote": true
-}

package/.travis.yml

@@ -1,8 +0,0 @@
-language: node_js
-node_js:
-  - 12
-install:
-  - yarn
-script:
-  - yarn test
-  - yarn coveralls

package/.vscode/launch.json

@@ -1,36 +0,0 @@
-{
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-  {
-    "name": "Attach",
-    "port": 9229,
-    "request": "attach",
-    "skipFiles": [
-      "<node_internals>/**"
-    ],
-    "type": "pwa-node"
-  },
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "Jest Current File",
-      "program": "${workspaceFolder}/node_modules/.bin/jest",
-      "args": [
-        "${fileBasenameNoExtension}",
-        "--config",
-        "jest.config.js",
-        "--env",
-        "jsdom"
-      ],
-      "console": "integratedTerminal",
-      "internalConsoleOptions": "neverOpen",
-      "disableOptimisticBPs": true,
-      "windows": {
-        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
-      }
-    }
-  ]
-}

package/jest.config.ts

@@ -1,9 +0,0 @@
-import type { Config } from '@jest/types';
-
-const config: Config.InitialOptions = {
-  testPathIgnorePatterns: ['./dist'],
-  preset: 'ts-jest',
-  testEnvironment: 'jsdom',
-};
-
-export default config;

package/scripts/preparePackageJson.js

@@ -1,14 +0,0 @@
-#!/usr/bin/env node
-const fs = require('fs');
-const path = require('path');
-
-const pjsonPath = path.join(__dirname, '../package.json');
-const pjson = JSON.parse(fs.readFileSync(pjsonPath, 'utf8'));
-
-pjson.main = './commonjs/index.js';
-pjson.module = './esm/index.js';
-pjson.esnext = './esm/index.js';
-pjson.typings = './esm/index.d.ts';
-pjson.types = './esm/index.d.ts';
-
-fs.writeFileSync(path.join(__dirname, '../dist', 'package.json'), JSON.stringify(pjson, null, 2), 'utf8');

package/src/createStyles.ts

@@ -1,253 +0,0 @@
-import { Properties } from 'csstype';
-import merge from 'deepmerge';
-
-import { generateClassName } from './generateClassName';
-import { getPosthooks } from './plugins';
-import { SimpleStyleRules } from './types';
-
-export type CreateStylesOptions = Partial<{
-  /**
-   * If true, automatically renders generated styles
-   * to the DOM in an injected <style /> tag
-   */
-  flush: boolean;
-
-  /**
-   * If set, along with flush: true,
-   * will render the injected <style /> after this element
-   */
-  insertAfter?: HTMLElement;
-  /**
-   * If set, along with flush: true,
-   * will render the injects <style /> before this element
-   */
-  insertBefore?: HTMLElement;
-}>;
-
-function isNestedSelector(r: string): boolean {
-  return /&/g.test(r);
-}
-
-function isMedia(r: string): boolean {
-  return r.toLowerCase().startsWith('@media');
-}
-
-function formatCSSRuleName(rule: string): string {
-  return rule.replace(/([A-Z])/g, p1 => `-${p1.toLowerCase()}`);
-}
-
-function formatCSSRules(cssRules: Properties): string {
-  return Object.entries(cssRules).reduce(
-    (prev, [cssProp, cssVal]) => `${prev}${formatCSSRuleName(cssProp)}:${cssVal};`,
-    '',
-  );
-}
-
-function execCreateStyles<T extends SimpleStyleRules, K extends keyof T, O extends { [classKey in K]: string }>(
-  rules: T,
-  options: CreateStylesOptions,
-  parentSelector: string | null,
-  noGenerateClassName: boolean = false,
-): { classes: O; sheetBuffer: string; mediaQueriesBuffer: string } {
-  const out = {} as O;
-  let sheetBuffer = '';
-  let mediaQueriesBuffer = '';
-  const styleEntries = Object.entries(rules);
-  let ruleWriteOpen = false;
-  const guardCloseRuleWrite = () => {
-    if (ruleWriteOpen) sheetBuffer += '}';
-    ruleWriteOpen = false;
-  };
-  for (const [classNameOrCSSRule, classNameRules] of styleEntries) {
-    // if the classNameRules is a string, we are dealing with a display: none; type rule
-    if (isMedia(classNameOrCSSRule)) {
-      if (typeof classNameRules !== 'object')
-        throw new Error('Unable to map @media query because rules / props are an invalid type');
-      guardCloseRuleWrite();
-      mediaQueriesBuffer += `${classNameOrCSSRule}{`;
-      const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(
-        classNameRules as T,
-        options,
-        parentSelector,
-      );
-      mediaQueriesBuffer += regularOutput;
-      mediaQueriesBuffer += '}';
-      mediaQueriesBuffer += mediaQueriesOutput;
-    } else if (isNestedSelector(classNameOrCSSRule)) {
-      if (!parentSelector) throw new Error('Unable to generate nested rule because parentSelector is missing');
-      guardCloseRuleWrite();
-      // format of { '& > span': { display: 'none' } } (or further nesting)
-      const replaced = classNameOrCSSRule.replace(/&/g, parentSelector);
-      for (const selector of replaced.split(/,\s*/)) {
-        const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(
-          classNameRules as T,
-          options,
-          selector,
-        );
-        sheetBuffer += regularOutput;
-        mediaQueriesBuffer += mediaQueriesOutput;
-      }
-    } else if (!parentSelector && typeof classNameRules === 'object') {
-      guardCloseRuleWrite();
-      const generated = noGenerateClassName ? classNameOrCSSRule : generateClassName(classNameOrCSSRule);
-      (out as any)[classNameOrCSSRule] = generated;
-      const generatedSelector = `${noGenerateClassName ? '' : '.'}${generated}`;
-      const { mediaQueriesBuffer: mediaQueriesOutput, sheetBuffer: regularOutput } = execCreateStyles(
-        classNameRules as T,
-        options,
-        generatedSelector,
-      );
-      sheetBuffer += regularOutput;
-      mediaQueriesBuffer += mediaQueriesOutput;
-    } else {
-      if (!parentSelector) throw new Error('Unable to write css props because parent selector is null');
-      if (!ruleWriteOpen) {
-        sheetBuffer += `${parentSelector}{${formatCSSRules({ [classNameOrCSSRule]: classNameRules })}`;
-        ruleWriteOpen = true;
-      } else sheetBuffer += formatCSSRules({ [classNameOrCSSRule]: classNameRules });
-    }
-  }
-  guardCloseRuleWrite();
-  return {
-    classes: out,
-    sheetBuffer,
-    mediaQueriesBuffer,
-  };
-}
-
-function replaceBackReferences<O extends { [key: string]: string }>(out: O, sheetContents: string): string {
-  let outputSheetContents = sheetContents;
-  const toReplace: string[] = [];
-  const toReplaceRegex = /\$\w([a-zA-Z0-9_-]+)?/gm;
-  let matches = toReplaceRegex.exec(outputSheetContents);
-  while (matches) {
-    toReplace.push(matches[0].valueOf());
-    matches = toReplaceRegex.exec(outputSheetContents);
-  }
-  for (const r of toReplace) {
-    outputSheetContents = outputSheetContents.replace(r, `.${out[r.substring(1)]}`);
-  }
-  return getPosthooks().reduce((prev, hook) => hook(prev), outputSheetContents);
-}
-
-function createSheet(sheetContents: string) {
-  if (
-    typeof document !== 'undefined' &&
-    document.head &&
-    document.head.appendChild &&
-    typeof document.createElement === 'function'
-  ) {
-    const styleTag = document.createElement('style');
-    styleTag.innerHTML = sheetContents;
-    return styleTag;
-  }
-  return null;
-}
-
-function flushSheetContents(sheetContents: string, options?: CreateStylesOptions) {
-  // In case we're in come weird test environment that doesn't support JSDom
-  const styleTag = createSheet(sheetContents);
-  if (styleTag) {
-    if (options?.insertAfter && options?.insertBefore) {
-      throw new Error('Both insertAfter and insertBefore were provided. Please choose only one.');
-    }
-    if (options?.insertAfter?.after) options.insertAfter.after(styleTag as Node);
-    else if (options?.insertBefore?.before) options.insertBefore.before(styleTag as Node);
-    else document.head.appendChild(styleTag);
-  }
-  return styleTag;
-}
-
-function coerceCreateStylesOptions(options?: CreateStylesOptions): CreateStylesOptions {
-  return {
-    flush: options && typeof options.flush === 'boolean' ? options.flush : true,
-  };
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function rawStyles<T extends SimpleStyleRules, K extends keyof T, O extends { [key in K]: string }>(
-  rules: T,
-  options?: Partial<CreateStylesOptions>,
-) {
-  const coerced = coerceCreateStylesOptions(options);
-  const { sheetBuffer: sheetContents, mediaQueriesBuffer: mediaQueriesContents } = execCreateStyles(
-    rules,
-    coerced,
-    null,
-    true,
-  );
-
-  const mergedContents = `${sheetContents}${mediaQueriesContents}`;
-
-  if (coerced.flush) flushSheetContents(mergedContents, options);
-  return mergedContents;
-}
-
-export function keyframes<T extends { [increment: string]: Properties }>(
-  frames: T,
-  options?: CreateStylesOptions,
-): [string, string] {
-  const coerced = coerceCreateStylesOptions(options);
-  const keyframeName = generateClassName('keyframes_');
-  const { sheetBuffer: keyframesContents } = execCreateStyles(frames, coerced, null, true);
-  const sheetContents = `@keyframes ${keyframeName}{${keyframesContents}}`;
-  if (coerced.flush) flushSheetContents(sheetContents);
-  return [keyframeName, sheetContents];
-}
-
-export default function createStyles<
-  T extends SimpleStyleRules,
-  K extends keyof T,
-  O extends { [classKey in K]: string },
->(rules: T, options?: Partial<CreateStylesOptions>) {
-  const coerced = coerceCreateStylesOptions(options);
-  const {
-    classes: out,
-    sheetBuffer: sheetContents,
-    mediaQueriesBuffer: mediaQueriesContents,
-  } = execCreateStyles(rules, coerced, null);
-
-  const mergedContents = `${sheetContents}${mediaQueriesContents}`;
-
-  const replacedSheetContents = replaceBackReferences(out, mergedContents);
-
-  let sheet: ReturnType<typeof flushSheetContents> = null;
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const updateSheet = <T2 extends SimpleStyleRules, K2 extends keyof T2, O2 extends { [classKey in K2]: string }>(
-    updatedRules: Partial<T2>,
-  ) => {
-    if (((options?.flush && sheet) || !options?.flush) && updatedRules) {
-      // We prefer the first set, and then we shallow merge
-      const {
-        classes: updatedOut,
-        sheetBuffer: updatedSheetContents,
-        mediaQueriesBuffer: updatedMediaQueriesContents,
-      } = execCreateStyles(merge(rules, updatedRules), { flush: false }, null);
-
-      const updatedMergedContents = `${updatedSheetContents}${updatedMediaQueriesContents}`;
-
-      const updatedReplacedSheetContents = replaceBackReferences(out, updatedMergedContents);
-      if (sheet) sheet.innerHTML = updatedReplacedSheetContents;
-      return { classes: updatedOut, stylesheet: updatedSheetContents } as {
-        classes: typeof updatedOut;
-        stylesheet: string;
-      };
-    }
-    return null;
-  };
-
-  if (coerced.flush) sheet = flushSheetContents(replacedSheetContents, options);
-  // Need this TS cast to get solid code assist from the consumption-side
-  return {
-    classes: out as unknown,
-    stylesheet: replacedSheetContents,
-    updateSheet,
-  } as {
-    classes: O;
-    stylesheet: string;
-    updateSheet: typeof updateSheet;
-  };
-}
-
-export type CreateStylesArgs = Parameters<typeof createStyles>;

package/src/generateClassName.ts

@@ -1,43 +0,0 @@
-import numToAlpha from './numToAlpha';
-
-let inc = Date.now();
-
-export function setSeed(seed: number | null): void {
-  if (seed === null) {
-    inc = Date.now();
-    return;
-  }
-  if (typeof seed !== 'number') throw Error('Unable to setSeed as provided seed was not a valid number');
-  if (seed === Number.MAX_SAFE_INTEGER)
-    throw Error('Unable to setSeed because the seed was already the maximum safe JavaScript number allowed');
-  if (seed === Number.POSITIVE_INFINITY || seed === Number.NEGATIVE_INFINITY)
-    throw new Error('Unable to setSeed. Positive or negative infinity is not allowed');
-  if (seed < 0) throw new Error('Unable to setSeed. Seed must be a number >= 0');
-  inc = seed;
-}
-
-const numPairsRegex = /(\d{1,2})/g;
-
-export function getUniqueSuffix(): string {
-  const numPairs: string[] = [];
-  const incStr = inc.toString();
-  let result = numPairsRegex.exec(incStr);
-  while (result) {
-    numPairs.push(result[0]);
-    result = numPairsRegex.exec(incStr);
-  }
-  let out = '_';
-  numPairs.forEach(pair => {
-    const val = +pair;
-    if (val > 25) {
-      const [first, second] = pair.split('');
-      out += `${numToAlpha(+first)}${numToAlpha(+second)}`;
-    } else out += numToAlpha(val);
-  });
-  inc += 1;
-  return out;
-}
-
-export function generateClassName(c: string): string {
-  return `${c}${getUniqueSuffix()}`;
-}

package/src/index.ts

@@ -1,4 +0,0 @@
-export { default as createStyles, CreateStylesArgs, CreateStylesOptions, keyframes, rawStyles } from './createStyles';
-export { setSeed } from './generateClassName';
-export { PosthookPlugin, registerPosthook } from './plugins';
-export { SimpleStyleRules } from './types';

package/src/numToAlpha.ts

@@ -1,5 +0,0 @@
-const alphas = 'abcdefghijklmnopqrstuvwxyz'.split('');
-
-export default function numToAlpha(num: number): string {
-  return alphas[num];
-}

package/src/plugins.ts

@@ -1,11 +0,0 @@
-export type PosthookPlugin = (sheetContents: string) => string;
-
-const posthooks: PosthookPlugin[] = [];
-
-export function getPosthooks(): PosthookPlugin[] {
-  return posthooks;
-}
-
-export function registerPosthook(posthook: PosthookPlugin) {
-  posthooks.push(posthook);
-}

package/src/react/useCreateStyles.ts

@@ -1,40 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-
-import createStyles, { CreateStylesOptions } from '../createStyles';
-import { SimpleStyleRules } from '../types';
-import { deepEqual } from '../util';
-
-export function useCreateStyles<T extends SimpleStyleRules, K extends keyof T, O extends { [classKey in K]: string }>(
-  rules: T,
-  options?: Partial<Omit<CreateStylesOptions, 'flush'>>,
-) {
-  const [cachedRules, setCachedRules] = useState(() => rules);
-  const cachedOptions = useMemo(() => ({ ...options } as Partial<Omit<CreateStylesOptions, 'flush'>>), [options]);
-  const didFirstWriteRef = useRef(false);
-  const styleTagRef = useRef(document.createElement('style'));
-
-  const [{ classes, stylesheet, updateSheet }, setCreateStyles] = useState(() =>
-    createStyles<T, K, O>(rules, { ...cachedOptions, flush: false }),
-  );
-
-  useEffect(() => {
-    const { current: s } = styleTagRef;
-    document.head.appendChild(s);
-    return () => s.remove();
-  }, []);
-  useEffect(() => {
-    if (!didFirstWriteRef.current && !styleTagRef.current.innerHTML) {
-      didFirstWriteRef.current = true;
-      styleTagRef.current.innerHTML = stylesheet;
-      return;
-    } else if (!deepEqual(rules, cachedRules)) {
-      setCachedRules(rules);
-      const updated = updateSheet(rules);
-      if (updated?.stylesheet) {
-        styleTagRef.current.innerHTML = updated.stylesheet;
-        setCreateStyles({ ...updated, updateSheet } as any);
-      }
-    }
-  }, [cachedRules, rules, stylesheet, updateSheet]);
-  return classes;
-}

package/src/types.ts

@@ -1,7 +0,0 @@
-import { Properties } from 'csstype';
-
-export interface SimpleStyleRules {
-  [key: string]: Properties | SimpleStyleRules;
-}
-
-export type RenderableSimpleStyleRules = SimpleStyleRules & { [selector: string]: Properties[] };

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 prev && o1[key] === o2[key];
-    }
-    return prev && deepEqual(o1[key], o2[key]);
-  }, true);
-}