nmfr / optimize-css-assets-webpack-plugin Goto Github PK
View Code? Open in Web Editor NEWA Webpack plugin to optimize \ minimize CSS assets.
License: MIT License
A Webpack plugin to optimize \ minimize CSS assets.
License: MIT License
Hi,
We've recently seeing an issue when optimizing the css assets along with the css split plugin.
The optimize-css-assets-webpack-plugin
requires the last-call-webpack-plugin
and it will optimize the css at the final step after the css got split.
This causing an issue if we have specified z-index in each of the split css files, z-index will get reduction by optimization at the final step (after the css got split) and affects the render. What are we expected is that optimize the code first and split later. (Somehow last call webpack plugin always comes to the last)
Can we add a customized option way to specify the start/end of the execution of the css optimization based on these two lines here: https://github.com/NMFR/last-call-webpack-plugin/blob/master/index.js#L38-L39
OR
Please let me know if there is a better way to control the order of the plugins.
Thank you very much in advance!
I want to output source map url in separated css file, and use settings like:
new OptimizeCssAssetsPlugin({
cssProcessorOptions: {
discardComments: {
remove: comment => comment[0] !== '#',
},
},
}),
However, after build, there is no sourcemap url in the final separated css.
Could you please check whether this works?
Hi,
this module have really nice idea, because css-loader could not minify CSS files.
If this module allows to choose custom minifier (cssnano or other like cleancss) then i think cssnano could not be defined as dependency. It could be removed (someone want to use version 4 etc) or moved to peerDependency.
In both ways are not cssnano installed by default so there is no dependency hell.
while loading fonts, it url is https://www.foo.com/aaa.woff
then plugins removes the www from url.
Input: https://www.foo.com/aaa.woff
output: https://foo.com/aaa.woff
expected: https://www.foo.com/aaa.woff
Instead it is as followed ( which increase the bundle size):
Example:
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1haW4uOTU3NDljODRjYzU0NzNiNTdiZjY3ZWQ2OTU4Y2Y1YjQuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE1BQ0ksaUJBQW1CLENBQ3RCIiwiZmlsZSI6Im1haW4uOTU3NDljODRjYzU0NzNiNTdiZjY3ZWQ2OTU4Y2Y1YjQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLypzZGZzZGYqL1xuI3Rlc3Qge1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbn1cbiJdfQ== */
When doing an npm audit
It says not to use this plugin because of its deep deps on macaddress
https://nodesecurity.io/advisories/654
Critical │ Command Injection │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ macaddress │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in │ No patch available │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ optimize-css-assets-webpack-plugin [dev] │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ optimize-css-assets-webpack-plugin > cssnano > │
│ │ postcss-filter-plugins > uniqid > macaddress │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://nodesecurity.io/advisories/654
My version of optimize-css-assets-webpack-plugin: 4.0.1
The issue I'm facing is the same as described here:
webpack-contrib/mini-css-extract-plugin#141
In summary, I'm defining source-maps on my configuration. I'm also using MiniCssExtractPlugin to extract the css modules to a specific bundle, but when using optimize-css-assets-webpack-plugin
on webpacks 4 optimization.minimizer
, the source-maps are not generated. Here is a snippet:
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({}) // <---- THIS. Commenting/Uncommenting results in: No Optimization with source-maps/ Optimization without source-maps
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': 'production'
}),
new MiniCssExtractPlugin({
filename: 'foo.min.css'
}),
],
devtools: 'source-maps'
Maybe optimize-css-assets-webpack-plugin is truncating source-maps some how?!
My webpack config:
...
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader',
options: {
modules: true, // this turns on css modules via the css-loader
importLoaders: 2,
localIdentName: '[sha1:hash:hex:4]',
},
}, { /** sass-loader config **/ }]
}]
}
...
plugins: [
new ExtractTextPlugin('bundle.css'),
new OptimizeCssAssetsPlugin(),
]
I noticed when I build w/o the OptimizeCssAssetsPlugin, there is some sass variable that gets wrapped in a :local()
function (documentation found here).
With OptimizeCssAssetsPlugin returns me this error:
Error processing file: bundle.css
CssSyntaxError: /bundle.css:315:18: Missed semicolon
at Input.error (/node_modules/postcss/lib/input.js:113:22)
at Parser.checkMissedSemicolon /node_modules/postcss/lib/parser.js:506:26)
I went to bundle.css:315:18:
.e127.f18c::after,
._77c2.f18c::after {
animation: 225ms :local(my-scss-variable) forwards, 75ms :local(my-scss-variable) forwards; }
I think its the cssnano lib getting hung up on the :local
wrapper. Any ideas of a work around?
As per the topic, it doesn't read the config options from cssnano.config.js automatically it seems. Anyone facing the same issue?
We use extract-css-chunks-webpack-plugin to get the css chunks for every js chunk and when we use optimize plugin optimization works for main file and for chunks separately and there is no duplications if we look to the files directly one by one but we see the one rule happens in main css file and the same rule we face one time in chunk css file.
Expected behaviour is to remove the generic rule from chunk because it's already in the main file.
Ciao,
Do you think if it is a cssnano
(which I think it is), or this plugin?
The problem I get is like this:
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);@import url(https://fonts.googleapis.com/css?family=Roboto);
Works, but in the last month, some optimization it is like this:
.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}@import url(https://fonts.googleapis.com/icon?family=Material+Icons);@import url(https://fonts.googleapis.com/css?family=Roboto);
I dont understand why it is not loading the imports, do you have an idea?
Not sure of the exact issue causing this error yet. Either way it looks like an error that should be caught by this plugin so that it may cancel the build with an error:
Full stack trace below:
/Users/rhys/Projects/usability-hub/usability_hub/node_modules/.bin/webpack --config /Users/rhys/Projects/usability-hub/usability_hub/config/webpack.config.js --bail
clean-webpack-plugin: /Users/rhys/Projects/usability-hub/usability_hub/public/webpack_assets has been removed.
Error processing file: print-83f4ad77948c21b55de0.css
CssSyntaxError: <css input>:1:10: Unknown word
at Input.error (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/postcss/lib/input.js:113:22)
at Parser.unknownWord (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/postcss/lib/parser.js:468:26)
at Parser.other (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/postcss/lib/parser.js:174:14)
at Parser.loop (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/postcss/lib/parser.js:81:26)
at parse (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/postcss/lib/parse.js:26:16)
at new LazyResult (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/postcss/lib/lazy-result.js:70:24)
at Processor.process (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/postcss/lib/processor.js:117:12)
at Function.cssnano.process (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/cssnano/dist/index.js:306:55)
at OptimizeCssAssetsPlugin.processCss (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/optimize-css-assets-webpack-plugin/index.js:39:19)
at Object.processor (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/optimize-css-assets-webpack-plugin/index.js:28:23)
at /Users/rhys/Projects/usability-hub/usability_hub/node_modules/last-call-webpack-plugin/index.js:117:8
at arrayEach (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/last-call-webpack-plugin/node_modules/lodash/_arrayEach.js:15:9)
at forEach (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/last-call-webpack-plugin/node_modules/lodash/forEach.js:38:10)
at LastCallWebpackPlugin.process (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/last-call-webpack-plugin/index.js:114:3)
at Compilation.<anonymous> (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/last-call-webpack-plugin/index.js:150:12)
at Compilation.applyPluginsAsyncSeries (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/tapable/lib/Tapable.js:206:13)
at self.applyPluginsAsync.err (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/webpack/lib/Compilation.js:645:11)
at next (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/tapable/lib/Tapable.js:202:11)
at LastCallWebpackPlugin.process (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/last-call-webpack-plugin/index.js:106:12)
at Compilation.<anonymous> (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/last-call-webpack-plugin/index.js:147:12)
at Compilation.applyPluginsAsyncSeries (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/tapable/lib/Tapable.js:206:13)
at self.applyPluginsAsync.err (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/webpack/lib/Compilation.js:640:10)
at next (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/tapable/lib/Tapable.js:202:11)
at Compilation.<anonymous> (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/extract-text-webpack-plugin/dist/index.js:272:11)
at Compilation.applyPluginsAsyncSeries (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/tapable/lib/Tapable.js:206:13)
at sealPart2 (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/webpack/lib/Compilation.js:636:9)
at next (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/tapable/lib/Tapable.js:202:11)
at /Users/rhys/Projects/usability-hub/usability_hub/node_modules/extract-text-webpack-plugin/dist/index.js:241:13
at /Users/rhys/Projects/usability-hub/usability_hub/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:421:16
at iteratorCallback (/Users/rhys/Projects/usability-hub/usability_hub/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:998:13)
I write style in SCSS, and I want to use webpack to build both minified and not minified css files.
My webpack.config.js:
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CssNano = require('cssnano');
const extractSASS = new ExtractTextPlugin({ filename: 'assets/styles/[name].css' });
module.exports = {
entry: './Scripts/main.js',
output: { path: path.resolve(__dirname, 'wwwroot/'), filename: 'scripts/bundle.js' },
module: {
rules: [
{
test: /\.scss$/,
use: extractSASS.extract({
use: [
{
loader: 'css-loader',
},
{
loader: 'sass-loader',
},
],
fallback: 'style-loader',
}),
},
{
test: /\.js$/,
use: [{ loader: 'babel-loader', options: { presets: ['es2015'] } }],
},
],
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: CssNano,
cssProcessorOptions: {},
canPrint: true,
}),
extractSASS,
],
};
Because it only build 1 css file, I would like to know how should I change to ouput 2 css files?
Thanks.
Hey,
this would really help. I tried to go to cssnano docs and figure out what options can I use but it seems like I couldn't figure it out. Is there any place I can learn what options can I use? Thanks
I believe there may be an issue with how radial gradients are optimized. I'm using the configuration produced by vue-cli. If I comment out the OptimizeCSSPlugin
block, I don't get the issue.
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
My expected result, which I get if I turn off the optimizer, is a composited background that has a semi-transparent orange radial gradient on top of a blue to black linear gradient:
.original {
background:
radial-gradient(ellipse 200% 100% at top left 40%, rgba(255, 169, 0, 0.5), transparent 30%),
linear-gradient(45deg, black 20%, #002f76);
}
If I enable the optimizer, only the blue to black gradient is visible:
.output {
background:
radial-gradient(ellipse 200% 100% at top left 40%, rgba(255, 169, 0, .2), transparent 0),
linear-gradient(45deg, #000 20%, #002f76);
}
I believe it is because the color-stop
of the radial gradient is being changed for the second color from transparent 30%
to transparent 0
. I'm not sure why.
What is the current behavior?
Invalid stat.json, file start wth:
Starting to optimize CSS...
Processing bundle.css...
Processed bundle.css, before: 327621, after: 265824, ratio: 81.14%
{
"errors": [],
"warnings": [
...
If the current behavior is a bug, please provide the steps to reproduce.
set NODE_ENV=production&& webpack --profile --json > stats.json
What is the expected behavior?
Expected correct stat.json
Using:
From
[...]
return this.options.cssProcessor.process(css, Object.assign({ to: assetName }, this.options.cssProcessorOptions));
[...]
What is the purpose of the to
property? cssnano doesn't seem to document or use this option.
ignore svg/svgo#622
I use optimize-css-assets-webpack-plugin remove -webkit-box-orient: vertical; I test not autoprefixer problem
Edit: See final update below.
a.css
#root {
background-color: #f00;
}
body {
text-align: center;
}
b.css
#root {
width: 640px;
height: 360px;
}
expected.css
#root{width:640px;height:360px;background-color:red}body{text-align:center}
actual.css
#root{background-color:red}body{text-align:center}#root{width:640px;height:360px}
If the body
style is omitted, it merges the #root
styles as expected.
css-loader provide a minimize option to minimizes the css, it also use cssnano-based minifier.
Is there difference with this plugin? Or they are the same?
node_modules/last-call-webpack-plugin/src/index.js:170
compiler.hooks.compilation.tap(
^
TypeError: Cannot read property 'compilation' of undefined
On version 3.2.0 everything works fine.
css content:
div {
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
}
options:
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: {
discardComments: { removeAll: false }, // or removeAll: true
},
canPrint: true,
}),
After complite the -webkit-box-orient
will be deleted. Can I keep it in css?
I am used cssnano
and postcss-mqpacker
and be good allowed to use this plugin together.
I've got 2 sources of css: .css and .scss
For both of them i have such loaders with extraction:
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {importLoaders: 1, minimize: false, sourceMap: true},
},
{
loader: 'postcss-loader',
options: {sourceMap: true},
},
],
}),
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {minimize: false, sourceMap: true},
},
{
loader: 'postcss-loader',
options: {sourceMap: true},
},
{
loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: true,
},
},
],
}),
},
Then i have such optimize plugin exec:
new OptimizeCssAssetsPlugin({
cssProcessor: require('cssnano'),
cssProcessorOptions: {
preset: 'default',
map: {inline: false},
},
}),
After all if i try to choose some node in Chrome DevTool, styles always point to one file https://www.evernote.com/l/AS84t-O36W5PGIklf_An0IpJiU61MUuuo14
But in most cases it is wrong.
When I install [email protected]
,my project will build failed, below is the errors.
⠋ building for production.../Users/Yuga/Desktop/Developing/compass/node_modules/last-call-webpack-plugin/src/index.js:170
compiler.hooks.compilation.tap(
^
TypeError: Cannot read property 'compilation' of undefined
at OptimizeCssAssetsWebpackPlugin.apply (/Users/Yuga/Desktop/Developing/compass/node_modules/last-call-webpack-plugin/src/index.js:170:20)
at Compiler.apply (/Users/Yuga/Desktop/Developing/compass/node_modules/tapable/lib/Tapable.js:375:16)
at webpack (/Users/Yuga/Desktop/Developing/compass/node_modules/webpack/lib/webpack.js:33:19)
at err (/Users/Yuga/Desktop/Developing/compass/build/build.js:19:3)
at next (/Users/Yuga/Desktop/Developing/compass/node_modules/rimraf/rimraf.js:75:7)
at FSReqWrap.CB [as oncomplete] (/Users/Yuga/Desktop/Developing/compass/node_modules/rimraf/rimraf.js:111:9)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
this is part of my package.json
:
"optimize-css-assets-webpack-plugin": "^4.0.0",
"webpack": "^3.6.0",
Hi,
I am currently upgrading a project based on the pwa vue template to webpack4, and it uses this plugin in the building process.
But the plugin is generating the error : CssSyntaxError: XXX.css:X:X: Missed semicolon
NB: I'm assuming the plugin is generating it as there is no error through my compilation when I disable it.
The PWA configuration of the plugin is the following:
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
})
Sources: PWA vue template
I'm having trouble getting the outputted filenames to be bundle.css
and vendor.bundle.css
Currently I'm getting bundle.css and 0.bundle.css
ONLY when minified despite having:
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
},
minimizer: [new OptimizeCSSAssetsPlugin({}), new UglifyWebpackPlugin({ sourceMap: true })]
},
If the font resource is referenced in the css file, there is a problem with the url of font resource in the dist package file, the url is without 'www', like this '//abc.com'. It will lead to the failure of reference of font resource. So I think you should expose a configuration item in the optimize-css-assets-webpack-plugin to set the option 'stripWWW' in plugin 'postcss-normalize-url'.
Trailing zeros are striped from whole numbers.
input: z-index: 6000;
expected: z-index: 6000;
actual: z-index: 6;
Hi there,
Can't seem to find an answer to this (and might be a good one to show an example of in the README) - but how could I use OptimizeCssAssetsPlugin
to keep the original (unminified) CSS generated by ExtractTextPlugin
as a file (i.e. example.css
) and then generate a minified file copy (i.e. example.min.css
too?
Thanks for any help!
after I add this plugin, I can't use sourcemap to locate the source file in chrome.
In my optimized CSS run through this package, where I have an image being loaded in via CSS url()
, it creates a link to [object Object]
, e.g.
background: url('../pages/images/myLogo.png') top left no-repeat;
gets transformed in such a way that the browser looks for localhost:3000/[object Object]
.
For context, we're using Gatsby, modifying our Webpack config in the following way:
import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin'
export function modifyWebpackConfig (config, env) {
if (env === 'build-css') {
config.plugin('optimize-css', OptimizeCssAssetsPlugin)
}
// etc.
my css code including keyframes someAnimation{....} is not showing up in compressed css file after applying optimize-css-assets plugin. It is working fine in development mode with just ExtractTextPlugin plugin
The clean-css minifier now also supports the cssnano process(css, opts)
API (merged soon).
It would be nice if clean-css could be added to the list of supported minifiers of this webpack plugin.
How to configure like '{"autoprefixer": {browsers: ['iOS >=8', 'Android >= 4.1']}}'
hello,
Great plugin ! I have an issue : it does not work with WebpackCompressionPlugin. The compression plugin works fine but the file being compressed is not the file before calling optimize-css-assets-webpack-plugin. This is probably because optimize-css-assets-webpack-plugin uses last-call-webpack-plugin to process the css file at the very last moment, just before emitting to the file - and so compression does not see it.
I am not knowledgeable in architecture of webpack plugin but it seems to be a flaw in optimize-css-assets-webpack-plugin. what else do you think, let me know if you have any plan to fix it ?
I get strange numbers while compression.
Starting to optimize CSS...
Processing bundle.css...
Processed bundle.css, before: 1774615, after: 1774383, ratio: 99.99%
my source css contains a lot of comments, white spaces and so on. So, i expected it will reduce css size at least on ~30% but it reduced only on 0.01%.
Here is my webpack prop config (i use sass) :
'use strict';
const webpack = require('webpack');
const merge = require('webpack-merge');
const webpackCommon = require('./webpack-common.config');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
webpackCommon.bail = true;
webpackCommon.debug = false;
webpackCommon.profile = false;
module.exports = merge(webpackCommon, {
devtool: 'none',
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.scss$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract('style', 'css?modules&localIdentName=[name]__[local]___[hash:base64:5]!sass')
},
{
test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png|\.jpe?g|\.gif$/,
exclude: /node_modules/,
loader: 'url-loader'
}
]
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
beautify: false,
comments: false,
compress: {
unused: true,
dead_code: true,
warnings: false,
screw_ie8: true
}
}),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
'__DEV__': false
}),
new webpack.optimize.CommonsChunkPlugin({
minChunks: 2,
maxChunks: 15,
minChunkSize: 10000,
name: 'vendor'
}),
new ExtractTextPlugin("bundle.css", {allChunks: true}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /bundle.css$/,
cssProcessor: require('cssnano'),
cssProcessorOptions: {
discardDuplicates: { removeAll: true },
discardComments: {removeAll: true }
},
canPrint: true
}),
]
});
and common config file
'use strict';
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry: {
main: './src/main.js',
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, '../../PashaGraph/WebClient/public')
},
watch: true,
watchOptions: {
aggregateTimeout: 100
},
resolve: {
extensions: ['', '.js', '.jsx']
}
};
thanks
@NMFR thanks so much for your work on this project!
My organization recently starting using the plugin on one of our projects, but I saw the tests are still a work in progress. Are you open to a contributors to get the plugin tested? If so I'd be happy to help, and would welcome any thoughts you have on what those tests should look like.
Currently this package is incompatible with Subresource Integrity, apparently due to incorrect use of the emit
event.
waysact/webpack-subresource-integrity#47
[optimize-css-assets-webpack-plugin] performs the optimization in the emit phase, and as such is incompatible with webpack-subresource-integrity. By that point the integrity hashes have already been computed, and so any changes to the asset contents will cause breakage.
I think the correct fix here is to ask the authors of optimize-css-assets-webpack-plugin to perform the optimization in the optimize phase instead, perhaps using the optimize-chunk-assets hook.
Let me know in case the other plugin has a good reason for hooking into the emit phase instead of the optimize phase and I'm happy to take another look at this.
I found a problem like https://github.com/ben-eb/cssnano/issues/357 and it's fixed in cssnano v4.0.0,so how about update it?
Might want to update to handle promise rejections.
"DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code."
Wondering if any changes will be needed for v4?
https://medium.com/webpack/webpack-4-migration-guide-for-plugins-loaders-20a79b927202
Likely this.option
?
I know that ExtractTextWebpackPlugin
is still awaiting v4 support
Is there any plan for an upgrade? Any pointers for someone to contribute it? Thanks for the great work on this plugin! 🙏 ✌️
I have the following CSS animation:
animation: fa-spin 1s infinite steps(8);
It seems that after the minimization, it became:
animation: a 1s infinite steps(8);
and now the animation doesn't work.
I am experiencing an issue with webpack that turns out to be quite problematic when combined with a CDN and SRI. I am unsure if the issue is actually on optimize-css-assets-webpack-plugin
or on webpack
side, but here there are the reproduction steps:
You can find a minimal example in this repo https://github.com/albertfdp/optimize-css-assets-plugin-contenthash
You can see that there are 2 webpack configurations, with the only difference being the options passed to OptimizeCSSAssetsPlugin
:
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
discardComments: { removeAll: true }
-- reduceIdents: false,
-- safe: true,
-- zindex: false
}
})
Also, bear in mind that I am using:
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
chunkFilename: '[name].[id].[contenthash].css'
})
]
This results in 2 files being generated, both with the same name, but with different content (contenthash):
Therefore, if this happens in 2 consecutive builds, and the first time the assets are uploaded to a CDN, when requesting the CSS file, the SRI hash won't match and 💥.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.