Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Update /r2/r2/lib/cssfilter.py: minor cleanup and support for CSS3 transforms #368

Closed
wants to merge 1 commit into from

3 participants

Dakota Schneider Max Goodman Neil Williams
Dakota Schneider

Done:
1. cleanup on some CSS property regexes (replaced \s+ with {w});
2. add CSS3 transform and transform-origin properties;
3. add associated translation-value, translation-function, and angle macros.

Dakota Schneider Dakta Update /r2/r2/lib/cssfilter.py: cleanup on CSS property regexes; add …
…CSS3 `transform` and `transform-origin` properties; add associated `translation-value`, `translation-function`, and `angle` macros. -dakta
4fa0754
Max Goodman

Sweeeeeet. Will review ASAP. Thanks!

Dakota Schneider

I tested the REGEXes locally, but don't have a Reddit install to make sure the whole thing works. Once I get a working install, I'll see about updating cssutils. While I'm doing that, I'll also refactor the sortof hacky custom macro/properties setup you've got now, as cssutils supports easy addition of custom profiles. The custom macros and properties are even in the right format already, so I just have to call a function and pass the variables. :)

Happy to help.

Max Goodman

That would be totally awesome. <3

Let me know our there's anything I can do to help you get rolling!

Max Goodman chromakode commented on the diff
r2/r2/lib/cssfilter.py
@@ -74,6 +75,10 @@
'single-text-shadow': r'({color}\s+)?{length}\s+{length}(\s+{length})?|{length}\s+{length}(\s+{length})?(\s+{color})?',
'box-shadow-pos': r'{length}\s+{length}(\s+{length})?(\s+{length})?',
+
+ # http://www.w3.org/TR/css3-2d-transforms/
+ 'translation-value': r'{length}|{percentage}',
+ 'transform-function': r'matrix({num},{w}{num},{w}{num},{w}{num},{w}{num},{w}{num})|translate({translation-value}(,{w}{translation-value})?)|translateX({translation-value})|translateY({translation-value})|scale({num}(,{w}{num})?)|scaleX({num})|scaleY({num})|rotate({angle})|skewX({angle})|skewY({angle})',

Nice! Nitpick: should you allow/consume {w} whitespace before the commas as well?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Max Goodman chromakode commented on the diff
r2/r2/lib/cssfilter.py
@@ -88,7 +93,7 @@
'background': r'{bg-gradients}',
'background-image': r'{bg-gradients}',
'background-color': r'{color}',
- 'background-position': r'(({percentage}|{length}){0,3})?\s*(top|center|left)?\s*(left|center|right)?',
+ 'background-position': r'(({percentage}|{length}){0,3})?{w}(top|center|left)?{w}(left|center|right)?',

Could you please split cleanup into a separate commit?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Max Goodman chromakode commented on the diff
r2/r2/lib/cssfilter.py
@@ -96,6 +101,10 @@
'border-bottom-right-radius': r'{border-radius}',
'border-bottom-left-radius': r'{border-radius}',
'border-top-left-radius': r'{border-radius}',
+
+ # http://www.w3.org/TR/css3-2d-transforms/
+ 'transform': r'none|({transform-function}({w}{transform-function})*)',

Are the outer parens (grouping) necessary on the right side of the |?

Dakota Schneider
Dakta added a note

No. Removed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Max Goodman chromakode commented on the diff
r2/r2/lib/cssfilter.py
@@ -96,6 +101,10 @@
'border-bottom-right-radius': r'{border-radius}',
'border-bottom-left-radius': r'{border-radius}',
'border-top-left-radius': r'{border-radius}',
+
+ # http://www.w3.org/TR/css3-2d-transforms/
+ 'transform': r'none|({transform-function}({w}{transform-function})*)',
+ 'transform-origin': r'(top|bottom)|(({percentage}|{length}|left|center|right)({w}({percentage}|{length}|top|center|bottom))?)|((center|(left|right)({w}({percentage}|{length}))?)&&(center|(top|bottom)({w}({percentage}|{length}))?))',

I believe the "&&" in the spec specifies that the two related clauses must be present together; not in the syntax literally. Similar to above, can you remove some of the outer groups?

Dakota Schneider
Dakta added a note

Actually, && is how you specify that two regex groups must both apply for it to pass, which is what the spec implies.

Sorry, I'm not sure I follow. I can't find && in the Python regex documentation, and running re.match("(a)&&(b)", "ab") == None. Does it not suffice to include both groups, one after the other? Is the && intended to be in the CSS? Also, it looks like you may need some more {w}s to separate the parameters. For instance, in testing I found that "center&&center" is matched while center && center isn't.

Looking forward to getting this out and seeing what people do with it. :)

Dakota Schneider
Dakta added a note
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Neil Williams
Owner

I'm going to close this because it has been hanging around so long. Please feel free to open a new one if you have an updated version of the patch. Thanks!

Neil Williams spladug closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 12, 2012
  1. Dakota Schneider

    Update /r2/r2/lib/cssfilter.py: cleanup on CSS property regexes; add …

    Dakta authored
    …CSS3 `transform` and `transform-origin` properties; add associated `translation-value`, `translation-function`, and `angle` macros. -dakta
