Js-beautify: CSS Single line formatting

[ghost]

Hello,

I didn't see any option to format CSS in a single line way :

Old output :

.btn-primary {
  background:#fff;
  color:#000;
  border:1px solid #000;
}
.btn-primary:hover {
  background:#000;
  color:#fff;
  border:1px solid #fff;
}

Desired output :

.btn-primary { background:#fff; color:#000; border:1px solid #000; }
.btn-primary:hover { background:#000; color:#fff; border:1px solid #fff; }

For me (and many developpers), it's far easier to read and to work on css formatted that way.

[bitwiseman]

Duplicate of #330. But given the age of that request, I'm keeping this one open.

[jsonchou]

visual studio has a compact feature for *.css files, just like @Alex360hd wished.

visual studio code with extention-plugins from js-beauty has not this feature yet.

compact feature makes your code 1000 rows(compact) vs 5000 rows(old formatting), you can control your *.css file with God Perspective.

from sass/less long code hater.

[Zmove]

Yep, +1 for that. I really like css single line formatting, each selector are next to each other and it give a very good perspective view.

[olets]

I would expect to use a minifier to turn multi-line styles into single-line, and a beautifier to turn single-line into multi-line.

Following up on @evocateur's #330 opinion ("The job of a beautifier isn't to minify code, but to reformat it for consistency and readability"): the cssmin mentioned there has been deprecated in favor of clean-css (see also How to use clean-css with build tools?). "Single line formatting" is easy to get with clean-css - the simplest settings are

level: 0, // no optimizations
format: {
    breaks: {
        afterRuleEnds: true // put a line break after every rule
    }
}

That turns

.btn-primary {
  background:#fff;
  color:#000;
  border:1px solid #000;
}
.btn-primary:hover {
  background:#000;
  color:#fff;
  border:1px solid #fff;
}

into

.btn-primary{background:#fff;color:#000;border:1px solid #000}
.btn-primary:hover{background:#000;color:#fff;border:1px solid #fff}

From there, fine tune the spaces options

[jsonchou]

every young developer of my colleagues write every single line with long long long less/sass, and complie everywhere.

forgive my pool code -_-!!.

let CSSIOStream=`.model-a {
  background:#fff;
  color:  #aaa;
  border:  1px solid #aaa;
  border-radius  : 5px;
}
.model-a:hover {
  background:#000;
  color:#fff;
  border:1px solid #fff;
}

/*seperate page section style, normally, i will left one blank rows or a note*/

.model-b{margin-right:10px;}
.model-b-list{margin-right:10px;}

/*seperate page section style, normally, i will left one blank rows or a note*/



`;


let CSSIOStreamOutput=CSSIOStream
.replace(/\ +/g, ' ')
.replace(/;\n/g,';')
.replace(/{\n/g,'{')

console.log(CSSIOStreamOutput);

output:

.model-a { background:#fff; color: #aaa; border: 1px solid #aaa; border-radius : 5px;}
.model-a:hover { background:#000; color:#fff; border:1px solid #fff;}

/*seperate page section style, normally, i will left one blank rows or a note*/

.model-b{margin-right:10px;}
.model-b-list{margin-right:10px;}

/*seperate page section style, normally, i will left one blank rows or a note*/

just compact the code between{}, .scss&.less file is excluded.
i want to know if there's a option.css.compact to format the *.css . :)

[ghost]

@evocateur

The job of a beautifier isn't to minify code, but to reformat it for consistency and readability

Thats not minification, the single line formatting keep some spaces and some line return for multiple selector rules.

To me, and to a lot of web developper, this :

.btn { border:1px solid black; background:#fff; border-radius:5px color:#000; }
.btn:hover,
.btn:focus { background:#000; color:#fff; }

Is far more readable than this :

.btn {
  border:1px solid black;
  background:#fff;
  border-radius:5px;
  color:#000;
}

.btn:hover,
.btn:focus {
  background:#000;
  color:#fff;
}

[evocateur]

Nope.

On Mar 22, 2017, at 01:08, Alex360hd [e-mail] wrote:

@evocateur

The job of a beautifier isn't to minify code, but to reformat it for consistency and readability

To me, and to a lot of web developper, this :

.btn { border:1px solid black; background:#fff; border-radius:5px color:#000; }
.btn:hover { background:#000; color:#fff; }
Is far more readable than this :

.btn {
border:1px solid black;
background:#fff;
border-radius:5px;
color:#000;
}

.btn:hover {
background:#000;
color:#fff;
}
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[ghost]

Beautiful argumentation...

Personnally I like to have a great overview of my CSS selector and using the "regular" syntax, I hardly see more than 3 or 4 selector in my viewport.

Using the single line formatting, I can see 20 or 30 selectors (at least) and I can easily have an overview on a group of elements.

And when you know well CSS, use heritage and selector intelligently, you rarely have more than 5 or 6 rules for a selector, and with the screen we have today, (very large), I can see all my rules without horizontal scrollbar. (and if it's the case, my IDE have plenty of options for automatic line return).

If you search for online css formatter, you can see that many of them have single line options, it's probably because it interests some people...

[bitwiseman]

@evocateur - 🌟 Gold star on your Grumpy Cat impression. 🌟 😃

@Alex360hd @jsonchou - your points are well taken. This falls somewhere in between minification and beautification and that is why this is issue remains open and listed as an enhancement.

This is reasonable request but it is lower priority for myself and the other major contributors to this project (like @evocateur). If someone chose to submit a PR with both the javascript and python implementations and sufficient range of tests, it would be accepted. But we have other tasks that we feel are higher priority for the project as whole.

@olets
Thanks for pointing out the work-around and alternate css tool!

@jsonchou -
Sorry, there is always a regular expression that will work for most inputs, or at least all the inputs you or I would try. However, they never really work for all inputs and ultimately they are unmaintainable and error prone - that is how the css-beautifier code got to be as hard to maintain as it is today. Thank you for providing a workaround that people can hack in if they choose to risk it, but I would hope they use @olets solution instead. 😄

[olets]

@jsonchou watch out for //inline comments in LESS and Sass

[jsonchou]

@Alex360hd @Zmove

I've write a css compact plugin for VSCode.

https://marketplace.visualstudio.com/items?itemName=jsonchou.css-compact

[ghost]

Excellent, I will try that.

[tateman74]

Hey @jsonchou - I think if you took your plugin to the sass/scss world a ton of people would use it. It blows me away to think about why in this day in age with 3000 pixel wide monitors, people have gravitated towards using 5% of the screen real estate in CSS!

I would even take your plugin so far as to letting people specify the ORDER in which the properties need to go. Things like position and display should go early in the list and then margin, padding, etc, and then colors, fonts, etc.

For me, that's proven enormously powerful when on a team with many people writing SCSS.

Sorry folks, someone give me one good reason to have property key vals be on separate lines? Writing CSS on a mobile device?

Steven

[jsonchou]

@tateman74 Maybe i will have a try to make .scss file to be single line, but i think ORDER properties should be done by 3rd solution such as csscomb.

[tateman74]

Ah interesting. CSSComb is certainly what I'd be looking for for ordering. Gotta make a VSCode extension for it I guess.

SCSS might be a little challenging as newlines actually mean something. For best readability, this is always how I format stuff:

• always a newline before a rule whether nested or not
• always curlies on their own lines

A ways back (in my MySpace employment days :)), a few css buddies and I reasoned that vendor prefixes should start on a newline as they're basically (ignored) properties kind of. That is, they mean something, but are only there for compatibility. I guess in this day and age, we should be using PostCSS anyway so those vendor prefixes should never exist.

Thanks again and let me know if I can help out. Here's a pretty typical SCSS file that I prefer.
Someone tell me that's not readable! :)

Steven

[bitwiseman]

Would any of you that find this feature useful be willing to implement the feature for the css beautifier? Probably wouldn't be that hard.

[bitwiseman]

This will require at least css tokenization to get it to work (#545). Even once that is done it will need some work to make it happen.