Re: Reformat into structured CSS - selector per line

Hello Jan,

can you please add an option, or make it the default, to reformat the css selectors into one line?

/* old: */
#mainnav li li a:focus, #mainnav li li a:active, #mainnav li li a:hover, #mainnav li li a.trail, #mainnav li li span {
background: #e3e3e3;
color: #666;
}
/* new: */
#mainnav li li a:focus,
#mainnav li li a:active,
#mainnav li li a:hover,
#mainnav li li a.trail,
#mainnav li li span {
background: #e3e3e3;
color: #666;
}

I think this is the default code styling for css and much more comfortable to read. Meanwhile we're using thinks like :first-child:before:hover e.g. and code becomes more unclear when selectors are in one line.

The last years I used the css reformat very often and always correct the oneliner to multiple lines manualy.

Andreas
ps Sorry, your RTE "code" option does not support indentation with spaces (used on property lines).

I will modify it.

Thank you, that will be great

Hello Jan,

thank you again for implementing this. Unfortunately it will not work as intended. Please try with a big compressed css file like that one on contao.org.

A lot of selectors are not build up per line but still as one-liner.

Please also verify that the ">" combiner has spaces around. e.g.
aside > h2 {}
not
aside>h2 {}

One point al last. Will it be very difficult to realize an indentation on nested curly brackets? e.g.

@media (min-width:960px) {
  section {
    flex-direction: row;
  }
}

In the meantime, you may use beautify-css PSPad script, which handles nested rules and has some configuration in its source. After copying intoPSPad\Script\JScriptand recompiling there will beScript > Format > CSSaction.

(There are beautify-html and beautify-js as well. Actually all are just scripts from einars js-beautify with added necessary PSPad module functionality.)

Thank you for that. I still used js from einars since 2008. Now I've the new version.

After a quick test everything seems to be ok.

Found a small bug in html. e.g. with this code
<h1>
  headline
</h1>
Newlines get doubled on each run of beautify-html.js.

You are right, behaviour of beautify-html.js is weird; HTML Tidy still seems to be the preferable tool for this task in PSPad.
(In fact I just wanted to have jsbeautifier.org in PSPad for javascript, the fact there were also CSS and HTML formatters in that repo was a bit surprise for me and I added them without excessive testing.)

jsbeautifier.org seems to format html correct. Maybe the double newline bug is caused by integration into PSPad and you can easily fix it?

@Jan
When Einars beautifier work correct as PSPad plugins, they should be downloadable on pspad.com.

And plugins should be sortable by update time or at least a date should be shown in the plugins list.

I added this online JS beautifier to online tools in menu help / Online tools

So maybe www.dirtymarkup.com could be added there as well; this one (claims that) uses different tools (canocial HTML tidy and CSS tidy) and unlike jsbeautifier.org even shows some validation and performance hints.