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

52.5 - concatenating CSS vars() #1819

Closed
cavasinf opened this issue Feb 24, 2023 · 2 comments
Closed

52.5 - concatenating CSS vars() #1819

cavasinf opened this issue Feb 24, 2023 · 2 comments

Comments

@cavasinf
Copy link

cavasinf commented Feb 24, 2023 •
edited
Loading

Using Debian 11 and Weasyprint 52.5 installed from pip (because packaged version for Debian 11 is 51.2)

<!doctype html>
<html lang="fr">
   <head>
      <meta charset="utf-8"/>
      <title>Hello Weasyprint PDF!</title>
      <style>
         .border-bottom {
           --var-border-style: solid;
           /* Should be => border-bottom: 1px solid rgba(97,104,118,.16) !important; */
           border-bottom: 1px var(--var-border-style) rgba(97,104,118,.16) !important;
         }
      </style>
   </head>
   <body>
      <div class="page">
         <div class="border-bottom">
            <h1>Hello Weasyprint PDF!</h1>
         </div>
      </div>
   </body>
</html>

Result to that:

WARNING: Ignored border-bottom: 1px var(--var-border-style) rgba(97,104,118,.16) at 5:13, invalid value.

Even with this:

.border-bottom {
    --var-border: 1px solid rgba(97,104,118,.16) !important;
    border-bottom: var(--var-border);
}

  1. As Add support for concatenating var() functions in 'content' declarations #1165 being merged in release 52, it should works as untended.

  2. The Handle var function in properties with multiple values #1219 is still running, but since 2020, maybe it is the same case here.
    Unfortunately, for this issue the code is very simple, but in a real case we use a front-end that have many class definition like that.
    We cannot override every border-* into:

  • border-*-color
  • border-*-left-radius
  • border-*-right-radius
  • border-*-style
  • border-*-width

Even Bootstrap 5 has concatenated class value:
https://github.com/twbs/bootstrap/blob/afd37369bc87f8d48e5d86348a16dfbc9eba90f9/dist/css/bootstrap.css#L7439-L7441

.border-bottom {
border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

Or can be conflict from installed packages?
Packages installed by following https://doc.courtbouillon.org/weasyprint/v52.5/install.html#debian-ubuntu

apt-get install -y build-essential python3-dev python3-pip python3-setuptools python3-wheel python3-cffi libcairo2 libpango-1.0-0 libpangocairo-1.0-0 libgdk-pixbuf2.0-0 libffi-dev shared-mime-info
pip install weasyprint==52.5 --user

Versions

/var/www/html# python3 --version
Python 3.9.2
/var/www/html# pip list
Package            Version
------------------ ---------
attrs              22.2.0
awsebcli           3.20.3
bcrypt             4.0.1
blessed            1.20.0
botocore           1.23.54
cached-property    1.5.2
cairocffi          1.4.0
CairoSVG           2.6.0
cement             2.8.2
certifi            2022.12.7
cffi               1.15.1
charset-normalizer 2.0.12
colorama           0.4.3
cryptography       39.0.1
cssselect2         0.7.0
defusedxml         0.7.1
docker             4.4.4
docker-compose     1.25.5
dockerpty          0.4.1
docopt             0.6.2
future             0.16.0
html5lib           1.1
idna               3.4
jmespath           0.10.0
jsonschema         3.2.0
paramiko           3.0.0
pathspec           0.9.0
Pillow             9.4.0
pip                23.0.1
ply                3.11
pycparser          2.21
PyNaCl             1.5.0
pyphen             0.13.2
pyrsistent         0.19.3
python-dateutil    2.8.2
PyYAML             5.4.1
requests           2.26.0
semantic-version   2.8.5
setuptools         52.0.0
six                1.16.0
termcolor          1.1.0
texttable          1.6.7
tinycss2           1.2.1
urllib3            1.26.14
wcwidth            0.1.9
WeasyPrint         52.5
webencodings       0.5.1
websocket-client   0.59.0
wheel              0.34.2
build-essential is already the newest version (12.9).
libcairo2 is already the newest version (1.16.0-5).
libgdk-pixbuf2.0-0 is already the newest version (2.40.2-2).
libffi-dev is already the newest version (3.3-6).
libpango-1.0-0 is already the newest version (1.46.2-3).
libpangocairo-1.0-0 is already the newest version (1.46.2-3).
python3-cffi is already the newest version (1.14.5-1).
python3-pip is already the newest version (20.3.4-4+deb11u1).
python3-dev is already the newest version (3.9.2-3).
python3-setuptools is already the newest version (52.0.0-4).
shared-mime-info is already the newest version (2.0-1).
python3-wheel is already the newest version (0.34.2-1).
@cavasinf
Copy link
Author

cavasinf commented Feb 24, 2023 •
edited
Loading

Work around is to replace every var() by it's own value:

  1. compile *.scss files into .css with sass
  2. install postcss and CLI
  3. Add postcss-css-variables plugin
  4. Optional: add postcss-import postcss-preset-env postcss-nested autoprefixer plugings
  5. Add postcss config postcss.config.js:
module.exports = {
    plugins: [
        require('postcss-import'),
        require('postcss-css-variables'),
        require('postcss-preset-env')({
            stage: 1,
        }),
        require('postcss-nested'),
        require('autoprefixer'),
    ],
};
  1. Run command postcss path/to/file/with/variable.css -o path/to/final/file.css
  2. Include final .css file into the template for the PDF

@liZe
Copy link
Member

liZe commented Feb 24, 2023

Hi!

Thanks for the bug report.

That’s a duplicate of #1219: you can’t use var() in border-bottom because it’s a shorthand property.

(Just one comment about your long report: in your example

.border-bottom {
    --var-border: 1px solid rgba(97,104,118,.16) !important;
    border-bottom: var(--var-border);
}

the !important part is applied to the --var-border property, it’s not included in the variable. It means that the content of border-bottom will be 1px solid rgba(…), without !important.)

@liZe liZe closed this as not planned Won't fix, can't repro, duplicate, stale Feb 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@liZe @cavasinf