jsxstyle

jsxstyle

Inline styles for JSX—React, Preact, Solid, and Astro

jsxstyle is an inline style system for JSX.

Styles are written inline on a special set of components exported by jsxstyle. Inline styles on these components are converted to CSS rules and added to the document right as they’re needed.

With jsxstyle, your component code looks like this:

<Row padding={15} gap={15}>
  <Block
    component="img"
    src="url(http://graph.facebook.com/justinbieber/picture?type=large)"
    borderRadius={5}
    height={64}
    width={64}
  />
  <Col fontFamily="system-ui" fontSize={16} lineHeight="24px">
    <Block fontWeight={600}>Justin Bieber</Block>
    <Block fontStyle="italic">Canadian</Block>
  </Col>
</Row>

Getting started

Install the jsxstyle package with your preferred node package manager.

Framework	Package
Astro	@jsxstyle/astro
Preact	@jsxstyle/preact
React	@jsxstyle/react
Solid	@jsxstyle/solid

jsxstyle provides the following seven components:

Component	Default styles
Block	display: block;
Inline	display: inline;
InlineBlock	display: inline-block;
Row	display: flex; flex-direction: row; justify-content: center;
Col	display: flex; flex-direction: column;
InlineRow	display: inline-flex; flex-direction: row;
InlineCol	display: inline-flex; flex-direction: column;
Grid	display: grid;
Box	No default styles

Most props passed to these components are assumed to be CSS properties. There are some exceptions to this rule:

• component: the underlying HTML tag or component to render. Defaults to 'div'.
• props: an object of props to pass directly to the underlying tag or component.
• mediaQueries: an object of media query strings keyed by prefix. More on that below.

Additionally, the following component props can also be set at the top level if the component you specify supports these props:

• checked
• className
• href
• id
• name
• placeholder
• style
• type
• value
• Any event handler prop starting with on

This list is fairly arbitrary. If there’s a prop that you think is missing, feel free to [request an addition to this list][request-new-component-prop].

The Sales Pitch

⚡️ Style as fast as you can think.

Jumping between JS and CSS in your editor is no longer necessary. Since style are inline, you can determine at a glance exactly how an element is styled. jsxstyle frees you up to do what you do best—write styles.

✅ Inline styles done right.

Just because styles are written inline doesn’t mean they stay inline. jsxstyle’s approach to inline styles ensures that a best-in-class developer experience comes with no performance cost.

No more naming fatigue.

Naming components is hard enough, and there are only so many synonyms for “wrapper”. jsxstyle provides a set of stylable components, each with a few default styles set. These primitive stylable components form a set of building blocks that you can reuse throughout your application.

You can still create named stylable components if you wish, by utilizing a paradigm you’re already familiar with: composition. No funky syntax necessary:

import type { JsxstyleComponentProps } from '@jsxstyle/core';

const RedBlock: React.FC<JsxstyleComponentProps> = (props) => (
  <Block {...props} color="red" />
);

Atomic styles right out the box.

Each CSS key-value pair is turned into a class name. When jsxstyle sees a key-value pair you’ve already used, style injection is skipped and the class name for that key-value pair is reused. Styles on jsxstyle components are extracted into CSS rules and assigned hashed, content-based class names that are intentionally unlike a human-written name.

Team friendly by design.

jsxstyle’s mental model is easy to teach and easy to learn, which means onboarding new frontend contributors takes seconds, not hours or days. Since styles applied by jsxstyle are scoped to component instances, frontend contributors don’t need a complete knowledge of the system in order to be 100% productive right from the start.

Powerful build-time optimizations.

Styles written inline on a set of components from a known source can very easily be statically analyzed, which opens up new possibilities for tooling and optimization. One such optimization is the built-in [webpack-plugin][jsxstyle-webpack-plugin] that extracts static styles from jsxstyle components at build time. This plugin reduces and in some cases entirely removes the need for runtime jsxstyle.

Features

Pseudoelements and pseudoclasses

To specify a pseudoelement or pseudoclass on a style property, prefix the prop with the name of the applicable pseudoelement or pseudoclass. If you’d like to specify a pseudoelement and a pseudoclass for a style prop, start with the pseudoclass—i.e., hoverPlaceholderColor, not placeholderHoverColor.

import { Block } from '@jsxstyle/preact';

<Block
  component="input"
  color="#888"
  activeColor="#333"
  placeholderColor="#BBB"
/>;

Supported Pseudoclasses	Supported Pseudoelements
active, checked, disabled, empty, enabled, focus, hover, invalid, link, required, target, valid	placeholder, selection, before, after

