├── .gitignore
├── .github
    ├── banner.jpg
    └── clazzx.png
├── mod.ts
├── .helix
    └── languages.toml
├── src
    ├── build.ts
    ├── tests.ts
    └── clazzx.ts
├── LICENSE
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode
2 | npm/


--------------------------------------------------------------------------------
/.github/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/b3nten/clazzx/HEAD/.github/banner.jpg


--------------------------------------------------------------------------------
/.github/clazzx.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/b3nten/clazzx/HEAD/.github/clazzx.png


--------------------------------------------------------------------------------
/mod.ts:
--------------------------------------------------------------------------------
1 | export { ClazzX, clx } from "./src/clazzx.ts";
2 | export type { StyleProps } from "./src/clazzx.ts";
3 | 


--------------------------------------------------------------------------------
/.helix/languages.toml:
--------------------------------------------------------------------------------
 1 | [[language]]
 2 | name = "javascript"
 3 | language-server = { command = "deno", args = ["lsp"] }
 4 | config = { enable = true }
 5 | 
 6 | [[language]]
 7 | name = "typescript"
 8 | language-server = { command = "deno", args = ["lsp"] }
 9 | config = { enable = true }
10 | 


--------------------------------------------------------------------------------
/src/build.ts:
--------------------------------------------------------------------------------
 1 | // ex. scripts/build_npm.ts
 2 | import { build, emptyDir } from "https://deno.land/x/dnt/mod.ts";
 3 | 
 4 | await emptyDir("./npm");
 5 | 
 6 | await build({
 7 |   entryPoints: ["./mod.ts"],
 8 |   outDir: "./npm",
 9 |   shims: {
10 |     // see JS docs for overview and more options
11 |     deno: true,
12 |   },
13 |   package: {
14 |     // package.json properties
15 |     name: "clazzx",
16 |     version: "1.0.0",
17 |     description: "ClazzX is a small typesafe utility library for composing CSS classes.",
18 |     license: "MIT",
19 |     repository: {
20 |       type: "git",
21 |       url: "git+https://github.com/B3nten/clazzx",
22 |     },
23 |   },
24 |   typeCheck: false,
25 | });
26 | 
27 | // post build steps
28 | Deno.copyFileSync("LICENSE", "npm/LICENSE");
29 | Deno.copyFileSync("README.md", "npm/README.md");


--------------------------------------------------------------------------------
/src/tests.ts:
--------------------------------------------------------------------------------
 1 | import { assertEquals } from "https://deno.land/std@0.162.0/testing/asserts.ts";
 2 | import { clx, ClazzX } from "../mod.ts";
 3 | 
 4 | assertEquals(clx("text-3xl font-bold"), "text-3xl font-bold");
 5 | assertEquals(clx(["text-3xl", "font-bold"]), "text-3xl font-bold");
 6 | assertEquals(clx(["text-3xl", undefined, null]), "text-3xl");
 7 | 
 8 | assertEquals(clx("text-3xl", "font-bold"), "text-3xl font-bold");
 9 | assertEquals(clx("text-3xl", undefined, null), "text-3xl");
