Unminifying CSS in PhpStorm

Question

I'm working in PhpStorm 2016.3.2. In my HTML files sometimes found <style> tags and minified CSS inside them.

Is it possible to make a shortcut to unminify code inside this tags?

For example, this code:

<style>.arrow{fill:none;stroke:#231f20;stroke-linecap:round;stroke-miterlimit:10;stroke-width:20px;}</style>

should looks like this:

<style>
.cls-1 {
   fill: none;
   stroke: #231f20;
   stroke-linecap: round;
   stroke-miterlimit: 10;
   stroke-width: 20px;
}
</style>

Make sure you disable the option: Preferences > Editor > Code Style > CSS > Tab 'Other' > "Keep single-line blocks" ( http://imgur.com/a/QFnG4 ) — Sebastian, Mar 06 '17 at 10:11
You could use http://jsfiddle.net/. Just copy your css in this and click on "tidy". — Patrick Mlr, Mar 06 '17 at 10:14

score 13 · Accepted Answer · answered Mar 06 '17 at 10:34

To reformat code for a directory, follow these steps:

In the Project tool window, select a module or directory you want to apply your reformatting to.
From the main menu, select Code | Reformat Code or press Ctrl+Alt+L. Alternatively, in the Project tool window, right-click the directory and from the context menu, select Reformat Code.
In the Reformat Code dialog box, specify the necessary options and filters for you reformatting and click Run.

To reformat code for the current file, follow these steps:

In the editor of the currently opened file, press Ctrl+Shift+Alt+L.
In the Reformat File dialog, specify options for the reformatting and click Run.

1 Answers1