Question

I have a regex puzzle for you all!

A week or so ago, I decided to change the formatting of my Sass file from this:

a {
  color: red;
  text-decoration: none;

  &:hover: {
    color: blue;
    text-decoration: underline;
  }
}

div { ... }

To this:

a {
  color: red;
  text-decoration: none;

  &:hover: {
    color: blue;
    text-decoration: underline; } }

div { ... }

The second syntax seems nice — it saves you lines and improves readability — but it is actually a disaster for writing code. Imagine if I wanted to add another line after a:hover’s text-decoration: I’d have to bring those two parentheses with me.

Anyway, I’ve been trying to find the perfect regex to change the formatting back but to no avail.

My thinking:

1. Match and capture 2 spaces since all closing brackets are indented at least one level: (\s{2})
2. Match and capture all additional spaces: (\s*)
3. Match and capture all other characters (my CSS code): (.*)
4. Match space + closing bracket: }

Replace that with two lines:
\1\2\3\n\2}

Doesn’t exactly work quite yet. Appreciate any ideas.

Answer 1

Regex won’t really work, as you’ve discovered, because the meaning/desired position depends on the parsing of the Document that has come before.

You need a parser or a filter for this job.

Fortunately, a standard JS beautifier, or a CSS indenter should whip that file right back into shape.

PS: Also consider more frequent backups and version control. (^_^)