Provides drop-in support for Stylus, and generate *.d.ts for Stylus files.

Install

• npm

  npm install @guanghechen/gatsby-plugin-stylus --save-dev

• yarn

  yarn add @guanghechen/gatsby-plugin-stylus --dev

Usage

Add configs in gatsby-config.js:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: '@guanghechen/gatsby-plugin-stylus',
      options: {
        shouldUseSourceMap: false,
        shouldGenerateDts: true,
        cssLoaderOptions: {
          modules: {
            localIdentContext: path.resolve(__dirname, 'src'),
            exportLocalsConvention: 'camelCaseOnly',
          }
        }
      }
    }
  ]
}

Then, import *.module.styl in js|jsx|ts|tsx files:

import classes from './style.module.styl'

console.log('classes:', classes)

Options

Name | Required | Type | Default | Description :----------------------:|:---------:|:-------:|:-------:|:------------------: stylusRule | false | object | - | Additional webpack rule for *.styl moduleStylusRule | false | object | - | Additional webpack rule for *.module.styl shouldUseSourceMap | false | boolean | false | Whether to generate sourcemaps shouldGenerateDts | false | boolean | false | Whether to generate *d.ts for *.module.styl files cssLoaderOptions | false | object | - | Options for css-loader stylusLoaderOptions | false | object | - | Options for stylus-loader postcssLoaderOptions | false | object | - | Options for postcss-loader

• shouldGenerateDts only works for stylus files enabled module options. You can change the file pattern of the modular stylus by modifying moduleStylusRule.test, similar to the following similar to the following configuration.

  // gatsby-config.js
  module.exports = {
    plugins: [
      {
        resolve: '@guanghechen/gatsby-plugin-stylus',
        options: {
          moduleStylusRule: {
            test: /\.custom\.styl$/,
          },
          shouldGenerateDts: true,
          cssLoaderOptions: {
            modules: {
              localIdentContext: path.resolve(__dirname, 'src'),
              exportLocalsConvention: 'camelCaseOnly',
            }
          }
        }
      }
    ]
  }