Gatsby plugin for styling with astroturf
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Make this plugin depend on gatsby-plugin-postcss Oct 15, 2018
gatsby-node.js Remove semicolon Oct 19, 2018
index.js Initial commit Oct 14, 2018
license Initial commit Oct 14, 2018
package.json v0.2.0 Oct 19, 2018
readme.md Remove unnecessary backslashes in the docs Oct 19, 2018
yarn.lock Remove tests, ESLint and Prettier Oct 19, 2018

readme.md

astroturf plugin for Gatsby

This plugin modifies Gatsby's webpack configuration to support astroturf.

Install the plugin and astroturf:

yarn add gatsby-plugin-astroturf astroturf

Add it to your plugins in gatsby-config.js:

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

You can also pass options to astroturf's webpack loader:

plugins: [
  {
    resolve: 'gatsby-plugin-astroturf',
    // defaults:
    options: {
      tagName: 'css',
      styledTag: 'styled',
      extension: '.module.css',
    },
  },
]

PostCSS plugins

For astroturf to work properly you need to add nesting support. For that you can use postcss-nested or another plugin which contains this feature, like precss. You can install these plugins and many more using gatsby-plugin-postcss:

yarn add gatsby-plugin-postcss
plugins: [
  'gatsby-plugin-postcss',
  'gatsby-plugin-astroturf',
]

You can specify PostCSS plugins through gatsby-plugin-postcss's postCssPlugins option, or by creating a postcss.config.js file:

yarn add postcss-nested
// postcss.config.js
module.exports =  {
  plugins: {
    'postcss-nested': {},
  }
}

Sass, Less etc.

If you'd like to use Sass, Less or some other preprocessor instead of (or in addition to) PostCSS, make sure that you adjust the extension option and install the appropriate Gatsby plugin. For example, this is all you need to add support for Sass:

yarn add gatsby-plugin-sass
plugins: [
  'gatsby-plugin-sass',
  {
    resolve: 'gatsby-plugin-astroturf',
    options: {
      extension: '.module.scss',
    },
  },
]

Just make sure that your Gatsby plugin supports CSS Modules. Also, note that Sass already has support for nesting, so you don't need postcss-nested.

Happy styling! 🎨