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

@Dakta

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.

@Dakta 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
@chromakode

Sweeeeeet. Will review ASAP. Thanks!

@Dakta

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.

@chromakode

That would be totally awesome. <3

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

@chromakode 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
@chromakode 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
@chromakode 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 |?

@Dakta
Dakta added a note

No. Removed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@chromakode 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?

@Dakta
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. :)

@Dakta
Dakta added a note
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@spladug
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!

@spladug 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. @Dakta

    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
View
15 r2/r2/lib/cssfilter.py
@@ -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 |?

@Dakta
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?

@Dakta
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. :)

@Dakta
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.