This is a preliminary list of todo list items and ideas I've had. This list is not exhaustive and I'll be adding to this over time. Please feel free to comment or +1 with any small feature requests. (Though you may want to open an issue for bigger feature requests).

A note on timelines: currently, there is no timeline for a stable 1.0 release. I can only see that happening with increased usage and different scenarios. In particular, this lib is being concurrently built with my component library, Hacker UI. When that project is stable, this project will also be stable.

• atomic css-in-js (big)
• [docs] A pretty website
• [feature] Ability to reference current component class names. e.g. styles from style function args (to access class names for selectors)
• [feature] object expressions like linaria
• [feature] gatsby support via a react-style-system gatsby plugin
• [feature] next.js support
• [feature] support re-exports for libs (i.e. allow importing react-style-system from somewhere else)
• [bug] transformCssTemplateLiteral: don't wrap staticVar expressions in template literal strings (just inline it)
• [bug] when babel transforms with a @babel/preset-env env that transpiles template literal strings, it removes spaces and strings in between expressions
• [improvement] automatic detection of whether an expression can be automatically staticVared.
• [improvement] better error messages on "failed to execute"
• [improvement] upgrade to stylis 4

A big feature that I want to add (and will become quite an essential feature) is the ability to compile to atomic css-in-js. I have another repo that implements this here atomic-css-in-js

Love what you're doing Rico. I want to support you!

Hiya! I tried out the lib here:
https://codesandbox.io/s/empty-moon-eo93i?file=/src/App.js

Here's some feedback, I only skirted though the docs (sorry! 🙏 ) so please forgive me if some of these are already addressed. For some context, I have only used styled-components-liked solutions and am not familiar with material-ui.

• I noticed that react-style-system requires a bit of setup to get going. ThemeProvider and ColorContextProvider seem to be required. I wonder if these can be optional until users need them; it'll make trying out easier.

• It wasn't clear why ColorContextProvider is separated from ThemeProvider. Could they be combined?

• I found it a bit awkward to specify the root component's element type as the second argument of useStyles. I'm sure there's a technical limitation at play here, but I'd find something like this more intuitive:

const useStyles = createStyles(({ css, theme }) => ({
  card: css` padding: 1rem; `,
  title: css` color: blue; `
}))

const Card = ({ children }) => {
  const { card, title } = useStyles()
  return (
    <div className={card}>
      <h1 className={title}>{ children }</h1>
    </div>
  )
}

Or at least something like

const Card = ({ children }) => {
  const { Root, styles } = useStyles()
  return (
    <Root type="main">
      <h1 className={style.title}>{ children }</h1>
    </Root>
  )
}

Curious to hear your thought, it's a cool lib! 👍

thysultan has recently dropped stylis 4 which has a bunch of new feature including the ability to get to the AST of the stylis language.

This is kind of awesome because this lib can use that AST to do more direct and less buggy transformations for SSR mode (bye bye regex lol).

As an added bonus, stylis 4 has a significantly smaller bundle which would make the standalone bundle go down to about ~5kB. That would make us smaller than JSS and emotion!

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Datasource	Name	Replacement PR?
npm	@babel/plugin-proposal-class-properties
npm	@babel/polyfill
npm	@types/classnames
npm	babel-eslint
npm	gatsby-image

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Update dependency eslint to v7.32.0
• Update testing-library monorepo (@testing-library/jest-dom, @testing-library/react, @testing-library/user-event)
• Update dependency eslint to v9
• Update dependency jest to v29
• Update gatsby monorepo (major) (gatsby-image, gatsby-plugin-manifest, gatsby-plugin-offline, gatsby-plugin-react-helmet, gatsby-plugin-sharp, gatsby-source-filesystem, gatsby-transformer-sharp)
• Update testing-library monorepo (major) (@testing-library/jest-dom, @testing-library/react, @testing-library/user-event)
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• Update babel monorepo (@babel/core, @babel/generator, @babel/plugin-proposal-class-properties, @babel/plugin-transform-runtime, @babel/polyfill, @babel/preset-env, @babel/preset-react, @babel/preset-typescript, @babel/runtime, @babel/template, @babel/traverse, @babel/types)
• Update gatsby monorepo (gatsby-image, gatsby-plugin-manifest, gatsby-plugin-offline, gatsby-plugin-react-helmet, gatsby-plugin-sharp, gatsby-source-filesystem, gatsby-transformer-sharp)
• Update typescript-eslint monorepo to v3.10.1 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency @babel/traverse to v7.23.2 [SECURITY]
• Update dependency gatsby to v4 [SECURITY]
• Update all (@rollup/plugin-babel, @rollup/plugin-node-resolve, @types/babel__core, @types/babel__traverse, @types/classnames, @types/common-tags, @types/node, @types/require-from-string, @types/webpack, babel-eslint, babel-plugin-module-resolver, canvas, classnames, color2k, common-tags, eslint-plugin-flowtype, eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-react, folder-hash, jsdom, pirates, polished, prettier, prop-types, react-scripts, rollup, semver, typescript, webpack)
• Update dependency jest to v26.6.3
• Update react monorepo (@types/react, eslint-plugin-react-hooks, react, react-dom, react-test-renderer)
• Update all (major) (@rollup/plugin-babel, @rollup/plugin-node-resolve, @types/node, @types/webpack, actions/checkout, actions/setup-node, babel-plugin-module-resolver, color2k, eslint-config-react-app, eslint-plugin-flowtype, folder-hash, jsdom, polished, prettier, react-scripts, rollup, typescript, uid, webpack)
• Update react monorepo to v18 (major) (@types/react, react, react-dom, react-test-renderer)
• Update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository