CSX

[blakeembrey]

Hi! I noticed a lot of work going on with typestyle/csx. It looks pretty valuable to everyone in the "CSS-in-JS" community, would you be interested in keeping it as a separate module (you can re-export in typestyle for backward compatibility)? It'd be nice to do things like require('csx/normalize'), etc where each module can be required for smaller builds and it just uses objects we can re-use across free-style, react-free-style and typestyle.

[basarat]

csx is really bound to typestyle e.g. its color helpers http://typestyle.io/#/colors need ensureString https://github.com/typestyle/typestyle/blob/a58b0dbee8c5050a4567881a3e58c8c5a62e777b/src/index.ts#L32-L36 and the csx/flex flexbox uses the vendor prefixing as supported by freestyle whereas other frameworks prefer automatic vendor prefixing.

csx/normalize uses typestyle internally cssRaw and will not work without typestyle. We can revisit the design once I'm done with all the /play + guide cleanups / documentations.

PS: I am away till next monday at a conference 🌹

[blakeembrey]

No worries. Most of it appears to be just objects, and writing a quick parser for CSS to an object might be useful. As an aside, a method can always be added to free-style to support CSS text or top-level objects (there's currently registerRule, can add registerGlobal so you don't have to call registerRule multiple times for things like normalize or presets).

There's a few libraries available that would automatically vendor prefix before passing it to free-style, but I've found adding the prefixes manually (or adding the function that adds them manually) to be pretty simple myself. I'd love to help expose those objects/functions once you're done so everything just returns objects and we can mix/match together.

[notoriousb1t]

@blakeembrey We moved csx back into its own repo, and I believe it would be possible for the property helpers like the ColorHelper to be used directly in free-style with about 3 lines of code here: https://github.com/blakeembrey/free-style/blob/master/src/free-style.ts#L123. Would you be open to a PR for that?

[blakeembrey]

I won't accept it in free-style as it's kind of implementation specific, but the couldn't the output just be turned into strings and objects before it reaches free-style?

[notoriousb1t]

The helpers are built so a call to .toString() returns the string representation. It looks like you unintentionally support it with your call to String() 😉

[blakeembrey]

@notoriousb1t That would work, but I'm not sure it'll ever actually get to these because of https://github.com/blakeembrey/free-style/blob/f37fdc1f447b075bcea5e72a4a004344d285b3e6/src/free-style.ts#L151-L155 - an object would be detected as a nested style and not as a property.

[notoriousb1t]

That is true. 😦

If there is no accepted way to build helpers for free-style (or plans to provide such a mechanism), that users will need to call .toString() after all helpers. For something like a color helper, that is pretty normal, but it might be a little weird to call background('solid', 'thin', 'red').toString().

[blakeembrey]

What do the helpers return? What about returning objects and then just using extend? E.g. Object.assign({}, background('solid', 'thin', 'red'), color('red'))? It's shared utilities that seem useful to people and it'd be great to use across any CSS-in-JS platform that uses objects and ampersand interpolation which is a few 😄

[notoriousb1t]

The helpers (only colors right now) are designed to return an instance of themselves each time they are mutated. This allows for a nice chaining effect without modifying the original, For instance, you could do this:

http://typestyle.io/play/#src=%0A//%20rgb(204,0,0)%0Aconst%20red%20=%20csx.color('#FF0000').darken('10%25');%0A%0A//rgba(51,255,255,0.9)%0Aconst%20closeToCyan%20=%20red.invert().fadeOut('10%25');%0A%0Aconst%20myClass%20=%20style(%7B%20%0A%20%20backgroundColor:%20closeToCyan,%20%0A%20%20color:%20red%20%0A%7D);%0A%0A%3Cdiv%20className=%7BmyClass%7D%3E%0A%20%20%7Bred.toString()%7D%20+%20%7BcloseToCyan.toString()%7D%0A%3C/div%3E

That means that at any time the user can continue to key off additional colors from the original. Same thing with other future helpers. Using a fluent pattern is really nice and intuitive with auto-complete/intellisense. That is not possible if the helper is converted directly to string.

Maybe let's look at this differently, I would like to submit a proposal to extend free-style such that it can support sophisticated helpers for properties. If csx implements whatever structure is required, it would allow a free-style user to do something similar to that example without having to call toString(). That way both libraries can benefit from work done in csx.

Based on how object checking is happening, tbe interface we are using now, { toString(): string, type: string }, may need to be renamed so it is easy for free-style to tell if it is meant to be an object, or meant to be converted to string.

To be clear though, csx at this point only consists of things that are eventually converted to strings before being passed to free-style. All the mixins (anything passed in as an object) were moved to csstips .

[blakeembrey]

Fair enough. In this case, I don't think it's a huge deal to write .toString() myself if that's best for the API 😄 In TypeStyle, you can always keep the automatic conversion.

Edit: If there's a simple enough proposal that doesn't potentially conflict or add weight/overhead, I am, of course, happy to hear it.

[blakeembrey]

Also, in case you hadn't seen it, but https://github.com/Qix-/color is the library I have linked currently on free-style for colour manipulation.

[notoriousb1t]

I looked at it when first starting on this project, but many of its functions mutate the internal state. While I think mutation is fine in some circumstances, it doesn't feel the same as writing SASS/LESS/CSS. The way that the color helpers are written currently in CSX feels more like SASS/LESS/CSS. While Qix/color has more formats (which are not part of CSS), at this point CSX has a wider spread of operations.

Once colors are leveled out, I hope to build out gradient helpers and box model helpers for margin/padding/etc. So this is not just going to be for colors alone. If it was, I would have made an earnest attempt at PRs with Qix/color 😄

Going back to how to "toString". You are right, it isn't a lot of work to do it once. I think that anything we can do within reason to help developers get their work done is worth the effort. I'll start a PR over there with another idea I have that would be a generic way for free-style to consume helpers.

[blakeembrey]

Sounds great, I do like it better than the color library too. Let me know if you add some more generic docs to the README, I'd love to link to it for people to use with any CSS-in-JS library! I also have an idea for helping with build-size for all these types of utilities, I'll let you know when I have something on that front as I'm sure it would be a huge boon for CSS-in-JS users 😄

[notoriousb1t]

@blakeembrey Added https://github.com/blakeembrey/free-style/pull/47