gatsby-plugin-linaria

npm npm downloads

Gatsby plugin for styling with Linaria

Install

Install the plugin and Linaria:

yarn add gatsby-plugin-linaria linaria

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

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

Finally, make sure to add .linaria-cache to your .gitignore file.

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.

See this for more detailed explanation.

LICENSE

MIT


Happy styling! :art: