transpect / css-tools Goto Github PK

View Code? Open in Web Editor NEW

8.0 8.0 2.0 587 KB

Parse styles in an XHTML document and expand as XML attributes (CSSa)

License: BSD 2-Clause "Simplified" License

XProc 1.76% XSLT 96.93% HTML 0.97% CSS 0.34%

css

css-tools's People

Contributors

Stargazers

Watchers

Forkers

airquick nkutsche

css-tools's Issues

'bold' should be 'normal' in 'example.xhtml'

css-tools/example/example.xhtml

Lines 82 to 85 in 7652f08

    
           <tr> 
        
             <th>*</th> 
        
             <td>bold (font-weight:bold)</td> 
        
           </tr>

from:

css-tools/example/style.css

Lines 18 to 21 in 7652f08

    
           * { 
        
             font-weight: normal; 
        
             font-family: 'alegreya'; 
        
           }

Analysis fails with rem

This 1.7em

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>css-expand example</title>
    <style type="text/css">
      p {margin-bottom:1.7em}
    </style>
  </head>
  <body>
    <p>Ttext</p>
  </body>
</html>

is expanded successfully

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:css="http://www.w3.org/1996/css">
  <head>
    <title>css-expand example</title>
    <style type="text/css">
      p {margin-bottom:1.7em}
    </style>
  </head>
  <body>
    <p css:margin-bottom="1.7em">Ttext</p>
  </body>
</html>

but this 1.7rem

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>css-expand example</title>
    <style type="text/css">
      p {margin-bottom:1.7rem}
    </style>
  </head>
  <body>
    <p>Ttext</p>
  </body>
</html>

fails

Message:
    lexical analysis failed
    while expecting [S, ':']
    at line 2, column 30:
    ...}

lexical analysis failed (amzn-kf8 combined with screen and other media features)

From a customer’s KF8 CSS override:

@media screen
  and amzn-kf8
  and (device-height:1024px)
  and (device-width: 758px) {

}

Probably after the fix for #14 this fails now:

