Question - How to use config.json?

[SvenBudak]

Hello, Sorry for asking things in a issue board, but i cant resist any more. I try now to sience about 8 hours, to make postcss working.

My package.json:

{
  "scripts": {
    "postcss": "postcss --config postcss.json"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.6",
    "bootstrap-sass": "^3.3.7",
    "cssnano": "^3.10.0",
    "node-sass": "^4.5.0",
    "postcss": "^6.0.13",
    "postcss-cli": "^4.1.1",
    "postcss-colormin": "^2.2.2",
  }
}

My postcss.json:

{
  "use": [
    "autoprefixer"
  ],
  "input": "public_html/css/",
  "output": "public_html/css/min/*.css",
  "local-plugins": true,
  "watch": false
}

With this i get a Error when i run "npm run postcss":

Input Error: Did not receive any STDIN

Okay, Looks like that the --config param dont work. so i tryed to input the files direct in the script:

"postcss": "postcss public_html/css/**/*.css --base --dir public_html/css/min/"

But what ever i try, i cant make that he collect my 4 css files and keep the folder structure:

public_html/css/style.css
public_html/css/folder/xxx.csss
public_html/css/folder/xxx.csss
public_html/css/folder/xxx.csss

I find here: https://github.com/postcss/postcss-cli in the "Options List" the --base option. So i try it with --base --dir because the documentations says: "Use together with --dir for keeping directory structure." but when i use them together i get following errors again:

Input Error: Must use --dir or --replace with multiple input files

Im verry short to get mad ;)
Please Help me! :D

[michael-ciniawsky]

Okay, Looks like that the --config param dont work.

Your config is just outdated, postcss-cli uses a new config format since >= v3.0.0
https://github.com/postcss/postcss-cli/wiki/Migrating-from-v2-to-v3#config-migration-example

postcss.config.js (Place it in the root of your project (next to package.json))

module.exports = () => ({
  plugins: {
    'autoprefixer': {...options}
  }
})

postcss path/to/input.css -o path/to/output.js

⚠️ Please try with one simple CSS file first to verify your config works

[SvenBudak]

so the json format dont work any more? i read this:

If you are currently using a JSON config file, we recommend switching to a JS config.

but they say "we recommend" so json still work?

[michael-ciniawsky]

You can use the following formats

pkg.postcss (package.json)
.postcssrc.json {Object}
.postcssrc.yaml {Object}
.postcssrc.js {Object|Function}
postcss.config.js {Object|Function}

{Object}

package.json

{
  "devDependencies": {
     "autoprefixer": "^1.0.0"
  }, 
  "postcss": {
    "plugins": {
      "postcss-import": { "root": "path/to/imports" }, // Static
      "autoprefixer": {...options},
      "cssnano": { "safe": true }
    }
  }
}

.postcssrc.json

{
  "plugins": {
    "postcss-import": { "root": "path/to/imports" }, // Static
    "autoprefixer": {...options},
    "cssnano": { "safe": true }
  }
}

{Function}

.postcssrc.js/postcss.config.js

module.exports = (ctx) => ({
  plugins: {
    'postcss-import': { root: ctx.file.extname }, // Dynamic
    autoprefixer: {...options}
    cssnano: ctx.env === 'production' ? { safe: true } : false  // Dynamic via NODE_ENV
  }
})

[SvenBudak]

Ok. Thanks alot for this explanation! So when i create the .postcssrc.json i dont need any entry in my package.json? And i need to install Load Config manualy? or its allready includet in the postcss-cli package?

And how i can run the .postcssrc.json file? I cant find in the documentation any executing command.

(Sorry its hard for me to understand this postcss stuff, so thanks again alot for your explanation.)

For your Information: I dont use Webpack, Gulp, Grunt or any other of this things. I just use npm Script.

[michael-ciniawsky]

Ok. Thanks alot for this explanation! So when i create the .postcssrc.json i dont need any entry in my package.json?

You're welcome 😛 . Input && Output related configuration is CLI only since postcss-cli >= v3.0.0.

