Intro

When using a library that generates Atomic CSS such as Fela or Styletron, one can run into an issue where mixed shorthand and longhand properties are applied in an unexpected way due to the rendering order of CSS classes.

This packages helps to prevent those issues by always expanding shorthand values so that no conflicts occur at all.

https://github.com/robinweser/inline-style-expand-shorthand

As makeStyles() also uses Atomic CSS we have the same problem and we are using the same package to expand shorthands:

import { expandProperty } from "inline-style-expand-shorthand";

const longhands = expandProperty("padding", "10px 15px 5px");

// longhands === output
const output = {
  paddingTop: "10px",
  paddingRight: "15px",
  paddingBottom: "5px",
  paddingLeft: "15px"
};

Problem

It was not a big problem in Fluent N* as we don't use there CSS variables, with makeStyles() we have a problem there.

CSS variables cannot be expanded

There are cases when CSS variables cannot be expanded, for example background:

// Input:
const input = { padding: "var(--foo)" };
// Output
const output = {
  paddingTop: "var(--foo)",
  paddingRight: "var(--foo)",
  paddingBottom: "var(--foo)",
  paddingLeft: "var(--foo)"
};

This behavior is questionable as -foo can have different values:

--foo: 5px; /* can be expanded */
--foo: 5px 10px; /* cannot be expanded */

https://codesandbox.io/s/dank-hooks-r7jmr?file=/src/App.js

Not all shorthands are expanded

A list of shorthands supported by inline-style-expand-shorthand is very limited.

Complete list of shorthands based on MDN data

For example, background is not supported (robinweser/inline-style-expand-shorthand#5):

// Input
const input = { background: "var(--foo)" };
// Output
const output = { background: "var(--foo)" };

https://codesandbox.io/s/silent-flower-txe4u?file=/src/App.js

Some shorthands are not properly expanded

For example, flex, see robinweser/inline-style-expand-shorthand#14.