Tidy CSS for Notepad++

Question

Is there some kind of CSS tidy available for Notepad++. I have tried what seems to be every menu item in TEXTFX but none seem to do it. I am used to using PSPAD where you just select the CSS and clicked "Reformat Into Structured CSS"

EDIT made a discovery a long time after asking this question which may help others ... there is a big difference between tidy css and format css. It was actually the latter I was looking for and there are several online systems, for instance http://procssor.com/

Felix Dombek · Answer 1 · 2015-10-30T04:59:53.167

I was looking for this functionality myself, so I wrote this pair of regex search-and-replace based macros for Notepad++. Format CSS formats a CSS document while Minify CSS makes it smaller.

To install them, locate your shortcuts.xml file, usually at

C:\Users\%username%\AppData\Roaming\Notepad++\shortcuts.xml

and paste the whole block into the <NotepadPlus><Macros> block.

You need to use another editor than Notepad++, OR close Notepad++ by killing the process after you edit this file. Otherwise, Notepad++ will overwrite the file on close.

After installing, you can run those macros from the Macros menu in Notepad++, as well as rename them or assign hotkeys using Edit shortcut/delete macro.

In case someone finds a css for which this script doesn't work, please make a paste and post the link in the comments so I can look at it.

Macro source XML

<Macro name="Format CSS" Ctrl="no" Alt="no" Shift="no" Key="0">
    <Action type="3" message="1700" wParam="0" lParam="0" sParam="" />
    <Action type="3" message="1601" wParam="0" lParam="0" sParam="([^\r\n;])\}(?![\r\n])" />
    <Action type="3" message="1625" wParam="0" lParam="2" sParam="" />
    <Action type="3" message="1602" wParam="0" lParam="0" sParam="\1;\r\n}\r\n" />
    <Action type="3" message="1702" wParam="0" lParam="768" sParam="" />
    <Action type="3" message="1701" wParam="0" lParam="1609" sParam="" />
    <Action type="3" message="1700" wParam="0" lParam="0" sParam="" />
    <Action type="3" message="1601" wParam="0" lParam="0" sParam="([^\r\n])\}(?![\r\n])" />
    <Action type="3" message="1625" wParam="0" lParam="2" sParam="" />
    <Action type="3" message="1602" wParam="0" lParam="0" sParam="\1\r\n}\r\n" />
    <Action type="3" message="1702" wParam="0" lParam="768" sParam="" />
    <Action type="3" message="1701" wParam="0" lParam="1609" sParam="" />
    <Action type="3" message="1700" wParam="0" lParam="0" sParam="" />
    <Action type="3" message="1601" wParam="0" lParam="0" sParam="([^\r\n])\{(?![\r\n])" />
    <Action type="3" message="1625" wParam="0" lParam="2" sParam="" />
    <Action type="3" message="1602" wParam="0" lParam="0" sParam="\1\r\n{\r\n" />
    <Action type="3" message="1702" wParam="0" lParam="768" sParam="" />
    <Action type="3" message="1701" wParam="0" lParam="1609" sParam="" />
    <Action type="3" message="1700" wParam="0" lParam="0" sParam="" />
    <Action type="3" message="1601" wParam="0" lParam="0" sParam=";(?![\r\n])" />
    <Action type="3" message="1625" wParam="0" lParam="2" sParam="" />
    <Action type="3" message="1602" wParam="0" lParam="0" sParam=";\r\n" />
    <Action type="3" message="1702" wParam="0" lParam="768" sParam="" />
    <Action type="3" message="1701" wParam="0" lParam="1609" sParam="" />
    <Action type="3" message="1700" wParam="0" lParam="0" sParam="" />
    <Action type="3" message="1601" wParam="0" lParam="0" sParam="(^(?![ \t]).+;)" />
    <Action type="3" message="1625" wParam="0" lParam="2" sParam="" />
    <Action type="3" message="1602" wParam="0" lParam="0" sParam="    \1" />
    <Action type="3" message="1702" wParam="0" lParam="768" sParam="" />
    <Action type="3" message="1701" wParam="0" lParam="1609" sParam="" />
    <Action type="3" message="1700" wParam="0" lParam="0" sParam="" />
    <Action type="3" message="1601" wParam="0" lParam="0" sParam="\}(?!(\r?\n\r?\n))" />
    <Action type="3" message="1625" wParam="0" lParam="2" sParam="" />
    <Action type="3" message="1602" wParam="0" lParam="0" sParam="}\r\n" />
    <Action type="3" message="1702" wParam="0" lParam="768" sParam="" />
    <Action type="3" message="1701" wParam="0" lParam="1609" sParam="" />
    <Action type="3" message="1700" wParam="0" lParam="0" sParam="" />
    <Action type="3" message="1601" wParam="0" lParam="0" sParam=":(?![ ])(?=.+;)" />
    <Action type="3" message="1625" wParam="0" lParam="2" sParam="" />
    <Action type="3" message="1602" wParam="0" lParam="0" sParam=": " />
    <Action type="3" message="1702" wParam="0" lParam="768" sParam="" />
    <Action type="3" message="1701" wParam="0" lParam="1609" sParam="" />
