👷♀ Compiled
The CSS in JS authoring experience we love without the runtime cost.
Get started now
Installation
npm i @compiled/css-in-js
Babel
Click to expand...
npm i @compiled/babel-plugin-css-in-js
Then add the plugin to your Babel config:
{
"plugins": ["@compiled/babel-plugin-css-in-js"]
}
TypeScript compiler
Using either tsc
directly,
ts-loader
with webpack,
or the default Parcel configuration with TypeScript.
Click to expand...
We use TypeScript transformers to control the transformation - strong suggestion to read the handbook for getting started with them.
npm i @compiled/ts-transform-css-in-js
npm i ttypescript
Why do I need
ttypescript
?Good question! Unfortunately TypeScript doesn't come with support out-of-the-box to add transformers.
ttypescript
enables you to do just that - it has a peer dependency on TypeScript so you can use whatever version you want. Read about consuming transformers here.
Next add the transformer to your tsconfig.json
plugins:
{
"compilerOptions": {
+ "plugins": [{ "transform": "@compiled/ts-transform-css-in-js" }]
}
}
Then it's just a matter of modifying what you're using to compile your code.
TypeScript CLI
Using tsc
directly?
Just switch it out for ttsc
-
the ttypescript
equivalent.
-tsc
+ttsc
Webpack
Using Webpack?
Add ttypescript
as the compiler.
{
loader: require.resolve('ts-loader'),
options: {
+ compiler: 'ttypescript',
},
},
Parcel
Using Parcel?
Just install the ttypescript
plugin and we're done!
npm i parcel-plugin-ttypescript --save-dev
Usage
css
prop
import '@compiled/css-in-js';
<div css={{ fontSize: 12 }} />;
styled
component
import { styled } from '@compiled/css-in-js';
styled.div`
font-size: 12px;
`;
ClassNames
component
import React from 'react';
import { ClassNames } from '@compiled/css-in-js';
<ClassNames>{({ css }) => <div className={css({ fontSize: 12 })} />}</ClassNames>;
Browser support
![]() IE / Edge |
![]() Firefox |
![]() Chrome |
![]() Safari |
![]() iOS Safari |
---|---|---|---|---|
IE11 |
last 2 versions | last 2 versions | last 2 versions | last 2 versions |
css-vars-ponyfill
you won't be able to use them.
Alternatively you can define static selectors and conditionally apply them in your code.
Local development
Compiled is a monorepo - where we deliver multiple small packages instead of one big package.
You'll find them in the packages
folder.
Want to make changes to the website?
You'll find it here.
Packages of note
css-in-js
- entrypoint for consumers of Compiled - has a small amount of runtime code that blows up without the transformer enabledts-transform
- main bulk of Compiled's code - it transforms consumer code into Compiled componentsbabel-plugin
- thin wrapper aroundts-transform
to enable Babel environments to consume Compiledjest
- jest matcher to make testing Compiled css easierstyle
- small component to reconcile moving styles to the head of the document at runtime
Tests
We use Jest for tests. Find the folder you want to make changes to, and run that subset of tests. For example:
yarn test packages/ts-transform/src/css-prop --watch
Storybook
yarn start
Contributing
Thank you for considering a contribution to Compiled! Before doing so, please make sure to read our contribution guidelines.