postcss src/css/*css --dir dist/css

1. Load Files
2. Autoload Config
3. Process
4. Write Files

And i need to install Load Config manualy? or its allready includet in the postcss-cli package?

It works out-of-the-box and is a dependency of postcss-cli. Most PostCSS Runners support this common config out-of-the-box (CLI, Gulp, Webpack Loader)

[SvenBudak]

ohhhh okay. So i really need to input and output direct in the package.json inside of the postcss npmScript. And i dont need to include the .postcssrc.json anywhere. It get loaded automaticly by postcss-load-config.

This is awesome! :)

And at last, some question from a SCSS user.

Is it possible to compile scss files with postcss? I was using node-sass for this. but i love to reduce my dependencys. and wich plugins / configurations you recommend for this?

And how i can keep the folderstructure?

public_html/css/style.css
public_html/css/folder/xxx.csss
public_html/css/folder/xxx.csss
public_html/css/folder/xxx.csss

i tryed with

postcss public_html/css/**/*css --dir public_html/css/min/

but then i get the error that this is not a valid WIN32 structure

More better in this case would be, when i can add a filename suffix like .min abd dont need to make a subfolder "min". I mean that the top files goes to:

public_html/css/style.min.css
public_html/css/folder/xxx.min.csss
public_html/css/folder/xxx.min.csss
public_html/css/folder/xxx.min.csss

Is that possible?

And i need postcss-load-options to config options in my .postcssrc.json? because when i add a entry:

    "postcss-discard-comments": {
      "removeAll": true
    }

...nothing happens. The comments are still in the css file.

[michael-ciniawsky]

Is it possible to compile scss files with postcss?

Nope, only syntax analysis. The functionality (e.g mixins) are not 💯 reproduceable with PostCSS Plugins

but then i get the error that this is not a valid WIN32 structure

I'm not on windows sry no idea 😛

And how i can keep the folderstructure?
More better in this case would be, when i can add a filename suffix like .min abd dont need to make a subfolder "min". I mean that the top files goes to:

Use the --ext flag (CLI only) or thinker around with --base a bit more (I'm not using it myself but it should definitely work, otherwise it's a bug)

postcss public_html/css/**/*.css --dir public_html/css --ext min.css

[SvenBudak]

You are great! =) Thanks again for this. --ext works like a charm! 👍

Just the 3 subfoldered files he place on the wrong place. But i will find a way to solve this.

i edit my post because postcss-discard-comments dont do his job.

My complete json:

{
  "plugins": {
    "autoprefixer": {
    },
    "cssnano": {
      "safe": true
    },
    "postcss-discard-comments": {
      "removeAll": true
    }
  }
}

[michael-ciniawsky]

{
  "plugins": {
    "autoprefixer": {
    },
    "cssnano": {
      "safe": true
       {
  "plugins": {
    "autoprefixer": {},
    "cssnano": {
      "safe": true,
       discardComments: { removeAll: true } // not 100%  sure if it works with 'safe', worth a try
    },
-   "postcss-discard-comments": {
-     "removeAll": true
-   }
  }
}

[michael-ciniawsky]

I really wonder while --base isn't working (?)

@RyanZim Can you shed light upon us how to correctly use --base please ?

[michael-ciniawsky]

The issue can then be closed I guess ?

[SvenBudak]

Maybe we wait for RyanZim´s answere. because im really verry interested to make this --base flag working =)

[michael-ciniawsky]

The issue can => then <= be closed I guess ?

Yep, intended 😛

[SvenBudak]

your right :P My english sucks a little bit :)

npmScript looks atm like this:

"postcss": "postcss public_html/css/**/*css --dir public_html/css --ext min.css"

-ext min.css works fine, but he add it every time again when i run the script :D after 3 runs i got style.min.min.min.css :P

Is it possible to set otion parameters direct in the npmScript file? i dont know why but this works better for me. the postcssrc.json dont load the plugins.

[RyanZim]

I think this is what you want:

"postcss": "postcss public_html/css/**/*!(.min).css --base public_html/css --dir public_html/css --ext min.css"

Haven't tested personally.