Gatsby plugin for styling with Linaria
Install the plugin and Linaria:
yarn add gatsby-plugin-linaria @linaria/core @linaria/reactNext, add the plugin to gatsby-config.js:
plugins: [
'gatsby-plugin-linaria',
]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.
You can customize linaria loader options
{
resolve: 'gatsby-plugin-linaria',
options: {
loaderOptions: {
// ... Specify options here
},
},
}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.
See CHANGELOG.md
MIT
Happy styling! 🎨