</Macro>
<Macro name="Minify CSS" Ctrl="no" Alt="no" Shift="no" Key="0">
    <Action type="3" message="1700" wParam="0" lParam="0" sParam="" />
    <Action type="3" message="1601" wParam="0" lParam="0" sParam="[\r\n\t ]+" />
    <Action type="3" message="1625" wParam="0" lParam="2" sParam="" />
    <Action type="3" message="1602" wParam="0" lParam="0" sParam=" " />
    <Action type="3" message="1702" wParam="0" lParam="768" sParam="" />
    <Action type="3" message="1701" wParam="0" lParam="1609" sParam="" />
    <Action type="3" message="1700" wParam="0" lParam="0" sParam="" />
    <Action type="3" message="1601" wParam="0" lParam="0" sParam="[ ]*\}[ ]*" />
    <Action type="3" message="1625" wParam="0" lParam="2" sParam="" />
    <Action type="3" message="1602" wParam="0" lParam="0" sParam="}" />
    <Action type="3" message="1702" wParam="0" lParam="768" sParam="" />
    <Action type="3" message="1701" wParam="0" lParam="1609" sParam="" />
    <Action type="3" message="1700" wParam="0" lParam="0" sParam="" />
    <Action type="3" message="1601" wParam="0" lParam="0" sParam="[ ]*\{[ ]*" />
    <Action type="3" message="1625" wParam="0" lParam="2" sParam="" />
    <Action type="3" message="1602" wParam="0" lParam="0" sParam="{" />
    <Action type="3" message="1702" wParam="0" lParam="768" sParam="" />
    <Action type="3" message="1701" wParam="0" lParam="1609" sParam="" />
    <Action type="3" message="1700" wParam="0" lParam="0" sParam="" />
    <Action type="3" message="1601" wParam="0" lParam="0" sParam="[ ]*;[ ]*" />
    <Action type="3" message="1625" wParam="0" lParam="2" sParam="" />
    <Action type="3" message="1602" wParam="0" lParam="0" sParam=";" />
    <Action type="3" message="1702" wParam="0" lParam="768" sParam="" />
    <Action type="3" message="1701" wParam="0" lParam="1609" sParam="" />
    <Action type="3" message="1700" wParam="0" lParam="0" sParam="" />
    <Action type="3" message="1601" wParam="0" lParam="0" sParam=";\}" />
    <Action type="3" message="1625" wParam="0" lParam="2" sParam="" />
    <Action type="3" message="1602" wParam="0" lParam="0" sParam="}" />
    <Action type="3" message="1702" wParam="0" lParam="768" sParam="" />
    <Action type="3" message="1701" wParam="0" lParam="1609" sParam="" />
    <Action type="3" message="1700" wParam="0" lParam="0" sParam="" />
    <Action type="3" message="1601" wParam="0" lParam="0" sParam="[ ]*:[ ]*" />
    <Action type="3" message="1625" wParam="0" lParam="2" sParam="" />
    <Action type="3" message="1602" wParam="0" lParam="0" sParam=":" />
    <Action type="3" message="1702" wParam="0" lParam="768" sParam="" />
    <Action type="3" message="1701" wParam="0" lParam="1609" sParam="" />
</Macro>

Brilliant. There are a few errors though and I don't know enough about how this works to fix it. Mostly has to do with spacing. It also inserted an extra semicolon somehow. I wish I StackOverflow had a better commenting system so I could show you. — Derek Ziemba, Jul 22 '15 at 00:03
@DerekZiemba you can make a [paste](http://pastebin.com/) and post the link here. How this works is: the `message="1601"` fields are the "find" regex, the `1602` fields are the "replace" expression. Each search and replace operation is one whole block `1700`–`1701`, and the blocks are executed top to bottom, each doing a global search and replace on the file. — Felix Dombek, Jul 22 '15 at 12:16
Great! Using the macro it took 10 seconds to reformat 50K lines of css code. — Mendi Barel, Sep 12 '16 at 07:11
Very fast, even Aptana Studio failed to format the source, this macro did, Thank you! — Firas Abd Alrahman, Jan 27 '17 at 02:48
Here is a [test file](https://pastebin.com/BCBuQ44y) for some problems with @-rules, comments (missing linebreak after comment) and url(data) terms. — Stony, Apr 02 '18 at 09:56
@Stony Thanks. Unfortunately, as soon as nesting scopes are introduced, things get extremely difficult to handle with regexes. Will probably not fix that. — Felix Dombek, Feb 07 '19 at 15:08

score 4 · Answer 2 · answered Aug 03 '16 at 06:50

4

What about JSFormat function of the JSTool plugin? I know it is unexpected, the name refers to Javascript. It has a format and a minification functionality that work on css too.

answered Aug 03 '16 at 06:50

mike

408
5
18

works, but you need to do some cleaning after. described here: [Notepad++ plugin for auto format Css - Stack Overflow](https://stackoverflow.com/questions/28525131/notepad-plugin-for-auto-format-css#comment87876723_28525173) – eapo May 20 '18 at 02:29

score 1 · Accepted Answer · answered Aug 16 '12 at 14:38

1

I have scoured the net and as far as I'm concerned the answer to this question is NO, or at least if there is I certainly cant find it; but if anyone comes up with a better answer I will accept it. For me I will continue to use PsPad for this operation.

answered Aug 16 '12 at 14:38

byronyasgur

4,627
13
52
96

score 0 · Answer 4 · answered Aug 07 '12 at 13:54

0

There's a list of plugins for Notepad++ out here: http://sourceforge.net/apps/mediawiki/notepad-plus/index.php?title=Plugin_Central

Just do a search for CSS and try out those plugins. I don't use such a plugin, so no recommendation here.

Maybe CSS-eXplorer or jN?

answered Aug 07 '12 at 13:54

Lars Knickrehm

739
4
14

Thanks for the effort but I don't think either of those or anything else on that page will work TBH – byronyasgur Aug 07 '12 at 13:59

Tidy CSS for Notepad++

4 Answers4

Macro source XML

Linked