Style
Style

Overview

A convenience layer and tool belt on top of inline styles for React.
It aims to bring the Fela (new tab) ergonomics to inline styles. It adds support for pseudo classes and at-rules like media queries to inline styles amongst many other nice features like vendor prefixing, responsive styling and more.
This package works well in combination with the theme and keyframe packages.

npm versionnpm downloadsBundlephobia

Installation

# npm
npm i --save @weser/style

# yarn
yarn add @weser/style

# pnpm
pnpm add @weser/style

Motivation

Recommended reading

I wrote a blog post about the motivation behind this package: Inline Styles on Steroids (new tab).


It covers the reasoning behind this package and how it works.

Benefits

This packages combines the ergonomics of Fela (new tab) with the convenience of inline styles, including things like:

  • Vendor Prefixing
  • Responsive Values
  • Fallbacks Values
  • Custom Plugins
On this page