SX: ideas

[mrtnzlml]

This is a collection of ideas we could consider implementing in @adeira/sx. It's not certain whether every idea is a good idea though so do not consider this to be a roadmap.

Also read: SX: design issues and hard to deal with situations

Legend:

🤔 - needs further investigation
🧑‍💻 - we should develop this
🚧 - under development
✅ - idea implemented
❌ - idea rejected

🧑‍💻 Babel transpilation

Motivation: transpile away code to reduce the production bundle size and overall performance. We could print the final atomic CSS classes directly into React markup.

Alternatively, we could have something like Relay Compiler for SX to collect the styles in compile-time (since it's an atomic output that grows logarithmically).

🧑‍💻 Jest snapshot serializer

Inspiration: https://github.com/dmiller9911/jest-aphrodite-react

First SX version: #2188

🤔 Additional Eslint rules

• using z-index without explicit positioning (z-index requires positioned elements: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)

🤔 Better usage DX

Currently, we have to write this:

<div className={styles('example')} />

It might be a bit strange that we are manipulating "class names" when actually, we want to apply styles. Moreover it's a bit verbose. Why not to write it just like this:

<div sx="example" />

Or:

<div className={styles('red', 'blue')} />
// vvv
<div sx={['red', 'blue']} />

It might get a bit weird here:

<div className={sx(styles.default, props.xstyle)} />
// vvv
<div sx={sx(styles.default, props.xstyle)} />

Obviously, this requires a Babel plugin but we are planning it anyway.

🤔 Automatic PX -> REM conversion of fontSize

Originally, we were converting PX units to REM for font size, however, we removed the feature because it disallows us to use the "62.5 trick". We simply didn't want to be too opinionated about it (automatic conversion expects 16px default but 62.5 trick changes it making the conversion wrong).

We might consider something like "SX plugins" to allow such features optionally. Alternatively, we could accept the default pixel value in a config.

• https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
• https://youtu.be/9JZHodNR184?t=496

🤔 Merging of custom styles with limited Flow type

Currently, this is possible:

import sx, { type AllCSSProperties } from '@adeira/sx';

type Props = {|
  +xstyle: AllCSSProperties,
|};

const styles = sx.create({ default: { fontSize: 16 } });
function MyBaseComponent(props: Props) {
  return <div className={sx(styles.default, props.xstyle)} />;
}

However, this is NOT possible:

import sx, { type AllCSSProperties } from '@adeira/sx';

type Props = {|
  +xstyle: {|
    +marginTop: number, // you can restrict what styles are customizable
  |},
|};

const styles = sx.create({ default: { fontSize: 16 } });
function MyBaseComponent(props: Props) {
  return <div className={sx(styles.default, props.xstyle)} />;
}

It would be awesome if you could restrict the type.

🤔 Automatic stylesheet transformation

Transform this:

const styles = sx.create({
  truncateClamp: {
    lineClamp: 2,
  },
});

Into this:

const styles = sx.create({
  truncateClamp: {
    '@supports (line-clamp:2)': {
      lineClamp: 2,
    },
    '@supports not (line-clamp:2)': {
      display: '-webkit-box',
      webkitLineClamp: 2,
      webkitBoxOrient: 'vertical',
    },
  },
});

It is like a bit more advanced prefixer (prefixers actually cannot transform this). It's worth investigating if we could get rid of the stylis overhead and implement our own version that supports even these advanced cases. We could actually start prefixing very early, even before we start the styles collector. 🤔

Another useful transformation would be from this:

button:hover {
  border: 3px solid green; /* might stick! */
}

Into this:

@media (hover: hover) {
  button:hover {
    border: 3px solid green; /* solves sticky problem */
  }
}

See:

• https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/
• SX Design: Button left with hover state on iOS #2935

🤔 Improve DX when in __DEV__

Motivation: it's quite difficult to work with atomic CSS classes when developing. Instead, we could generate developer-friendly output in dev and atomic classes only in production.

🤔 Render only used styles by sx

If I define some style in sx.create and don't use it anywhere, the sx.renderStatic still returns it. Could it be done the way only styles used via style('...') will be rendered?

Motivation: Tailwind CSS wrapper, see: https://adeira.slack.com/archives/C2J04DL01/p1598647663000500

---

✅ Finished or rejected improvements (click to expand)

Please note that the current version might include different decisions or implementation. Always consult the latest docs rather than these PRs. ✌️

✅ Support for external styles merging (#1352)

const styles = sx.create({ default: { fontSize: 16 } });

function MyBaseComponent({xstyle, ...props}) {
  return <div className={sx(styles.default, xstyle)} />
}

See: https://youtu.be/9JZHodNR184

✅ Eslint rules for sx() and sx.create()

Motivation:

• ✅ basic usage validation (SX Eslint: add new rule 'valid-usage' #1319)
• ✅ dead code elimination by removing unused style definitions. (Open-source new 'eslint-plugin-sx' #1299)
• ✅ incorrect classname concatenation className={`${styles('aaa')} ${styles('bbb')}`} (ef2e493)
• ✅ lint of conditional object selectors (styles({ blue: isBlue, red: isRed })) (SX Eslint: improve detection of unused styles for conditional objects #2028)
• ✅ suggest CSS Logical Properties for better RTL support (SX Eslint: add new rule use-logical-properties #2621)
• ❌ warn on shorthand properties (? - yields larger and less optimized output)

✅ @keyframes support (cd71541)

Motivation: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

❌ Include some simple CSS reset (#1196, eventually removed)

Motivation: developer experience so you don't have to include the reset stylesheet manually. This could be an opt-in feature.

✅ Autoprefixer based on Browserlist info (#1480, #1467)

Motivation: automatically prefix some problematic properties for older browsers. Inspiration:

• https://github.com/mdn/browser-compat-data/tree/master/css/properties (contains info about prefixes and browser versions)
• https://github.com/robinweser/inline-style-prefixer
• https://www.npmjs.com/package/stylis
• https://github.com/postcss/autoprefixer

✅ SX function could accept an object with booleans (#1809)

At this moment, we allow the following syntax for conditional styles:

styles('blue', isRed && 'red')

We could also allow this:

styles({
  blue: isBlue,
  red: isRed
});

See: https://youtu.be/9JZHodNR184

❌ Utility sx.inline

Motivation: to be able to define a single stylesheet instead of using sx.create and defining only one named stylesheet there.

export default function Example() {
  return (
    <div className={sx.inline({ fontSize: 32, padding: 0, textDecoration: 'none' })}>example</div>
  );
}

Concerns: runtime vs. compile type caching (performance).

❌ Support for marginEnd, marginVertical, ...

Motivation: easy support for RTL/LTR layouts, see https://reactnative.dev/docs/layout-props#marginend

marginHorizontal -> ['marginRight', 'marginLeft']
marginVertical -> ['marginTop', 'marginBottom']
paddingHorizontal -> ['paddingRight', 'paddingLeft']
paddingVertical -> ['paddingTop', 'paddingBottom']

Rejected: SX should work well with CSS as it is and we should avoid inventing some awkward "SX only" patterns. Instead, we could somehow use or suggest CSS Logical Properties.