reshadow ⛱️

Built with
Edit page

reshadow ⛱️

Markup and styles that feel right.

reshadow provides the Shadow DOM developer experience, but for the Virtual DOM with the Component way.

Features

  • Get away from additional abstractions
    • Write isolated semantic styles for the Virtual DOM in a native like way
    • Match styles on the elements, components, and props. That's all you need
  • Compile-time styles processing and efficient runtime
  • Static styles extracting options
  • Static styles analysis
  • Combine the css-in-js and css-modules approaches or choose which fits you better
  • All the benefits of the PostCSS ecosystem
  • Interoperable. Use it with components in React, Preact, Vue, htm.

There are some examples on the Сodesandbox:

Benchmarks

There are also some css-in-js benchmarks, that are available on the codesandbox.

reshadow benchmarks

Please check the Motivation and Concepts pages to get more information.

Basics

.babelrc

Check the Setup page to get more details (including setup with Create React App)

Let's start with a simple Button component.

We can use css-in-js approach here with css function:

And the same with styled function:

Important note - all styles are processed during the build time, therefore there is no runtime styles processing.

It is also possible to use reshadow with separate css files.

Add files option to the babel plugin and reshadow/babel will handle them:

.babelrc

Note that with styled(styles) you can apply styles to the Virtual DOM. In addition, you can apply to the styled function any number of arguments, like styled(styles1, styles2, ...), so the styled function will compose all of them together.

You can combine css-modules and css-in-js approaches like you or your team want.

Runtime Styles

Okay, so let's add some runtime to the Button styles to make our Button more interactive.

Attributes Matching

And now, for the Button we might also want to add some styles for the disabled state. For that we can match selector on the disabled prop (it's not the DOM attribute, ie it will be transpiled into a class name):

We can also add some sizes to the Button. reshadow allows to use namespaces for the custom elements' modifiers, which will not be passed the DOM nodes. For example, you can add use:size attribute and match on the [use|size] or [|size](syntax sugar) selector in styles.

And it is also possible to match styles on the Components.

Please check the motivation and concepts pages to get more details about the reshadow.

Thanks