Configuring astroturf
astroturf is right-sized for you and your needs. Quickly tweak behavior based on easy to use configuration options.Options
Most options are available anywhere astroturf is used. Specify them
via your webpack.config or babelrc depending on use and need.
extension: (default:
'.module.css') the extension used for extracted style files.extensiongenerally informs the flavor of CSS used (Sass, Less, etc) for the CLI or bundler to further process to plain css.stylesheetTagName: (default:
'stylesheet') The tag identifier used to ' locate inline stylesheets declarations.cssTagName: (default:
'css') The tag identifier used to locate inline css literals and extract them.styledTagName: (default:
'styled') The tag identifier used to locate components.enableCssProp: (default:
true) compiles React.JS™csscomponent props to styled components.enableDynamicInterpolations: (default:
'cssProp') enables or disables custom value interpolation, You can disable this feature if you need to target environments that do not support CSS custom properties.experiments: Opt in to any experimental features we are testing out.
- experiments.modularCssExternals: Set the css-modules flavor to
modular-csswhich provides better inter-component referencing than the vanilla css-modules. requires css-module-loader to be configured
- experiments.modularCssExternals: Set the css-modules flavor to
Configuration File
astroturf also supports configuration via localized configuration files. We recommend that dependencies using astroturf use this approach to avoid needing an single application-wide set of configuration options.The supported file types are:
.astroturfrc.astroturfrc.json
Both are assumed to JSON (with comments don't worry). You can also add configuration
to the astroturf key in your package.json.