Challenge: remove the CSS keyframe animations from this!

gistfile1.txt

.class{rule: prop;}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes spinoff{0%{transform:rotate(0deg)}100%{transform:rotate(-360deg)}}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}@-moz-keyframes spinoff{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(-360deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}#id{rule: prop;}@-webkit-keyframes spinoff{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(-360deg)}}@-ms-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@-ms-keyframes spinoff{0%{-ms-transform:rotate(0deg)}100%{-ms-transform:rotate(-360deg)}}

Use parselib: https://github.com/nzakas/parser-lib

That'll give you an AST, then you can transform back to CSS. Far more reliable than regex here, I'd think.

str.replace(/.*/, '');

css.replace( /@[a-z-]*keyframes\s+\w+\s*\{\s*(\d+%\{[^}]+\}\s*)+\}/g, "" );

@cowboy wins. Clearly. =)

/@(-moz-|-webkit-|-ms-)*keyframes\s\w+{(\d%{[-\w:\w+()]+}\d+%{[\w:\w()-]+)+}}/g

@scottgonzalez wins (but hmammana one's works equally well)! Thanks all!

The regex explained:

1. arbitrarily prefixed keyframes: @[a-z-]*keyframes
2. a required space: \s+
3. keyframe name: \w+
4. optional space before frames: \s*
5. opening brace for frames: \{
6. optional space before frames: \s*
7. at least frame (\d+%\{[^}]+\}\s*)+:
   1. percentage (technically should probably be \d{1,3} or even more strict): \d+%
   2. opening brace for rule: \{
   3. arbitrary rules comprised of anything beside a closing brace: [^}]+
   4. closing brace for rule: \}
   5. optional space between rules: \s*
8. closing brace for frames: \}

I've never used keyframes and haven't read the spec, so my terminology for names/frames/rules may be off...

nice! the idea that I needed was the grouping and repeating of frames – I somehow tried to search for "text without }}" and then }}, but that doesn't work. Thanks again!

Try this.....
@(-moz-|-webkit-|-ms-)*keyframes\s(.*?){([0-9%a-zA-Z,\s.]*{(.*?)})*[\s\n]*}