Gatsby-plugin-linaria NPM

gatsby-plugin-linaria

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.

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:

gatsby gatsby-plugin linaria css css-in-js

@babel/core @babel/preset-typescript @linaria/server @linaria/webpack-loader babel-preset-gatsby

@everything-registry/sub-chunk-1722 @devsisters/gatsby-preset @devsisters/gatsby-stack @zalastax/nolb-gatsby-plugin-l gatsby-preset

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago