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! 🎨

Name		Name	Last commit message	Last commit date
Latest commit History 203 Commits
.github/workflows		.github/workflows
.husky		.husky
.yarn/releases		.yarn/releases
src		src
.eslintignore		.eslintignore
.eslintrc.js		.eslintrc.js
.gitattributes		.gitattributes
.gitignore		.gitignore
.yarnrc.yml		.yarnrc.yml
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
index.js		index.js
package.json		package.json
renovate.json		renovate.json
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

gatsby-plugin-linaria

Install

TypeScript

Customize Loader Options

Critical CSS Extraction

Changelog

LICENSE

About

Uh oh!

Releases 15

Uh oh!

Contributors 9

Uh oh!

Languages

License

cometkim/gatsby-plugin-linaria

Folders and files

Latest commit

History

Repository files navigation

gatsby-plugin-linaria

Install

TypeScript

Customize Loader Options

Critical CSS Extraction

Changelog

LICENSE

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 15

Uh oh!

Contributors 9

Uh oh!

Languages