Merge pull request #25 from benduran/breaking/remove-accumulate

feature: remove accumulate because it's broken and nobody uses it
benduran · Sep 27, 2020 · ddf9cf7 · ddf9cf7
2 parents 93e352a + a76a708
commit ddf9cf7
Show file tree

Hide file tree

Showing 5 changed files with 3 additions and 69 deletions.
diff --git a/README.md b/README.md
@@ -135,21 +135,6 @@ const styleTag = document.createElement('style');
 styleTag.innerHTML = `${sheetContents}${moreSheetContents}`;
 ```
 
-```javascript
-import { createStyles } from 'simplestyle-js';
-const [style1] = createStyles({
-  nav: {
-    backgroundColor: '#ccaa00',
-    width: '24em',
-  },
-}, { accumulate: true }); // will make this sheet, and any other sheets where "accumulate: true" is used, aggregated into a single output `<style />`
-const [style2] = createStyles({
-  navButtons: {
-    padding: '.5em',
-  },
-}, { accumulate: true }); // accumulating is useful if you want to minimize DOM writes
-```
-
 ## Authoring Plugins
 A recent update has removed the need for a "prehook" plugin (see previous [documentation](https://github.com/benduran/simplestyle/blob/276aac7fd8b64c6cbfced152249aac7024351092/README.md#prehook-plugin-example-poor-mans-autoprefixer) for historical purposes).
 There is a single type of plugin:

diff --git a/src/createStyles.ts b/src/createStyles.ts
@@ -5,12 +5,9 @@ import generateClassName from './generateClassName';
 import { getPosthooks } from './plugins';
 
 export interface CreateStylesOptions {
-  accumulate: boolean;
   flush: boolean;
 }
 
-let accumulatedSheetContents: string[] | null = null;
-
 function isNestedSelector(r: string): boolean {
   return /&/g.test(r);
 }
@@ -112,22 +109,10 @@ function flushSheetContents(sheetContents: string) {
 
 function coerceCreateStylesOptions(options?: Partial<CreateStylesOptions>): CreateStylesOptions {
   return {
-    accumulate: options?.accumulate || false,
     flush: options && typeof options.flush === 'boolean' ? options.flush : true,
   };
 }
 
-let accumulatedTimeout: any;
-function accumulateSheetContents(sheetContents: string, options: CreateStylesOptions): void {
-  if (!accumulatedSheetContents) accumulatedSheetContents = [];
-  accumulatedSheetContents.push(sheetContents);
-  if (accumulatedTimeout) accumulatedTimeout = clearTimeout(accumulatedTimeout);
-  accumulatedTimeout = setTimeout(() => {
-    flushSheetContents(accumulatedSheetContents!.reduce((prev, contents) => `${prev}${contents}`, ''));
-    accumulatedSheetContents = null;
-  }, 0);
-}
-
 export function rawStyles<T extends SimpleStyleRules, K extends keyof T, O extends { [key in K]: string }>(
   rules: T,
   options?: Partial<CreateStylesOptions>,
@@ -137,8 +122,7 @@ export function rawStyles<T extends SimpleStyleRules, K extends keyof T, O exten
 
   const mergedContents = `${sheetContents}${mediaQueriesContents}`;
 
-  if (coerced.accumulate) accumulateSheetContents(mergedContents, coerced);
-  else if (coerced.flush) flushSheetContents(mergedContents);
+  if (coerced.flush) flushSheetContents(mergedContents);
   return mergedContents;
 }
 
@@ -147,7 +131,6 @@ export function keyframes<T extends { [increment: string]: Properties }>(frames:
   const keyframeName = generateClassName('keyframes_');
   const [, keyframesContents] = execCreateStyles(frames, coerced, null, true);
   const sheetContents = `@keyframes ${keyframeName}{${keyframesContents}}`;
-  if (coerced.accumulate) accumulateSheetContents(sheetContents, coerced);
   if (coerced.flush) flushSheetContents(sheetContents);
   return [keyframeName, sheetContents];
 }
@@ -167,8 +150,7 @@ export default function createStyles<
 
   const replacedSheetContents = replaceBackReferences(out, mergedContents);
 
-  if (coerced.accumulate) accumulateSheetContents(replacedSheetContents, coerced);
-  else if (coerced.flush) flushSheetContents(replacedSheetContents);
+  if (coerced.flush) flushSheetContents(replacedSheetContents);
   return [
     out as unknown as O,
     replacedSheetContents,

diff --git a/test/createStyles.spec.ts b/test/createStyles.spec.ts
@@ -1,4 +1,3 @@
-
 import { createStyles, rawStyles, setSeed } from '../src';
 import { SimpleStyleRules } from '../src/types';
 
@@ -141,6 +140,7 @@ describe('createStyles tests', () => {
     };
     const [styles, styleContents] = createStyles(rules);
 
+    // eslint-disable-next-line max-len
     expect(styleContents).toBe(`.${styles.appHeaderHomeLink}{position:relative;transition:background-color .2s ease;}@media (max-width: 600px){.${styles.appHeaderHomeLink} > b{display:none;}.${styles.appHeaderHomeLink} > i{margin-left:0 !important;}}`);
   });
   it('Should ensure that multiple media queries of the same type aren\'t clobbered', () => {
@@ -195,37 +195,6 @@ describe('createStyles tests', () => {
     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 accumulate all calls to createStyles() and write a single sheet to the DOM', () => new Promise((resolve, reject) => {
-    try {
-      const [s1] = createStyles({
-        one: {
-          display: 'flex',
-        },
-      }, { accumulate: true });
-      const [s2] = createStyles({
-        two: {
-          height: '400px',
-          width: '400px',
-        },
-      }, { accumulate: true });
-      const [s3] = createStyles({
-        three: {
-          transform: 'translateY(-50%)',
-        },
-      }, { accumulate: true });
-      setTimeout(() => {
-        try {
-          const styleTag = document.head.querySelector('style');
-          expect(styleTag).not.toBe(null);
-          const contents = styleTag!.innerHTML;
-          expect(contents).toContain(`.${s1.one}{display:flex;}`);
-          expect(contents).toContain(`.${s2.two}{height:400px;width:400px;}`);
-          expect(contents).toContain(`.${s3.three}{transform:translateY(-50%);}`);
-          resolve();
-        } catch (error) { reject(error); }
-      }, 0);
-    } catch (error) { reject(error); }
-  }));
   it('Should generate different classnames across multiple passes', () => {
     const rules: SimpleStyleRules = {
       simple: {

diff --git a/test/generateClassName.spec.ts b/test/generateClassName.spec.ts
@@ -1,4 +1,3 @@
-
 import generateClassName, { setSeed } from '../src/generateClassName';
 
 describe('generateClassName tests', () => {

diff --git a/test/keyframes.spec.ts b/test/keyframes.spec.ts
@@ -1,4 +1,3 @@
-
 import { keyframes } from '../src';
 
 describe('Keyframes generation', () => {