react-style-bundler

React Style Bundler

React Style Bundler uses the native javascript import functionality to manage the bundling of your CSS. Javascript already handles the importing and ordering of your javascript, why not let it manage your CSS?

This package currently works best with Server Side Rendering, as it lacks functionality to bundle

Installation

npm i react-style-bundler

Using the styled

//Import the bundler instance
import {styled} from "react-style-bundler"

//Create a styled component
//notice the use of & to mark sub components. 
//please consider contributing if you know css preprocessing!
const Wrapper = styled.div`
    height: 200px;
    width: 200px;

    &:hover {
        color: red;
    }
    
    & > span {
        width: 50%;
    }
`

//Use the styled component
function Component(props:{}) {
    return (
        <Wrapper>
            <span>Hi</span>
        </Wrapper>
    )
}

Setup

React Style Bundler is JS-Bundler-agnostic, it doesn't require any bundler to work. Instead, it runs as any other typescript library. Import it, import your App component, then save the resulting CSS bundle.

Independant Bundling

// import the bundler instance
import {styled} from "react-style-bundler"
// import your main react component so the javascript runtime can do it's thing
import { App } from "/app"
// after having javascript go through your react app, get the CSS bundle as a string
let bundle = styled.getCSSBundle()
// save the string to a file
await saveFile(bundle, "./build/out.css")

ESBuild Setup

Even though this library run's without a JS-Bundler, you can still use it in conjecture with your favorite bundler. For example, ESBuild is already callable from a build script. So integration is easy! Just import the bundler and the App component into your same esbuild script.

//Import the bundler instance
import {styled} from "react-style-bundler"
import { App } from "/app"

function build() {
    //Build your client-side bundle
    await esbuild.build({
        ...
    })

    //Retreive and save the created bundle
    let bundle = styled.getCSSBundle()
    await saveFile(bundle, "./build/out.css")
}

Q: If the CSS is bundled by the javascript import functionality, why do we need to bundle after building with esbuild?

A: We don't! I just like both the css and js bundled by the same function call.

The only thing that matters is that your App component is imported before calling getCSSBundle(). So the following is also valid:

import {styled} from "react-style-bundler"
import { App } from "/app"
let bundle = styled.getCSSBundle()
await saveFile(bundle, "./build/out.css")

function build() {
    await esbuild.build({
        ...
    })    
}

Advanced Usage

Server Side Rendering

Lets review the basic way to bundle the css during build.

import {styled} from "react-style-bundler"
import { App } from "/app"
let bundle = styled.getCSSBundle()
await saveFile(bundle, "./build/out.css")

The important part to see is that the styling functionality comes from importing your App component. Your App component needs to be the merge point for your client/server functionality. By using the import ordering of the app component, you can match the class name generation order between the client/server.

WARNING

Be carful when adding styles to the client side bundle higher than the shared App component as it will not be imported on the server, causing it to be lacking from the bundle.

Also watch out adding extra styles to the server high than the app component as it may cause class name mismatching hydration errors.

react-style-bundler