Message:
    lexical analysis failed
    while expecting '('
    at line 87, column 7:
    ...amzn-kf8
      and (device-height:1024px)
      and (device-width: 758...

'REx_css-parser.xsl' fails on bare '/' in property value

See, e.g., https://github.com/web-platform-tests/wpt/blob/master/css/css-grid/abspos/positioned-grid-items-001.html

Running with MorganaXProc-IIIse fails with:

<c:errors xmlns:c="http://www.w3.org/ns/xproc-step"><c:error code="err:XC0095" name="apply-parsing-xsl-with-comments" type="p:xslt" href="file:/E:/Projects/ant/mantis/10369/cssa/workspace/css.xpl" line="52" column="56" xmlns:p="http://www.w3.org/ns/xproc" xmlns:err="http://www.w3.org/ns/xproc-error"><message>Error '{CSS3}parse-css': 
    lexical analysis failed
    while expecting '/*'
    after successfully scanning 1 characters beginning at line 4, column 21:
    .../ 200px 300px;
      margin: 1px 2px 3px 4px;
      padding: 20px 15px 1.... (file:/E:/Projects/ant/mantis/10369/cssa/workspace/REx_css-parser.xsl at -1/-1)</message></c:error></c:errors>

Fails with url(#foo)

If CSS has such lines as

marker-start: url(#markerCircle);
marker-end: url(#markerArrow);

which can quite happen with SVG, the parser fails:

ERROR: .../css-tools/xsl/REx_css-parser.xsl:682:p:parse-css:
    lexical analysis failed
    while expecting HEX
    after successfully scanning 1 characters beginning at line 4, column 38:
    ...#markerCircle);
                       marker-end: url(#markerArrow)...

Also consider an xml-stylesheet PI

…for XML input, as an alternative (or addition?) to the HTML link, style, and @style processing

Escape single quotes in attribute values

Example:

<selector priority="0,0,1,1"
          position="490"
          raw-selector="span[title = 'Condition: EOnly']">*:span[@title=''Condition: EOnly'']</selector>

The XPath selector should probably be *:span[@title='''Condition: EOnly''']

Example in README does not work with the default stylesheet

Using the example in README, I was able to get the expected output:

    <p class="red" css:color="red">This text has the color red.</p>

However, with the same example, using the default stylesheet (i.e. removing this element

    <p:input port="stylesheet">
      <p:document href="../xsl/css-parser.xsl"/>
    </p:input>

from css:expand), it didn't work:

    <p class="red">This text has the color red.</p>

'REx_css-tools.xsl' problem with 'font' shorthand

REx_css-tools.xsl seems to be making assumptions about the sequence of tokens in a font property that aren't always correct.

See, e.g., https://github.com/web-platform-tests/wpt/blob/master/css/css-grid/grid-items/grid-items-inline-blocks-001.html

When processing failed, I added xsl:message to show the property and value attributes of declaration as it was processed. The output shows that REx_css-parser.xsl was getting the components of the font property wrong and also inventing a line-height declaration with a zero-length value:

[XSLT message] display
[XSLT message] grid
[XSLT message] color
[XSLT message] red
[XSLT message] font-style
[XSLT message] 100px
[XSLT message] font-weight
[XSLT message] 1
[XSLT message] font-size
[XSLT message] Ahem
[XSLT message] line-height
[XSLT message] 
<c:errors xmlns:c="http://www.w3.org/ns/xproc-step"><c:error code="err:XC0095" name="css-xsl" type="p:xslt" href="file:/E:/Projects/ant/mantis/10369/cssa/workspace/css.xpl" line="142" column="28" xmlns:p="http://www.w3.org/ns/xproc" xmlns:err="http://www.w3.org/ns/xproc-error"><message>Error '{http://www.w3.org/2005/xqt-errors}XTTE0570': An empty sequence is not allowed as the value of variable $result-seq. (file:/E:/Projects/ant/mantis/10369/cssa/workspace/css2xsl.xsl at -1/-1)</message></c:error></c:errors>

tr:resolve-attributes: Evaluation will always fail: there is no context item

While browsing the code, got the warning "Evaluation will always fail: there is no context item" from Saxon at tr:resolve-attributes

experimentally eliminate comments from the grammar

…and see how they end up in the XML output. Both Gunther Rademacher and John Lumley have told me that then comments should just end up as text nodes in the XML output. John tried it with XPath 3.1, using the EBNF from https://bottlecaps.de/rex/
If it still doesn’t work with our CSS, we should investigate where the relevant differences are in the EBNF or in constructing the parser.

REx_css-tools.xsl lexical analysis failed

When parsing this css:
@media (max-width: 709px) { h1, h2, h3, h4, h5, h6 { font-size: 1em; } }

Rex throws this error
lexical analysis failed
while expecting [',', 'amzn-kf8', 'amzn-mobi', 'amzn-mobi7', 'and', 'not', 'only', 'or', 'screen']

probably the grammar needs to be updated.

Thanks

Does 'css-tools' handle pseudo-elements?

Is 'css-tools' expected to handle pseudo-element selectors that contain ::?

This document:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
p::before {
  content: 'H';
  color: green;
}
</style>
<body>
<p>ello, world</p>
</body>
</head>

run through pipelines modified for use with MorganaXProc-IIIse but with an unmodified REx_css-parser.xsl generates this output:

morgana workspace/test-css-expand.xpl  -input:source=css-tools/test.html -output:result=out/test.html -output:xml-representation=xml-representation/test.xml
=================================
MorganaXProc-IIIse 0.9.12-beta
Copyright 2011-2022 by <xml-project /> Achim Berndzen
=================================

Using Saxon-HE 9.9.1.5. XSLT and XQuery processor developed by Saxonica Limited
<c:errors xmlns:c="http://www.w3.org/ns/xproc-step"><c:error code="err:XC0093" cause="Unknown error" name="!2.4" type="p:xslt" href="file:/.../workspace/css.xpl" line="165" column="13" xmlns:p="http://www.w3.org/ns/xproc" xmlns:err="http://www.w3.org/ns/xproc-error"><message>Error 'Unknown error': Fatal error: Unexpected token ":" beyond end of expression; SystemID: file:///.../css-tools/test.html; Line#: -1; Column#: 3
Fatal error: Unexpected token name "H" beyond end of expression; SystemID: file:///.../css-tools/test.html; Line#: -1; Column#: -1. (unknown source at -1/-1)</message></c:error></c:errors>

Space before !important is required

This !important

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>css-expand expample</title>
    <style type="text/css">
      .red {color:red !important}
    </style>
  </head>
  <body>
    <p class="red">This text has the color red.</p>
  </body>
</html>

is expanded successfully

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:css="http://www.w3.org/1996/css">
  <head>
    <title>css-expand expample</title>
    <style type="text/css">
      .red {color:red !important}
    </style>
  </head>
  <body>
    <p class="red" css:color="red !important">This text has the color red.</p>
  </body>
</html>

but this (no space before !important)

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>css-expand expample</title>
    <style type="text/css">
      .red {color:red!important}
    </style>
  </head>
  <body>
    <p class="red">This text has the color red.</p>
  </body>
</html>

fails

Message:
    lexical analysis failed
    while expecting [important, S, IDENT, COMMA, '"', '''', ')', '/', '/*', ':', ';', '}']
    at line 2, column 22:
    ...!important}
        ...

According to this discussion, no space should be required before !important.