[Translation] regular expressions that may be used for CSS streamlining

Original article: http://regexadvice.com/blogs/mash/archive/2008/03/27/Additional-CSS-minifying-regex-patterns.aspx

Note: The regular expressions mentioned in this article all use the IgnoreCase = true option.

I have observed the regular expressions used in YUI Compressor to streamline CSS and provided some other regular expressions that I think will help this work.

The code I have seen can be used to trim unnecessary zero values in the "top-right-bottom-left" value with a simple string replacement. However, this is done through three independent replacement operations. If you can use a regular expression to handle this situation, the code will become simpler.

(Pseudo code)

String. Replace (": 0 0 0 0;", "0 ;")

String. Replace (": 0 0 0;", "0 ;")

String. Replace (": 0 0;", "0 ;")

It can be changed:

Regex. Replace (input, ":(" s * 0) ("s + 0) {0, 3}" s *; ",": 0 ;")

It's easy enough. But I think, how can this happen? So I gave a regular expression that can process all values:

: "S * (0 | (? :(? : "D *".? "D + (? : P (? : [Xct]) | (? : [Cem]) m | % | in | ex) ("s +" 1) {1, 3 };
Test address: http://regex-lib.net/Regex/Test? Id = d090db4eaf3b41e2b4e75290ad5fe670)

The string used for replacement is simple: ": $1 ".

After this step is completed, the following is the case where not all values are 0.

If you do not know much about CSS, here, four values may appear:

1) if only one value is specified, the other three values are implicitly specified as the same value (X = X );

2) If two values are specified, the third value is equal to the first value, and the fourth value is equal to the second value (x y = x y );

3) if three values are specified, the fourth value is equal to the second value (x y z = x y z y ).

Of course, you certainly want to use a shorter syntax when streamlining. The following regular expression can shorten it. The replacement string used in all these cases is the same as the previous one, which is ": $1 ".

Replace four parameters with two (x y to x y)

: "S * (0 | (? :(? : "D? ".? "D (? : P (? : [Xct]) | (? : [Cem]) m | % | in | ex) "s + (0 | (? :(? : "D? ".? "D (? : P (? : [Xct]) | (? : [Cem]) m | % | in | ex) "s +" 2 "s +" 3;
Test address: http://regex-lib.net/Regex/Test? Id = e47bbb7741bd438e9fd37cae7a9d4a24)

4 to 3 (x y z y to x y z) or 3 to 2 (x y x to x y)

: "S *((? :(? : 0 | (? :(? : "D? ".? "D (? : P (? : [Xct]) | (? : [Cem]) m | % | in | ex) "s + )? (0 | (? :(? : "D? ".? "D (? : P (? : [Xct]) | (? : [Cem]) m | % | in | ex) "s + (? : 0 | (? :(? : "D? ".? "D (? : P (? : [Xct]) | (? : [Cem]) m | % | in | ex) "s +" 2;
Test address: http://regex-lib.net/Regex/Test? Id = 6bddaab88e724f68a5808d352cc556ca)

This long regular expression just repeats one of its subpatterns.

Based on the above regular expressions, I proposed a similar pattern to process border-style, outline-style, border-color, and outline-color.

Border-style/outline-style

Replace the string with "$1-style: $2 ;".

(Outline | border)-style "s *:" s * (none | hidden | d (? : Otted | ashed | ouble) | solid | groove | ridge | inset | outset )(? : "S +" 2) {1, 3 };
Test address: http://regex-lib.net/Regex/Test? Id = e46542e4f8bb48429a9f5c9b7fdc546b)

(Outline | border)-style "s *:" s * (none | hidden | d (? : Otted | ashed | ouble) | solid | groove | ridge | inset | outset) "s + (none | hidden | d (? : Otted | ashed | ouble) | solid | groove | ridge | inset | outset ))(? : "S +" 3 )(? : "S +" 4 );
Test address: http://regex-lib.net/Regex/Test? Id = c5e42486b75143588049042aea0dcd41)

(Outline | border)-style "s *:" s *((? :(? : None | hidden | d (? : Otted | ashed | ouble) | solid | groove | ridge | inset | outset) "s + )? (None | hidden | d (? : Otted | ashed | ouble) | solid | groove | ridge | inset | outset) "s + (? : None | hidden | d (? : Otted | ashed | ouble) | solid | groove | ridge | inset | outset ))(? : "S +" 3 );
Test address: http://regex-lib.net/Regex/Test? Id = 6558eb133f41535cba770aa1c69f91dd)

Border-color/outline-color

Replace the string with "$1-color: $2 ;".

(Outline | border)-color "s *:" s *((? :"#(? : [0-9A-F] {3}) {1, 2}) | "S + )(? : "S +" 2) {1, 3 };
Test address: http://regex-lib.net/Regex/Test? Id = 05ec5037fcf843609e14c821b7f76034)

(Outline | border)-color "s *:" s *(((? :"#(? : [0-9A-F] {3}) {1, 2}) | "S +)" s + ((? :"#(? : [0-9A-F] {3}) {1, 2}) | "S + ))(? : "S +" 3 )(? : "S +" 4 );
Test address: http://regex-lib.net/Regex/Test? Id = 4a4c4e9dcdf74a97ba3daa113e56a9ca)

(Outline | border)-color "s *:" s *((? :(? :(? :"#(? : [0-9A-F] {3}) {1, 2}) | "S +)" s + )? ((? :"#(? : [0-9A-F] {3}) {1, 2}) | "S +)" s + (? :(? :"#(? : [0-9A-F] {3}) {1, 2}) | "S + ))(? : "S +" 3 );
Test address: http://regex-lib.net/Regex/Test? Id = 82fedb7249b041f3a13e5552fc626b47)

I also provided some other regular expressions used to replace the code, but since they all use reverse matching, there may be portability problems.

This mode:

"S + ((? :[! {};>+ () "],]) | (? <= {[^ {}] *) :(? = [^}] *})
Test address: http://regex-lib.net/Regex/Test? Id = 928254009ef849cfb565022b6489355e)

It is used to match unnecessary spaces before a character. Be careful with the pseudo selector and the colon Before the pseudo class. Replace the string with "$1 ".

This mode:

(? <! ["X22" x27 =] "s *)" # ([0-9A-F]) "1 ([0-9A-F])" 2 ([0-9A-F]) "3
Test address: http://regex-lib.net/Regex/Test? Id = 1e210252d62d4cd2a9f0cb9f2513aeb8)

It is used to reduce the hexadecimal color value and change AABBCC to ABC. Replace the string with "$1 $2 $3 ".

I also wrote a regular expression for matching rgb values such as "RGB (x, y, z)", where x, y, and z are between 0 and.

Rgb "s *" x28 ((? : 25 [0-5]) | (? : 2 [0-4] "d) | (? : [01]? "D? "D)" s *, "s *((? : 25 [0-5]) | (? : 2 [0-4] "d) | (? : [01]? "D? "D)" s *, "s *((? : 25 [0-5]) | (? : 2 [0-4] "d) | (? : [01]? "D? "D)" s * "x29
Test address: http://regex-lib.net/Regex/Test? Id = c616455c751647ff9c1a424f4f0cfb96)

This mode is only used to match existing code and place each value in a group for further processing. Matchevaluator can be used to traverse each matching and complete the conversion from hexadecimal to hexadecimal.

I did some alpha tests myself, but the css I wrote cannot be used as the test material at all, so I just want to test it for you. I don't know much about CSS hack, so I don't know if these streamlining will negatively affect CSS hack. I will also tell the maintainers of YUI Compressor to see if they can adopt the information.