kitten

With styled-components into the future

Preprocessing is dead, long live preprocessing!

This is a CFP for ReactiveConf 2017's open call for Lightning talks. If you'd like to see this talk become a reality, please ⭐️ star this gist. #ReactiveConf

javivelasco

Please star ⭐️ the gist to help! This is a proposal for a ⚡️ talk at Reactive Conference.

Styling Components in React Toolbox 2

I wrote react-toolbox and presented it almost a year ago in lighning talk at Reactive Conf 2015 in Bratislava. At first it was just a proof of concept of a component library styled with CSS Modules and SASS. Now the project has grown quite a bit, and during this year there has been tons of changes and lessons learned.

Theming and customization is one of the most difficult and interesting problems to solve. For the first version we needed a custom Webpack loader to generate themes and doing simple style overrides was very painful. Today I'm working on a new playground that will allow you try CSS Modules live, and to create React Toolbox themes on the f

geelen

Global traits, local components

The idea is to combine the best bit of global styling (reuse, small payload) and local styling (total isolation, first-class React syntax)

This is combined with the concept of traits: you can think of them as permitted property/value pairs. Instead of every component being able to have every CSS property available to it, you can reduce your permitted set to X font families, Y font-size + line-height pairs, Z foreground/background colour pairs, W padding amounts. This is based off my work using amcss on real projects — traits were the single key feature that kept me using AM.

The one-sentence explanation: A site defines a set of permitted visual features, all components are simply a combination of those features

Definitions

geelen

Web Component design thoughts

It feels like I'm facing the same thing the same problems writing the API of these components. In particular:

• A component might have several distinct modes. As in, an <x-gif speed="1.0"> has a very different playback mode from <x-gif bpm="120">, so you shouldn't be allowed to have both speed and bpm. But it doesn't seem right to break them into separate components, so either one takes precedence or having both present causes an explosion.
• A component might require more than one attribute to be valid. As in, <x-beat midi channel="0" note="65">. Until you have both the channel and note you can't make connection to the midi signal. But if you're driving the component with a framework like angular, it will first render incompletely (as <x-beat midi channel="{{ channel }}" note="{{ note }}">), then after a $digest will insert the right values. So a component may need to permit being in an invalid state temporarily, then when all attributes are set go and get

geelen

def distance(x,y)
  Math.sqrt(x * x + y * y)
end

def in_circle(x,y)
  distance(x,y) < 1
end

def random_point
  rand * 2 - 1