Less plugin clean css

less / less-plugin-clean-css Goto Github PK

Compresses the css output from less using clean-css.

npm install -g less-plugin-clean-css 

and then on the command line,

lessc file.less --clean-css="--s1 --advanced --compatibility=ie8" 

See clean-css for the available command options — the only differences are advanced and rebase which we default to false, because it is not always entirely safe.

var LessPluginCleanCSS = require('less-plugin-clean-css'), cleanCSSPlugin = new LessPluginCleanCSS(advanced: true>); less.render(lessString,  plugins: [cleanCSSPlugin] >) .then(

Browser usage is not supported at this time.

less-plugin-clean-css’s People

Contributors

Stargazers

Watchers

Forkers

less-plugin-clean-css’s Issues

Options now works at all, Documentation wrong, api changed.

install in less called with 2 arguments, but options used from 3.

Some colors are incorrectly converted

For example: text-shadow: 0 0 7px #ff0000bd; is converted to: text-shadow:0 0 7px #f00bd which is invalid

npm audit reports RegEx vulnerability in dependency (clean-css)

┌───────────────┬──────────────────────────────────────────────────────────────┐ │ Low │ Regular Expression Denial of Service │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Package │ clean-css │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Patched in │ >=4.1.11 │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Dependency of │ less-plugin-clean-css │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Path │ less-plugin-clean-css > clean-css │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ More info │ https://nodesecurity.io/advisories/785 │ └───────────────┴──────────────────────────────────────────────────────────────┘ 

Source map option not working

I’m finding that the —source-map option doesn’t work, I’m getting the following error:

Error setting options on plugin less-plugin-clean-css unrecognised clean-css option '--source-map' Unable to interpret argument clean-css - if it is a plugin (less-plugin-clean-css), make sure that it is installed under or at the same level as less 

This is after doing npm install -g less then npm install -g less-plugin-clean-css

If I install clean-css and run that alone it works as expected, so cleancss tmp.css —source-map —output tmp.min.css generates a cleaned file and the map.
However running lessc tmp.less tmp.css —clean-css=»—source-map —output tmp.min.css» results in the error code given above.

Other options, eg lessc tmp.less tmp.css —clean-css=»—s1″ work fine.

Option keepSpecialComments is not recognized

Somehow the option keepSpecialComments from clean-css doesn’t work.
—keepSpecialComments=0 and —keepspecialcomments=0 is not recognized and leads to an error. So the documentation is wrong, as not all options from clean-css work

Border css variable properties are incorrectly removed

See the following script:
const less = require(‘less’); const plugin = require(‘less-plugin-clean-css’); const P = new plugin(< advanced: true >); const input = ‘.class ‘; less.render(input, < plugins: [P] >).then(console.log);
Outputs
< css: '.class', imports: [] >
While it should be
< css: '.class', imports: [] >

Request: please consider tagging versions

Hello, please consider tagging released versions on this repo. Currently it is hard to find what version of the source in this repo corresponds to what version on NPM when building source packages for various Linux distros. Tagging this repo would allow us to easily pin to a specific tag instead of having to try and figure out what commit to pin to. On a related note, NPM doesn’t provide an RSS or Atom feed for versions, while GitHub does for its releases making it much easier to discover updates and bump packages.

font-weight

Please remove the replacement

'font-weight': function (value) < if (value == 'normal') return '400'; else if (value == 'bold') return '700'; else return value; >); 

I can use a font with a different weight:

Add test cases

Currently there are no test cases, these will be necessary to support any upgrade of clean-css, as required in issue #18. Without the test cases it will be hard to establish any regressions.

Less Plugin Clean CSS is broken

[email protected]:/$ npm -v 3.5.2 [email protected]:/$ lessc -v lessc 3.0.1 (Less Compiler) [JavaScript] [email protected]:/$ sudo npm install -g less-plugin-clean-css /usr/local/lib └── [email protected] [email protected]:/$ lessc ~wlb.less --clean-css Unable to load plugin clean-css please make sure that it is installed under or at the same level as less 

Option —skip-restructuring not recognized

The plugin does not recognize the clean-css option —skip-restructuring .

Allow proper rebasing

