Questions tagged [cssnano]

The tag has no usage guidance.

cssnano
Filter by
Sorted by
Tagged with
12 votes
1 answer
9k views

Postcss-loader not minifying css output

I'm using webpack and postcss-loader to autoprefix and minify my CSS, before loading it into css-loader to use css-modules. I'm having trouble with minifying CSS. Examining the emitted .js file by ...
Tijs's user avatar
  • 1,267
3 votes
3 answers
2k views

Angular ionic build: Cannot read property 'toLowerCase' of undefined postcss

I'm trying to build my application, but I'm getting this error from Postcss. Note: the file on '/srv/http/r2-app/styles.e4dd05dfea4b7f17f938.css' does not exist. [error] TypeError: Cannot read ...
Vitor Kevin's user avatar
3 votes
1 answer
715 views

gulp-postcss: conditional options (optimizations)

I learned the list of cssnano optimizations: it includes autoprefixer (not default), cssnano-util-raw-cache, etc. Next I look the gulp-postcss documentation: it has the following example: var ...
Takeshi Tokugawa YD's user avatar
3 votes
1 answer
888 views

Angular 11/CSS minification: How to prevent conversion of rgba to 8 digit hex code during css minification to support older chrome

We've a web app that's developed in Angular 11(cli V11.2.14) & Asp.net core and running fine, now needs to be supported in chrome older version(browser version 60). I came across css issues mainly ...
mv_05's user avatar
  • 119
3 votes
0 answers
1k views

Autoprefixer not using "grid: autoplace" with cssnano and postcss

We are using postcss with cssnano and autoprefixer. My problem is that postcss does not use the "grid: autoplace" in my postcss.config.js. This is my postcss.config.js: const cssnano = require('...
W4ldi's user avatar
  • 654
2 votes
1 answer
2k views

How do I add cssnano optimization rules in vue-cli 3?

I am trying to add cssnano optimization rules but with vue-cli, it doesn't seem to work. I added the following script in vue.config.js: module.exports = { css: { loaderOptions: { postcss: ...
Ernie's user avatar
  • 21
2 votes
1 answer
5k views

Cssnano doesn't remove duplicates

I have a React web application where i use CSS modules. I am using Webpack to build the application. Related part from the webpack.config.js : { test: /\.css$/, use: extractCSS.extract( ...
Shanaka Rusith's user avatar
2 votes
1 answer
2k views

Css minification not working (gulp + cssnano)

I have a very basic gulpfile set up like this: 'use strict'; var gulp = require('gulp'); var sass = require('gulp-sass'); var notify = require('gulp-notify'); var browserSync = require('browser-sync'...
onerkript's user avatar
2 votes
1 answer
4k views

Minify multiple input file with postcss

I installed cssnano following these step: http://cssnano.co/guides/getting-started/ Into the root of my project i ran: npm install cssnano --save-dev After i installed postcss-cli: npm install ...
bobc82's user avatar
  • 517
2 votes
1 answer
377 views

cssnano is reordering overridden properties

I am using less, postcss and cssnano (version 3.7.3). In less, I am using classes which inherit from a shared base and overriding some of the properties when needed. I am finding that cssnano is ...
daw's user avatar
  • 2,019
2 votes
0 answers
2k views

Retaining empty/unused classes with CSS Loader

I am building a React application through Webpack 2, generating CSS through SASS-loader and CSS-loader. Here is my Webpack 2 configuration: loaders: [ { test: /\.(css|scss)$/, ...
Prusprus's user avatar
  • 8,025
2 votes
0 answers
373 views

gulp postcss cssnano does not combine the same selector when it is not next to it

Gulp in postcss with cssnano combine the same selector when the selector next to it but unfortunately it does not combine the selector when it is not next to it. It works very well when selectors ...
Mo.'s user avatar
  • 26.9k
1 vote
1 answer
2k views

Optimizing CSS with cssnano advanced transforms using Gulp + PostCSS

My current working gulpfile.js: var postcss = require('gulp-postcss'); var gulp = require('gulp'); var cssnano = require('cssnano'); gulp.task('css', function () { var ...
marko-36's user avatar
  • 1,386
1 vote
3 answers
9k views

How to configure cssnano for CSS minification?

I am trying to configure cssnano plugin for the postcss-loader, which minifies CSS, very similar, as described here. Webpack config: ... module: { rules: [ { test: /\.css$/, ...
Daniel's user avatar
  • 1,461
1 vote
1 answer
644 views

Cannot turn off colormin optimization from the cssnano configuration

I have the Webpack setup in which I use optimize-css-assets-webpack-plugin with cssnano as the CSS processor. In there, I don't want to use the colormin optimization. Optimizations: https://...
Shanaka Rusith's user avatar
1 vote
0 answers
254 views

GRUNT: grunt-postcss not executing cssnano when used together with sass - if scss file long

I am using both the sass parser and gruntpostcss with cssnano on watch. cssnano` is parsing the file just fine if its a short file, but it my scss/css file gets long css file, the it is not parsing ...
ink's user avatar
  • 223
0 votes
1 answer
230 views

cssnano removes "all" attribute from css @media query

I am curious if what cssnano does to media queries is ok. In my css file, I have. @media all and ( min-width: 600px) {} After running my css through cssnano, it turns it to this > @media ( min-...
grimesd's user avatar
  • 111
0 votes
1 answer
836 views

webpack/cssnano not compressing all CSS files?

I'm using webpack 4 postcss-loader cssnano mini-css-extract-plugin The postcss/cssnano config looks like: { loader: 'postcss-loader', options: { sourceMap: true, ...
mpen's user avatar
  • 278k
0 votes
1 answer
2k views

Does cssnano apply css autoprefixer?

I want to apply cssnano and autoprefixer on my css code. I read on the internet that it is enough to use cssnano, that cssnano automatically applies autoprefixer. When I use this code: var gulp = ...
user avatar
0 votes
1 answer
1k views

Webpack: How to merge css and less, THEN apply cssnano

I managed to compile my css and less resources („imported“ from javascript) to all-my-LESS|CSS, extract them using ExtractTextPlugin and merge them together with MergeFilesPlugin to combinedStyles.css....
Frank N's user avatar
  • 10.1k
0 votes
0 answers
41 views

Can't use CssNano "discardDuplicates" as standalone plugin

I'm using Vite as build tool. Vite has an integrated postCSS config option that you can set in vite.config.js, so I'm using this to load cssNano as a plugin : //vite.config.js export default ...
Hypnorise's user avatar
0 votes
1 answer
132 views

Stop cssnano v4 from adding quotes to named grid-areas

cssnano v4 turns named grid-areas into quoted strings instead of custom-identifiers, eg: /* input */ header { grid-area: header; } /* output */ header { grid-area: "a"; } Making ...
Brian Zelip's user avatar
  • 3,041
0 votes
4 answers
3k views

CSS minification error in npm run build [vue.js]

Im receiving this error everytime I try to run 'npm run build' and I dont have any css file. ERROR Error: CSS minification error: Unexpected ":" found.. File: css/app.86f0ef2e.css Error: ...
LesterKingsley's user avatar