Merge branch 'bduran/update-deps'

benduran · Mar 1, 2021 · 1ab632b · 1ab632b
2 parents fbc1b60 + 1b683d2
commit 1ab632b
Show file tree

Hide file tree

Showing 5 changed files with 1,245 additions and 1,046 deletions.
diff --git a/README.md b/README.md
@@ -144,10 +144,39 @@ const [moreStyles, moreSheetContents] = createStyles({
   navButtons: {
     padding: '.5em',
   },
-}, false); // prevents immediate flushing of the <style /> tag to the DOM
+}, { flush: false }); // prevents immediate flushing of the <style /> tag to the DOM
+
+const styleTag = document.createElement('style');
+styleTag.innerHTML = `${sheetContents}${moreSheetContents}`;
+```
+
+```javascript
+/**
+ * By default, simple style will insert the <style /> tags
+ * it creates in the document <head />. You can change this
+ * by providing either an "insertBefore" or "insertAfter"
+ * DOM node.
+ */
+
+const someElement = document.getElementById('some-element');
+
+const [styles, sheetContents] = createStyles({
+  nav: {
+    backgroundColor: '#ccaa00',
+    width: '24em',
+  },
+}, { insertBefore: someElement }); // <style /> will be inserted into the DOM *before* someElement
+
+const anotherElement = document.getElementById('another-element`);
+const [moreStyles, moreSheetContents] = createStyles({
+  navButtons: {
+    padding: '.5em',
+  },
+}, { insertAfter: anotherElement }); // <style /> will be insert into the DOM *after* anotherElement
 
 const styleTag = document.createElement('style');
 styleTag.innerHTML = `${sheetContents}${moreSheetContents}`;
+
 ```
 
 ## Authoring Plugins

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simplestyle-js",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "An incredibly straightforward and simple CSS-in-JS solution with zero runtime dependencies, and out-of-the-box TypeScript support",
   "main": "dist/index.js",
   "module": "dist/simplestyle-js.esm.js",
@@ -34,27 +34,27 @@
   "license": "MIT",
   "devDependencies": {
     "@types/autoprefixer": "^9.7.2",
-    "@types/jest": "^26.0.15",
-    "@types/jsdom": "^16.2.5",
-    "@typescript-eslint/eslint-plugin": "^4.8.2",
-    "@typescript-eslint/parser": "^4.8.2",
+    "@types/jest": "^26.0.20",
+    "@types/jsdom": "^16.2.6",
+    "@typescript-eslint/eslint-plugin": "^4.15.2",
+    "@typescript-eslint/parser": "^4.15.2",
     "@zeit/git-hooks": "^0.1.4",
-    "autoprefixer": "^10.0.2",
+    "autoprefixer": "^10.2.4",
     "babel-jest": "^26.6.3",
     "coveralls": "^3.1.0",
-    "eslint": "^7.14.0",
+    "eslint": "^7.21.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-plugin-import": "^2.22.1",
     "jest": "^26.6.3",
     "jsdom": "^16.4.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.1.10",
-    "ts-jest": "^26.4.4",
-    "ts-node": "^9.0.0",
+    "postcss": "^8.2.6",
+    "ts-jest": "^26.5.2",
+    "ts-node": "^9.1.1",
     "tsdx": "^0.14.1",
-    "typescript": "^4.1.2"
+    "typescript": "^4.2.2"
   },
   "dependencies": {
-    "csstype": "^3.0.5"
+    "csstype": "^3.0.7"
   }
 }
diff --git a/src/createStyles.ts b/src/createStyles.ts
@@ -4,9 +4,12 @@ import { SimpleStyleRules } from './types';
 import { generateClassName } from './generateClassName';
 import { getPosthooks } from './plugins';
 
-export interface CreateStylesOptions {
+export type CreateStylesOptions = Partial<{
   flush: boolean;
-}
+
+  insertAfter?: HTMLElement;
+  insertBefore?: HTMLElement;
+}>;
 
 function isNestedSelector(r: string): boolean {
   return /&/g.test(r);
@@ -107,14 +110,21 @@ function createSheet(sheetContents: string) {
   return null;
 }
 
-function flushSheetContents(sheetContents: string) {
+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) document.head.appendChild(styleTag);
+  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?: Partial<CreateStylesOptions>): CreateStylesOptions {
+function coerceCreateStylesOptions(options?: CreateStylesOptions): CreateStylesOptions {
   return {
     flush: options && typeof options.flush === 'boolean' ? options.flush : true,
   };
@@ -129,7 +139,7 @@ export function rawStyles<T extends SimpleStyleRules, K extends keyof T, O exten
 
   const mergedContents = `${sheetContents}${mediaQueriesContents}`;
 
-  if (coerced.flush) flushSheetContents(mergedContents);
+  if (coerced.flush) flushSheetContents(mergedContents, options);
   return mergedContents;
 }
 
@@ -176,7 +186,7 @@ export default function createStyles<
     return null;
   };
 
-  if (coerced.flush) sheet = flushSheetContents(replacedSheetContents);
+  if (coerced.flush) sheet = flushSheetContents(replacedSheetContents, options);
   // Need this TS cast to get solid code assist from the consumption-side
   return [
     out as unknown,

diff --git a/test/createStyles.spec.ts b/test/createStyles.spec.ts
@@ -3,7 +3,7 @@ import { SimpleStyleRules } from '../src/types';
 
 describe('createStyles tests', () => {
   beforeEach(() => {
-    Array.from(document.head.querySelectorAll('style')).forEach(s => s.remove());
+    Array.from(document.querySelectorAll('style')).forEach(s => s.remove());
   });
   it('Should generate some basic styles', () => {
     const rules: SimpleStyleRules = {
@@ -265,4 +265,50 @@ describe('createStyles tests', () => {
     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 [, 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 [, 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();
+  });
 });