Community Plugin
View plugin on GitHub
See starters using this

gatsby-plugin-linaria

npm npm downloads

Gatsby plugin for styling with Linaria

Install

Install the plugin and Linaria:

yarn add gatsby-plugin-linaria @linaria/core @linaria/react

Next, add the plugin to gatsby-config.js:

plugins: [
  'gatsby-plugin-linaria',
]

TypeScript

If you’re using TypeScript, make sure to include gatsby-plugin-typescript before gatsby-plugin-linaria in your config:

plugins: [
  'gatsby-plugin-typescript',
  'gatsby-plugin-linaria',
]

See #13 for more details.

Customize Loader Options

You can customize linaria loader options

{
  resolve: 'gatsby-plugin-linaria',
  options: {
    loaderOptions: {
      // ... Specify options here
    },
  },
}

Critical CSS Extraction

GatsbyJS & Linaria extract your stylesheet and inject into the <head> by default. So, you don’t need to worry about the SSR & FOUC.

However, the extracted stylesheet would be huge for large site, because it includes css used by whole pages/components

This plugin provide an option extractCritical that use @linaria/server API behind the scene

{
  resolve: 'gatsby-plugin-linaria',
  options: {
    extractCritical: true, // false by default.
  },
}

When you opt-in this feature, only Critical CSS is injected into the <head>. And loading full CSS will be deferred for later paint or navigations.

Lighthouse might complain you have duplicated style rules. (It’s OK)

See this for more detailed explanation.

Changelog

See CHANGELOG.md

LICENSE

MIT

Happy styling! :art: