Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update the documentation to advertise var() not being supported in shorthand and multi-values properties #1616

Closed
FrancoisCapon opened this issue Mar 26, 2022 · 1 comment
Closed

Update the documentation to advertise var() not being supported in shorthand and multi-values properties #1616

FrancoisCapon opened this issue Mar 26, 2022 · 1 comment
Labels
documentation Problems or improvements needed on the documentation or on the website
Milestone
55.0

Comments

@FrancoisCapon
Copy link

Hi!

Me again, as you can see variables are not supported in the shorthand declaration:
2022-03-26--17-25
It's because <Function Block var( … )> are not evaluated in the shortand expand processus.

I take a look to the code, I think that is impossible without change a lot of thing: in the example above expand of #three is called before preprocess_declarations of body.

So I suggest to add this little restriction of the usage of var()in the documentation, for example in: 😎

instead of trying to adapt the code to support this 😓.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test CSS shorthand properties</title>
</head>
<body>
    <h1>Test CSS shorthand properties</h1>
    <div id="one">
        <pre>
body {
    --color-background: lightgreen;
    --color-border: forestgreen;
}

#one {
    background: lightgreen;
    border: solid 2px forestgreen;
}           
</pre>
    </div>
    <div id="two">
<pre>
#two {
    background-color: var(--color-background);
    border: solid 2px;
    border-color: var(--color-border);
}
</pre>
    </div>
    <div id="three">
<pre>
#three {
    background: var(--color-background);
    border: solid 2px var(--color-border);
}
</pre>
    </div>
    <pre>
# weasyprint -v -s test.css test.html test.pdf
INFO: Step 1 - Fetching and parsing HTML - test.html
INFO: Step 2 - Fetching and parsing CSS - CSS string
WARNING: Ignored `background: var(--color-background)` at 34:5, invalid value.
WARNING: Ignored `border: solid 2px var(--color-border)` at 35:5, invalid value.
INFO: Step 3 - Applying CSS
INFO: Step 4 - Creating formatting structure
INFO: Step 5 - Creating layout - Page 1
INFO: Step 6 - Creating PDF
INFO: Step 7 - Adding PDF metadata</pre>
</body>
</html>
h1 {
    text-align: center;
}
div {
    width: 100%;
    height: 5cm;
    box-sizing: border-box;
    margin: auto;
    background-color: red;
    margin-bottom: 1cm;
    border: dotted 10px darkred;
}
#one {
    background: lightgreen;
    border: solid 2px forestgreen;
}
#two {
    background-color: var(--color-background);
    border: solid 2px;
    border-color: var(--color-border);
}
#three {
    background: var(--color-background);
    border: solid 2px var(--color-border);
}
pre {
    padding: 0.5rem;
    font-size: 0.8rem;
} 
div > pre {
    margin: 1rem;
}
body > pre {
    background-color: orange;
}
/* variables set after usage */
body  {
    --color-background: lightgreen;
    --color-border: forestgreen;
    padding: 0;
    margin: 0;
}
@liZe
Copy link
Member

liZe commented Mar 26, 2022

Hi!

Yes, that’s actually a duplicate of #1219.

I take a look to the code, I think that is impossible without change a lot of thing

I agree, that’s more or less the conclusion of this comment.

So I suggest to add this little restriction of the usage of var()in the documentation, for example in

I agree. Adding a comment in the chapter of your first link is a good idea.

@liZe liZe changed the title CSS shorthand properties: var() not supported Update the documentation to advertise var() not being supported in shorthand and multi-values properties Mar 26, 2022
@liZe liZe changed the title Update the documentation to advertise var() not being supported in shorthand and multi-values properties Update the documentation to advertise var() not being supported in shorthand and multi-values properties Mar 26, 2022
@liZe liZe added the documentation Problems or improvements needed on the documentation or on the website label Mar 26, 2022
@liZe liZe closed this as completed in c17123c Apr 3, 2022
@liZe liZe added this to the 55.0 milestone Apr 3, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
documentation Problems or improvements needed on the documentation or on the website
Projects
None yet
Milestone
55.0
Development

No branches or pull requests
2 participants
@liZe @FrancoisCapon