[feature] Ease the postCSS customization

[jmarceli]

Submit a feature request or bug report

• I've read the guidelines for Contributing to Roots Projects
• This is a feature request
• This is a bug report
• This request isn't a duplicate of an existing issue
• I've read the docs and NPM Debugging Guidelines post and followed them (if applicable)
• This is not a personal support request that should be posted on the Roots Discourse forums

Currently, the only way to use custom postCSS modules (other than autoprefixer) is overriding a resources/assets/build/webpack.config.js which is of course bad idea if you want to stick with the latest Sage version. It would be very nice to provide some clean and easy way for enabling more postCSS modules (in my case it is lost but there are more of them).

General idea for providing build process extensibility without modifications:

1. Conditionaly require all files from e.g.resources/assets/build/custom/ (a new folder in the building structure which will be empty by default but may be filled with a custom scripts)
2. Provide some kind of API for the custom scripts

Does it fit to the Sage concept? If so I may implement such feature and send you a PR.

[QWp6t]

Can you check the PR I put up yesterday? I think it would be sufficient for what you're asking.

postcss.config.js: https://github.com/roots/sage/blob/update-dependencies/resources/assets/build/postcss.config.js

The function receives the following:

• file: the current file being processed by postcss
• options: the same config object that's used throughout all of our webpack routine
• env: an alias of process.env.NODE_ENV, which we now set

Docs: https://github.com/postcss/postcss-loader#usage

If that satisfies what you're asking, feel free to close this issue.

[jmarceli]

This is similar to the existing problem. I can modify the postcss.config.js but then I will have to manually merge this file each time there will be some changes in it.

What I want to do is creating some API like the Wordpress Hooks system, which will allow for an easy extension without a need for modifications. For starters (and as an example) I would provide two hooks configReady (where you can modify webpack config just before it is used by webpack) and postcssReady (for postCSS arguments modification). The use of this API will be completely optional but it should make the build much more flexible.

Should I implement it or you don't want such feature?

[webstractions]

There is a similar issue #1931 in regards to only being able to process/lint SCSS files with the way that webpack.config.js is presently set up. I suggested there, to use Jeffrey Way's Laravel Mix which provides an API for defining basic webpack build steps. You will be able to define any postCSS modules to your hearts content.

[Log1x]

Sage 10 will be using Laravel Mix which makes working with postCSS significantly easier.