Specify custom PostCSS plugins #8427
Comments
|
Hi, just wondering if there was a workaround for using TailwindCSS via PostCSS in Angular while we wait for this item. I've googled and couldn't find any good documentation on how to. Thanks. |
|
Found a hackable workaround. As there is no "official" way to provide Angular CLI a Open We're going to change warnings property from Save and run |
|
Thanks @trimox! But change files in I am waiting the official solution... |
|
100% agreed. Hope the issue gets more attention! |
filipesilva
added
P5
|
The typical workaround for this sort of thing is to write a NPM Overall I think a monkey patch like this is much less bad than ejecting, or rolling your own build solution, to get access to a needed setting. |
|
Vote up! This could be very useful option. |
filipesilva
added
comp: cli/build
and removed
P5
|
@filipesilva could you please tell us what the "comp: cli/build" tag you just added means? any chance of this feature landing in cli anytime soon-ish? :) thanks |
|
Just wanted to see if I could get a definite answer- does this mean if I wanted to use a third-party postcss plugin with angular-cli (eg. postcss-media-variables), I have to eject the webpack config? In other words, there's currently no native way to add additional postcss plugins to angular-cli? Thanks for any help! |
|
With Angular CLI 6 no longer allowing for |
|
Are there any updates about using postcss plugins? We are using cssnext rather than sass, and are relying on postcss-cssnext to do that. We would really like to be able to use Angular CLI - but we aren't able to do any hacking of the node_modules due to constraints of our (overly) constrained build system :/ @filipesilva - it's been almost 4 months since you were unassigned, any idea if someone else will be assigned soon, or should we just give up on CLI for now? I'd have a shot at convincing our team to hang tight if we knew it would be worked on soon-ish...but the natives are becoming restless!! |
|
any updates? |
|
So looking at the generation of the webpack config, postcss is run for all scss|less|stylus|css right before the raw-loader with the following plugins -> postcss-url, postcss-import, and autoprefixer, plus another cli specific plugin. I really think most of us are wanting to run plugins right before the autoprefixer, but if a plugin like cssinject needs to run before the url plugin then the ordering would need to be managed. The plugin removeRoot is another one that requires ordering. It also looks like plugin configs need to be substantially modified to be usable in this environment. In addition, plugins like postcss-preset-env, which handles cssnext behavior, also configures autoprefixer driven by browserslist which could conflict with the execution of the autoprefixer in the cli. |
|
I guess one alternative is to fork https://github.com/angular/devkit and add the webpack config lines directly in to that file and just try to keep them up to date... but a supported option would be nice |
filipesilva
added
area: @angular-devkit/build-angular
and removed
comp: cli/build
labels
|
hi everyone, are there any promising developments on this ? |
|
Devkit has been moved to the angular-cli project, new link to styles config is this: https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts |
|
Hey guys! |
|
Isnt this the most requested feature since Angular 2? Personally i need to add flexbugs to PostCSS. |
|
Also looking for this feature to add the Started a question here to see if anyone knows how and can point me in the right direction. |
|
Simply append or prepend rules didn't work for me. The following custom webpack config worked: |
|
I've tried this approach and it did not work for me (angular 9.0.0-rc.7). |
|
@ToniaDemchuk how does your angular.json file looks like |
|
@anoopsinghbayes Unfortunately, no public repo I can share to you. Angular versions from package.json: |
|
I tried something based on what @ToniaDemchuk did, and wasn't able to get it to work. I did some debugging to make sure the plugin was correctly added to the list of postcss plugins, and I was able to get that to work, but the plugin still isn't doing anything. I have another project using postcss within "plain"(?) webpack config, and the postcss plugins work fine there. Here's what I have - it fixes a bug in finding the postcss-loader, and it successfully adds a plugin, but there's no evidence that the plugin is doing anything: angular.json: "projects": {
"(app name)": {
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
...
"customWebpackConfig": {
"path": "ng-webpack-ext.config.js"
},ng-webpack-ext.config.js : const combineMediaQueryPlugin = require('postcss-combine-media-query');
/**
* Patches the webpack postcss-loader plugins function to add the specified postcss
* plugins, in addition to angular's defaults.
*
* @param {object} webpackConfig - The webpack config, created by angular-devkit
* @param {array} addPlugins - An array of postcss plugins to insert at the beginning of the postcss plugins
*/
function patchWebpackPostcssPlugins(webpackConfig, addPlugins) {
const webpackScssRule = webpackConfig.module.rules.find(x => x.test.toString().includes('scss'));
if (!webpackScssRule) {
console.warn('[ng-webpack-ext.config.js]: No scss rule found');
}
else {
const postcssLoader = webpackScssRule.use.find(x => x.loader.includes('postcss-loader'));
const pluginFunc = postcssLoader.options.plugins;
const newPluginFunc = function () {
let plugins = pluginFunc.apply(this, arguments);
plugins = plugins.concat(addPlugins);
console.dir(plugins); // Shows the plugins
return plugins;
}
postcssLoader.options.plugins = newPluginFunc;
}
};
/** Function returning webpack config. */
module.exports = (config, options) => {
patchWebpackPostcssPlugins(config, [combineMediaQueryPlugin()]);
return config;
};Looking at the current angular-cli code, it looks like there's an The I'm pretty much stuck figuring out why the postcss plugin isn't being used. I've about hit my limit on painful troubleshooting for one day. |
|
Any progress update on this feature? Almost 3 years since it was suggested. I am dropping SASS and going PostCSS. Right now it looks like I will have to switch to React to do that. |
kyliau
added
the
needs: discussion
|
as mentioned above and in this article I had no problem integrating postcss/tailwindcss. The integration is straightforward and all one has to do is provide the custom build part themselves, no need to get the hands dirtly with Angular Cli internals. |
|
@banjankri getting tailwind to work is not a problem, even with material. But we still face an issue when debugging css in chrome. All imported styles in styles.scss gets inlined. You don't see the actual file in chrome. I would love to add just the plugin instead of override the webpack config |
|
for applying custom post-css plugins I found a solution in this ticket: just-jeb/angular-builders#638 |
|
If anyone needs it, here is a working tailwindcss config for extra-webpack.config.js : module.exports = (config) => {
const globalStylesPostcssLoaderOptions = config.module.rules
.find((r) => r.include && r.test && r.test.toString().includes('\\.scss$'))
.use.find((u) => u.loader && u.loader.includes('postcss-loader')).options;
const globalStylesPostcssOptionsCreator = globalStylesPostcssLoaderOptions.postcssOptions;
globalStylesPostcssLoaderOptions.postcssOptions = (loader) => {
const postcssOptions = globalStylesPostcssOptionsCreator(loader);
postcssOptions.plugins.splice(postcssOptions.plugins.length - 1, 0, require('tailwindcss'));
return postcssOptions;
};
return config;
};The important part is to modify only the global styles loader chain as explained here: just-jeb/angular-builders#638 (comment). The global styles loader chain uses an EDIT: |
If anyone is wondering why it fails with Tailwind 2... Angular still uses PostCSS 7. see https://tailwindcss.com/docs/installation#post-css-7-compatibility-build |
|
@antoinebrault @georgiyordanov can confirm that your snippet works with |
|
Maybe can be useful for somebody: function patchWebpackPostcssPlugins({
webpackConfig,
addPlugins = [],
pluginName = null,
append = false,
atIndex = null,
components = true,
global = true,
}) {
const position = append ? 1 : 0;
webpackConfig.module.rules.map((rule) => {
if (!(rule.use && rule.use.length > 0) || (!components && rule.exclude) || (!global && rule.include)) {
return rule;
}
rule.use.map((useLoader) => {
if (!(useLoader.options && useLoader.options.postcssOptions)) {
return useLoader;
}
const postcssOptions = useLoader.options.postcssOptions;
useLoader.options.postcssOptions = (loader) => {
const _postcssOptions = postcssOptions(loader);
const pluginIndex =
atIndex !== null
? atIndex
: _postcssOptions.plugins.findIndex(
({ postcssPlugin }) =>
postcssPlugin && pluginName && postcssPlugin.toLowerCase() === pluginName.toLowerCase()
);
if (pluginName && pluginIndex === -1) {
console.warn(`${pluginName} not found in postcss plugins`);
}
const insertIndex =
pluginIndex >= 0
? Math.min(Math.max(pluginIndex, 0), _postcssOptions.plugins.length)
: _postcssOptions.plugins.length;
_postcssOptions.plugins.splice(insertIndex + position, 0, ...addPlugins);
return _postcssOptions;
};
return useLoader;
});
return rule;
});
}
module.exports = (config) => {
const isProd = config.mode === "production";
const tailwindConfig = require("./tailwind.config.js")(isProd);
patchWebpackPostcssPlugins({
webpackConfig: config,
addPlugins: [require("tailwindcss")(tailwindConfig)],
pluginName: "autoprefixer",
// global: false,
// components: false,
// atIndex: 2,
// append: false,
});
return config;
}; |
@vltansky As far as I can tell, Yep, the config above also works with |
|
@georgiyordanov right, looks like although postcss have been updated in |
|
We are currently running a survey about PostCSS. If there are specific plugins that you'd like Angular CLI to support, please let us know. |
|
Based on the survey results, 90% of the participants wanted Tailwind CSS, and 37% wanted Purge CSS. As for PurgeCSS, supporting it is somewhat tricky due to the risk of breaking applications. We maintain our stance that exposing PostCSS configuration is not a scalable solution in the long term, as explained in #8427 (comment). Going forward, while we are not able to support every PostCSS plugin out there, we will continue to review different use cases on an individual basis, and make decision based on developer feedback and the current landscape of web development.
|
dgp1130
removed
the
needs: discussion
|
Hi All - nice work on landing this! Quick question: is there a way to disable the automatic detection of Tailwind? I want to continue using my custom webpack builder configuration for tailwind but also want to be on v11.2 |
|
@mattAtPropertyMe rename your |
|
Thanks @vltansky confirming your suggestion worked, however unfortunately it breaks VSCode Tailwind IntelliSense. The good news is, renaming the file to
Thanks again. |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
and others
Bug Report or Feature Request (mark with an
x)Versions.
@angular/cli: 1.4.9
node: 6.11.4
os: linux x64
@angular/animations: 4.4.6
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.9
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.3.4
Desired functionality.
I would like the ability to specify custom postCss plugins, without having to eject the angular webpack.config.js file.
Mention any other details that might be useful.
This would enable frameworks like TailwindCSS (https://tailwindcss.com) and other useful PostCSS plugins through the CLI without having to deal with the ejected webpack config file.
The text was updated successfully, but these errors were encountered: