olback/es6-css-minify

Easily minify CSS and JavaScript in VS Code

Archived - Feel free to fork and upload to VSC Marketplace.

JS & CSS Minifier

If you found this extension useful and want to support further development, please consider donating.

Help wanted - New maintainer(s)!

OS	Status
Linux & MacOS
Windows

A simple Javascript & CSS minifier.
A Minify button should appear in the status bar when opening a .js or a .css file. You can also run Minify: Document by clicking F1 or CTRL+SHIFT+P.

Loading custom configs

By default the extension will look for .uglifyrc, .cleancssrc and .autoprefixerrc.
You can change the paths in settings. After changing settings in any of the config files, make sure to reload with Minify: Reload config. If the reload fails, make sure you don't have syntax errors in your config. If you want to go back to the default config, rename/delete your config file(s).

The config parsed by the extension is just passed to terser, clean-css or autoprefixer. If the output is diffrent from what you expected, please confirm that the issue is with the extension and not terser, clean-css or autoprefixer before opening an issue.

Minify on save, disabled by default!

Minify on save can be enabled in settings.

Generate source maps

Source maps can be generated by changing es6-css-minify.genCSSmap and es6-css-minify.genJSmap respectively.

Dependencies:

• terser
• clean-css
• autoprefixer

es6-css-minify's Issues

Not working with (function($) {...})( jQuery );

Hi,

While it seems working fine with a "flat" javascript, encapsulating it with jQuery incompatible mention like (function($) {YOUR CODE})( jQuery ); make it screwed, the inside code is almost completely missed.

This is useful when integrating your javascript in a third party environment using Drupal.

Do you have any suggestion for that use case ?

Kind regards.

Patrice.

Not working when using Remote Workspace Extension

I use the Remote Workspace Extension to work on files remotely. When I tried to use this extension to minify the file it gives me an error "Minify failed: ENOENT: no such file or directory … It is trying to save to my C: drive (Windows machine) with the path on my server. Not sure how the Remote Workspace extension works, but it must be temp saving to C: before uploading to server? Is there a way to get the minify extension to work with the Remote Workspace extension?

Replace uglify-es with terser

To quote its project page:

Why choose terser?

uglify-es is no longer maintained and uglify-js does not support ES6+.

terser is a fork of uglify-es that retains API and CLI compatibility
with uglify-es and uglify-js@3.

Unexpected Renaming of Minified File

First, thank you for this extension.

I have a js file, user.script.js.
When I minified it, it was renamed to usersscript.min.js.
I was expecting the new filename would be users.script.min.js.

Other than that, the minified file works.

Multiple css file and js into one minfied file

Hi

Could you please give me an example of minifying multiple css and js into one css and js file
I need the setting that is needed

thank you so much

Prevent minification for node js

Hello,
Using the autosave option for minification of browser js files. It is also minifying nodejs files on save. Is there a way to prevent this?

Thanks.
Rob

Setting to specify included/excluded files

Thanks for this useful extension!

I would love to be able to specify patterns in Settings to define which files are processed/ignored by this extension.

Can't minify CSS files

Just updated to version 2.0.0 today and now I'm not able to minify CSS files! The CSS files are located in a folder called 'css' in my project's root folder. I have tried moving them out of the folder and it simply doesn't work! I have also tried minifying CSS files on another project and it doesn't work either! This started happening when I updated to version 2.0.0.

command 'es6-css-minify.minify' not found

Dear Edwin,
I started recently to find this message 'command 'es6-css-minify.minify' not found' when minifying CSS.
Thanks for taking care of it.

Minify on Save

Sourcemap Path

Dears,
Thank you for the quick response on the last issue, but here I have a second one regarding the source map.
The path written at the end of both documents (min.js and min.js.map) are relative to my hard desk so I have to change it each time I minify.

I suggest to generate only the file name as they are in the same folder, so it would be relative the local and the uploaded folder.

Thank you..

#sourceMappingURL incorrect

Mangle options

A setting/s to pass the mangle options

Extension host terminated unexpectedly.

Dear Edwin,
I'm starting to have this message each time I minify, I uninstalled the extension, reinstalled it and ran the task of relod config but it doesn't work..
Thanks..

Help needed with .uglifyrc

Its ok then in theory we can set minification options in .unifyrc, but I'm not able to find any documentation for it, hogy to minify the code in ES6/7 compatible format. As I see by default the minified code is ES5, but it should be at least ES6.

js minify broken!

CSS : prefix and minify ?

To keep your style.css clean and just write css.
hit CTRL+S and if your style.min.css already exists, the style.css is automaticly prefixed and minified.
Ready for production.

