Description
* 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
linaria alternatives and similar libraries
Based on the "PostCSS" category.
Alternatively, view linaria alternatives based on common mentions on social networks and blogs.
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 -
emotion
👩🎤 CSS-in-JS library designed for high performance style composition -
CSS Layout
A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continues growing! -
JSS
JSS is an authoring tool for CSS which uses JavaScript as a host language. -
Aphrodite
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation -
React CSS Modules
Seamless mapping of class names to CSS modules inside of React components. -
vue-virtual-scroll-list
⚡️A vue component support big amount data list with high render performance and efficient. -
Neutrino
Create and build modern JavaScript projects with zero initial configuration. -
Atomizer
A library to create small, reusable CSS that scales as your website grows. -
jTools - Javascript web components
jSuites is a collection of lightweight common required javascript web components. It is composed of fully responsive vanilla plugins to help you bring the best user experience to your projects, independent of the platform. Same JS codebase across different platforms. -
React Inline
Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e.g. the `className` prop of React elements. -
DHTMLX UI Widgets with React
Using DHX widgets with React -
DHTMLX Widgets with Angular
Using DHX widgets with Angular -
A Vue 3 Dynamic and Versatile High Performance Infinite Scroller Component
A Vue 3 Dynamic and Versatile High Performance Infinite Scroller Component -
ms-business-startup-bulma
Basic demo using Bulma CSS Framework Demo:
AWS Cloud-aware infrastructure-from-code toolbox [NEW]
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of linaria or a related project?
README
Zero-runtime CSS in JS library.
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
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
Documentation
- Basics
- API and usage
- Configuration
- Dynamic styles with
css
tag - Theming
- Critical CSS extraction
- Bundlers integration
- CLI
- Linting
- How it works
- Example
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 withcss
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
- Syntax Highlighting - language-babel
- Autocompletion - vscode-styled-components
- Linting - stylelint
Atom
- Syntax Highlighting and Autocompletion - language-babel
Webstorm
- Syntax Highlighting & Autocompletion - webstorm-styled-components
Sublime Text
- Syntax Highlighting & Autocompletion - Naomi, JSCustom (refer to document on how to turn on Styled Component syntax)
- Linting - SublimeLinter-stylelint, LSP Stylelint
Recommended Libraries
- gatsby-plugin-linaria – Gatsby plugin that sets up Babel and webpack configuration for Linaria.
- polished.js - A lightweight toolset for writing styles in JavaScript.
- craco-linaria - A Craco plugin that allows you to use Linaria without ejecting from a CRA.
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
Contributors
Thanks goes to these wonderful people (emoji key):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> 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💻 黄小健💻
<!-- markdownlint-restore --> <!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->
This project follows the all-contributors specification. Contributions of any kind welcome!
<!-- badges -->
*Note that all licence references and agreements mentioned in the linaria README section above
are relevant to that project's source code only.