[Draft]: Composable classnames #47

[eddyw]

Description (see: #47)

This PR is a draft (and PoC) of a new API for otion inspired by React stylex. The implementation is a bit different from what was mentioned in #47

• No toString() added
• No breaking changes

Details

It add 3 methods:

• stylesCreate – Allows to create style objects. This is basically just an object with string keys that can contain CSS properties (as in css(...)). This is partially implemented and it only runs hash(value) instead of calling css(...)

const styles = css.create({
	blue: { color: "blue", border: "1px solid" },
	green: { color: "green" },
	hotpink: { color: "hotpink", selectors: { "&:hover": { color: "pink" } } },
});
styles.blue // { color: [classname], border: [classname] }
styles.blue.color // [classname]

• stylesCompose – Allows to compose two or more style objects into a single one. Right side argument overrides left side argument styles

const styles = css.create({
	blue: { color: "blue", border: "1px solid" },
	green: { color: "green" },
	hotpink: { color: "hotpink", selectors: { "&:hover": { color: "pink" } } },
});
const combined = css.compose(styles.blue, styles.green, styles.hotpink);
combined.color // [classname] for "hotpink" (right-side overrides left side)
combined.border // [classname] for "1px solid"
combined.selectors["&:hover"].color // [classname] for "pink"

• stylesClassnames – Calls stylesCompose if more than one style object is passed & combines all classnames into a single string (as what css(...) does but for style objects)

const styles = css.create({
	blue: { color: "blue", border: "1px solid" },
	hotpink: { color: "hotpink", selectors: { "&:hover": { color: "pink" } } },
});
const className = css.cls(styles.blue, styles.hotpink) // "3sn2xs 147pvhj 1666u7v"

A new page was added to gatsby example, called rfc.tsx. Visit locally http://localhost:8000/rfc to see how it behaves.

The gatsby page creates a mock or would-be API that would be backwards compatible with what css is now:

css(...) // As it is now
css.create(...)
css.compose(...)
css.cls(...)

Soo .. thoughts? 😅
There are some bothering eslint rules that I ignored that are up for discussion too 😆

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit f992d1d:

Sandbox	Source
kripod/otion: example-cra	Configuration
kripod/otion: example-gatsby	Configuration
kripod/otion: example-nextjs	Configuration

[lgtm-com]

This pull request introduces 1 alert when merging f992d1d into 0c888d9 - view on LGTM.com

new alerts:

• 1 for Comparison between inconvertible types