single class mode

[max-mapper]

I thought it would be cool if you could do this syntax:

https://github.com/substack/meowave/blob/894e01d75da152d72f96e222a0b4f0f848364184/main.js#L42-L48

but instead of having to do inline styles, csjs would give you a unique classname that you could set.

the idea is to be able to style a single class in a template string, similar to the simplicity of module.exports = function () {}

[rtsao]

This is a neat idea!

So something like:

var style = require('csjs').style;
var getCss = require('csjs').getCss;

var green = '#2ecc71';

var foo = style`color: ${green}; font-size: 12px`;

foo.toString();
// => 'style_4Eda43'

getCss(foo);
// => '.style_4Eda43 {color: #2ecc71; font-size: 12px}'

One thing to keep in mind is the ability to compose classes in a CSS Modules-like manner. I think ideally this feature cold be preserved in single-class mode. What immediately comes to mind is something like this:

var foo = style`color: ${green}; font-size: 12px`;

var bar = style`padding: 4px; border: 1px solid ${green}`.extends(foo);

bar.toString();
// => 'style_2bVd7K style_4Eda43'

getCss(bar);
// => '.style_2bVd7K {padding: 4px; border: 1px solid #2ecc71}'

getCss(foo);
// => '.style_4Eda43 {color: #2ecc71; font-size: 12px}'

Is that something you think would be useful? Of course there would be interop with normal csjs styles, for example:

var base = csjs`
.foo {
  color: ${green};
  font-size: 12px
}
`;

var bar = style`padding: 4px; border: 1px solid ${green}`.extends(base.foo);

bar.toString();
// => 'style_2bVd7K foo_4Eda43'

getCss(bar);
// => '.style_2bVd7K {padding: 4px; border: 1px solid #2ecc71}'

getCss(base);
/*
.foo_4Eda43 {
  color: #2ecc71;
  font-size: 12px
}
*/

[max-mapper]

that looks pretty good. cc @shama.

would this be valid?

var csjs = require('csjs')
var style = csjs`font-weight: bold;`
style.toString() // style_2bVd7K