Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/callstack/linaria

Zero-runtime CSS in JS library
https://github.com/callstack/linaria

css css-in-js css-in-react react

Last synced: 3 days ago
JSON representation

Zero-runtime CSS in JS library

Host: GitHub
URL: https://github.com/callstack/linaria
Owner: callstack
License: mit
Created: 2017-05-23T00:52:34.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2024-09-24T20:37:04.000Z (3 months ago)
Last Synced: 2024-10-29T15:19:18.576Z (about 1 month ago)
Topics: css, css-in-js, css-in-react, react
Language: TypeScript
Homepage: https://linaria.dev
Size: 31.7 MB
Stars: 11,665
Watchers: 70
Forks: 417
Open Issues: 161
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

awesome-react-cn - linaria - Zero-Runtime CSS in JS (Uncategorized / Uncategorized)
stars - callstack/linaria - runtime CSS in JS library (HarmonyOS / Windows Manager)
awesome - linaria - Zero-runtime CSS in JS library (JavaScript)
awesome-learning-resources - linaria - Zero-Runtime CSS in JS (Uncategorized / Uncategorized)
awesome-github-star - linaria - runtime CSS in JS library | callstack | 10814 | (TypeScript)
awesome-list - linaria - runtime CSS in JS library | callstack | 7847 | (TypeScript)
best-of-react - GitHub - 21% open · ⏱️ 26.04.2024): (Styling)
awesome-react - linaria - Zero-Runtime CSS in JS library (**Awesome React** [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) / React)
StarryDivineSky - callstack/linaria

README

        


  





Zero-runtime CSS in JS library.



---

[![Build Status][build-badge]][build]

[![Code Coverage][coverage-badge]][coverage]

[![Version][version-badge]][package]

[![MIT License][license-badge]][license]

