Skip to content

Commit

Permalink
Stop sorting styles
Browse files Browse the repository at this point in the history
  • Loading branch information
blakeembrey committed Jan 17, 2024
1 parent 9b4f81b commit d312695
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 22 deletions.
4 changes: 2 additions & 2 deletions benchmarks/hash.ts
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -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();
Expand Down
3 changes: 1 addition & 2 deletions benchmarks/perf.ts
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
17 changes: 9 additions & 8 deletions src/index.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,8 @@ describe("free style", () => {
const Style = create();

const className = Style.registerStyle({
flexGrow: 2,
WebkitFlexGrow: 2,
flexGrow: 2,
});

expect(Style.getStyles()).toEqual(
Expand All @@ -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);
Expand Down Expand Up @@ -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(
Expand Down
20 changes: 10 additions & 10 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -150,21 +150,21 @@ 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.
*/
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 : a[0] < b[0] ? -1 : 0;
}

/**
* 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`;
}
Expand All @@ -182,8 +182,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)) {
Expand All @@ -194,20 +194,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;
Expand Down

0 comments on commit d312695

Please sign in to comment.