Gatsby plugin for styling with Linaria
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.eslintrc.yml Initial commit Oct 14, 2018
.gitignore Initial commit Oct 14, 2018
gatsby-node.js Mutate JS rule instead of creating another one Oct 14, 2018
gatsby-ssr.js Initial commit Oct 14, 2018
index.js Initial commit Oct 14, 2018
license Initial commit Oct 14, 2018
package.json v1.0.1 Oct 14, 2018 Document adding custom babel config Oct 14, 2018
yarn.lock Initial commit Oct 14, 2018

Linaria plugin for Gatsby

This plugin modifies Gatsby's Babel and webpack configuration to support Linaria.

Install the plugin and Linaria:

yarn add gatsby-plugin-linaria linaria

Add it to your plugins in gatsby-config.js:

plugins: [

You can pass options to Linaria's Babel preset:

plugins: [
    resolve: 'gatsby-plugin-linaria',
    options: {
      evaluate: true,
      displayName: process.env.NODE_ENV !== 'production',

These are the defaults, so unless you need a different behavior you don't need to pass any options.

Babel configuration file

gatsby-plugin-linaria also requires adding a custom Babel configuration file to your Gatsby project. That way Linaria can pick it up and use it for its evaluate feature.

While gatsby-plugin-linaria already adds Linaria's babel preset, tools like ESLint and Jest might also use this Babel configuration file and they won't know about gatsby-plugin-linaria, so it's best to add it again:

// babel.config.js
module.exports = {
  presets: [
    // add this preset to the bottom
    ['linaria/babel', {
      evaluate: true,
      displayName: true,

These options are only for tools like ESLint and Jest, Gatsby will use the ones you set through gatsby-plugin-linaria.

This is pretty icky, I know, but hopefully we will be able to avoid this in the future.

Happy styling! 🎨