https://github.com/cometkim/gatsby-plugin-linaria

Gatsby plugin for styling with Linaria
https://github.com/cometkim/gatsby-plugin-linaria

css-in-js gatsby gatsby-plugin linaria react

Last synced: 4 days ago
JSON representation

Gatsby plugin for styling with Linaria

• Host: GitHub
• URL: https://github.com/cometkim/gatsby-plugin-linaria
• Owner: cometkim
• License: mit
• Created: 2018-10-10T16:50:45.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2024-10-25T13:39:56.000Z (3 months ago)
• Last Synced: 2024-10-29T14:50:41.784Z (3 months ago)
• Topics: css-in-js, gatsby, gatsby-plugin, linaria, react
• Language: TypeScript
• Homepage:
• Size: 3.37 MB
• Stars: 57
• Watchers: 3
• Forks: 8
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - gatsby-plugin-linaria

README

        
# gatsby-plugin-linaria

[![npm](https://img.shields.io/npm/v/gatsby-plugin-linaria)](https://npm.im/gatsby-plugin-linaria)

[![npm downloads](https://img.shields.io/npm/dm/gatsby-plugin-linaria)](https://npm.im/gatsby-plugin-linaria)

Gatsby plugin for styling with [Linaria](https://linaria.dev/)

## Install

Install the plugin and Linaria:

```bash

yarn add gatsby-plugin-linaria @linaria/core @linaria/react

```

Next, add the plugin to `gatsby-config.js`:

```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:

```js

plugins: [

  'gatsby-plugin-typescript',

  'gatsby-plugin-linaria',

]

```

See [#13](https://github.com/cometkim/gatsby-plugin-linaria/issues/13#issuecomment-633154216) for more details.

## Customize Loader Options

You can customize [linaria loader options](https://github.com/callstack/linaria/blob/master/docs/BUNDLERS_INTEGRATION.md#options)

```js

{

  resolve: 'gatsby-plugin-linaria',

  options: {

    loaderOptions: {

      // ... Specify options here

    },

  },

}

```

## Critical CSS Extraction

GatsbyJS & Linaria extract your stylesheet and inject into the `` 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

```js

{

  resolve: 'gatsby-plugin-linaria',

  options: {

    extractCritical: true, // false by default.

  },

}

```

When you opt-in this feature, only **Critical CSS** is injected into the ``. 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](https://github.com/cometkim/gatsby-plugin-linaria/issues/94#issuecomment-654760281) for more detailed explanation.

# Changelog

See [CHANGELOG.md](CHANGELOG.md)

## LICENSE

MIT

----

Happy styling! :art: