linaria
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.1 • Public • Published

    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

    Why use Linaria

    Installation

    npm install linaria

    or

    yarn add linaria

    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/babel 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/babel"
      ]
    }

    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';
    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';
      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.

    Editor Plugins

    VSCode

    Atom

    Webstorm

    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 hello@callstack.com if you need any help with these or just want to say hi!

    Contributors

    Thanks goes to these wonderful people (emoji key):

    Paweł Trysła
    Paweł Trysła

    💻 📖 🤔
    Satyajit Sahoo
    Satyajit Sahoo

    💻 📖 🤔
    Michał Pierzchała
    Michał Pierzchała

    💻 📖 🤔
    Lucas
    Lucas

    📖
    Alexey Pronevich
    Alexey Pronevich

    📖
    Wojtek Szafraniec
    Wojtek Szafraniec

    💻
    Tushar Sonawane
    Tushar Sonawane

    📖 💡
    Ferran Negre
    Ferran Negre

    📖
    Jakub Beneš
    Jakub Beneš

    💻 📖
    Oscar Busk
    Oscar Busk

    🐛 💻
    Dawid
    Dawid

    💻 📖
    Kacper Wiszczuk
    Kacper Wiszczuk

    💻 📖
    Denis Rul
    Denis Rul

    💻
    Johan Holmerin
    Johan Holmerin

    💻 📖
    Gilad Peleg
    Gilad Peleg

    📖
    Giuseppe
    Giuseppe

    💻
    Matija Marohnić
    Matija Marohnić

    💻 📖
    Stefan Schult
    Stefan Schult

    💻
    Ward Peeters
    Ward Peeters

    💻
    radoslaw-medryk
    radoslaw-medryk

    💻
    杨兴洲
    杨兴洲

    💻
    Dawid Karabin
    Dawid Karabin

    📖
    Anton Evzhakov
    Anton Evzhakov

    💻
    Chris Abrams
    Chris Abrams

    💻 📖 🤔
    Jayphen
    Jayphen

    💻
    c4605
    c4605

    💻
    Toru Kobayashi
    Toru Kobayashi

    💻

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

    Install

    npm i linaria

    DownloadsWeekly Downloads

    14,989

    Version

    2.3.1

    License

    MIT

    Unpacked Size

    957 kB

    Total Files

    293

    Last publish

    Collaborators

    • satya164
    • anber
    • zamotany
    • thymikee
    • jayscode
    • callstack-oss