Media queries

Define a mediaQueries property with an object of media queries keyed by whatever prefixes you want to use. Prepend these media query keys to any style props that should be contained within media query blocks. Note that only one media query prefix can be applied at a time.

<Block
  mediaQueries={{
    sm: 'screen and (max-width: 640px)',
    lg: 'screen and (min-width: 1280px)',
  }}
  color="red"
  smColor="blue"
  lgColor="green"
/>

useMatchMedia hook

jsxstyle exports a hook, useMatchMedia, that enables the developer to subscribe to media query change events and react accordingly. Here’s the hook in action:

import { Block, useMatchMedia } from '@jsxstyle/react';

export const RedOrBlueComponent = ({ children }) => {
  const isSmallScreen = useMatchMedia('screen and (max-width: 800px)');

  // text color is red when viewport <= 800px, blue when viewport > 800px
  return <Block color={isSmallScreen ? 'red' : 'blue'}>{children}</Block>;
};

When this hook is used in combination with jsxstyle’s webpack plugin, prop values will be extracted if the prop passed to the component is a ternary and if the alternate and consequent values of the ternary are both [static][].

Convenient animation support

You can define an animation inline using object syntax, where the key is the specific keyframe name and the value is an object of styles:

<Block
  animation={{
    from: { opacity: 0 },
    to: { opacity: 1 },
  }}
  animationDuration="600ms"
  animationDirection="alternate"
/>

Shorthand properties for same-axis padding and margin

You can set margin or padding on the same axis—either horizontal or vertical—by setting marginH/marginV or paddingH/paddingV.

Note: shortcut props should not be used with in combination with -Top/Left/Bottom/Right variants. Prop names on jsxstyle components are sorted alphabetically before the styles are stringified, which means that styles will be applied alphabetically.

FAQs

Why write styles inline with jsxstyle?

Writing styles inline does away with name fatigue and constantly bouncing between CSS and component code in your editor, and jsxstyle’s approach to inline styles ensures that a best-in-class developer experience comes with no performance cost.

1. Naming things is hard.

   jsxstyle manages CSS and corresponding generated class names, which means that what those class names actually are becomes unimportant. jsxstyle can generate short, production-optimized class names and retain a mapping of those class names to corresponding style objects. All you have to do is worry about actual style properties.

2. Jumping between JS and CSS in your editor wastes time.

   There’s no need to constantly jump between components and the CSS file(s) that define how those components are styled because styles are defined right at the component level. CSS has always been a language that describes what HTML elements look like. With jsxstyle, those descriptions are right where you need them.

3. Styles are… inline.

   With inline styles, any frontend contributor can look at an element and know in a matter of seconds exactly how it’s styled. Inline styles describe an element’s appearance better than CSS classes ever could, and because you don’t have to worry about the class abstraction, there’s no fear of you or another frontend contributor taking a pure CSS class (like .red { color: tomato }) and corrupting it by modifying its styles.

   Also, because styles are inline, when you delete a component, you delete its style properties along with it. Dead CSS is no longer a concern.

4. Styles written inline don’t remain inline.

   jsxstyle is first and foremost syntax for styling components at a particular scope. The styles you specify on jsxstyle components are added to the document and a div or component you specify is output with a class name that points to the added styles.

5. Building tooling around inline styles is simple and straightforward.

   Statically analyzing inline styles on known components is trivial. Most of the styles you’ll end up writing on jsxstyle primitive components are static. Once you’re done perusing this README, check out [jsxstyle/webpack-plugin][jsxstyle-webpack-plugin]. It’s a webpack plugin that, at build time, extracts static styles defined on jsxstyle components into separate CSS files. This plugin reduces and in some cases entirely removes the need for runtime jsxstyle. jsxstyle becomes nothing more than syntactic sugar for styling components, much like how JSX itself is syntactic sugar for nested function calls. Dude, that’s next level!

Why use jsxstyle instead of BEM/SMACSS/OOCSS/etc.?

jsxstyle provides all the benefits of a CSS class naming/organization system, but without the system.

[Writing CSS at scale is hard][scalable css]. Overly specific selectors cause specificity collisions. More generic selectors cause overstyling. Being a responsible frontend contributor in a shared codebase means you have to have a working knowledge of the system before you can contribute new code without introducing redundancies or errors.

Countless systems have been developed to either solve or circumvent inherent problems with writing CSS in a team environment. Most of these systems attempt to solve the complexity of writing CSS with even more complex systems. Once a system is implemented it has to be closely adhered to. CSS systems are fantastic in theory, but in practice, a CSS system is o