csscomb / grunt-csscomb Goto Github PK
View Code? Open in Web Editor NEWGrunt plugin for CSScomb—CSS coding style formatter
License: MIT License
Grunt plugin for CSScomb—CSS coding style formatter
License: MIT License
Regular Expression Denial of Service (DoS)SEVERITY: HIGH
Discovered in a nested dependency:
[email protected] -> [email protected] -> [email protected] -> [email protected]
Details: https://snyk.io/vuln/npm:minimatch:20160620?utm_source=bithound
minimatch > 3.0.2 should be used, updating to the latest csscomb is recommended
Hi t32k, many thanks for your work on adaptation of csscomb for grunt.
I want to let you know that there is no way to use lint option for csscomb,
because it's implemented only as cli attributes.
it would be good if this option could be moved to options object,
or even to .csscomb.json config file (not sure that this issue should be placed in this thread)
If you want to do every file in a directory with file extension ".css" or ".scss" - there is no way (assuming you'd keep the same file name or provide on option to prepend/append/regex the filename).
Hi guys,
I am trying to format my SASS files but I have this warning:
Cannot read property '0' of undefined
I found this ticket so I assume fixing is in progress. Some news?
Thanks in advance!
Config Gruntfile:
// Sorting CSS properties in specific order.
csscomb: {
options: {
config: '.csscomb.json'
},
dynamic: {
expand: true,
cwd: 'src/less/',
src: ['**/*.less'],
dest: 'src/less/',
ext: '.less'
}
},
When a file change:
// Waiting
watch: {
options: {
nospawn: true
},
styles: {
files: ['src/less/**/*.less'],
tasks: ['less:development', 'csscomb', 'notify:less_true']
},
What am I doing wrong? Please, tell me. Thank you.
When trying to run csscomb
on a folder of scss
files, I've noticed that I get an error whenever I @extend
from a class with a number in it. For example:
.footer-nav {
> li {
@extend .col-md-4;
}
}
Everywhere else I use @extend
works fine, and and so does this when I remove the number at the end of .col-md-4
. Did I perhaps overlook something in my settings, or is this an issue with the plugin?
Hey there, we're looking at moving Bootstrap from Recess to CSScomb, but hitting a snag. For some reason I cannot load any custom options
. Pointing the sort-order
option to the included json example doesn't seem to have any effect.
...
csscomb: {
options: {
sortOrder: '.csscomb.json',
},
files: {
'dist/css/<%= pkg.name %>.css': ['dist/css/<%= pkg.name %>.css'],
}
},
...
I know there is no effect because I'm pointing that option to .csscomb.json
and "vendor-prefix-align": true
has no effect.
Guess I'm just missing something?
If for some reason there is an unacceptable value in user's config, CSScomb prints a warning to console:
try {
addHandler(options[optionName], config[optionName]);
} catch (e) {
// Show warnings about illegal config values only in verbose mode:
if (verbose) {
console.warn('\nFailed to configure "%s" option:\n%s', optionName, e.message);
}
}
Errors are thrown within setValue
function: https://github.com/csscomb/core/blob/master/lib/core.js#L101
@corvannoorloos says that instead of just printing a warning Grunt plugin also "discontinues the task (the files aren't being modified after this notice)".
Hi,
when I execute sudo npm install grunt-csscomb --save-dev
,
I get this error: npm ERR! peerinvalid Peer [email protected] wants grunt@^0.4.5
Maybe >=
is better than ^
in file package.json
.
Using raw grunt-contrib-less
, I get this diff on Bootstrap:
sub,
sup {
- position: relative;
font-size: 75%;
line-height: 0;
+ position: relative;
vertical-align: baseline;
}
With grunt-csscomb
, I get some rogue spaces:
sub,
sup {
- position: relative;
font-size: 75%;
line-height: 0;
+
+ position: relative;
+
vertical-align: baseline;
}
Things get even worse with media queries (there are no changes in the default LESS compilation task):
@media print {
- * {
+ * {
color: #000 !important;
- text-shadow: none !important;
background: transparent !important;
box-shadow: none !important;
- }
- a,
+ text-shadow: none !important;
+ }
+ a,
a:visited {
text-decoration: underline;
- }
- a[href]:after {
+ }
+ a[href]:after {
content: " (" attr(href) ")";
- }
- abbr[title]:after {
+ }
+ abbr[title]:after {
content: " (" attr(title) ")";
- }
- a[href^="javascript:"]:after,
+ }
+ a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
- }
Is this a problem with grunt-csscomb
, or the source CSScomb?
Downgrading to 1.1.0 is the only work around for now. In 1.2.0 I am seeing Maximum call stack size exceeded. OS X 10.8.5, Node 0.10.24, NPM 1.3.22.
/var/www/test $ grunt csscomb --verbose
Initializing
Command-line options: --verbose
Reading "Gruntfile.js" Gruntfile...OK
Registering Gruntfile tasks.
Initializing config...OK
Registering "grunt-csscomb" local Npm module tasks.
Reading /private/var/www/test/node_modules/grunt-csscomb/package.json...OK
Parsing /private/var/www/test/node_modules/grunt-csscomb/package.json...OK
Loading "csscomb.js" tasks...OK
+ csscomb
Loading "Gruntfile.js" tasks...OK
>> No tasks were registered or unregistered.
Running tasks: csscomb
Running "csscomb" task
Running "csscomb:foo" (csscomb) task
Verifying property csscomb.foo exists in config...OK
Files: foo.css -> bar.css
Options: (none)
Warning: Maximum call stack size exceeded Use --force to continue.
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
csscomb: {
foo: {
files: {
'bar.css': ['foo.css'],
}
}
}
});
grunt.loadNpmTasks('grunt-csscomb');
};
packages.json
{
"name": "test",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt-csscomb": "~1.2.0"
}
}
Latest version on npm is 3.1.1
. Would you mind to push another one?
I've got a Compass compiled CSS with the "compressed" option set as layout.
If I run CSSComb on it, it sorts everything nicely, but adds all the line-breaks and indentation back on the file.
Is there a way to add a .csscombrc or some sort of file name that I wouldn't need to link the configurations on my Gruntfile.js? If there's not, what options should I use in order to stop this expanding process and how would I link the config file on the Grunt plugin?
Thanks.
Today to comb a whole directory(1-1) we need something like this
files: [{
expand: true,
cwd: '/assets/css',
src: ['**/*.css'],
dest: '/assets/css',
filter: 'isFile'
}]
Maybe we can add a support to diretories, since comb.js have processDirectory
to do most of the work for us
files: [
'/assets/css'
]
When i to run task on my scss files i recieve such errors:
Running "csscomb:dynamic_mappings" (csscomb) task
>> Using default config file...
>> Source file "main.scss" not found.
>> Source file "modules/_mixins.scss" not found.
>> Source file "modules/_typography.scss" not found.
>> Source file "modules/_variables.scss" not found.
....
i am using such options
csscomb:
dynamic_mappings:
cwd: '<%= yeoman.dist %>/styles/'
src: ['*.scss']
dest: '<%= yeoman.dist %>/styles/compressed'
ext: '.resorted.scss'
with css files with such options csscomb works fine.
Or csscomb currently not supporting preprocessors?
You have to define a subtask - running CSSComb task with just "files" defined doesn't work.
Works:
csscomb: {
maintask: {
files: {
'../assets/scss/file.scss': ['../assets/scss/file.scss']
}
}
}
Doesn't work:
csscomb: {
files: {
'../assets/scss/file.scss': ['../assets/scss/file.scss']
}
}
We have a node version of csscomb ready.
It will be nice if this grunt task is updated by the time of public release.
If someone starts working on this issue, please leave a comment.
Keep in mind that current (php) version should stay available for download.
The easiest way is to make a release before making any changes.
Thank you.
Hello,
Is there a way to overwrite the file that was found with the watch task :
So if I save a _scss file that is in : assets/styles/src/objects/_btn.scss, it will ignore the destination file because it will just overwrite the file that was saved.
csscomb: {
foo: {
files: {
'assets/styles/src/**/*.scss': ['assets/styles/src/**/*.scss']
}
}
},
watch: {
css: {
files: ['assets/styles/src/**/*.scss'],
tasks: ['sass', 'csscomb'],
options: {
spawn: false,
}
},
}
Thank you !
I want to use grunt-csscomb
in Travis CI,
but current version depends on PHP.
it's more better that grunt-csscomb
is available without PHP, i think.
If we mention list of souces for one file we expect concatination of results but we get only last souce file cleaned up with csscomb in dst.css
csscomb: {
main: {
files: {
'dst.css': ['src1.css', 'src2.css'],
}
},
In that case border-color will not aplly.
So you need write color in such ways:
border-bottom: {width} {style} {color};
or
border-bottom-color: ...;
border-bottom-width: ...;
border-bottom-style: ...;
.content {
background-color: #efeff4;
-}
+ }
Going back to the old version outputs proper code so this is something introduced in csscomb.js 3.0.0.
I get the Error:
Warning: Parsing error: Please check the validity of the CSS block starting from the line 16 Use --force to continue.
The line 16 has this property:
@include border-radius($defaultBorderRadius/2);
The problem seems to be the math part. If I remove th /2
, there is no problem.
So this would work:
@include border-radius($defaultBorderRadius);
I propose that current master
branch gets version 2.0.0
because it is not backwards compatible with version 1.1.0
.
If the plugin's API changes dramatically (for example, when sortOrder
option is renamed to config
), there should be a major version update.
See http://semver.org.
We have a lot of users and for many of them csscomb is a serious development tool.
Thus we are responsible to make our releases as stable and predictable as possible.
Since semantic versioning is a common and expected thing, I propose using it.
There is a way to specify all CSSComb options? Via a .csscombrc
file maybe?
The sortOrder
is not the only option i want to customize, since CSSComb.js have a bunch of nice configurable features.
I have 20 files in a folder. Most are about 500 lines others are about 1000-2400 and one is 5000. It will not comb the 5000 line file at all. It says it worked and no errors, but it isn't changing the files at all.
Any files after the large file do not run either unless I exclude the large file.
У меня не получается заставить работать этот плагин.
Мой Gruntfile.js
выглядит так:
module.exports = function(grunt) {
grunt.initConfig({
csscomb: {
main: {
options: {
sortOrder: '.csscomb.json'
},
files: {
'main.css': ['result.css']
},
},
},
});
grunt.loadNpmTasks('grunt-csscomb');
grunt.registerTask('default', ['csscomb']);
};
После запуска Grunt в консоли я получаю следующий результат:
e:\test\dev>grunt
Running "csscomb:main" (csscomb) task
>> Using custom config file ".csscomb.json"...
Done, without errors.
При этом с файлом main.css
(он лежит в одной директории с Gruntfile.js
) ничего не происходит.
Что именно я делаю не так?
I have such CSScomb.json in the root of the project. Also I have css-file with path like this static/desktop.bundles/wizard/blocks/wizard-steps/wizard-steps.css
. Also task is configured this way:
csscomb: {
options: {
config: 'CSScomb.json'
},
all: {
expand: true,
cwd: 'static/',
src: [ '**/*.css' ],
dest: 'static/'
}
}
When I run CSScomb with $ grunt csscomb:all
task logs sorting wizard-steps.css
:
>> Sorting file "static/desktop.bundles/wizard/blocks/wizard-steps/wizard-steps.css"...
But original state of this file is:
.wizard-steps
{
margin: 50px 0 0;
display: block;
}
and it's not changed via grunt-csscomb, but when I sort this file with Sublime CSScomb it changed to normal and expected state:
.wizard-steps
{
display: block;
margin: 50px 0 0;
}
What I'm doing wrong?
@t32k, hi!
I've released [email protected] a few days ago so others can start testing it.
Some of our wonderful users have asked to publish grunt task, too.
Could you please take a look at branch tg/csscomb-3
and if you are ok with those changes, publish it to npm as a pre-release?
There is no need to merge the branch to master
since it can't be called stable yet.
We recently updated to 1.2.1 (from 1.1.0) and were seeing an incorrect compilation order:
➜ ~/Sites/bootstrap (master) git diff
diff --git a/dist/css/bootstrap-theme.css b/dist/css/bootstrap-theme.css
index b092f82..398c856 100644
--- a/dist/css/bootstrap-theme.css
+++ b/dist/css/bootstrap-theme.css
@@ -38,11 +38,12 @@
text-shadow: 0 1px 0 #fff;
background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
- filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #dbdbdb;
border-color: #ccc;
+
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-default:hover,
.btn-default:focus {
@@ -57,10 +58,11 @@
.btn-primary {
background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);
- filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #2b669a;
+
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
The PR that did the update was twbs/bootstrap#11959, for reference.
The filter
properties should be where they initially were. This happens with 1.2.0 and 1.2.1. Nuking my node_modules
and rerunning npm install
resolves the issue.
Any idea what happened? Nothing in our CSS order has changed.
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.