Skip to content

fix css whitespace invalid-calc #6517

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
Merged
merged 1 commit into from
Jan 9, 2025
Merged

fix css whitespace invalid-calc #6517

merged 1 commit into from
Jan 9, 2025

Conversation

tvarwig
Copy link
Contributor

@tvarwig tvarwig commented Jan 9, 2025

Issue:
Warning in Tailwind CSS Version 4 Beta When Using the + Operator Without Surrounding Whitespace

Description:
When the + operator in Tailwind CSS does not have whitespace on both sides, it triggers a warning in Tailwind CSS version 4 Beta.

▲ [WARNING] The "+" operator only works if there is whitespace on both sides [invalid-calc]

    <stdin>:371:42:
      371 │ .w-\[calc\(100\%\+8rem\)\]{width:calc(100%+8rem);}
          ╵                                           ^


▲ [WARNING] The "+" operator only works if there is whitespace on both sides [invalid-calc]

    <stdin>:831:695:
      831 │ ...100\%\+8rem\)\]{width:calc(100%+8rem);}.w-auto{width:auto;}.w-...
          ╵                                   ^

** To Reproduce:**

Use the + operator in a calc function without adding whitespace around it,calc(100%+8rem).

Per mdn web docs css rules white space is required

@taylorotwell taylorotwell merged commit cb7ab61 into laravel:11.x Jan 9, 2025
6 checks passed
@Jubeki
Copy link
Contributor

Jubeki commented Jan 10, 2025

I don't think this a now a valid class anymore.

Before you had one class w-[calc(100%+8rem)], now you have three classes: w-[calc(100%, +, 8rem)], because that is how HTML will interpret these classes. I think tailwind will also generate the wrong one.

To add spaces I think you need to use an underscore.

See also: https://tailwindcss.com/docs/adding-custom-styles#handling-whitespace
(I will send a PR to repair this)

@Jubeki Jubeki mentioned this pull request Jan 10, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@tvarwig @Jubeki @taylorotwell