fix stylesheet ordering (#200)

* fix stylesheet ordering * spell correct * Create metal-carrots-lie.md * fix filbert-js/core version resolutions
kuldeepkeshwar · Dec 21, 2020 · 5ba6c20 · 5ba6c20 · vercel · Dec 21, 2020
1 parent 4ecefe3
commit 5ba6c20
Show file tree

Hide file tree

Showing 18 changed files with 720 additions and 735 deletions.
diff --git a/.changeset/metal-carrots-lie.md b/.changeset/metal-carrots-lie.md
@@ -0,0 +1,11 @@
+---
+"@filbert-js/browser-stylesheet": patch
+"@filbert-js/core": patch
+"@filbert-js/css-ast": patch
+"@filbert-js/server-stylesheet": patch
+"@filbert-js/stylesheet": patch
+"@filbert-js/theming": patch
+"@filbert-js/website": patch
+---
+
+fix stylesheet ordering
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
   "resolutions": {	
     "**/react": "16.12.0",	
     "**/react-dom": "16.12.0",	
-    "**/@filbert-js/core": "^0.0.12",	
+    "**/@filbert-js/core": "^0.0.13",	
     "**/@filbert-js/browser-stylesheet": "^0.0.9",	
     "**/@filbert-js/style-sheet-context": "^0.0.9",	
     "**/@filbert-js/css-ast":"^0.0.7",	
@@ -20,7 +20,7 @@
   },
   "scripts": {
     "develop": "lerna run --stream --parallel --ignore @filbert-js/examples-* --ignore benchmarks-* develop",
-    "postinstall": "lerna bootstrap --force-local && yarn build-packages",
+    "postinstall": "yarn build-packages",
     "build": "lerna run build",
     "build-packages": "lerna run --ignore @filbert-js/website --ignore benchmarks-* --ignore @filbert-js/examples-* build",
     "develop-packages": "lerna run --parallel --stream --ignore @filbert-js/website --ignore benchmarks-* --ignore @filbert-js/examples-* develop",

diff --git a/packages/browser-stylesheet/index.js b/packages/browser-stylesheet/index.js
@@ -19,6 +19,21 @@ function overrides(el) {
   el.getChildById = function getChildById(id) {
     return document.getElementById(id);
   };
+  el.isBeforeChild = function (node1, node2) {
+    const children = this.children;
+    let a = -1,
+      b = -1;
+    for (let index = 0; index < children.length; index++) {
+      const element = children[index];
+      if (element === node1) {
+        b = index;
+      }
+      if (element === node2) {
+        a = index;
+      }
+    }
+    return a < b;
+  };
   return el;
 }
 const init = () => {

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -16,7 +16,7 @@ import { styled, Global } from '@filbert-js/core';
 
 const Button = styled('button')`
   background: pink;
-  border: solid 1px grey;
+  border: solid 1px gray;
 `;
 
 render(

diff --git a/packages/core/src/styled.js b/packages/core/src/styled.js
@@ -25,7 +25,13 @@ export function styled(Component, options = {}) {
 
       const className = obj.toString();
 
-      useStylesheet(keyframes, className, styles, props[SOURCE_ORDER], S.label);
+      useStylesheet(
+        keyframes,
+        className,
+        styles,
+        props[SOURCE_ORDER],
+        ForwardRef.label,
+      );
       const {
         className: passedClassName = '',
         [SOURCE_ORDER]: sourceOrder,
@@ -36,20 +42,24 @@ export function styled(Component, options = {}) {
 
       const finalProps = Object.assign(
         {
-          className: [S.label, className, passedClassName].join(' ').trim(),
+          className: [ForwardRef.label, className, passedClassName]
+            .join(' ')
+            .trim(),
           [SOURCE_ORDER]: Component[IS_STYLED_COMPONENT]
             ? className
             : undefined,
           ref,
         },
         _props,
       );
+
       return React.createElement(as || Component, finalProps, children);
     }
-    S[IS_STYLED_COMPONENT] = true;
-    S.label = options.label ? options.label : `${LABEL_PREFIX}${id}`;
+    const ForwardRef = React.forwardRef(S);
+    ForwardRef[IS_STYLED_COMPONENT] = true;
+    ForwardRef.label = options.label ? options.label : `${LABEL_PREFIX}${id}`;
 
     id++;
-    return React.forwardRef(S);
+    return ForwardRef;
   };
 }
diff --git a/packages/css-ast/README.md b/packages/css-ast/README.md
@@ -12,7 +12,7 @@ yarn add @filbert-js/css-ast
 import { toAST } from '@filbert-js/css-ast';
 
 const css = `
-color: grey;
+color: gray;
 button {
     margin: 0 1rem;
     background: #1f368f;
@@ -34,11 +34,11 @@ children: Array[2]
 rules: Array[1]
     0: Object
 name: "color"
-value: "grey"
+value: "gray"
 start: 0
 end: 168
 raw: "
-  color: grey;
+  color: gray;
   button {
     margin: 0 1rem;
     background: #1f368f;

diff --git a/packages/server-stylesheet/index.js b/packages/server-stylesheet/index.js
@@ -37,6 +37,21 @@ class Tag {
     }
     return undefined;
   }
+  isBeforeChild(node1, node2) {
+    const children = this._children;
+    let a = -1,
+      b = -1;
+    for (let index = 0; index < children.length; index++) {
+      const element = children[index];
+      if (element === node1) {
+        b = index;
+      }
+      if (element === node2) {
+        a = index;
+      }
+    }
+    return a < b;
+  }
   insertBefore(el, after) {
     const index = this._children.findIndex((item) => item === after);
     this._children.splice(index, 0, el);
@@ -110,12 +125,12 @@ export const createStylesheet = (options = {}) => {
     ...options,
   });
   const _getStyles = sheet.getStyles;
-  sheet.getStyles = function() {
+  sheet.getStyles = function () {
     const { root } = _getStyles.call(this);
     return root.toString();
   };
 
-  sheet.getReactElements = function() {
+  sheet.getReactElements = function () {
     const { root } = _getStyles.call(this);
     return root.toReactElements();
   };

diff --git a/packages/stylesheet/index.js b/packages/stylesheet/index.js
@@ -34,7 +34,6 @@ export function StyleSheet({
       const styles = cssParser({ css, namespace: `.${id}` });
       el.append(styles);
       _css[TYPES_CSS][id] = styles;
-
       // ensure source order
       if (sourceOrder) {
         root.insertBefore(el, root.getChildById(sourceOrder));
@@ -43,9 +42,11 @@ export function StyleSheet({
       }
     } else {
       // ensure source order
-      if (sourceOrder) {
-        const el = root.getChildById(id);
-        root.insertBefore(el, root.getChildById(sourceOrder));
+      const el = root.getChildById(id);
+      const elBefore = root.getChildById(sourceOrder);
+      // check before changing element order
+      if (sourceOrder && root.isBeforeChild(el, elBefore)) {
+        root.insertBefore(el, elBefore);
       }
     }
   }

diff --git a/packages/theming/README.md b/packages/theming/README.md
@@ -16,7 +16,7 @@ import { styled } from '@filbert-js/core';
 import { ThemeProvider } from '@filbert-js/theming';
 const Button = styled('button')`
   background: ${({ theme }) => theme.colors.brand};
-  border: solid 1px grey;
+  border: solid 1px gray;
 `;
 const theme = {
   colors: {

diff --git a/website/docs/CSS.md b/website/docs/CSS.md
@@ -7,7 +7,7 @@ import { css, jsx } from '@filbert-js/core';
 
 const styles = css`
   background: pink;
-  border: solid 1px grey;
+  border: solid 1px gray;
 `;
 
 render(<button css={styles}>This is a Button component.</button>);
@@ -21,7 +21,7 @@ import { css } from '@filbert-js/macro';
 
 const styles = css`
   background: pink;
-  border: solid 1px grey;
+  border: solid 1px gray;
 `;
 
 render(<button css={styles}>This is a Button component.</button>);
@@ -35,7 +35,7 @@ import { css } from '@filbert-js/core';
 
 const styles = css`
   background: pink;
-  border: solid 1px grey;
+  border: solid 1px gray;
 `;
 
 render(<button css={styles}>This is a Button component.</button>);

diff --git a/website/docs/component-selector.md b/website/docs/component-selector.md
@@ -10,7 +10,7 @@ const Button = styled('button')`
   outline: none;
 `;
 const Paragraph = styled('p')`
-  color: grey;
+  color: gray;
   ${Button} {
     color: #1f368f;
     background: white;
@@ -21,7 +21,7 @@ render(
   <React.Fragment>
     <Button>A button</Button>
     <Paragraph>
-      I'm grey!!
+      I'm gray!!
       <Button>I'm inside paragraph</Button>
     </Paragraph>
   </React.Fragment>,

diff --git a/website/docs/labels.md b/website/docs/labels.md
@@ -9,7 +9,7 @@ import { styled } from '@filbert-js/core';
 const Base = ({ className }) => <div className={className}>{className}</div>;
 
 const Box = styled(Base)`
-  background: grey;
+  background: gray;
   color: white;
   border: solid 1px gray;
   padding: 0.5rem;

diff --git a/website/docs/nested-selectors.md b/website/docs/nested-selectors.md
@@ -5,7 +5,7 @@ import React from 'react';
 import { styled } from '@filbert-js/core';
 
 const Paragraph = styled('p')`
-  color: grey;
+  color: gray;
   button {
     margin: 0 1rem;
     background: #1f368f;
@@ -15,7 +15,7 @@ const Paragraph = styled('p')`
 
 render(
   <Paragraph>
-    I'm grey!!
+    I'm gray!!
     <button>A button</button>
   </Paragraph>,
 );
@@ -28,7 +28,7 @@ import React from 'react';
 import { styled } from '@filbert-js/core';
 
 const Paragraph = styled('p')`
-  color: grey;
+  color: gray;
   header & {
     color: red;
   }
@@ -39,7 +39,7 @@ render(
     <header>
       <Paragraph>I'm red !!</Paragraph>
     </header>
-    <Paragraph>I'm grey !!</Paragraph>
+    <Paragraph>I'm gray !!</Paragraph>
   </div>,
 );
 ```
diff --git a/website/docs/override-component-style.md b/website/docs/override-component-style.md
@@ -3,7 +3,7 @@ import React from 'react';
 import { styled } from '@filbert-js/core';
 
 const Box = styled('div')`
-  background: grey;
+  background: gray;
   color: white;
   border: solid 1px gray;
   padding: 0.5rem;
@@ -13,6 +13,10 @@ const BlueBox = styled(Box)`
   background: #1f368f;
 `;
 
+const RedBox = styled(Box)`
+  background: red;
+`;
+
 const Container = styled('div')`
   display: flex;
   > * + * {
@@ -22,8 +26,9 @@ const Container = styled('div')`
 
 render(
   <Container>
-    <Box>I'm grey!!</Box>
+    <RedBox>I'm red!!</RedBox>
     <BlueBox>I'm blue!!</BlueBox>
+    <Box>I'm gray!!</Box>
   </Container>,
 );
 ```
diff --git a/website/docs/styled-components.md b/website/docs/styled-components.md
@@ -10,7 +10,7 @@ import { styled } from '@filbert-js/core';
 
 const Button = styled('button')`
   background: pink;
-  border: solid 1px grey;
+  border: solid 1px gray;
 `;
 
 render(<Button>This is a Button component.</Button>);

diff --git a/website/docs/theming.md b/website/docs/theming.md
@@ -4,7 +4,7 @@ import { styled } from '@filbert-js/core';
 import { ThemeProvider } from '@filbert-js/theming';
 const Button = styled('button')`
   background: ${({ theme }) => theme.colors.brand};
-  border: solid 1px grey;
+  border: solid 1px gray;
 `;
 const theme = {
   colors: {

diff --git a/website/docs/with-props.md b/website/docs/with-props.md
@@ -5,7 +5,7 @@ import { styled } from '@filbert-js/core';
 const Button = styled('button')`
   background: ${({ primary }) => (primary ? '#1f368f' : 'white')};
   color: ${({ primary }) => (primary ? 'white' : '#1f368f')};
-  border: solid 1px grey;
+  border: solid 1px gray;
 `;
 const Container = styled('div')`
   display: flex;