10

Compiled | Build time atomic CSS-in-JS

 3 years ago
source link: https://compiledcssinjs.com/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Build time atomic CSS-in-JS. Baked and ready to serve.

import { styled } from '@compiled/react';

export const Button = styled.button`
  border: none;
  border-radius: 3px;
  padding: 8px 10px;
  background-color: #6554c0;
  color: #fff;
  font-weight: 400;
  font-family: inherit;
  font-size: 14px;

  :hover {
    background-color: #8777d9;
  }

  :active {
    background-color: #5243aa;
  }
`;
<Button>Button</Button>
npm install @compiled/react

Write your styles in JavaScript

Using APIs you may already be familiar with, write your styles in JavaScript with the full power of CSS — leveraging the language to create expressive & dynamic experiences.

import '@compiled/react';

export const LargeHotPinkText = ({ children }) => (
  <span
    css={{
      color: 'hotpink',
      fontSize: 48,
    }}>
    {children}
  </span>
);

Speed up your CSS-in-JS

Configure Babel and build your components using its CLI or your bundler of choice, resulting in a very performant component that has its styles built ahead of time.

{
  "plugins": ["@compiled/react/babel-plugin"]
}
$ babel src
Successfully compiled 1 file with Babel (9ms)
import { CC, CS } from '@compiled/react/runtime';

const _2 = '._syaz1q9v{color: hotpink}';
const _ = '._1wybfyhu{font-size: 48px;}';

export const LargeHotPinkText = ({ children }) => (
  <CC>
    <CS>{[_, _2]}</CS>
    <span className="_syaz1q9v _1wybfyhu">{children}</span>
  </CC>
);

Extract all styles to CSS

Turn on the bundler plugin and all components styled with Compiled in your app or sourced through NPM will have their styles extracted to a single atomic style sheet.

  1. Build your app
$ parcel build
✨  Built in 0.83s.
  1. An atomic style sheet is generated
._1wybfyhu {
  font-size: 48px;
}
._syaz1q9v {
  color: hotpink;
}
  1. All style rules and runtime components are removed from your bundle
export const LargeHotPinkText = ({ children }) => (
  <span className="_syaz1q9v _1wybfyhu">{children}</span>
);

We are bringing styles from platform, product, and the wider ecosystem closer. It's time to extract all styles! Extracting will be shipping in 2021.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK