Proper support for <style> tag (style injection tech)

nippur72 commented 8 years ago

In react-templates you can't make a proper use of the <style> tag, so I suggest the we support it by doing the following:

any <style> tag declared in a .rt file is extracted from the DOM and saved separately
brackets expansion would be turned off within the style tag (because the syntax is too problematic)
the extracted style is automatically injected (once) in the <head> section of the document

For example:

<style>
.redtitle {
   color:red
}
</style>
<h1 class="redtitle">hello</h1>

would produce:

module.export = function () {
    return React.createElement( .... );  // as before
}
var injectStyle = require("react-templates-inject-style");
injectStyle('.redtitle { color:red } ');

where injectStyle is a function that does the injection work (available as a separate module).

So the first time a component is required its styles are put once for all in the <head> of the DOM.

This would allow using full CSS with @media queries and all the rest, making the style go along with its template.

The only unsolved problem would be global name conflicts, but I think we can find a way to handle them.

As a bonus, the injectStyle() function could be used to change styles dynamically at runtime, e.g. changing themes from light to dark etc.

Of course this feature would be optional for backward compatibility (CLI switch --inject-styles), though I think there's none using <style> with react-templates at the moment.

Please comment/rate this feature.

nippur72 commented 8 years ago

The only unsolved problem would be global name conflicts, but I think we can find a way to handle them.

one possible solution I'm currently experimenting is to use a prefix like _this_ that is substituted with an uui at compile time. Eg:

<style>
   ._this_table { color: red }
</style>
<div class="_this_table">hello</div>

turned into

<style>
   .__e05bd28d8ed976ace181b84071d4aa01_table { color: red }
</style>
<div class="__e05bd28d8ed976ace181b84071d4aa01_table">hello</div>

where _e05bd28d8ed976ace181b84071d4aa01 is an hash made from .rt absolute file path name.

PierBover commented 8 years ago

one possible solution I'm currently experimenting is to use a prefix like this that is substituted with an uui at compile time

This is exactly what I meant in https://github.com/wix/react-templates/issues/177 with 'scoped' to prevent global namespace pollution.

How far are you with Rioct development? Looks awesome!

nippur72 commented 8 years ago

The _this_ trick works nicely, I still am undecided if styles are to be mounted once-for-all (like in VueJS or RiotJS) or mounted / unmounted along with the component.

Regarding Rioct, it "does work", but completely lacks any documentation :cry:.

Anyway many of Rioct's features have landed into react-templates over time (just look at the merge history), so the differences between the two are now minimal. Usually when I have an idea for Rioct I open an issue here and possibly write a PR that implements it. Just look at the issues of mine.

What still holds me from using plain react-templates basically is the rt- prefix for attributes (just too verbose) and the painful debugging experience.

PierBover commented 8 years ago

What still holds me from using plain react-templates basically is the rt- prefix for attributes (just too verbose) and the painful debugging experience.

Yeah, the rt- thing is tedious. I want to create a package for Atom to make this a bit easier... when I have some time.

I'm going to give Rioct a try in a couple of days and see if I can contribute with the docs.

nippur72 commented 8 years ago

as an additional idea, it could work with react-style-tag

wix-incubator / react-templates

Proper support for <style> tag (style injection tech) #137