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: