Select CSS selector (fast but won't select selectors on line 1 because of initial lookbehind)
(?<=[\},\n])[+#:\.\w -]+(?=[\{,])
Select groups of properties
(?<=[\{,\n])(.+[^,\{]\n)+(?=[\},])
OR to get all the rules related to certain selectors:
- grab from the first occurrance of a selector in a rulset to the closing brace (use as scope for second filter)
.*\.(\.CLASS|#ID|SELECTOR|SELECTOR)\b[^}]*\n\} - select only the relevant selectors and the properties
(.*(\.CLASS|#ID|SELECTOR|SELECTOR)\b[^\n{]*)|(\{(\n[^}]*\})) - filter out unnecessary commas
,\s+\{
Find/Replace selectors containing one rule to one line
- find:
\{\s*([^\n]*)\n\s*\} - replace:
{\1}
##CSS Coding Standards
These are not guaranteed to be perfect, but fairly reliable.
Always lint your files after performing any batch operations.
Unnecessary "px" on 0px
- find:
(?<=[^\d]0)px - replace: empty
Unnecessary leading zero
- find:
([^\d])0\.(?=\d) - replace:
\1.
Hex colors that can be reduced to their short form
- find:
(?<=#)([0-9a-fA-F])\1([0-9a-fA-F])\2([0-9a-fA-F])\3 - replace:
\1\2\3
Hex colors to lowercase
- find:
#[A-F0-9]{3,6} - convert case: lowercase
Opening brace has too little / too much white space
- find:
(([^\s])|\s{2,})\{ - replace:
\2 {
Function arguments missing space after comma
You'll need to run this multiple (usually 3x) times
- find:
((?<=rgba)|(?<=gradient))\((.*?),([^\s]) - replace:
(\2, \3
Rule doesn't end with semicolon
- find:
(?<=[^;/\s\n}])\n\} - replace:
;\n}
Shorthand value declaration
- find:
(?<=: )(.+?) \1 \1 \1(?=;) - replace:
\1 - find:
(?<=: )(.+?) (.+?) \1(?=;) - replace:
\1 \2 - find:
(?<=: )(.+?) (.+?) \1 \2(?=;) - replace:
\1 \2 - find:
(?<=: )(.+?) (.+?) (.+?) \2(?=;) - replace:
\1 \2 \3
Filter a Diff to only CSS and SCSS files:
^diff.*\.s?css\n(.*\n)+?(?=diff)
Select Merge Conflict Sections
- yours:
((?<=<<<<<<< HEAD\n)(.*\n)*?.*?(?=\n\|\|\|\|\|\|\|)) - ancestor:
((?<=\|\|\|\|\|\|\| merged common ancestors\n)(.*\n)*?.*?(?=\n\=\=\=\=\=\=\=)) - theirs:
((?<========\n)(.*\n)*?.*?(?=\n>>>>>>>))
match content of image tag
<img [\d\w=\s":/\\\.@&;]*>
To create emmet-style outline:
- match opening/closing tag and class/id references
(?<=<)/?\w+(?=[ >])|((class|id)="[-\w_\s\d]+") - find class delimeters
(class=")|( )and replace with "." - find all id delimeters
(id=")|( )and replace with "#" - select EOL chars
\.?"$and delete - select tag chars
((?<=^/)|(?<=^))\w+, and wrap with "<>" (→, >, home, <) - select beginning of attr lines
^(?=[#\.])and back-delete - HTML Prettify (make sure 'a' tags are unformatted)! and convert spaces to tabs for indentation
- select tag content
(^\s*</\w+>)|<|>and delete - select empty lines
^$and delete - select ID tags
#[\w#-]+[^$]and move to EOL (cut, end, paste) only works with one ID per line - select equally-indented lines
(^\s+).*(\n\1[^\s]+)+andUNIQUE-ify - set SCSS syntax
\{\n(.*\n){0,1}(.*text-align: ?right.*\n)(.*\n){0,1}\}