This plugin should specify the relativeTo and target clean-css options in order to allow proper rebasing.

Windows error runing via gulp: Potentially unhandled rejection [2] Error: ENOENT, $stdin

I get the following error when running less-plugin-clean-css via gulp windows:

 Potentially unhandled rejection [2] Error: ENOENT, open 'C:\SOME\PATH\$stdin' at Error (native) 

var less = require("gulp-less"); var LessPluginCleanCSS = require("less-plugin-clean-css"); var sourcemaps = require("gulp-sourcemaps"); gulp.task(taskName, function () < var lessArgs = <>; lessArgs.plugins = []; // if I remove the following line, I don't get any errors lessArgs.plugins.push(new LessPluginCleanCSS(< advanced: true >)); return gulp .src("/PTH/TO/CSS/**/main.less") .pipe(sourcemaps.init()) .pipe(less(lessArgs)) .pipe(sourcemaps.write("PTH/TO/JS")) .pipe(gulp.dest("htdocs/css/")); >); 

Any ideas? Thanks in advance.

Breaks on CSS Function

So I use a fair bit of CSS functions in my CSS, mainly calc() , and this plugin breaks it. For example, this is one of my rules:

width: calc(100% - 2em - 100px); 

After it goes through the plugin, it ends up like this:

NPM release to resolve security vulnerability

The version of the clean-css dependency has been updated to a safe version, but the version of less-plugin-clean-css on npm is outdated and doesn’t have the fix. Could we release a new version on npm?

clean-css not found if lessc is executed from a sub directory

Since upgrading less from 2.7.3 to 3.0.1, —clean-css does not work anymore when less is executed from a sub directory:

[email protected]:~$ mkdir clean-css-test && cd clean-css-test/ [email protected]:~/clean-css-test$ npm install less less-plugin-clean-css [. ] + [email protected] + [email protected] added 72 packages in 3.38s [email protected]:~/clean-css-test$ touch foo.less [email protected]:~/clean-css-test$ ./node_modules/less/bin/lessc --clean-css foo.less [email protected]:~/clean-css-test$ mkdir subdir && cd subdir [email protected]:~/clean-css-test/subdir$ ../node_modules/less/bin/lessc --clean-css foo.less Unable to load plugin clean-css please make sure that it is installed under or at the same level as less 

PhpStorm: Unable to load plugin clean-css

Hello everybody! I have a problem that I hope you will help to solve:
PhpStorm 2017.2(Win 10) + Node.js install
Terminal install less and plugin

Add less watcher, all work fine, less compiles, but
If i want use plugin i add in watcher arguments —clean-css=»—s1 —advanced —compatibility=ie8″ (tried many different options)
Next, I make changes to my .less file and take

cmd.exe /D /C call C:/Users/XXX/AppData/Roaming/npm/lessc.cmd —no-color main.less «—clean-css=—s1 —advanced —compatibility=ie8»
Unable to load plugin clean-css please make sure that it is installed under or at the same level as less

Process finished with exit code 1

Problem with sourcemaps

When I use sourcemaps in less, I get Unexpected token error in source-map-consumer.js:20.

Compressed CSS — space removal breaks some background images in IE8

a) I hope I’m asking this question in the right place — let me know if not.

b) Sorry for raising an issue involving IE8. Yeah I know — ancient, but we have a decent amount of users on it, so trying to sort out a real world issue.

I’m a CodeKit user, which has just removed the ‘remove whitespace’ option for outputting LESS to CSS because I gather this setting has been deprecated. The problem is, outputting to ‘compressed’ causes an issue in IE8. here’s the problem:

this background image works in IE 8.
background:url(‘/img/bg.png’) no-repeat;

this background image does not work in IE 8 -because when outputted, ‘compressed’ mode has removed the space before ‘no-repeat’ causing the image not to load.
background:url(‘/img/bg.png’)no-repeat;

Is this a bug or is there a way to avoid compressing individual rules? I’m not a hardcore user — have not used Grunt etc. (which is why i love CodeKit)

Any help appreciated,
Pete

Strange less-syntax bug

I’m trying to compile files with this code:

