arrow icon
REGISTER

Announcing Linaria 1.0

2019-02-08
Download your copy of the
Ultimate Guide to React Native Optimization

blog content

Need help with Performance Optimization? 
hire us
Need help with Super app development
hire us
Need help with React Native?
hire us
Need help with migration to React Native?
hire us
Our React Native EU Conference is back
register nowlearn more

The first major release of Linaria is here. It’s more robust, handles more edge cases and introduces a new API to make easier to use with React.

What is Linaria

Linaria is a zero-runtime CSS in JS library. What’s special about Linaria is that it extracts all of the styles you write in your JavaScript code to real CSS files, unlike other CSS in JS libraries which parse and apply the styles in the browser.

If you’re wondering how it is different from Emotion and Styled Components, you can read this short post.

For a list of features and benefits over other solutions, check our GitHub repo.

Highlights

Rewritten core to be more robust

We have changed the approach of how we evaluate and extract styles. This fixed some long-standing issues and made it easier for us to support features like sourcemaps, improved stylelint preprocessor, the new <rte-code>styled<rte-code> tag for components, etc.

Support for Babel 7

The Babel plugin is now written with the latest stable version of Babel, so you don’t have to stay on an older version of Babel anymore. It also brings TypeScript support!

We also support Babel’s caller option to make it easier to provide a different configuration for Linaria’s evaluation.

Support for CSS sourcemaps

It was always tricky to find the file where you wrote the styles. Now it’s much easier thanks to sourcemaps support. You can jump to the original JavaScript file from the line where the CSS was generated from the dev tools.

screenshot presenting linaria support for css sourcemaps

It’s recommended to enable sourcemaps during development. The sourcemaps are inlined into the CSS files, so don’t enable them in production.

New <rte-code>styled<rte-code> tag for React components

Since the first release of Linaria last year, we’ve been looking for new ways to improve the way we write our styles. One feedback we got was that people missed being able to dynamically apply styles based on a React component’s props. Many also preferred the abstraction styled-components provided as opposed to using class names.

Now, we have added a new <rte-code>styled<rte-code> tag à la styled-components. It makes it super easy to create a React component with some styles:


In addition to that, the <rte-code>styled<rte-code> tag also supports dynamic prop based styling leveraging CSS custom properties (aka CSS variables). You can write a function interpolation and we automatically convert it to a CSS variable:


The variables are scoped to the class name.

We optimize how many CSS variables we generate automatically, so you can write idiomatic code. For example, in the above code, even though there are 3 dynamic interpolations, we’ll only generate 2 CSS variables because 2 of the dynamic interpolations have the same expression.

We also transparently handle some edge cases like having interpolations followed by units. For example, the following code won’t work in vanilla CSS:

The <rte-code>px<rte-code> unit needs to be part of the CSS variable or should be applied with <rte-code>calc<rte-code>, e.g. — <rte-code>calc(var(--box-height) * 1px)<rte-code>. But you don’t have to worry about doing that manually when writing interpolations. We detect interpolations followed by units and apply them correctly.

A limitation of using CSS variables for dynamic values is that they only work for property values, and you can’t place them arbitrarily like you can with <rte-code>styled-components<rte-code>. For example, the following code won’t be valid:


New CLI for libraries

The Babel plugin no longer writes the CSS files to the filesystem due to several issues with the approach, which means you can’t use Babel CLI to extract the CSS to files anymore like in the previous versions. So we added a new CLI to do just that.

screenshot presenting new cli for libraries in linaria

For example, to extract CSS files from the JS files inside <rte-code>src<rte-code> to <rte-code>dist/styles<rte-code>, you can run the following command:

There are also other features such as inserting require statements to built JS files for publishing libraries. Check the docs for the full list of features.

New Rollup plugin

Thanks to external contributor John Holmerin, we now have a plugin for Rollup.

Improved stylelint processor

The stylelint processor can now correctly report errors inside interpolations.

screenshot presenting improved styleint processor in linaria

Due to our build time evaluation, it can provide much better error messages as if you’re linting plain CSS files.

Support for using preprocessors

By default, Linaria uses stylis to process the extracted CSS. You can now disable or override this behavior which lets you use any CSS preprocessor you like, such as Sass, Less or custom PostCSS syntaxes.

Many bugfixes and enhancements

We fixed several issues and added many nice improvements. Some of them are:

  • Support a config file to configure Linaria: <rte-code>linaria.config.js<rte-code>
  • Ship typescript declarations in the npm package.
  • Play nice when you’re using Linaria in the same codebase where you use other CSS in JS libraries with the same syntax. The Babel plugin will check if you’re importing <rte-code>css<rte-code> and <rte-code>styled<rte-code> from Linaria before processing the file.
  • Support using <rte-code>styled<rte-code> helper with Preact (with webpack alias).
  • Support webpack aliases when evaluating modules.
  • Fix issues with resolving <rte-code>url(..)<rte-code> expressions when using <rte-code>file-loader<rte-code> and <rte-code>url-loader<rte-code>.
  • Fix cases where output CSS had missing class names.
  • Fix issues with path on windows.
  • Fail for invalid interpolations such <rte-code>null<rte-code>, <rte-code>NaN<rte-code> etc. at build time to avoid mistakes.
  • Many more.

Be sure to check it out and give us a star. You can also join our discord to talk to us.

Author:
Satyajit Sahoo
React Native and Web developer who specializes in JavaScript, TypeScript, and all things frontend related. Satya has created and maintained many open source libraries for React Native & Web such as React Navigation, React Native Paper, React Native Builder Bob, Linaria etc. Creator of React Navigation 5 and Linaria. When not coding, Satya loves cooking or playing video games.
arrow icon
MORE posts from this author

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

learn more

More posts from this category

Ensure your React components perform as intended as your app grows

Discover Reassure - our open-source library that allows you to run performance tests measuring the average rendering time of the in-app components.

business benefits

Performance Optimization

To stay competitive, you need a high-performing app. Improving React Native performance can bring your company many business and tech benefits. To learn more about it, check the page entirely dedicated to React Native Performance Optimization. Discover a real-life example of React Native optimization we performed for Aaqua, a Singaporean platform that enables global users to share their passion through groups.

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

business benefits

Why React Native?

Building an all-in-one platform can bring your company a lot of business and tech benefits like seamless UX experience, global reach, brand growth just to name a few. To learn more about the benefits of using React Native to develop super apps, check out the MoMo case study. Where we helped improve app's performance by migrating architecture to Re.Pack.

stay tuned

Subscribe to our newsletter

You may unsubscribe from these communications at any time. For details see the Privacy Policy.