10 | assertEquals(clx(["text-3xl"], ["font-bold"]), "text-3xl font-bold");
11 | 
12 | class Btn extends ClazzX {
13 | 	base = "text-3xl font-bold";
14 | 	small = "text-sm";
15 | }
16 | 
17 | console.log("btn", Btn.compose({ }));
18 | 
19 | class Input extends Btn {
20 | 	base = "text-3xl font-bold";
21 | 	error = "text-red-500"
22 | 	compounds = [
23 | 		{
24 | 			states: ["small", "error"],
25 | 			classes: "hover:bg-red-200",
26 | 		},
27 | 	]
28 | }
29 | 
30 | console.log("input", Input.compose({ small: true, error: true }));


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright 2022 Benton Boychuk-Chorney
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/src/clazzx.ts:
--------------------------------------------------------------------------------
  1 | type Clx =
  2 | 	| string
  3 | 	| boolean
  4 | 	| undefined
  5 | 	| null
  6 | 	| Array<string | boolean | undefined | null>;
  7 | 
  8 | 
  9 | /**
 10 |  * 
 11 |  *clx accepts any number of strings, booleans, undefined, null, or arrays of those types and returns a string of all truthy values.
 12 |  * @example
 13 |  * ```
 14 |  * clx("text-3xl font-bold") // "text-3xl font-bold"
 15 |  * clx(["text-3xl", "font-bold"]) // "text-3xl font-bold"
 16 |  * clx(["text-3xl", undefined, null]) // "text-3xl"
 17 |  * clx("text-3xl", "font-bold") // "text-3xl font-bold"
 18 |  * clx("text-3xl", undefined, null) // "text-3xl"
 19 |  * clx(["text-3xl"], ["font-bold"]) // "text-3xl font-bold"
 20 |  * ```
 21 |  */
 22 | 
 23 | export const clx = (...input: Array<Clx>): string => {
 24 | 	if (input.length === 1) {
 25 | 		if (Array.isArray(input[0])) {
 26 | 			return clx(...input[0]);
 27 | 		} else if (typeof input[0] === "string") {
 28 | 			return input[0];
 29 | 		}
 30 | 	}
 31 | 	const acc: string[] = [];
 32 | 	for (const item of input) {
 33 | 		if (Array.isArray(item)) {
 34 | 			acc.push(clx(...item));
 35 | 		} else if (typeof item === "string") {
 36 | 			acc.push(item);
 37 | 		}
 38 | 	}
 39 | 	let str = "";
 40 | 	for (let i = 0; i < acc.length; i++) {
 41 | 		if (acc[i]) {
 42 | 			str += acc[i] + (i < acc.length - 1 ? " " : "");
 43 | 		}
 44 | 	}
 45 | 	return str;
 46 | };
 47 | 
 48 | type OmitIntrinsic<T> = Omit<T, "classes" | "compounds" | "default">;
 49 | 
 50 | /**
 51 |  * StyleProps creates a type from a ClazzX class that is used to define the input to the `compose` method.
 52 |  * @example
 53 |  * ```
 54 |  * class Btn extends ClazzX {
 55 |  *  base = "text-3xl font-bold";
 56 |  *  small = "text-sm";
 57 |  * }
 58 |  * 
 59 |  * function Button({...props}: StyleProps<Btn>) {
 60 |  *   return <button className={Btn.compose(props)} />;
 61 |  * }
 62 |  * ```
 63 |  */
 64 | 
 65 | export type StyleProps<T> = {
 66 | 	[K in keyof Partial<
 67 | 		OmitIntrinsic<T>
 68 | 	>]: boolean;
 69 | };
 70 | 
 71 | /**
 72 |  *Inherit ClazzX and define your own base, default, compounds, and classes. Compose them by calling the static `compose` method.
 73 |  * Access the classes by calling the static `get` method.
 74 |  * @example
 75 |  * ```
 76 |  * class Btn extends ClazzX {
 77 |  *   base = "text-3xl font-bold";
 78 |  *   small = "text-sm";
 79 |  * }
 80 |  * const classes = Btn.compose({ small: true });
 81 |  * ```
 82 |  * @example
 83 |  * ```
 84 |  * class Input extends Btn {
 85 |  *   base = "text-3xl font-bold";
 86 |  *   error = "text-red-500"
 87 |  *   compounds = [{
 88 |  *     states: ["small", "error"],	
 89 |  *     classes: "hover:bg-red-200",
 90 |  *   }]
 91 |  * }
 92 |  * const classes = Input.compose({ small: true, error: true });
 93 |  * ```
 94 |  * @docs https://github.com/B3nten/clazzx
 95 |  */
 96 | 
 97 | export class ClazzX {
 98 | 	public static clx = clx;
 99 | 
100 | 	public base: Clx = []
101 | 	public default: Clx = [];
102 | 
103 | 	public compounds: Array<{
104 | 		states: Array<string>;
105 | 		classes: Clx;
106 | 	}> = [];
107 | 
108 | 	public classes(input?: StyleProps<this>): string {
109 | 		const acc = new Map();
110 | 
111 | 		if (input && "base" in input && !input.base) {
112 | 			// not including base. Maybe do something here?
113 | 		} else {
114 | 			acc.set("base", clx(this.base));
115 | 		}
116 | 
117 | 		if (input) {
118 | 			for (const [key, value] of Object.entries(input)) {
119 | 				if (
120 | 					key !== "base" &&
121 | 					key !== "default" &&
122 | 					key !== "compounds" &&
123 | 					key !== "classes" &&
124 | 					value === true
125 | 				) {
126 | 					//@ts-expect-error we're setting the value on the class dynamically
127 | 					acc.set(key, clx(this[key]));
128 | 				}
129 | 			}
130 | 		}
131 | 		// If nothing provided, use default values
132 | 		if (!input || Object.entries(input).length === 0) {
133 | 			acc.set("default", clx(this.default));
134 | 		}
135 | 
136 | 		// handle compounds
137 | 		for (const [i, compound] of this.compounds.entries()) {
138 | 			if (
139 | 				compound.states.every(
140 | 					//@ts-expect-error this is fine
141 | 					(key) => key in this && input && input[key]
142 | 				)
143 | 			) {
144 | 				acc.set("compound" + i, clx(compound.classes));
145 | 			}
146 | 		}
147 | 		return clx(Array.from(acc.values()));
148 | 	}
149 | 
150 | 	public static compose<C extends ClazzX>(
151 | 		this: new (...args: unknown[]) => C,
152 | 		classes: StyleProps<C>
153 | 	) {
154 | 		const instance = new this();
155 | 		return instance.classes(classes);
156 | 	}
157 | 	public static get<C extends ClazzX>(
158 | 		this: new (...args: unknown[]) => C
159 | 	) {
160 | 		const instance = new this();
161 | 		return instance
162 | 	}
163 | }
164 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <div align="center">
  2 | <br />
  3 | 
  4 | ![Clazzx](.github/banner.jpg)
  5 | 
  6 | <h3>CLazzx 💄</h3>
  7 | 
  8 | #### A typesafe utility library for composing HTML classes
  9 | 
 10 | [![Npm package yearly downloads](https://badgen.net/npm/dy/express)](https://npmjs.com/package/express)
 11 | [![GitHub stars](https://img.shields.io/github/stars/freeCodeCamp/freeCodeCamp.svg?style=social&label=Star&maxAge=2592000)](https://github.com/freeCodeCamp/freeCodeCamp)
 12 | [![NuGet stable version](https://badgen.net/nuget/v/newtonsoft.json)](https://nuget.org/packages/newtonsoft.json)
 13 | 
 14 | *ClazzX is a small typesafe utility library for composing HTML classes using state rather than variants.*
 15 | </div>
 16 | 
 17 | ### Introduction
 18 | 
 19 | ClazzX is a small typesafe utility library for composing HTML classes. Unlike Vanilla Extract, Stitches, or CVA (all fantastic options) ClazzX takes a different approach, using *state* rather than *variants* to compose styles.
 20 | 
 21 | The classic approach is to create a series of variants that can be selected: 
 22 | ```ts 
 23 | className={myButton({size: "small", intent="primary"})}
 24 | // AND
 25 | <Button size="small" intent="primary" />
 26 | ```
 27 | In comparison, ClazzX models combinations of styles based on state.
 28 | ```ts
 29 | className={MyButton.compose({small: true, primary: true})}
 30 | // AND
 31 | <Button small primary />
 32 | ```
 33 | This simplifies the logic of tying the styling of a component to complex state. Instead of a series of nested ternary operators, simple logical operators can be used to clearly define the appropriate styles.
 34 | 
 35 | ```ts
 36 | className={
 37 |    MyButton.compose({ 
 38 |        primary: true,
 39 |        loading: isLoading,
 40 |        error: isError 
 41 |    })
 42 | }
 43 | //AND
 44 | <Button primary loading={isLoading} error={isError}>
 45 | 
 46 | // Versus the traditional variant approach
 47 | 
 48 | className={
 49 |    myButton({
 50 |       intent: isLoading ? "loading" 
 51 |       : isError ? "error" 
 52 |       : "primary"
 53 |    })
 54 | }
 55 | // AND
 56 | <Button intent={isLoading ? "loading" : isError ? "error" : "primary"}>
 57 | ```
 58 | 
 59 | ### Installation
 60 | ```ts 
 61 | // Deno
 62 | import { ClazzX, clx } from "https://deno.land/x/clazzx/mod.ts"
 63 | 
 64 | // NPM
 65 | npm i clazzx
 66 | 
 67 | // Yarn
 68 | yarn add clazzx
 69 | ```
 70 | ### Getting Started
 71 | 
 72 | #### A basic component
 73 | 
 74 | ```ts
 75 | import { ClazzX } from 'clazzx'
 76 | 
 77 | class Input extends ClazzX {
 78 |    // the base class will always be applied
 79 |    base = "border rounded-md font-sans"
 80 | 
 81 |    small = "px-2 py-1 text-sm"
 82 |    md = "px-3 py-2 text-base"
 83 |    lg = "px-4 py-3 text-lg"
 84 | 
 85 |    // you can use both strings and string arrays freely
 86 |    primary = [
 87 |       "bg-primary",
 88 |       "border-primary-dark",
 89 |       "text-primary-content"
 90 |    ]
 91 |    secondary = [
 92 |       "bg-secondary",
 93 |       "border-secondary-dark",
 94 |       "text-secondary-content"
 95 |    ]
 96 | }
 97 | 
 98 | function MyCustomComponent(){
 99 |    return <input className={Input.compose({ md: true, secondary: true })}/>
100 | }
101 | ```
102 | #### Default Classes
103 | You can set default classes that are applied if nothing is passed to the classes method.
104 | ```ts
105 | default = [this.md, this.secondary, "hover:scale-105"]
106 | ```
107 | #### Compounds
108 | If you want to conditionally apply styles when two or more states are true, you can create compound states.
109 | ```ts
110 | compounds = [{
111 |    state: ["primary", "large"],
112 |    classes: "shadow-md"
113 | }]
114 | ```
115 | 
116 | #### Ordering
117 | Classes are applied in the order of the states.
118 | ```ts
119 | className={btn.compose({rounded: true, square: true})}
120 | // className="border-md border-none"
121 | <Button primary secondary small medium>
122 | // className="bg-primary bg-secondary text-sm text-md"
123 | ```
124 | The order of classes works like this:
125 | 1. `base`
126 | 3. ...order based on state `||` default classes
127 | 4. Compounds
128 | 
129 | #### StyleProps
130 | StyleProps is an exported type that gives you access to the parameters of the style class. You can use this to strongly type components.
131 | ```ts
132 | function MyButton({...props}: StyleProps<MyStyleClass>){}
133 | ```
134 | 
135 | #### Clx
136 | 
137 | `clx` is a variadic utility function that composes a string based on it's truthy inputs. 
138 | 
139 | ```ts
140 | const a = clx(["bg-green-300", "text-md"])
141 | // "bg-green-300 text-md"
142 | 
143 | const b = clx("bg-red-300", false && "text-red-700")
144 | // "bg-red-300"
145 | 
146 | const c = clx(["p-4", false && "mt4"], "text-black", true && "font-bold")
147 | // "p-4 text-black font-bold"
148 | ```
149 | It can be imported or used as a static method on `ClazzX`.
150 | 
151 | #### Accessing fields
152 | Each ClazzX instance exposes a static `get()` method to access the fields and methods of the class.
153 | 
154 | ### Examples
155 | 
156 | #### React Link
157 | ```ts
158 | import { Style, StyleProps } from "clazzx"
159 | 
160 | class LinkStyles extends ClazzX {
161 |    base: "font-link no-underline transition duration-200"
162 | 
163 |    primary: "text-link hover:text-link-hover"
164 |    secondary: "text-secondary hover:text-secondary-hover"
165 |    active: "text-active hover:text-active-hover underline"
166 | 
167 |    default = this.primary
168 | }
169 | 
170 | interface Link {
171 |    children: ReactNode 
172 |    props: StyleProps<LinkStyles> & HTMLAttributes<HTMLAnchorElement>
173 | }
174 | 
175 | function Link({children, ...props}: Link){
176 |    return <a {...props} className={LinkStyles.compose({...props})}>{children}</a>
177 | }
178 | 
179 | function App(){
180 |    const router = useRouter()
181 |    return (
182 |       <Link href="/about" secondary active={router.isCurrentPage}>
183 |          My Link
184 |       </Link>
185 |    )
186 | }
187 | ```
188 | 
189 | #### With Globals
190 | ```ts
191 | class GlobalStyles extends ClazzX {
192 |    padding = {
193 |       sm: "p-2",
194 |       md: "p-4",
195 |       lg: "p-6",
196 |       dynamic: (i: number) => {
197 |          `p-[${i*2}px]`
198 |       }
199 |    }
200 | }
201 | 
202 | class Input extends GlobalStyles {
203 |    sm = clx(this.padding.sm, "rounded-sm")
204 |    md = clx(this.padding.md, "rounded-md")
205 |    lg = clx(this.padding.lg, "rounded-lg")
206 | 
207 |    warning = "outline-red"
208 |    compounds = [{
209 |       state: ["sm", "warning"],
210 |       classes: this.padding.dynamic(8)
211 |    }]
212 | }
213 | ```
214 | 


--------------------------------------------------------------------------------