@isresponsive: false; @font-size-base: 16px; .set-value_(@property; @value; @responsive: @isresponsive) < // String, percentage and relative unit values .setter(@p; @v) when not (isnumber(@v)), (ispercentage(@v)), (isem(@v)), (isunit(@v, rem)), (isunit(@v, ex)), (isunit(@v, ch)), (isunit(@v, vw)), (isunit(@v, vh)), (isunit(@v, vmin)), (isunit(@v, vmax)) < @ +_: @v; > // Non-unit and pixel values .setter(@p; @v) when (default()) < & when (@responsive) < @ +_: unit((@v / @font-size-base), rem); > & when not (@responsive) < @ +_: unit(@v, px); > > .setter(@property; @value); > .set-value(@args. ) when (length(@args) > 1) < .r(@a) when (extract(@a, length(@a)) = true), (extract(@a, length(@a)) = false) < @l: (length(@a) - 1); @responsive: extract(@a, length(@a)); > .r(@a) when (default()) < @l: length(@a); @responsive: @isresponsive; > .r(@args); .i; .i(@i: @l) when (@i > 1) < .i((@i - 2)); @property: extract(@args, (@i - 1)); @values: extract(@args, @i); .j(@property; @values; @responsive); > .j(@p; @v; @r; @j: length(@v)) when (@j > 0) < .j(@p; @v; @r; (@j - 1)); .set-value_(@p; extract(@v, @j); @r); > >

and it was compiled as well.

But this (it compiled as well without clean-css enabled):

@isresponsive: false; @font-size-base: 16px; .set-value_(@property; @value; @responsive: @isresponsive) < // String, percentage and relative unit values .setter(@p; @v) when not (isnumber(@v)), (ispercentage(@v)), (isem(@v)), (isunit(@v, rem)), (isunit(@v, ex)), (isunit(@v, ch)), (isunit(@v, vw)), (isunit(@v, vh)), (isunit(@v, vmin)), (isunit(@v, vmax)) < @ +_: @v; > // Non-unit and pixel values .setter(@p; @v) when (default()) < & when (@responsive) < @ +_: unit((@v / @font-size-base), rem); > & when not (@responsive) < @ +_: unit(@v, px); > > .setter(@property; @value); > .set-value(@args. ) when (length(@args) > 1) < @l: length(@args); @responsive: @isresponsive; .r(@a) when (extract(@a, length(@a)) = true), (extract(@a, length(@a)) = false) < @l: (length(@a) - 1); @responsive: extract(@a, length(@a)); > .r(@args); .i; .i(@i: @l) when (@i > 1) < .i((@i - 2)); @property: extract(@args, (@i - 1)); @values: extract(@args, @i); .j(@property; @values; @responsive); > .j(@p; @v; @r; @j: length(@v)) when (@j > 0) < .j(@p; @v; @r; (@j - 1)); .set-value_(@p; extract(@v, @j); @r); > >

processImport always false

Why is the clean-css option processImport forced to be false. We also import some css files and would want them to be inlined as well. Is there any specific reasoning behind it?

Source map reference fails in Edge/IE 11

Problem

Microsoft Edge doesn’t attempt to load the .map file due to the location of the source map comment in the CSS output.

This is somewhat a known phenomenon (with both CSS and JavaScript): https://stackoverflow.com/q/34687049/404623

Reproduce

htmlcolor:red> bodycolor:blue>

> link rel=stylesheet type=text/css href=main.css> p>Hello worldp>

Run lessc with the clean-css plugin:

lessc --source-map --clean-css main.less main.css 

htmlcolor:red>bodycolor:#00f>/*# sourceMappingURL=main.css.map */

Upon loading index.html in Microsoft Edge and opening Debugger in the F12 Developer Tools, there is no request made to the server for the map file, and inspect element shows main.css references in the Styles panel instead of main.less

Expected results

Edge should attempt to load the main.css.map file and refer to the code in the main.less file in the Styles panel in the F12 Developer Tools.

Expected output of main.css (note the newline)

htmlcolor:red>bodycolor:#00f> /*# sourceMappingURL=main.css.map */

Manually editing the files to add the newline character fixes the problem but defeats the purpose of the build tool.

clean-css v3.0.0

An update to the current version of clean-css (v3.0.0) would be great!

Источник