https://github.com/johanholmerin/style9

CSS-in-JS compiler inspired by Meta's stylex
https://github.com/johanholmerin/style9

babel-plugin compiled-css-in-js css css-in-js typescript webpack

Last synced: about 1 month ago
JSON representation

CSS-in-JS compiler inspired by Meta's stylex

• Host: GitHub
• URL: https://github.com/johanholmerin/style9
• Owner: johanholmerin
• License: mit
• Created: 2020-01-31T14:33:17.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-12-05T22:39:06.000Z (9 months ago)
• Last Synced: 2024-07-04T03:25:05.748Z (2 months ago)
• Topics: babel-plugin, compiled-css-in-js, css, css-in-js, typescript, webpack
• Language: JavaScript
• Homepage:
• Size: 1.12 MB
• Stars: 574
• Watchers: 8
• Forks: 27
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - style9 - in-JS compiler inspired by Facebook's stylex | johanholmerin | 371 | (JavaScript)

README

        
# style9

CSS-in-JS compiler inspired by Meta's [StyleX][stylex], with near-zero runtime, atomic CSS extraction and TypeScript support. Framework agnostic.

> [!NOTE]

> [StyleX][stylex] was open-sourced on 2023-12-5. Consider using that instead

## Basic usage

*For a complete walkthrough of the API, see [Usage guide](docs/Usage-guide.md).*

```javascript

import style9 from 'style9';

const styles = style9.create({

  blue: {

    color: 'blue',

  },

  red: {

    color: 'red'

  }

});

document.body.className = styles('blue', isRed && 'red');

```

For the above input, the compiler will generate the following output:

```javascript

/* JavaScript */

document.body.className = isRed ? 'cRCRUH ' : 'hxxstI ';

/* CSS */

.hxxstI { color: blue }

.cRCRUH { color: red }

```

## Installation

```sh

# Yarn

yarn add style9

# npm

npm install style9

```

## Compiler setup - required

The following is the minimally required Webpack setup for extracting styles to a CSS file. For Webpack options and Rollup, Next.js, Gatsby,Vite, and Babel plugins, see [Bundler plugins](docs/Bundler-plugins.md).

```javascript

const Style9Plugin = require('style9/webpack');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

  // Collect all styles in a single file - required

  optimization: {

    splitChunks: {

      cacheGroups: {

        styles: {

          name: 'styles',

          type: 'css/mini-extract',

          // For webpack@4 remove type and uncomment the line below

          // test: /\.css$/,

          chunks: 'all',

          enforce: true,

        }

      }

    }

  },

  module: {

    rules: [

      {

        test: /\.(tsx|ts|js|mjs|jsx)$/,

        use: Style9Plugin.loader,

      },

      {

        test: /\.css$/i,

        use: [MiniCssExtractPlugin.loader, 'css-loader']

      }

    ]

  },

  plugins: [

    new Style9Plugin(),

    new MiniCssExtractPlugin()

  ]

};

```

## Documentation

1. [Background](docs/Background.md)

1. [Usage guide](docs/Usage-guide.md)

1. [Bundler plugins](docs/Bundler-plugins.md)

1. [TypeScript](docs/TypeScript.md)

1. [Ecosystem](docs/Ecosystem.md)

1. [How it works](docs/How-it-works.md)

1. [FAQ](docs/FAQ.md)

1. [Example apps](examples)

## Have a question?

Look at the [FAQ](docs/FAQ.md), [search][search] the repo, or ask in [discussions][discussions].

[stylex]: https://github.com/facebook/stylex

[search]: https://github.com/johanholmerin/style9/search

[discussions]: https://github.com/johanholmerin/style9/discussions