You will never see a prefix of your life again.

https://autoprefixer.github.io/

How to use CSS Fragment Preservation

Hi,

I've been trying to use a feature introduced in clean-css v4.2, and I can't get it to work. It's described as:

"preserves any CSS content between /* clean-css ignore:start / and / clean-css ignore:end */ comments;"

What version of clean-css is bundled in your extension? I see the package.json for extension v2.7.0 specifies "@types/clean-css": "^3.4.30", but I haven't figure out how to determine what version was bundled.

Thanks

Sourmap path

Dear Edwin,
I tried to minify but I always get this
//# sourceMappingURL=d:\Andrew\Tests\es6-minfy\main.min.js

Only if I fill "es6-css-minify.jsMapUrl" then I get
//# sourceMappingURL=testd:\Andrew\Tests\es6-minfy\main.min.js

[Major Upgrade] Rewrite

Minify JSON

It would be awesome if I can minify JSON with this extension.

Auto shorten identify names

Please add "Auto shorten identify names" feature, include variables, constants and functions, thanks

Save the file in a subfolder

Hi, I need to save the file in a subfolder "min/"

my folders:

css/
---- style.css
---- other.css
---- min/
--------- style.css (min) <!-- LIKE THIS
--------- other.css (min)
js/
---- min/

my settings.json:

"es6-css-minify.cssMinPath": "{currentPath}/min",
or
"es6-css-minify.cssMinPath": "css/min"

