Any chance of support outside of a `.treat.ts` file?

First off, I love treat! Thanks for building it!

Instead of:

// component.treat.ts
import { style } from 'treat';

export const green = style({
  color: 'green'
});

// component.ts
import { green } from './component.treat.ts';

export function MyComponent() {
  return <div className={green}>This is green</div>;
}

It would be awesome to be able to do:

// component.ts
import { style } from 'treat';

const green = style({
  color: 'green'
});

export function MyComponent() {
  return <div className={green}>This is green</div>;
}

or even better:

// component.ts
import { style } from 'treat';

export function MyComponent() {
  return <div className={style({color: 'green'})}>This is green</div>;
}

I’ve really come to enjoy the css prop in emotion and glamor. My ideal (working) solution for CSS is to have a css toolkit library like tailwindcss or basscss (or it could be exported classes from a toolkit treat file) and then to use a prop on the component for everything that falls outside of the toolkit.

Creating an extra file seems like more overhead than is needed for a couple of properties… Using the style prop is fine but sometimes these components are re-used all over the application so it would be nice to abstract it as a class.

There are other zero-runtime css-in-js libraries that support this type of thing… but they don’t have the other upsides of treat (as you talk about in the documentation).

[mattcompiles]

No, the only technical limitation is creating a style that is only known at runtime, theming is not the concern. e.g.

// This could work
import { style } from 'treat';

export function MyComponent() {
  return <div className={style({color: 'green'})}>This is green</div>;
}

// This won't
import { style } from 'treat';

export function MyComponent(props) {
  return <div className={style({color: props.color})}>This is green</div>;
}

I am interested in supporting inline styles but am not sure whether to allow use in dynamic contexts (like react render) as it may be confusing for people why some things work and others don’t. One way around this, which is the way facebooks stylex seems to work, is to only allow treat style calls at the top level of the file (kinda like imports).

e.g.

// This could work
import { style } from 'treat';

const green = style({color: 'green'});

export function MyComponent() {
  return <div className={green}>This is green</div>;
}

I am currently investigating lots of changes to treat which may become treat v2. Moving away from a separate file approach and towards inline styles is one thing I’m considering and I do have a semi-working prototype of this. Once I get a better idea of what will be in the next major version I will post an issue here detailing the proposed changes and hopefully release an alpha/beta version on npm.

[kripod]

In the last few days, I’ve been working on a CSS-in-JS framework called glaze, built upon treat. More details are available in these tweets.

Sneak peeks at the API (heavily inspired by Theme UI):