diff --git a/benchmarks/hash.ts b/benchmarks/hash.ts index a51f6cc..ebe40cb 100644 --- a/benchmarks/hash.ts +++ b/benchmarks/hash.ts @@ -1,3 +1,4 @@ +import cssProperties from "just-css-properties"; import fnv32a from "./hashes/fnv32a"; import fnv32h from "./hashes/fnv32h"; import murmurhash2 from "./hashes/murmurhash2-32-gc"; @@ -5,7 +6,6 @@ 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(); diff --git a/benchmarks/perf.ts b/benchmarks/perf.ts index ecfb80f..642d6e6 100644 --- a/benchmarks/perf.ts +++ b/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); diff --git a/src/index.spec.ts b/src/index.spec.ts index abc2e50..e5ec51c 100644 --- a/src/index.spec.ts +++ b/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,17 +134,18 @@ 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}`, ); }); @@ -152,8 +153,8 @@ describe("free style", () => { const Style = create(); const className = Style.registerStyle({ - borderRadius: 5, msBorderRadius: 5, + borderRadius: 5, }); expect(Style.getStyles()).toEqual( diff --git a/src/index.ts b/src/index.ts index 1d0c46b..f047858 100644 --- a/src/index.ts +++ b/src/index.ts @@ -150,21 +150,19 @@ export interface Compiled { /** * Sorted set of values used for style ordering. */ -type TupleSort = [string, T, number]; +type Tuple = [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(a: TupleSort, b: TupleSort) { - return a[0] > b[0] ? 1 : a[0] < b[0] ? -1 : a[2] - b[2]; +function tupleSort(a: Tuple, b: Tuple) { + return a[0] > b[0] ? 1 : -1; } /** * Transform a style string to a CSS string. */ -function tupleToStyle([name, value]: TupleSort>) { +function tupleToStyle([name, value]: Tuple>) { 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>> = []; - const nestedStyles: Array> = []; + const properties: Array>> = []; + const nestedStyles: Array> = []; // Sort keys before adding to styles. for (const key of Object.keys(styles)) { @@ -194,12 +192,12 @@ 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]); } } } @@ -207,7 +205,7 @@ function stylize( 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;