it does not work for me :(

Minifying feature not working at all

Visual CODE STUDIO v1.27.2
Windows 10 Pro 64 Bit

When I go to my CSS file, click on "F1", then "Minify Document", I can see at the bottom left of the screen a message saying:
"Minified file is 25% smaller", but no minification is happening on the page.

Any idea why, please?

Thank you,

Minify on save canno be disabled

Hi,

Since the last update, "es6-css-minify.minifyOnSave" don't seem to have any effects. Even if set on false, it still minify files when I hit save.

Moreover, I'm not sure this option should be set on true by default. I wasn't aware of this until it messed up all my workflow, because each modification lead to a minification of files in the same folder, and my task-runner concatenate all files it find in this specific folder; so everything was copied twice in the final output file.

It was even minifying my task-runner file (which is why I finally understood what was going wrong with my files).

Thanks!

Source map

Uglify can generate a source map file, but it's not clear how to configure 'es6-css-minify' on visual studio code to generate it.

Combine multiple CSS and JS files in minified ones

Is there a way to combine/bundle in one file all js and all css files in custom order or I have to use directly the script and command line function of clean-css and uglify-es? Thank you

regex not working

Describe the bug
I was trying to use the mangle.properties.regex setting in .uglifyrc file, but no matter what I do, I always get either an immediate error on reloading the config or get a syntax error on executing minify.

To Reproduce

1. Add mangle.properties.regex setting in .uglifyrc file. JSON does not accept RegExp literals, and assigning string value leads to execution error.

Expected behavior
Expecting the extension will convert the string pattern into RegExp object and pass it to terser, but upon inspecting the source code, it doesn't do that.

Additional context
I temporarily fix the bug by adding the following under line 30 of extension.js:

if(_config.js.mangle && _config.js.mangle.properties && _config.js.mangle.properties.regex)
    _config.js.mangle.properties.regex = RegExp(_config.js.mangle.properties.regex);

But this is not general enough. Hope to see a general fix of this bug.

Issue with relative paths

If a a relative path is given in a css file, "../" is being removed while minifying.
Therefore, f.g. aren't accessible after the minified css is uploaded.

Unit tests

Write tests to make sure nothing breaks when refactoring/adding new stuff.

Command to minify entire project

It would be useful to be able to minify the entire project in one go.

For example, after checking out a different branch, currently one must manually re-minify each source (assuming the minified version are untracked).

0.0.6: "command 'es6-css-minify.minify' not found"

I don't know how but since updating from 0.0.5 to 0.0.6 I can't use es6-css-minify any more.
There is no minify button on the bottom any more and when I try to initiate the minifier through commands I get:
command 'es6-css-minify.minify' not found

I already deactivated/activated und uninstalled/reinstalled.

I didn't change the settings between versions

Settings file

Hi,

sorry for this maybe newb question: Where can I adjust the settings? I want to specify the path where the minified .js and .css are saved but don't get it working.

Thank you

save min.js file relative to current .js file

I want to save my min.js file relative to the file it is compressed out of
because now I can save it relative to the root but if I have a new folder in between it is not working anymore
perfect would be something like '~/../../build/res/scripts'

feature request: allow using external file for uglify / clean-css options

I would love to be able to link in my options to an external file (or make it a default / "if-exists" setting).

By using e.g. .uglifyrc, npm-scripts and es6-css-minify could read from the same options and could apply the same magnification in different stages of development.

sourcemap url in minified css

sourcemap url in minified css does not exist

Minify file/selection without saving file

Describe the solution you'd like

Minify file/selection without saving file

Failing to minify with incorrect error report

-- incorrectly reported ---

Extension causes high cpu load

• Issue Type: Performance
• Extension Name: es6-css-minify
• Extension Version: 2.5.0
• OS Version: Windows_NT x64 10.0.17134
• VSCode version: 1.33.1
  olback.es6-css-minify-unresponsive.cpuprofile.txt

Enhancement

Dear Edwin,
I wonder if you can add an option for top level compression, meaning if I write var test = function(){...},
its minified to var a = function(){...}, it changes variables names to save more space, it's already supported by uglify.

Also it would be appreciated if you can add a feature where I can minify multiple js files into on file, which is also supported by uglify.

Thanks and regards..

feature request: settings, minify on save

I would love to add settings to this extensions.
I would be great to minify files on save and to be able to specify uglifyjs settings (e.g. mangle-properties etc.)

Thanks!

Error "Minify failed: Cannot read property 'length' of undefined." when JS parsing fails

The error Minify failed: Cannot read property 'length' of undefined. has been appearing for me regularly when I run the "Minify document" command. It took me a while to work out that it was because JS parsing had failed, and then took more time to work out where the parsing error was. Now, I run uglifyjs on the command line to see what's going on.

I'm using version 2.0.3 of the extension with VSCode 1.28.0 on MacOS 10.13.6. This error happens whether I'm using a .uglifyrc or not. I'm not doing any CSS minification, only JS.

Expected behavior

The error should explain that there's been a parsing failure, and reproduce the parse error from uglifyjs. Ideally, it should make it easy to jump to the point in the file where parsing fails.

The extension host crashes when I use ES5/ES6 minifier in VScode

I have some problems with the stability of ES5/ES6 css minifier extension in visual studio code. When I use the extension for minifying javascript files the extension host crashes all the time and I need to reboot it. It´s really anoying because it happens a lot. I don´t find a solution I´m afraid I will uninstall the extexion. :(
I´m using version 1.23.1 in Visual Studio Code.

How to set a filename pattern for creating the minified file?

I'm moving from Atom and my minify plugin there let me specify a filename pattern for the minified file. Instead of a *.min.js file in the same directory I need to send the file to a "dist" directory and with no ".min" extension. Is there a way to do that using this plugin? If so I don't see how from the docs.

sourcemap sources

sourcemap sources are wrong

Where to put the .uglifyrc file?

I have a project in VSCode that I tried to use this extension on, and I cannot figure out how to get it to pick up the .uglifyrc file and reduce code with the toplevel property. I have tried placing the ".uglifyrc" file in the workspace root, project directory and subdirectory beside the file I want it to affect. I have also tried naming it according to the name of the file I want it to affect. If the documentation is correct (though quite ambiguous), then it does not appear to work.

Original code: (only a piece -- yes, example could use a switch)
function() {
return this.InventoryItemStatusID === 3
? 'crli'
: this.InventoryItemStatusID === 4
? 'cli'
: 'err'; // unrecognized type
}

Expected output or similar:
function(){var i=this.InventoryItemStatusID;return i=== 3?'crli':i===4?'cli':'err';}

.uglifyrc
{
toplevel: true
}

Please explain how to get this to work for a specific file or all files in vscode.
Thanks,
Eric

enable sourcemap from .uglifyrc or .cleancssrc

not all clean-css options do not seem to work

Hi,

I have a CSS file importing 3 others, in the same folder. Minifying them automatically removes all @import statements.

According to Marketplace description, you should be able to assign custom clean-css rules via .cleancssrc or settings:

"es6-css-minify.cleancssConfigFile": ".cleancssrc",
  "es6-css-minify.css": {
    "inline": ["all"]
  }

A seperate .cleancssrc file containing solely

{
  "inline": ["all"]
}

does not help either.

After each change, Minify config was reloaded.

None of these changes lead to local files being imported. At best, a vague message "Minified. x.y% of original but with errors" appears, errors cannot be found anywhere apparently though (no console.log entry to be found).

Am I simply doing it wrong or is this currently broken?

Automatic Save

Add new parameter for
"es6-css-minify.minifyOnSave" : true, false, exists

For parameter : exists :
detects if a filename.min.extension already exists and only then minifies.

Remove comments

Is it possible to add a function to remove comments from js/css while compiling it to a minified version?