gatsby-plugin-linaria

    3.2.0 • Public • Published

    gatsby-plugin-linaria

    npm npm downloads

    Gatsby plugin for styling with Linaria

    Install

    Install the plugin and Linaria:

    yarn add gatsby-plugin-linaria linaria

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

    plugins: [
      'gatsby-plugin-linaria',
    ]

    Finally, make sure to add .linaria-cache to your .gitignore file.

    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.

    See this for more detailed explanation.

    LICENSE

    MIT


    Happy styling! 🎨

    Install

    npm i gatsby-plugin-linaria

    DownloadsWeekly Downloads

    909

    Version

    3.2.0

    License

    MIT

    Unpacked Size

    10.9 kB

    Total Files

    9

    Last publish

    Collaborators

    • cometkim