How to use cssnano - 10 common examples

async minify() {
    try {
      const parseTree = this.parseTree.clone();
      const result = await cssnano.process(
        parseTree,
        { from: undefined, map: { annotation: false } }, // Tell postcss to not remove the sourceMappingURL comment
        {
          preset: [
            'default',
            {
              svgo: false,
              discardComments: {
                remove(comment) {
                  return !/@preserve|@license|[@#]\s*sourceURL|[#@]\s*sourceMappingURL|^!/.test(
                    comment
                  );
                }
              }
            }
          ]

async minify() {
    try {
      const result = await cssnano.process(
        this.parseTree,
        { from: undefined, map: { annotation: false } }, // Tell postcss to not remove the sourceMappingURL comment
        {
          preset: [
            'default',
            {
              svgo: false,
              discardComments: {
                remove(comment) {
                  return !/@preserve|@license|[@#]\s*sourceURL|[#@]\s*sourceMappingURL|^!/.test(
                    comment
                  );
                }
              }
            }
          ]

{
					'custom-media-queries': {
						preserve: false
					},
					'custom-properties': {
						// Preserve must always be false for the editor
						preserve: false
					},
					'nesting-rules': true
				}
			)
		}),
		calc({
			preserve: false
		}),
		cssnano(),
	];

	// Skip minifying files if we aren't building for
	// production and debug is enabled
	if( config.dev.debug.styles && ! isProd ) {
		postcssPlugins.pop();
	}

	// Report messages from other postcss plugins
	postcssPlugins.push(
		reporter({ clearReportedMessages: true })
	);

	// Return a single stream containing all the
	// after replacement functionality
	return pipeline.obj([

config.dev.styles.features :
				{
					'custom-media-queries': {
						preserve: false
					},
					'custom-properties': {
						preserve: true
					},
					'nesting-rules': true
				}
			)
		}),
		calc({
			preserve: false
		}),
		cssnano(),
	];

	// Skip minifying files if we aren't building for
	// production and debug is enabled
	if( config.dev.debug.styles && ! isProd ) {
		postcssPlugins.pop();
	}

	// Report messages from other postcss plugins
	postcssPlugins.push(
		reporter({ clearReportedMessages: true })
	);

	// Return a single stream containing all the
	// after replacement functionality
	return pipeline.obj([

__LOGGER__: USI_LOGGER === 'true' || isDev,
    __DEVTOOLS__: USI_DEVTOOLS === 'true'
  }
});

// Dont display assets because it will contain tons of html and json assets
// devServer.noInfo = true does the same thing for webpack-dev-server
config.stats = {assets: false};

// Copy all the media (only once) to the build/contentBase dir when webpack is
// has finished compiling. This means in dev mode that the server needs to be
// restarted if new images are fetched.
config.plugins.push(new OnBuildPlugin(once(copyMedia)));

// Add custom cssnano for css-modules to existing postcss plugin
config.postcss.push(cssnano({
  // Required to work with relative Common JS style urls for css-modules
  // https://github.com/less/less.js/pull/2615
  normalizeUrl: false,
  // Core is on by default so disabling it for dev allows for more readable
  // css since it retains whitespace and bracket newlines
  core: !isDev,
  discardComments: {removeAll: !isDev}
}));

export default config;

async mergeStylesheets (document) {
    const styles = [].slice.call(document.querySelectorAll('style'));
    if (styles.length === 0) {
      this.logger.warn('Merging inline stylesheets into a single <style> tag skipped, no inline stylesheets to merge');
      return;
    }
    const first = styles[0];
    let sheet = first.textContent;
    for (let i = 1; i < styles.length; i++) {
      const node = styles[i];
      sheet += node.textContent;
      node.remove();
    }
    if (this.options.compress !== false) {
      const before = sheet;
      const processor = postcss([cssnano()]);
      const result = await processor.process(before, { from: undefined });
      // @todo sourcemap support (elsewhere first)
      sheet = result.css;
    }
    setNodeText(first, sheet);
  }
</style>

function css() {
  var plugins = [
    postcssImport(),
    precss(),
    autoprefixer({
      path: ["src/public/css"]
    }),
    cssnano()
  ];

  return gulp
    .src(paths.styles.src)
    .pipe(sourcemaps.init())
    .pipe(postcss(plugins))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.styles.dest));
}

function styles() {
	if (isProdBuild()) {
		return gulp.src(settings.sources.stylesEntryPoint)
			.pipe(sass())
			.pipe(postcss([
				autoprefixer(autoPrefixOptions),
				cssnano({
					discardComments: {
						removeAll: true
					}
				})
			]))
			.pipe(rename('index.min.css'))
			.pipe(gulp.dest(settings.destinations.prod.styles))
			.pipe(rename('index.uncss.min.css'))
			.pipe(postcss([uncss.postcssPlugin(uncssOptions)]))
			.pipe(gulp.dest(settings.destinations.prod.styles));
	}
	return gulp.src(settings.sources.stylesEntryPoint)
		.pipe(plumber({errorHandler: onError}))
		.pipe(sourcemaps.init())
		.pipe(sass())
		.pipe(postcss([autoprefixer(autoPrefixOptions)]))

* http://cssnano.co/optimisations/ for more details.
 *
 * For example you can turn off z-index rebasing by setting `zindex: false`
 * in your config, or you can use `safe: true` which will turn off unsafe
 * optimisations.
 */

const opts = {

};

/*
 * Compress the CSS asynchronously and log it to the console.
 */

cssnano.process(css, opts).then(result => {
    console.log(result.css);
});

.then(function (result) {
    save(file, result.css)
    console.log('salad - ' + file)
    cssnano(loadDist(file))
      .then(function (result) {
        save('vuep.min.css', result.css)
        console.log('cssnao - vuep.min.css')
      })
  }).catch(function (err) {
    console.log(err)