Compiled: A CSS-in-JS library without the runtime cost
Tags: css, webdev
Published: 2020-07-22 14:44:46

---
title: Compiled: A CSS-in-JS library without the runtime cost
published: true
date: 2020-07-14 16:00:32 UTC
tags: css,webdev
canonical_url: https://blog.logrocket.com/compiled-a-css-in-js-library-without-the-runtime-cost/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/yrbpfb4nvpyps9zcow6g.png
---
**Written by [Nathan Sebhastian](https://blog.logrocket.com/author/nathansebhastian/)**✏️

CSS-in-JS is a collection of patterns and ideas that aims to solve some of the most vexing challenges developers faced when writing CSS for their applications. It addresses some of the difficulties associated with scaling CSS, such as separating CSS code into smaller files using the JavaScript module system and scoping CSS style by generating unique, local names.

But CSS-in-JS doesn’t come without a cost. When you use modern UI libraries such as React, browsers wait for your JavaScript bundle file to download before rendering anything on the screen, which increases the loading time.

## The problem with CSS-in-JS

Google coined the concept of [First Meaningful Paint (FMP)](https://web.dev/first-meaningful-paint/) to measure when the primary content of a page is visible to the user. As React gains adoption among companies and developers building complex projects, the bundle size of a React application can grow from 2MB to more than 20MB.

To solve the bundle size problem, developers have created several solutions. For example, you can split the bundle into several chunks or lazy load the app (i.e., the most important parts first).

The [CSS-in-JS](https://blog.logrocket.com/5-things-you-can-do-in-css-in-js-that-you-didnt-know-about-c422fb67ceb6/) pattern has a similar problem with modern UI libraries. CSS used to be written statically, so the browser simply needed to read the code. With CSS-in-JS, browsers need to dynamically generate and update `<style>` tags in response to state and prop changes.

The fantastic developer experience of writing CSS inside JavaScipt files comes at the cost of generating CSS at runtime.

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## Compiled to the rescue

[Compiled](https://compiledcssinjs.com/) is a CSS-in-JS library created by Atlassian Labs that aims to provide that excellent developer experience without the runtime cost. It works by statically analyzing your code at build time, transforming it into Compiled components, and then moving the styling code into the head of the document at runtime.

Compiled mirrors the styling pattern found in [styled-components](https://blog.logrocket.com/8-reasons-to-use-styled-components-cf3788f0bb4d/) and Emotion, so you’ll be right at home if you’ve used either of those.

Below is a simple example.

```jsx
import { styled } from '@compiled/css-in-js';

export const ColoredText = styled.span`
  color: #ff5630;
`;
```

The above will be transformed into the following Compiled component.

```jsx
import React from 'react';
import { CC, CS } from '@compiled/css-in-js';
export const ColoredText = /*#__PURE__*/ React.forwardRef(
  ({ as: C = 'span', ...props }, ref) => (
    <CC>
      <CS hash="zd46j1">{['.cc-zd46j1{color:#ff5630}']}</CS>
      <C
        {...props}
        ref={ref}
        className={'cc-zd46j1' + (props.className ? ' ' + props.className : '')}
      />
    </CC>
  )
);
if (process.env.NODE_ENV === 'development') {
  ColoredText.displayName = 'ColoredText';
}
```

Just like usual CSS-in-JS, the component will have a unique hash as a class, enabling local scoping.

This transformation enables you to consume the components without any configuration, setup, or tooling. Just import the component and use it.

```jsx
const EmphasisText = (props) => {
  const color = props.massive ? '#00B8D9' : '#36B37E';
  return (
    <span
      css={{
        color,
        textTransform: 'uppercase',
        fontWeight: 600,
      }}>
      {props.children}
    </span>
  );
};
export default EmphasisText

//... import from other component

import EmphasisText from './EmphasisText';
const WelcomeComponent = () => {
    return (
        <EmphasisText massive>
            Welcome to Jumanji!
        </EmphasisText>
    );
}
```

It’s exactly the same CSS-in-JS pattern, but without generating CSS at runtime. This single constraint solves performance issues caused by dynamic CSS generation.

## Using Compiled with React

To use Compiled with React, you’ll need to install the package and the compiler.

To install the package:

```jsx
npm i @compiled/css-in-js
```

Next, install the compiler. You can use either Babel or the TypeScript compiler with Compiled. If you’re using Create React App, you need to eject from the bundle (you’d need to edit the config files to set up both compilers).

To install the Babel plugin:

```jsx
npm install @compiled/babel-plugin-css-in-js
```

Make sure the plugin is the first entry in the array.

```jsx
{
  "plugins": ["@compiled/babel-plugin-css-in-js"]
}
```

For TypeScript:

```jsx
npm install @compiled/ts-transform-css-in-js ttypescript
```

Place the plugin inside your `tsconfig.json` file.

```jsx
{
  "compilerOptions": {
    "plugins": [{ "transform": "@compiled/ts-transform-css-in-js" }]
  }
}
```

Next, get the compiler to pick up the plugins from your config using the [`ttypescript`](https://github.com/cevek/ttypescript) library.

```jsx
npm i ttypescript -D
```

To compile the files, use the `ttsc` command instead of `tsc`.

Or, use it inside webpack.

```jsx
{
  loader: require.resolve('ts-loader'),
  options: {
    compiler: 'ttypescript',
  },
},
```

You can also use Parcel.

```jsx
npm i parcel-plugin-ttypescript
```

Simply write your CSS-in-JS files by importing from Compiled’s main library.

```jsx
import React from 'react';
import '@compiled/css-in-js';

const EmphasisText = (props) => {
  const color = props.massive ? '#00B8D9' : '#36B37E';
  return (
    <span
      css={{
        color,
        textTransform: 'uppercase',
        fontWeight: 600,
      }}>
      {props.children}
    </span>
  );
};

export default EmphasisText
```

Next, import the component.

```jsx
import React from "react";
import ReactDOM from "react-dom";
import EmphasisText from './EmphasisText';

const WelcomeComponent = () => {
    return (
        <EmphasisText massive>
            Welcome to Jumanji!
        </EmphasisText>
    );
}

ReactDOM.render(<WelcomeComponent />, document.getElementById("root"));
```

## Conclusion

The CSS-in-JS pattern has solved one of the biggest problems associated with scaling CSS. By using a modular approach with local scoping, CSS is now more maintainable and less unpredictable. Yet it also comes with some tradeoffs, leading to performance issues related to its dynamic rendering.

Compiled is a CSS-in-JS library that analyzes your code at build time and transforms it into Compiled components to ensure no CSS code is generated at runtime. This way, you can enjoy the great developer experience of writing CSS-in-JS without sacrificing performance.

The [Compiled documentation](https://compiledcssinjs.com/docs/) has additional guides for [migration from styled-components or Emotions](https://compiledcssinjs.com/docs/migrating) and [testing Compiled components with Jest](https://compiledcssinjs.com/docs/testing). You can even do [server-side rendering with Compiled](https://compiledcssinjs.com/docs/server-side-rendering).

* * *
## Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, [try LogRocket.](https://logrocket.com/signup/) 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/403rye2ptzx994uhktk1.png)

[LogRocket](https://logrocket.com/devto) is like a DVR for web apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web apps — [Start monitoring for free.](https://logrocket.com/signup/)
* * *

The post [Compiled: A CSS-in-JS library without the runtime cost](https://blog.logrocket.com/compiled-a-css-in-js-library-without-the-runtime-cost/) appeared first on [LogRocket Blog](https://blog.logrocket.com).