Examples of how this library is used

[Frikki]

While I appreciate the README, I would really like to see some full working examples. To me, it seems like you have to be "in the know" if you want to use this library. I’m not using React, yet the README seems to imply that is the library that I should use with free-style.

At the moment, I am making reusable components for Cycle.js, and I have been using postcss with cssnext. However, I am completely blank on how to make a transition to use free-style instead, and how it will work with library components.

[blakeembrey]

Sure, that's possible. I've not used Cycle.js to know how that integration would happen, but there's nothing in the code that implies you need to use React - only one example since I wrote it originally using that and no other major library really supported CSS-in-JS.

Without a specific question, I'm not sure what I'm answering though. I can go over the README for you and try to distill it a bit more, but I'll just start with this:

var styles = FreeStyle.create() // Create a "free-style" instance, holds all the styles - it can be imagined as equivalent to a CSS file.

var backgroundStyle = styles.registerStyle({
  backgroundColor: 'red'
}) // Creates a CSS class and gives you access to the name it created for you to use.

I'm not making any assumptions about how you wrote things, but if you were to use this I'd have each component also export the "styles" instance. Then, in the main users code, they can compose the styles using styles.attach(yourLibraryStyles) and they just inject it using styles.inject().

Feel free to ask more questions.

[Frikki]

@blakeembrey How does free-style handle automatic vendor prefixing?

[blakeembrey]

It does not. It's a pretty simple thing to support, just not something I intend to support here since others can do a better job maintaining it. You can use things like postcss with FreeStyle and I can add a link to some libraries that might be interesting for you in the README. Here's some libraries you can use:

• https://github.com/postcss/postcss-js
• https://github.com/namuol/prefix-lite

I can understand endorsing an official version, so I will certainly link some solutions and better examples in the README over the Christmas break for you :smile:

[Frikki]

@blakeembrey Thank you. Presently, I use cssnext and postcss, so it should be a breeze transitioning.

[blakeembrey]

Added a simple example and the libraries above to the README. Let me know if you have any other issues, or if you'd like to contribute an example (it can be just a link to a repo, if needed).

[jamiewinder]

@blakeembrey - You mentioned a simple example on your last comment. Is this still around somewhere? It doesn't seem to be in the examples directory.

[blakeembrey]

Did you see https://github.com/blakeembrey/free-style/blob/master/examples/simple/app.js? It should still work.

[jamiewinder]

@blakeembrey - I meant adding vendor prefixing which I think the mentioned example was meant to show?

[blakeembrey]

Sorry, I don't believe I ever wrote an example for that. I meant that I linked the projects in the REAMDE and added that simple example. It's pretty trivial to use those libraries, but let me check for you. For instance, https://github.com/rofrischmann/inline-style-prefix-all is just a matter of wrapping the style object:

Style.registerStyle(prefixAll({
  display: 'flex'
}))

[jamiewinder]

@blakeembrey - Thanks for that, I must've misunderstood. I'll have a look through them and see which works best.