Awesome
gatsby-plugin-linaria
Gatsby plugin for styling with Linaria
Install
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',
]
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.
Lighthouse might complain you have duplicated style rules. (It's OK)
See this for more detailed explanation.
Changelog
See CHANGELOG.md
LICENSE
MIT
Happy styling! :art: