Gatsby plugin for styling with Linaria
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', ]
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! 🎨
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4