diff --git a/lesscpy/lib/css.py b/lesscpy/lib/css.py index cf95d07..14cb58a 100644 --- a/lesscpy/lib/css.py +++ b/lesscpy/lib/css.py @@ -272,6 +272,52 @@ css3 = [ 'word-break', 'word-wrap' ] +# SVG only includes style not present in either css2 or css3: +svg = [ + # clipping / masking / compositing: + 'clip-path', + 'clip-rule', + 'mask', + # filter effects: + 'enable-background', + 'filter', + 'flood-color', + 'flood-opacity', + 'lightning-color', + # gradient: + 'stop-color', + 'stop-opacity', + # interactivity: + 'pointer-events', + # color / painting: + 'color-interpolation', + 'color-interpolation-filters', + 'color-rendering', + 'fill', + 'fill-opacity', + 'fill-rule', + 'image-rendering', + 'marker', + 'marker-end', + 'marker-mid', + 'marker-start', + 'shape-rendering', + 'stroke', + 'stroke-dasharray', + 'stroke-dashoffset', + 'stroke-linecap', + 'stroke-linejoin', + 'stroke-miterlimit', + 'stroke-opacity', + 'stroke-width', + 'text-rendering', + # text: + 'glyph-orientation-horizontal', + 'glyph-orientation-vertical', + 'kerning', + 'text-anchor', + 'writing-mode', +] vendor_prefix = [ '-ms-', '-moz-', @@ -284,10 +330,8 @@ vendor_prefix = [ 'mso-', ] vendor_ugly = [ - 'filter', 'accelerator', 'behavior', - 'filter', 'zoom', ] -propertys = css2 + css3 + vendor_ugly +propertys = css2 + css3 + svg + vendor_ugly diff --git a/lesscpy/lib/dom.py b/lesscpy/lib/dom.py index 2569d84..8f662af 100644 --- a/lesscpy/lib/dom.py +++ b/lesscpy/lib/dom.py @@ -140,5 +140,24 @@ html5 = [ 'video', 'wbr', ] +svg = [ + 'altGlyph', + 'altGlyphDef', + 'altGlyphItem', + 'circle', + 'desc', + 'ellipse', + 'glyphRef', + 'line', + 'path', + 'polygon', + 'polyline', + 'rect', + 'text', + 'textPath', + 'tref', + 'tspan', +] html = html4 html.extend(html5) +html.extend(svg) diff --git a/lesscpy/test/css/svg.css b/lesscpy/test/css/svg.css new file mode 100644 index 0000000..afabf9d --- /dev/null +++ b/lesscpy/test/css/svg.css @@ -0,0 +1,53 @@ +svg { + color: red; +} +circle { + stroke: #006600; + fill: #00cc00; +} +circle .green { + stroke: #006600; + stroke-width: 9; + fill: #00cc00; +} +rect { + fill: blue; + fill-opacity: 0.1; + stroke: green; + opacity: 0.5; +} +ellipse { + fill: yellow; +} +line { + stroke: red; +} +path { + stroke: blue; +} +polygon { + fill: lime; + fill-rule: nonzero; +} +polygon { + fill: lime; + fill-rule: evenodd; +} +polyline { + fill: none; +} +.node text { + font: 12px sans-serif; +} +tref { + font-weight: bold; +} +text tref { + font-weight: bold; +} +tspan { + font-weight: bold; +} +text tspan { + font-weight: bold; +} diff --git a/lesscpy/test/css/svg.min.css b/lesscpy/test/css/svg.min.css new file mode 100644 index 0000000..6f96b1b --- /dev/null +++ b/lesscpy/test/css/svg.min.css @@ -0,0 +1,15 @@ +svg{color:red;} +circle{stroke:#006600;fill:#00cc00;} +circle .green{stroke:#006600;stroke-width:9;fill:#00cc00;} +rect{fill:blue;fill-opacity:0.1;stroke:green;opacity:0.5;} +ellipse{fill:yellow;} +line{stroke:red;} +path{stroke:blue;} +polygon{fill:lime;fill-rule:nonzero;} +polygon{fill:lime;fill-rule:evenodd;} +polyline{fill:none;} +.node text{font:12px sans-serif;} +tref{font-weight:bold;} +text tref{font-weight:bold;} +tspan{font-weight:bold;} +text tspan{font-weight:bold;} diff --git a/lesscpy/test/less/svg.less b/lesscpy/test/less/svg.less new file mode 100644 index 0000000..fe1443d --- /dev/null +++ b/lesscpy/test/less/svg.less @@ -0,0 +1,39 @@ +svg {color: red;} + +circle { + stroke: #006600; + fill: #00cc00; +} +circle .green { + stroke: #006600; + stroke-width: 9; + fill: #00cc00; +} +rect { + fill: blue; + fill-opacity: 0.1; + stroke: green; + opacity: 0.5; +} +ellipse { fill: yellow; } +line { stroke: red; } +path { stroke: blue; } +polygon { + fill: lime; + fill-rule: nonzero; +} +polygon { + fill: lime; + fill-rule: evenodd; +} +polyline { fill: none; } + +.node text { font: 12px sans-serif; } +tref { font-weight: bold; } +text tref { font-weight: bold; } +tspan { font-weight: bold; } +text tspan { font-weight: bold; } +/* NOTE(saschpe): TODO +textPath { font-weight: bold; } +text textPath { font-weight: bold; } +svg text textPath { font-weight: bold; } */