lint and format and stuff

biome.json

@@ -0,0 +1,12 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true
+		}
+	}
+}

index.ts

@@ -1,9 +1,9 @@
-import { composePlugins, type Plugin } from './src/plugin';
-import { screens } from './src/screens';
-import { spacing } from './src/spacing';
-import { colorScheme } from './src/colorScheme';
-import { size } from './src/size';
+import { colorScheme } from "./src/colorScheme";
+import { type Plugin, composePlugins } from "./src/plugin";
+import { screens } from "./src/screens";
+import { size } from "./src/size";
+import { spacing } from "./src/spacing";
 
-export const crosswind = composePlugins([screens, spacing, colorScheme, size])
+export const crosswind = composePlugins([screens, spacing, colorScheme, size]);
 
-export { composePlugins, type Plugin, screens, spacing, colorScheme, size }
+export { composePlugins, type Plugin, screens, spacing, colorScheme, size };

package.json

@@ -1,16 +1,17 @@
 {
-  "name": "crosswind",
-  "module": "index.ts",
-  "type": "module",
-  "devDependencies": {
-    "@types/bun": "latest"
-  },
-  "peerDependencies": {
-    "typescript": "^5.0.0"
-  },
-  "dependencies": {
-    "@types/lodash": "^4.17.7",
-    "lightningcss": "^1.25.1",
-    "lodash": "^4.17.21"
-  }
-}
+	"name": "crosswind",
+	"module": "index.ts",
+	"type": "module",
+	"devDependencies": {
+		"@biomejs/biome": "1.8.3",
+		"@types/bun": "latest"
+	},
+	"peerDependencies": {
+		"typescript": "^5.0.0"
+	},
+	"dependencies": {
+		"@types/lodash": "^4.17.7",
+		"lightningcss": "^1.25.1",
+		"lodash": "^4.17.21"
+	}
+}

playground.ts

@@ -1,12 +1,11 @@
 import { composeVisitors, transform } from "lightningcss";
-import { composePlugins, spacing, screens, colorScheme, crosswind } from ".";
+import { colorScheme, composePlugins, crosswind, screens, spacing } from ".";
 
-
-let { code, map } = transform({
-    filename: 'test.css',
-    minify: true,
-    code: new TextEncoder().encode('.foo{size: 4em}'),
-    ...composePlugins([crosswind])
+const { code, map } = transform({
+	filename: "test.css",
+	minify: true,
+	code: new TextEncoder().encode(".foo{size: 4em}"),
+	...composePlugins([crosswind]),
 });
 
-console.log(code.toString())
+console.log(code.toString());

src/colorScheme.ts

@@ -2,82 +2,82 @@ import type { CustomAtRules } from "lightningcss";
 import type { Plugin } from "./plugin";
 
 const breakpoints = {
-    sm: 40,
-    md: 48,
-    lg: 64,
-    xl: 80,
-    xxl: 96
+	sm: 40,
+	md: 48,
+	lg: 64,
+	xl: 80,
+	xxl: 96,
 } as const;
 
 export const colorScheme: Plugin<CustomAtRules> = {
-    customAtRules: {
-        light: {
-            prelude: null,
-            body: 'style-block'
-        },
-        dark: {
-            prelude: null,
-            body: 'style-block'
-        }
-    },
-    visitor: {
-        Rule: {
-            custom: {
-                light(rule) {
-                    return {
-                        type: 'media',
-                        value: {
-                            rules: rule.body.value,
-                            loc: rule.loc,
-                            query: {
-                                mediaQueries: [
-                                    {
-                                        mediaType: 'all',
-                                        condition: {
-                                            type: 'feature',
-                                            value: {
-                                                type: 'plain',
-                                                name: "prefers-color-scheme",
-                                                value: {
-                                                    type: 'ident',
-                                                    value: 'light'
-                                                }
-                                            }
-                                        }
-                                    }
-                                ]
-                            }
-                        }
-                    }
-                },
-                dark(rule) {
-                    return {
-                        type: 'media',
-                        value: {
-                            rules: rule.body.value,
-                            loc: rule.loc,
-                            query: {
-                                mediaQueries: [
-                                    {
-                                        mediaType: 'all',
-                                        condition: {
-                                            type: 'feature',
-                                            value: {
-                                                type: 'plain',
-                                                name: "prefers-color-scheme",
-                                                value: {
-                                                    type: 'ident',
-                                                    value: 'dark'
-                                                }
-                                            }
-                                        }
-                                    }
-                                ]
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-} as const;
+	customAtRules: {
+		light: {
+			prelude: null,
+			body: "style-block",
+		},
+		dark: {
+			prelude: null,
+			body: "style-block",
+		},
+	},
+	visitor: {
+		Rule: {
+			custom: {
+				light(rule) {
+					return {
+						type: "media",
+						value: {
+							rules: rule.body.value,
+							loc: rule.loc,
+							query: {
+								mediaQueries: [
+									{
+										mediaType: "all",
+										condition: {
+											type: "feature",
+											value: {
+												type: "plain",
+												name: "prefers-color-scheme",
+												value: {
+													type: "ident",
+													value: "light",
+												},
+											},
+										},
+									},
+								],
+							},
+						},
+					};
+				},
+				dark(rule) {
+					return {
+						type: "media",
+						value: {
+							rules: rule.body.value,
+							loc: rule.loc,
+							query: {
+								mediaQueries: [
+									{
+										mediaType: "all",
+										condition: {
+											type: "feature",
+											value: {
+												type: "plain",
+												name: "prefers-color-scheme",
+												value: {
+													type: "ident",
+													value: "dark",
+												},
+											},
+										},
+									},
+								],
+							},
+						},
+					};
+				},
+			},
+		},
+	},
+} as const;

src/plugin.ts

@@ -1,24 +1,27 @@
-import { type CustomAtRules, type Visitor } from 'lightningcss';
+import type { CustomAtRules, Visitor } from "lightningcss";
 import _ from "lodash";
 
 export type Plugin<C extends CustomAtRules> = {
-    visitor: Visitor<C>,
-    customAtRules?: C
-}
-
-export function composePlugins<C extends CustomAtRules>(plugins: (Plugin<C> | Visitor<C>)[]) {
-    let customAtRules: CustomAtRules = {};
-    let visitor: Visitor<CustomAtRules> = {};
+	visitor: Visitor<C>;
+	customAtRules?: C;
+};
 
-    plugins.forEach(p => {
-        if ('visitor' in p) {
-            _.merge(visitor, p.visitor)
-            if (p.customAtRules) { Object.assign(customAtRules, p.customAtRules) }
-        } else {
-            _.merge(visitor, p)
+export function composePlugins<C extends CustomAtRules>(
+	plugins: (Plugin<C> | Visitor<C>)[],
+) {
+	const customAtRules: CustomAtRules = {};
+	const visitor: Visitor<CustomAtRules> = {};
 
-        }
-    });
+	for (const p of plugins) {
+		if ("visitor" in p) {
+			_.merge(visitor, p.visitor);
+			if (p.customAtRules) {
+				Object.assign(customAtRules, p.customAtRules);
+			}
+		} else {
+			_.merge(visitor, p);
+		}
+	};
 
-    return { customAtRules, visitor }
-}
+	return { customAtRules, visitor };
+}