This page is out of date. Refresh to see the latest.
Showing with 12 additions and 3 deletions.
  1. +12 −3 r2/r2/lib/cssfilter.py
15 r2/r2/lib/cssfilter.py
View
@@ -57,10 +57,11 @@
custom_macros = {
'num': r'[-]?\d+|[-]?\d*\.\d+',
'percentage': r'{num}%',
- 'length': r'0|{num}(em|ex|px|in|cm|mm|pt|pc)',
+ 'length': r'0|{num}(em|ex|ch|rem|px|in|cm|mm|pt|pc|vw|vh|vmin)',
'int': r'[-]?\d+',
'w': r'\s*',
-
+ 'angle': r'{num}(deg|grad|rad|turn)',
+
# From: http://www.w3.org/TR/2008/WD-css3-color-20080721/#svg-color
'x11color': r'aliceblue|antiquewhite|aqua|aquamarine|azure|beige|bisque|black|blanchedalmond|blue|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|fuchsia|gainsboro|ghostwhite|gold|goldenrod|gray|green|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|lime|limegreen|linen|magenta|maroon|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|navy|oldlace|olive|olivedrab|orange|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|purple|red|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|silver|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|teal|thistle|tomato|turquoise|violet|wheat|white|whitesmoke|yellow|yellowgreen',
'csscolor': r'(maroon|red|orange|yellow|olive|purple|fuchsia|white|lime|green|navy|blue|aqua|teal|black|silver|gray|ActiveBorder|ActiveCaption|AppWorkspace|Background|ButtonFace|ButtonHighlight|ButtonShadow|ButtonText|CaptionText|GrayText|Highlight|HighlightText|InactiveBorder|InactiveCaption|InactiveCaptionText|InfoBackground|InfoText|Menu|MenuText|Scrollbar|ThreeDDarkShadow|ThreeDFace|ThreeDHighlight|ThreeDLightShadow|ThreeDShadow|Window|WindowFrame|WindowText)|#[0-9a-f]{3}|#[0-9a-f]{6}|rgb\({w}{int}{w},{w}{int}{w},{w}{int}{w}\)|rgb\({w}{num}%{w},{w}{num}%{w},{w}{num}%{w}\)',
@@ -74,6 +75,10 @@
'single-text-shadow': r'({color}\s+)?{length}\s+{length}(\s+{length})?|{length}\s+{length}(\s+{length})?(\s+{color})?',
'box-shadow-pos': r'{length}\s+{length}(\s+{length})?(\s+{length})?',
+
+ # http://www.w3.org/TR/css3-2d-transforms/
+ 'translation-value': r'{length}|{percentage}',
+ 'transform-function': r'matrix({num},{w}{num},{w}{num},{w}{num},{w}{num},{w}{num})|translate({translation-value}(,{w}{translation-value})?)|translateX({translation-value})|translateY({translation-value})|scale({num}(,{w}{num})?)|scaleX({num})|scaleY({num})|rotate({angle})|skewX({angle})|skewY({angle})',

Nice! Nitpick: should you allow/consume {w} whitespace before the commas as well?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
}
custom_values = {
@@ -88,7 +93,7 @@
'background': r'{bg-gradients}',
'background-image': r'{bg-gradients}',
'background-color': r'{color}',
- 'background-position': r'(({percentage}|{length}){0,3})?\s*(top|center|left)?\s*(left|center|right)?',
+ 'background-position': r'(({percentage}|{length}){0,3})?{w}(top|center|left)?{w}(left|center|right)?',

Could you please split cleanup into a separate commit?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
# http://www.w3.org/TR/css3-background/#border-top-right-radius
'border-radius': r'{border-radius}',
@@ -96,6 +101,10 @@
'border-bottom-right-radius': r'{border-radius}',
'border-bottom-left-radius': r'{border-radius}',
'border-top-left-radius': r'{border-radius}',
+
+ # http://www.w3.org/TR/css3-2d-transforms/
+ 'transform': r'none|({transform-function}({w}{transform-function})*)',

Are the outer parens (grouping) necessary on the right side of the |?

Dakota Schneider
Dakta added a note

No. Removed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ 'transform-origin': r'(top|bottom)|(({percentage}|{length}|left|center|right)({w}({percentage}|{length}|top|center|bottom))?)|((center|(left|right)({w}({percentage}|{length}))?)&&(center|(top|bottom)({w}({percentage}|{length}))?))',

I believe the "&&" in the spec specifies that the two related clauses must be present together; not in the syntax literally. Similar to above, can you remove some of the outer groups?

Dakota Schneider
Dakta added a note

Actually, && is how you specify that two regex groups must both apply for it to pass, which is what the spec implies.

Sorry, I'm not sure I follow. I can't find && in the Python regex documentation, and running re.match("(a)&&(b)", "ab") == None. Does it not suffice to include both groups, one after the other? Is the && intended to be in the CSS? Also, it looks like you may need some more {w}s to separate the parameters. For instance, in testing I found that "center&&center" is matched while center && center isn't.

Looking forward to getting this out and seeing what people do with it. :)

Dakota Schneider
Dakta added a note
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
# old mozilla style (for compatibility with existing stylesheets)
'border-radius-topright': r'{border-radius}',
Something went wrong with that request. Please try again.