@compiled/parcel-config

Parcel v2 configuration used to set up a parcel project with Compiled CSS-in-JS. See installation for setup instructions.

npm install @compiled/parcel-config --save-dev

Options

Configure using any of the following at the root of your project.

• .compiledcssrc
• .compiledcssrc.json
• compiledcss.js
• compiledcss.config.js

// .compiledcssrc
{
  "importReact": true
}

Through the Compiled configuration file (e.g. .compiledcssrc), you can set options for any of our Parcel plugins (@compiled/parcel-transformer and @compiled/parcel-optimizer), as well as for the underlying @compiled/babel-plugin. This page will focus on the options that are unique to @compiled/parcel-transformer and @compiled/parcel-optimizer.

Options used by Compiled Parcel plugins

@compiled/parcel-transformer accepts the following options:

• classNameCompressionMapFilePath
• extensions
• extract
• extractFromDistributedCode
• inlineCss
• parserBabelPlugins
• resolve
• sortAtRules
• ssr
• styleSheetPath
• transformerBabelPlugins

classNameCompressionMapFilePath

Don't use this!

This is an alternative to classNameCompressionMap, where instead of providing the compression map itself, you can provide a file path to the compression map. If both are provided, classNameCompressionMap will take precedence over classNameCompressionMapFilePath.

Note that this is enabled only if extract is set to true.

extensions

Extensions that we should consider to be code. We use these to identify if a file should be parsed.

If set, the value of extensions will be used in two places:

1. If resolver is not set, then extensions will be passed to the default resolver, enhanced-resolver.
2. This is also passed to @compiled/babel-plugin under the hood.

• Type: string[]
• Default: none, but note that enhanced-resolver and @compiled/babel-plugin have their own different defaults when the extensions option is not set.

extract

Enables @compiled/babel-plugin-strip-runtime, i.e. the stylesheet extraction feature. When enabled, Compiled react components will be removed and the css will be extracted into a single CSS stylesheet.

The stylesheet extraction feature is disabled on local development due to a known issue.

• Type: boolean
• Default: false

extractFromDistributedCode

Unused.

extractStylesToDirectory

When set, extracts styles to an external CSS file. Requires extract to be set to true as well. This is passed directly to @compiled/babel-plugin-strip-runtime -- see the @compiled/babel-plugin-strip-runtime documentation for more information.

• Type: { source: string; dest: string }
• Default: undefined

inlineCss

Indicates whether CSS content is inlined in HTML or served as a external .css file when the stylesheet extraction is enabled.

• Type: boolean
• Default: false

parserBabelPlugins

Babel parser plugins to be used when parsing the source code. Define these to enable extra babel parsers (for example, typescript). See the babel docs for more context.

Example usage:

// .compiledcssrc
{
  "parserBabelPlugins": ["typescript"]
}

This is also passed to @compiled/babel-plugin under the hood.

• Type: ParserPlugin[]
• Default: undefined

[Deprecated] resolve

If resolver is not provided, resolve specifies options that should be passed to the default resolver (enhanced-resolver). The resolver is used to statically evaluate import declarations.

Example usage:

// .compiledcssrc
{
  "resolve": {
    "mainFields": ["module:es2019", "browser", "module", "main"]
  }
}

See enhanced-resolver docs for more options.

• Type: ResolveOptions
• Default: undefined

sortAtRules

Whether to sort at-rules, including media queries.

See here for more information.

• Type: boolean
• Default: true

sortShorthand

Whether to sort shorthand properties so that they always some before longhand properties.

For example, border will always come before borderColor, which will always come before borderTopColor.

See Shorthand properties for more information.

• Type: boolean
• Default: true

[Obsolete] ssr

This is hardcoded to true now.

To be used in conjunction with extract: true when having a different configuration for SSR.

When set to true, ssr will prevent additional require (one import per rule) in the bundle during style sheet extraction.

This is equivalent to setting compiledRequireExclude in @compiled/babel-plugin-strip-runtime.

• Type: boolean

[Obsolete] styleSheetPath

Unused. In the past, this was an internal option passed to @compiled/babel-plugin-strip-runtime. Don't use this!

transformerBabelPlugins

Babel transformer plugins to be applied to transformed files before the Compiled evaluation.

Use this if you have some sort of babel plugin that should run before Compiled, likely because you have some sort of non-standard syntax in your code. See the babel docs for more context.

Example usage:

// .compiledcssrc
{
  "transformerBabelPlugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
  ]
}

• Type: PluginItem[]
• Default: undefined

Options used by @compiled/babel-plugin

The following options are passed directly to @compiled/babel-plugin:

• addComponentName
• classHashPrefix
• classNameCompressionMap
• importReact
• importSources
• optimizeCss
• resolver

Passing other @compiled/babel-plugin options not listed above will also work, but have not been tested.

To avoid repetition, we have not included the descriptions here. Please refer to the @compiled/babel-plugin documentation for more information.

Suggest changes to this page ➚