search

wix-incubator / react-templates

Light weight templates for react
https://wix.github.io/react-templates
MIT License
2.82k stars 207 forks source link

feature request: rt-style #177

Closed PierBover closed 8 years ago

PierBover commented 8 years ago

In Vue.js single file components have a <style> tag where you can write good old fashioned CSS which is scoped to the current component. Read more here.

Considering react-templates is clearly in favour of HTML vs JSX, why not go a step further and bring CSS into the game?

Why not create a new tag <rt-style> which can include CSS scoped to the current .rt file?

Is there any interest in such feature? Would it be accepted in the repo?

nippur72 commented 8 years ago

I proposed this in #137 where I discuss also a possible implementation.

I already have this working in a react-templates extension that I'm writing (called rioct but still in alpha stage), and I use the generated styles in production.

My experience is that pure CSS styles are better than react's inline styles, they are more powerful (@media etc) and more intuitive. And they make more sense in a templating language like react-templates.

Regarding your proposal:

1) I would prefer to <style> instead of <rt-style> because most HTML editor will recognize it and enable syntax colorization as well as intellisense

2)

Why not create a new tag which can include CSS scoped to the current .rt file?

with the term "scoped", do you mean it should create scoped styles (as in <style scoped></style>) ?

Scoped styles are rather problematic, they are not supported by all browsers, and, as far as I know create problems with event bubbling.

PierBover commented 8 years ago

Awesome @nippur72 I'm closing this one then and continue there.

nippur72 commented 8 years ago

@PierBover are you still interested in the feature?

If you use webpack, support for a <style> tag can be easily added via react-style-tag and some hacking with react-templates-preprocess-loader.

PierBover commented 8 years ago

I was interested but now I have realised that instead of adding packages and hacks to be able to work the way I want (no JSX, real HTML, encapsulated CSS, etc) it would make a lot more sense to simply drop React.

My current project is still small enough that a rewrite of the view code can be accomplished.

Honestly, I jumped into React for the hype, and I have realised there isn't really any real benefit in using it. There are many libraries out there that render many times faster and are much much lighter (like Inferno or PReact), and the API design makes more sense IMO.

I have found Aurelia.js to be the perfect replacement for our team. It's lighter than React, with a similar performance, and much more smart and elegant API. No need to implement react-templates for working HTML, some other thing to work with CSS, no need to implement MobX to get rid of the terrible setState(), etc.