Learn how Compiled can help you take full advantage of the great developer experience of writing CSS-in-JS without sacrificing performance. Compiled is a CSS-in-JS library that analyzes your code and transforms it into Compiled components to ensure no CSS code is generated at runtime.

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) 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 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.

Compiled to the rescue

Compiled 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 and Emotion, so you’ll be right at home if you’ve used either of those.

Below is a simple example.

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

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

The above will be transformed into the following Compiled component.

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.

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.

#css #web-development #developer