Skip to content

Config Files naming #501

@kroko

Description

@kroko

Documentation Is:

  • Missing
  • Needed
  • Confusing
  • Not Sure?

Please Explain in Detail...

The docs state that

The loader will search up the directory tree for configuration in the following places:

  • a postcss property in package.json
  • a .postcssrc file in JSON or YAML format
  • a .postcss.json, .postcss.yaml, .postcss.yml, .postcss.js, or .postcss.cjs file
  • a postcss.config.js or postcss.config.cjs CommonJS module exporting an object (recommended)

I'm updating webpack stack for v5 and checking any changes in all loaders along the way.

  • It stood out that naming of the dotfiles has been changed.
  • Tried using .postcss.js instead of .postcssrc.js.
  • Naming PostCSS config file .postcss.js does not yield result, while naming it as previously .postcssrc.js does yield result (prefixes and minification).
  • .postcss.js is not mentioned, but .postcssrc.js is at postcss-load-config

An example:

.postcssrc.js

module.exports = (ctx) => ({
  plugins: [
    require('autoprefixer')({
      // browsers: [], // defined in .browserslistrc file!
      cascade: true,
      add: true,
      remove: false,
      supports: true,
      flexbox: true,
      grid: false
    }),
    ctx.env === 'development'
      ? null
      : require('cssnano')({
        // https://cssnano.co/guides/optimisations
        preset: ['default', {
          autoprefixer: false, // do not remove prefixes
          discardComments: {
            removeAll: true
          },
          normalizeUrl: false,
          normalizeWhitespace: true,
          zindex: false
        }]
      })
  ].filter((e) => e !== null)
});

.browserslistrc

[production staging testing]
> 0.0001%

[development]
last 1 version

Versions used:

    "autoprefixer": "^10.0.2",
    "css-loader": "^5.0.1",
    "cssnano": "^4.1.10",
    "postcss": "^8.1.9",
    "postcss-loader": "^4.1.0",
    "webpack": "^5.6.0",
    "webpack-cli": "^4.2.0"

Your Proposal for Changes

As I am not sure if it is error in the docs or the naming is "about to be changed". I'm proposing to revise the docs.

That is, maybe the docs are wrong and are missing the "rc" part in dotfile cases

  • a .postcssrc.json, .postcssrc.yaml, .postcssrc.yml, .postcssrc.js, or .postcssrc.cjs file

Thanks

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions