Git Product home page Git Product logo

linaria's Introduction

Linaria

Zero-runtime CSS in JS library.


Build Status Code Coverage Version MIT License

All Contributors PRs Welcome Chat Code of Conduct Greenkeeper Sponsored by Callstack

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
  • 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

Installation

npm install @linaria/core @linaria/react @linaria/babel-preset

or

yarn add @linaria/core @linaria/react @linaria/babel-preset

Setup

Linaria currently supports webpack and Rollup to extract the CSS at build time. To configure your bundler, check the following guides:

Or configure Linaria with one of the following integrations:

Optionally, add the @linaria preset to your Babel configuration at the end of the presets list to avoid errors when importing the components in your server code or tests:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@linaria"
  ]
}

See 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:

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
<h1 className={header}>Hello world</h1>;

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, you can use the styled helper, which makes it easy to write React components with dynamic styles with a styled-component like syntax:

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
<Container color="#333">
  <Title>Hello world</Title>
</Container>;

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

See Basics for a detailed information about the syntax.

Demo

Edit Linaria Demo

Documentation

Contributing

We appreciate any support in library development!

Take a look on Contributing 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 for alternative approaches.

  • Modules used in the CSS rules cannot have side-effects. For example:

    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

Editor Plugins

VSCode

Atom

Webstorm

Sublime Text

Recommended Libraries

Inspiration

Acknowledgements

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

Special thanks to @kentcdodds for his babel plugin and @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 is a group of React and React Native geeks, contact us at [email protected] if you need any help with these or just want to say hi!

Like the project? ⚛️ Join the team who does amazing stuff for clients and drives React Native Open Source! 🔥

Sponsors

{callstack}

Servers.com

Contributors

Thanks goes to these wonderful people (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

💻

黄小健

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

linaria's People

Contributors

agtlucas avatar allcontributors[bot] avatar anber avatar chrisabrams avatar cometkim avatar daniel15 avatar dependabot[bot] avatar dfrkp avatar esemesek avatar ferrannp avatar github-actions[bot] avatar hotell avatar jayphen avatar jayu avatar johanholmerin avatar jpnelson avatar jsbalrog avatar layershifter avatar que-etc avatar s-panferov avatar satya164 avatar schubidu avatar skywickenden avatar tamorim avatar thymikee avatar tmaszko avatar tobenna avatar trongthanh avatar wmzy avatar zamotany avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.