react-app-rewire-css-blocks

Adds support for CSS Blocks to your react-app-rewired config.

TOCs

• Installation
• Usage

Installation

Note: babel-loader is a peer dependency.

npm install babel-loader react-app-rewire-css-blocks -D

or

yarn add babel-loader react-app-rewire-css-blocks -D

Usage

Within your react-app-rewire config:

const cssBlocksPlugin = require('react-app-rewire-css-blocks')

const pluginConfig = {
  appIndexJs: 'src/index.js',
  webpackOptions: {
    outputCssFile: 'styles.css'
  }
} // See docs below for full details

// Adds support for modernizr
config = cssBlocksPlugin(
  config,
  env,
  pluginConfig // Option, see docs below
)

Configuration

The configuration object that you provide to the plugin allows the following options to be configured:

• appIndexJs (String, required)

  The entry point to your application.

• jsxOptions (Object, optional)

  The jsx plugin configuration options. For full details see here.

  It supports quite a complex configuration, however, you likely may only need to focus on types if you are using Flow or Typescript.

  As a quick reference it supports the following options:

  • baseDir (optional, string, Default: process.cwd())

  • types (optional, string, Default: "none")

    "typescript" | "flow" | "none"

  • aliases (optional, Object)

  • compilationOptions (optional, ResolvedConfiguration)

  • parserOptions (optional, BabylonOptions)

• webpackOptions (optional, Object)

  The configuration options for the CSS Blocks webpack plugin. For full details see here.

  It supports quite a complex configuration, however, you likely may only need to focus on outputCssFile and optimization.enabled.

  As a quick reference it supports the following options:

  • name: (optional, string, Default: "css-blocks")

  • outputCssFile: (optional, string, Default: "styles.css")

  • compilationOptions (optional, Object)

    • outputMode (_optional, string)

      Only "BEM" is supported at the moment.

    • rootDir: (string);

    • maxConcurrentCompiles (number, Default: 4);

      Limits block parsing and compilation to this number at any one time.

    • preprocessors: (Preprocessors)

      A preprocessor function can be declared by syntax.

    • importer: (Importer_)

    • importerData (ImporterData)

    • disablePreprocessChaining (boolean)

      If a preprocessor function is declared for css, all blocks will be ran through it, even those that were preprocessed for another syntax. this can be disabled by setting disablePreprocessChaining to true.

  • optimization (optional, Object)

    • enabled (boolean)

      Whether to perform any optimizations.

    • only: (optional, Optimizations)

      Only perform the optimizations specified and no others.

    • except?: (optional, Optimizations)

      Perform all optimizations except the ones specified. Overrides optimizations enabled by the only option.

    • css?: (optional, Object)

      Some CSS features can be used for more optimal output but may have varying level of support. These options control wether the optimizer will take advantage of those features where it can.

      CSS features are never output with vendor prefixes. You can try using autoprefixer or cssnext, but doing so is likely to result in output that is less optimal than if the optimization hadn't been performed.

      • useMatchesPseudoClass (boolean)

        Indicates that class and id selectors should be treated as case-insensitive. In quirksmode and some older doctypes, selectors are case insensitive. Identifiers are more compressible when case sensitivity can be assumed.

      • caseInsensitiveSelectors (boolean)

Please see the CSS Blocks docs for more information.