Skip to content
This repository

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
Dakta commented March 11, 2012

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 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
Owner

Sweeeeeet. Will review ASAP. Thanks!

Dakota Schneider
Dakta commented March 11, 2012

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
Owner

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 March 12, 2012
r2/r2/lib/cssfilter.py
@@ -74,6 +75,10 @@
74 75
     'single-text-shadow': r'({color}\s+)?{length}\s+{length}(\s+{length})?|{length}\s+{length}(\s+{length})?(\s+{color})?',
75 76
 
76 77
     'box-shadow-pos': r'{length}\s+{length}(\s+{length})?(\s+{length})?',
  78
+    
  79
+    # http://www.w3.org/TR/css3-2d-transforms/
  80
+    'translation-value': r'{length}|{percentage}',
  81
+    '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})',
1
Max Goodman Owner
chromakode added a note March 12, 2012

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 March 12, 2012
r2/r2/lib/cssfilter.py
@@ -88,7 +93,7 @@
88 93
     'background': r'{bg-gradients}',
89 94
     'background-image': r'{bg-gradients}',
90 95
     'background-color': r'{color}',
91  
-    'background-position': r'(({percentage}|{length}){0,3})?\s*(top|center|left)?\s*(left|center|right)?',
  96
+    'background-position': r'(({percentage}|{length}){0,3})?{w}(top|center|left)?{w}(left|center|right)?',
1
Max Goodman Owner
chromakode added a note March 12, 2012

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 March 12, 2012
r2/r2/lib/cssfilter.py
@@ -96,6 +101,10 @@
96 101
     'border-bottom-right-radius': r'{border-radius}',
97 102
     'border-bottom-left-radius': r'{border-radius}',
98 103
     'border-top-left-radius': r'{border-radius}',
  104
+    
  105
+    # http://www.w3.org/TR/css3-2d-transforms/
  106
+    'transform': r'none|({transform-function}({w}{transform-function})*)',
2
Max Goodman Owner
chromakode added a note March 12, 2012

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

Dakota Schneider
Dakta added a note March 13, 2012

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 March 13, 2012
r2/r2/lib/cssfilter.py
@@ -96,6 +101,10 @@
96 101
     'border-bottom-right-radius': r'{border-radius}',
97 102
     'border-bottom-left-radius': r'{border-radius}',
98 103
     'border-top-left-radius': r'{border-radius}',
  104
+    
  105
+    # http://www.w3.org/TR/css3-2d-transforms/
  106
+    'transform': r'none|({transform-function}({w}{transform-function})*)',
  107
+    '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}))?))',
4
Max Goodman Owner
chromakode added a note March 13, 2012

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 March 13, 2012

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

Max Goodman Owner
chromakode added a note March 13, 2012

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 March 14, 2012
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 July 15, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 1 unique commit by 1 author.

Mar 11, 2012
Dakota Schneider 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
This page is out of date. Refresh to see the latest.

Showing 1 changed file with 12 additions and 3 deletions. Show diff stats Hide diff stats

  1. 15  r2/r2/lib/cssfilter.py
15  r2/r2/lib/cssfilter.py
@@ -57,10 +57,11 @@
57 57
 custom_macros = {
58 58
     'num': r'[-]?\d+|[-]?\d*\.\d+',
59 59
     'percentage': r'{num}%',
60  
-    'length': r'0|{num}(em|ex|px|in|cm|mm|pt|pc)',
  60
+    'length': r'0|{num}(em|ex|ch|rem|px|in|cm|mm|pt|pc|vw|vh|vmin)',
61 61
     'int': r'[-]?\d+',
62 62
     'w': r'\s*',
63  
-    
  63
+    'angle': r'{num}(deg|grad|rad|turn)',
  64
+
64 65
     # From: http://www.w3.org/TR/2008/WD-css3-color-20080721/#svg-color
65 66
     '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',
66 67
     '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 @@
74 75
     'single-text-shadow': r'({color}\s+)?{length}\s+{length}(\s+{length})?|{length}\s+{length}(\s+{length})?(\s+{color})?',
75 76
 
76 77
     'box-shadow-pos': r'{length}\s+{length}(\s+{length})?(\s+{length})?',
  78
+    
  79
+    # http://www.w3.org/TR/css3-2d-transforms/
  80
+    'translation-value': r'{length}|{percentage}',
  81
+    '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})',
77 82
 }
78 83
 
79 84
 custom_values = {
@@ -88,7 +93,7 @@
88 93
     'background': r'{bg-gradients}',
89 94
     'background-image': r'{bg-gradients}',
90 95
     'background-color': r'{color}',
91  
-    'background-position': r'(({percentage}|{length}){0,3})?\s*(top|center|left)?\s*(left|center|right)?',
  96
+    'background-position': r'(({percentage}|{length}){0,3})?{w}(top|center|left)?{w}(left|center|right)?',
92 97
     
93 98
     # http://www.w3.org/TR/css3-background/#border-top-right-radius
94 99
     'border-radius': r'{border-radius}',
@@ -96,6 +101,10 @@
96 101
     'border-bottom-right-radius': r'{border-radius}',
97 102
     'border-bottom-left-radius': r'{border-radius}',
98 103
     'border-top-left-radius': r'{border-radius}',
  104
+    
  105
+    # http://www.w3.org/TR/css3-2d-transforms/
  106
+    'transform': r'none|({transform-function}({w}{transform-function})*)',
  107
+    '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}))?))',
99 108
 
100 109
     # old mozilla style (for compatibility with existing stylesheets)
101 110
     'border-radius-topright': r'{border-radius}',
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.