Stop sorting styles

benchmarks/hash.ts

@@ -1,11 +1,11 @@
+import cssProperties from "just-css-properties";
 import fnv32a from "./hashes/fnv32a";
 import fnv32h from "./hashes/fnv32h";
 import murmurhash2 from "./hashes/murmurhash2-32-gc";
 import murmurhash3 from "./hashes/murmurhash3-32-gc";
 import stringHash from "./hashes/string-hash";
 
 const tests: string[] = [];
-const cssProperties = require("just-css-properties");
 const cssValues = [
   "block",
   "flex",
@@ -57,7 +57,7 @@ interface Result {
 }
 
 function runTests(
-  fn: (value: string, seed?: number) => number | string
+  fn: (value: string, seed: number) => number | string
 ): Result {
   const map: { [value: string]: string[] } = {};
   const start = process.hrtime();

benchmarks/perf.ts

@@ -1,7 +1,6 @@
+import cssProperties from "just-css-properties";
 import { create } from "../src/index";
 
-const cssProperties = require("just-css-properties");
-
 const Style = create();
 const start = process.hrtime();
 const count = Math.pow(10, 5);

src/index.spec.ts

@@ -74,8 +74,8 @@ describe("free style", () => {
     const Style = create();
 
     const className = Style.registerStyle({
-      flexGrow: 2,
       WebkitFlexGrow: 2,
+      flexGrow: 2,
     });
 
     expect(Style.getStyles()).toEqual(
@@ -98,8 +98,8 @@ describe("free style", () => {
     changeId = Style.changeId;
 
     const className2 = Style.registerStyle({
-      color: "red",
       background: "blue",
+      color: "red",
     });
 
     expect(Style.changeId).toEqual(changeId);
@@ -134,26 +134,27 @@ describe("free style", () => {
     );
   });
 
-  it("should sort keys by property name", () => {
+  it("should maintain key ordering from object", () => {
     const Style = create();
 
     const className = Style.registerStyle({
-      border: "5px solid red",
-      borderWidth: 10,
-      borderColor: "blue",
+      borderStyle: "solid",
+      borderColor: "transparent",
+      borderBottomColor: "black",
+      borderTopColor: "black",
     });
 
     expect(Style.getStyles()).toEqual(
-      `.${className}{border:5px solid red;border-color:blue;border-width:10px}`,
+      `.${className}{border-style:solid;border-color:transparent;border-bottom-color:black;border-top-color:black}`,
     );
   });
 
   it("should sort keys alphabetically after hyphenating", () => {
     const Style = create();
 
     const className = Style.registerStyle({
-      borderRadius: 5,
       msBorderRadius: 5,
+      borderRadius: 5,
     });
 
     expect(Style.getStyles()).toEqual(

src/index.ts

@@ -150,21 +150,19 @@ export interface Compiled {
 /**
  * Sorted set of values used for style ordering.
  */
-type TupleSort<T> = [string, T, number];
+type Tuple<T> = [string, T];
 
 /**
- * Implement a stable sort by falling back on a third numeric property.
- *
- * Node.js < 12 and IE do not support stable sort.
+ * Sort tuples by key, assuming unique keys (due to the nature of object keys).
  */
-function tupleSort<T>(a: TupleSort<T>, b: TupleSort<T>) {
-  return a[0] > b[0] ? 1 : a[0] < b[0] ? -1 : a[2] - b[2];
+function tupleSort<T>(a: Tuple<T>, b: Tuple<T>) {
+  return a[0] > b[0] ? 1 : -1;
 }
 
 /**
  * Transform a style string to a CSS string.
  */
-function tupleToStyle([name, value]: TupleSort<NonNullable<PropertyValue>>) {
+function tupleToStyle([name, value]: Tuple<NonNullable<PropertyValue>>) {
   if (typeof value === "number" && value && !CSS_NUMBER[name]) {
     return `${name}:${value}px`;
   }
@@ -182,8 +180,8 @@ function stylize(
   styles: Styles,
   parentClassName: string,
 ) {
-  const properties: Array<TupleSort<NonNullable<PropertyValue>>> = [];
-  const nestedStyles: Array<TupleSort<Styles>> = [];
+  const properties: Array<Tuple<NonNullable<PropertyValue>>> = [];
+  const nestedStyles: Array<Tuple<Styles>> = [];
 
   // Sort keys before adding to styles.
   for (const key of Object.keys(styles)) {
@@ -194,20 +192,20 @@ function stylize(
         const name = hyphenate(key);
         for (let i = 0; i < value.length; i++) {
           const style = value[i];
-          if (style != null) properties.push([name, style, i]);
+          if (style != null) properties.push([name, style]);
         }
       } else if (typeof value === "object") {
-        nestedStyles.push([key, value, 0]);
+        nestedStyles.push([key, value]);
       } else {
-        properties.push([hyphenate(key), value, 0]);
+        properties.push([hyphenate(key), value]);
       }
     }
   }
 
   const isUnique = !!styles.$unique;
   const parent = styles.$global ? "" : parentClassName;
   const nested = parent ? nestedStyles : nestedStyles.sort(tupleSort);
-  const style = properties.sort(tupleSort).map(tupleToStyle).join(";");
+  const style = properties.map(tupleToStyle).join(";");
   let pid = style;
   let selector = parent;
   let childRules = rulesList;