[![All Contributors][all-contributors-badge]](#contributors)

[![PRs Welcome][prs-welcome-badge]][prs-welcome]

[![Chat][chat-badge]][chat]

[![Code of Conduct][coc-badge]][coc]

[![Greenkeeper][greenkeeper-badge]][greenkeeper]

[![Sponsored by Callstack][callstack-badge]][callstack]

[![tweet][tweet-badge]][tweet]

## Features

- Write CSS in JS, but with **zero runtime**, CSS is extracted to CSS files during build

- Familiar **CSS syntax** with Sass like nesting

- Use **dynamic prop based styles** with the React bindings, uses CSS variables behind the scenes

- Easily find where the style was defined with **CSS sourcemaps**

- **Lint your CSS** in JS with [stylelint](https://github.com/stylelint/stylelint)

- Use **JavaScript for logic**, no CSS preprocessor needed

- Optionally use any **CSS preprocessor** such as Sass or PostCSS

- Supports **atomic styles** with `@linaria/atomic`

**[Why use Linaria](/docs/BENEFITS.md)**

**[Learn how Airbnb improved both developer experience and web performance with Linaria](https://medium.com/airbnb-engineering/airbnbs-trip-to-linaria-dc169230bd12)**

## Installation

```sh

npm install @linaria/core @linaria/react @wyw-in-js/babel-preset

```

or

```sh

yarn add @linaria/core @linaria/react @wyw-in-js/babel-preset

```

## Setup

Linaria is now built on top of [wyw-in-js.dev](https://wyw-in-js.dev/). It supports various bundlers to extract the CSS at build time. To configure your bundler, check the following guides on the wyw-in-js.dev site:

- [webpack](https://wyw-in-js.dev/bundlers/webpack)

- [esbuild](https://wyw-in-js.dev/bundlers/esbuild)

- [Rollup](https://wyw-in-js.dev/bundlers/rollup)

- [Vite](https://wyw-in-js.dev/bundlers/vite)

- [Svelte](https://wyw-in-js.dev/bundlers/svelte)

See [Configuration](https://wyw-in-js.dev/configuration) to customize how Linaria processes your files.

## Syntax

Linaria can be used with any framework, with additional helpers for React. The basic syntax looks like this:

```js

import { css } from '@linaria/core';

import { modularScale, hiDPI } from 'polished';

import fonts from './fonts';

// Write your styles in `css` tag

const header = css`

  text-transform: uppercase;

  font-family: ${fonts.heading};

  font-size: ${modularScale(2)};

  ${hiDPI(1.5)} {

    font-size: ${modularScale(2.5)};

  }

`;

// Then use it as a class name

Hello world;

```

You can use imported variables and functions for logic inside the CSS code. They will be evaluated at build time.

If you're using [React](https://reactjs.org/), you can use the `styled` helper, which makes it easy to write React components with dynamic styles with a styled-component like syntax:

```js

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

import { families, sizes } from './fonts';

// Write your styles in `styled` tag

const Title = styled.h1`

  font-family: ${families.serif};

`;

const Container = styled.div`

  font-size: ${sizes.medium}px;

  color: ${props => props.color};

  border: 1px solid red;

  &:hover {

    border-color: blue;

  }

  ${Title} {

    margin-bottom: 24px;

  }

`;

// Then use the resulting component

  Hello world

;

```

Dynamic styles will be applied using CSS custom properties (aka CSS variables) and don't require any runtime.

See [Basics](/docs/BASICS.md) for a detailed information about the syntax.

## Demo

[![Edit Linaria Demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/linaria-react-vite-ts-qyj5xd)

## Documentation

- [Basics](/docs/BASICS.md)

- [API and usage](/docs/API.md)

  - [Client APIs](/docs/API.md#client-apis)

  - [Server APIs](/docs/API.md#server-apis)

- [Configuration](/docs/CONFIGURATION.md)

- [Dynamic styles with `css` tag](/docs/DYNAMIC_STYLES.md)

- [Theming](/docs/THEMING.md)

- [Critical CSS extraction](/docs/CRITICAL_CSS.md)

- [Bundlers integration](/docs/BUNDLERS_INTEGRATION.md)

  - [webpack](/docs/BUNDLERS_INTEGRATION.md#webpack)

  - [Rollup](/docs/BUNDLERS_INTEGRATION.md#rollup)

- [CLI](/docs/CLI.md)

- [Linting](/docs/LINTING.md)

- [How it works](/docs/HOW_IT_WORKS.md)

- [Example](/website)

## Contributing

We appreciate any support in library development!

Take a look on [Contributing](CONTRIBUTING.md) docs to check how you can run Linaria in development mode.

## Trade-offs

- No IE11 support when using dynamic styles in components with `styled`, since it uses CSS custom properties

- Dynamic styles are not supported with `css` tag. See [Dynamic styles with `css` tag](/docs/DYNAMIC_STYLES.md) for alternative approaches.

- Modules used in the CSS rules cannot have side-effects.

  For example:

  ```js

  import { css } from '@linaria/core';

  import colors from './colors';

  const title = css`

    color: ${colors.text};

  `;

  ```

  Here, there should be no side-effects in the `colors.js` file, or any file it imports. We recommend to move helpers and shared configuration to files without any side-effects.

## Interoperability with other CSS-in-JS libraries

Linaria can work together with other CSS-in-JS libraries out-of-the-box. However, if you want to use styled components from Linaria as selectors in `styled-components`/`emotion`, you need to use [@linaria/interop](/packages/interop/README.md)    

## Editor Plugins

### VSCode

- Syntax Highlighting - [language-babel](https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel)

- Autocompletion - [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components)

- Linting - [stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)

### Atom

- Syntax Highlighting and Autocompletion - [language-babel](https://atom.io/packages/language-babel)

### Webstorm

- Syntax Highlighting & Autocompletion - [webstorm-styled-components](https://github.com/styled-components/webstorm-styled-components)

### Sublime Text

- Syntax Highlighting & Autocompletion - [Naomi](https://packagecontrol.io/packages/Naomi), [JSCustom](https://packagecontrol.io/packages/JSCustom) (refer to document on how to turn on Styled Component syntax)

- Linting - [SublimeLinter-stylelint](https://packagecontrol.io/packages/SublimeLinter-stylelint), [LSP Stylelint](https://packagecontrol.io/packages/LSP-stylelint)

## Recommended Libraries

- [gatsby-plugin-linaria](https://github.com/cometkim/gatsby-plugin-linaria) – Gatsby plugin that sets up Babel and webpack configuration for Linaria.

- [polished.js](https://polished.js.org/) - A lightweight toolset for writing styles in JavaScript.

- [craco-linaria](https://github.com/jedmao/craco-linaria) - A [Craco](https://www.npmjs.com/package/@craco/craco) plugin that allows you to use Linaria [without ejecting](https://create-react-app.dev/docs/alternatives-to-ejecting) from a [CRA](https://create-react-app.dev/).

## Inspiration

- [glam](https://github.com/threepointone/glam)

- [styled-components](https://github.com/styled-components/styled-components)

- [css-literal-loader](https://github.com/4Catalyzer/css-literal-loader)

## Acknowledgements

This project wouldn't have been possible without the following libraries or the people behind them.

- [babel](https://babeljs.io/)

- [stylis.js](https://github.com/thysultan/stylis.js)

Special thanks to [@kentcdodds](https://github.com/kentcdodds) for his babel plugin and [@threepointone](https://github.com/threepointone) for his suggestions and encouragement.

## Made with ❤️ at Callstack

Linaria is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. [Callstack](https://callstack.com) is a group of React and React Native geeks, contact us at [[email protected]](mailto:[email protected]) if you need any help with these or just want to say hi!

Like the project? ⚛️ [Join the team](https://callstack.com/careers/?utm_campaign=Senior_RN&utm_source=github&utm_medium=readme) who does amazing stuff for clients and drives React Native Open Source! 🔥

## Sponsors



  





  



## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

  

    

      
_{Paweł Trysła}
💻 📖 🤔

      
_{Satyajit Sahoo}
💻 📖 🤔

      
_{Michał Pierzchała}
💻 📖 🤔

      
_Lucas
📖

      
_{Alexey Pronevich}
📖

      
_{Wojtek Szafraniec}
💻

      
_{Anton Evzhakov}
💻 🤔 📖

    

    

      
_{Tushar Sonawane}
📖 💡

      
_{Ferran Negre}
📖

      
_{Jakub Beneš}
💻 📖

      
_{Oscar Busk}
🐛 💻

      
_Dawid
💻 📖

      
_{Kacper Wiszczuk}
💻 📖

      
_{Denis Rul}
💻

    

    

      
_{Johan Holmerin}
💻 📖

      
_{Gilad Peleg}
📖

      
_Giuseppe
💻

      
_{Matija Marohnić}
💻 📖

      
_{Stefan Schult}
💻

      
_{Ward Peeters}
💻

      
_{radoslaw-medryk}
💻

    

    

      
_杨兴洲
💻

      
_{Dawid Karabin}
📖

      
_{Chris Abrams}
💻 📖 🤔

      
_Jayphen
💻

      
_c4605
💻

      
_{Toru Kobayashi}
💻

      
_{Jakub Mazurek}
💻

    

    

      
_{Joshua Nelson}
💻 🤔 📖

      
_{Tomasz Krzyżowski}
💻

      
_{Martin Schulze}
💻

      
_wmzy
💻

      
_{Hyeseong Kim}
💻

      
_{Martin Hochel}
💻

      
_{Daniel Lo Nigro}
💻

    

    

      
_0xflotus
💻

      
_{Afzal Sayed}
💻

      
_AijiUejima
💻

      
_{Oleksii Vasyliev}
💻

      
_{Alican Erdoğan}
💻

      
_{Aman Kubanychbek}
💻

      
_{Andrew Gerard}
💻

    

    

      
_{Andrey Frolov}
💻

      
_{Benjamin Solum}
💻

      
_{Billy Kwok}
💻

      
_{Christian Todd}
💻

      
_{David Peek}
💻

      
_{Denis Skiba}
💻

      
_{Dima Kharitonov}
💻

    

    

      
_{Gabriel Valfridsson}
💻

      
_Gitai
💻

      
_{Hampus Kraft}
💻

      
_{Igor Sukharev}
💻

      
_{Ikko Ashimine}
💻

      
_{Iman Mohamadi}
💻

      
_JB
💻

    

    

      
_{Jack Works}
💻

      
_{James George}
💻

      
_{Jed Mao}
💻

      
_{Joe Lencioni}
💻

      
_{Joey Cozza}
💻

      
_{Juan Ferreras}
💻

      
_{Kazuma Ebina}
💻

    

    

      
_{Lars Kappert}
💻

      
_{Luciano Mammino}
💻

      
_{Madhav Varshney}
💻

      
_Malash
💻

      
_{Martijn Swaagman}
💻

      
_{Matias Lahti}
💻

      
_{Michael James}
💻

    

    

      
_{Michael Strobel}
💻

      
_{Michał Chudziak}
💻

      
_Mike
💻

      
_{Mike Stop Continues}
💻

      
_{Mokshit Jain}
💻

      
_{Oleksandr Fediashov}
💻

      
_{Paddy O'Brien}
💻

    

    

      
_{Patrik Smělý}
💻

      
_{Pavel Udaloff}
💻

      
_{Przemysław Bitkowski}
💻

      
_RiN
💻

      
_{Roman Sokhan}
💻

      
_{Seokmin Hong (Ray)}
💻

      
_{Serge K Lebedev}
💻

    

    

      
_{Sergey Korovin}
💻

      
_{Shreyas Sreenivas}
💻

      
_{Sky Wickenden}
💻

      
_{Stanislav Panferov}
💻

      
_{Ted Jenkins}
💻

      
_{Thanh Tran}
💻

      
_{Thor Amorim}
💻

    

    

      
_tobenna
💻

      
_{Tomas Carnecky}
💻

      
_Tsubasa1218
💻

      
_{Turadg Aleahmad}
💻

      
_{Vitor Buzinaro}
💻

      
_Mistereo
💻

      
_{Vladislav Kozulya}
💻

    

    

      
_{Yuhei Yasuda}
💻

      
_{Danil Kamyshov}
💻

      
_{Sebastian Landwehr}
💻

      
_{everdimension}
💻

      
_ptol
💻

      
_roottool
💻

      
_{ryamaguchi0220}
💻

    

    

      
_simka
💻

      
_soso
💻

      
_{Nikita Skovoroda}
💻

      
_黄小健
💻

      
_iMoses
💻

      
_{Jeremy Neander}
💻

      
_{Andy Parsons}
💻

    

    

      
_Platane
📖

      
_{Tim Kutnick}
📖

      
_{Dmitrii Pikulin}
💻

    

  

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

[build-badge]: https://img.shields.io/circleci/project/github/callstack/linaria/master.svg?style=flat-square

[build]: https://circleci.com/gh/callstack/linaria

[coverage-badge]: https://img.shields.io/codecov/c/github/callstack/linaria.svg?style=flat-square

[coverage]: https://codecov.io/github/callstack/linaria

[version-badge]: https://img.shields.io/npm/v/linaria.svg?style=flat-square

[package]: https://www.npmjs.com/package/linaria

[license-badge]: https://img.shields.io/npm/l/linaria.svg?style=flat-square

[license]: https://opensource.org/licenses/MIT

[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square

[prs-welcome]: https://github.com/callstack/linaria/blob/master/CONTRIBUTING.md

[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square

[coc]: https://github.com/callstack/linaria/blob/master/CODE_OF_CONDUCT.md

[all-contributors-badge]: https://img.shields.io/badge/all_contributors-23-orange.svg?style=flat-square

[chat-badge]: https://img.shields.io/discord/426714625279524876.svg?style=flat-square&colorB=758ED3

[chat]: https://discord.gg/zwR2Cdh

[tweet-badge]: https://img.shields.io/badge/tweet-%23linaria-blue.svg?style=flat-square&colorB=1DA1F2&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAUCAYAAACXtf2DAAAAAXNSR0IArs4c6QAAAaRJREFUOBGtlM8rBGEYx3cWtRHJRaKcuMtBSitxkCQ3LtzkP9iUUu5ODspRHLhRLtq0FxeicEBC2cOivcge%2FMgan3fNM8bbzL4zm6c%2BPT%2Fe7%2FO8887svrFYBWbbtgWzsAt3sAcpqJFxxF1QV8oJFqFPFst5dLWQAT87oTgPB7DtziFRT1EA4yZolsFkhwjGYFRO8Op0KD8HVe7unoB6PRTBZG8IctAmG1xrHcfkQ2B55sfI%2ByGMXSBqV71xZ8CWdxBxN6ThFuECDEAL%2Bc9HIzDYumVZ966GZnX0SzCZvEqTbkaGywkyFE6hKAsBPhFQ18uPUqh2ggJ%2BUor%2F4M%2F%2FzOC8g6YzR1i%2F8g4vvSI%2ByD7FFNjexQrjHd8%2BnjABI3AU4Wl16TuF1qANGll81jsi5qu%2Bw6XIsCn4ijhU5FmCJpkV6BGNw410hfSf6JKBQ%2FUFxHGYBnWnmOwDwYQ%2BwzdHqO75HtiAMJfaC7ph32FSRJCENUhDHsLaJkL%2FX4wMF4%2BwA5bgAcrZE4sr0Cu9Jq9fxyrvBHWbNkMD5CEHWTjjT2m6r5D92jfmbbKJEWuMMAAAAABJRU5ErkJggg%3D%3D

[tweet]: https://twitter.com/intent/tweet?text=Check%20out%20linaria!%20https://github.com/callstack/linaria%20%F0%9F%91%8D

[greenkeeper-badge]: https://badges.greenkeeper.io/callstack/linaria.svg

[greenkeeper]: https://greenkeeper.io/

[callstack-badge]: https://callstack.com/images/callstack-badge.svg

[callstack]: https://callstack.com/open-source/?utm_source=github.com&utm_medium=referral&utm_campaign=linaria&utm_term=readme