less / less-plugin-clean-css Goto Github PK
View Code? Open in Web Editor NEWPost-process and compress CSS using clean-css.
Home Page: http://lesscss.org
License: Apache License 2.0
Post-process and compress CSS using clean-css.
Home Page: http://lesscss.org
License: Apache License 2.0
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
This plugin should specify the relativeTo
and target
clean-css options in order to allow proper rebasing.
Whats wrong here?
user@en302:/$ npm -v
3.5.2
user@en302:/$ lessc -v
lessc 3.0.1 (Less Compiler) [JavaScript]
user@en302:/$ sudo npm install -g less-plugin-clean-css
/usr/local/lib
└── [email protected]
user@en302:/$ 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
Ubuntu 17.10.
Hi,
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
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?
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.
For example: text-shadow: 0 0 7px #ff0000bd;
is converted to: text-shadow:0 0 7px #f00bd
which is invalid
When I use sourcemaps in less, I get Unexpected token error in source-map-consumer.js:20.
Hi
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)
No error in OS X.
My gulp task
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.
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
main.less
html{color:red}
body{color:blue}
index.html
<!DOCTYPE html>
<link rel=stylesheet type=text/css href=main.css>
<p>Hello world</p>
Run lessc with the clean-css plugin:
lessc --source-map --clean-css main.less main.css
Output (main.css
)
html{color:red}body{color:#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
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)
html{color:red}body{color:#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.
install in less called with 2 arguments, but options used from 3.
The latest version of this plugin no longer allow sourcemaps to be generated correctly. According to the docs, in clean-css
v4.0 and above they changed the api for using sourcemaps and passing the sourcemaps into the options as this plugin does no longer works.
If I understand correctly the sourcemaps need to be passed as a paramater into the minify()
method instead. See docs.
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.
I'm using [email protected] and [email protected]
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?
Need to update 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 │
└───────────────┴──────────────────────────────────────────────────────────────┘
Please remove the replacement
'font-weight': function (value) {
if (value == 'normal')
return '400';
else if (value == 'bold')
return '700';
else
return value;
});
It is not right.
I can use a font with a different weight:
@font-face {
font-family: 'Abc';
src: local('Abc'),
url('http://.../Abc.woff') format('woff'); <---- light 300
font-weight: normal; <---- as normal
}
div {
font-family: Abc;
font-weight: normal; <---- now normal is font's weight
}
An update to the current version of clean-css (v3.0.0) would be great!
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:
srittau@moby:~$ mkdir clean-css-test && cd clean-css-test/
srittau@moby:~/clean-css-test$ npm install less less-plugin-clean-css
[...]
+ [email protected]
+ [email protected]
added 72 packages in 3.38s
srittau@moby:~/clean-css-test$ touch foo.less
srittau@moby:~/clean-css-test$ ./node_modules/less/bin/lessc --clean-css foo.less
srittau@moby:~/clean-css-test$ mkdir subdir && cd subdir
srittau@moby:~/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
--keep-line-breaks
/-b
option stops working in 1.6.0.
Works fine in 1.5.1.
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)) {
@{p}+_: @v;
}
// Non-unit and pixel values
.setter(@p; @v) when (default()) {
& when (@responsive) {
@{p}+_: unit((@v / @font-size-base), rem);
}
& when not (@responsive) {
@{p}+_: 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)) {
@{p}+_: @v;
}
// Non-unit and pixel values
.setter(@p; @v) when (default()) {
& when (@responsive) {
@{p}+_: unit((@v / @font-size-base), rem);
}
& when not (@responsive) {
@{p}+_: 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);
}
}
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
X:\PhpstormProjects\xxx>npm install -g less
C:\Users\xxx\AppData\Roaming\npm\lessc -> C:\Users\xxx\AppData\Roaming\npm\node_modules\less\bin\lessc
- [email protected]
updated 1 package in 4.055sX:\PhpstormProjects\xxx>npm install -g less-plugin-clean-css
- [email protected]
updated 1 package in 1.068s
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 lessProcess finished with exit code 1
We wanted to use this library, but it feels like this library is abandoned? Is there an alternative?
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.
Thanks for your time!
Hey @matthew-dean,
thanks for merging #37. Is there anything I can do/help to get a release of the main branch? If there is anything I can do please let me know.
See the following script:
const less = require('less'); const plugin = require('less-plugin-clean-css'); const P = new plugin({ advanced: true }); const input = '.class {border: 1px solid var(--foo, var(--bar));}'; less.render(input, { plugins: [P] }).then(console.log);
Outputs
{ css: '.class{border:1px solid}', imports: [] }
While it should be
{ css: '.class{border:1px solid var(--foo, var(--bar));}', imports: [] }
The plugin does not recognize the clean-css option --skip-restructuring
.
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:
width: calc(-2%);
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.