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.

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

Style panel set properties indication doesn't work in case of calc() #4872

Closed
kof opened this issue Feb 14, 2025 · 2 comments
Closed

Style panel set properties indication doesn't work in case of calc() #4872

kof opened this issue Feb 14, 2025 · 2 comments
Assignees
Labels
area:styles Style Panel is the CSS panel on the right complexity:low Good for newcomers, up to a few days of work prio:1 The most important thing to work on type:bug Something isn't working

Comments

@kof
Copy link
Member

kof commented Feb 14, 2025

Discussion

Repro

  1. Set height to calc(10px)
  2. Collapse the section
  3. See the section dot indication doesn't display the value
Image Image
@kof kof added type:bug Something isn't working complexity:low Good for newcomers, up to a few days of work area:styles Style Panel is the CSS panel on the right prio:1 The most important thing to work on labels Feb 14, 2025
@victorchrollo14
Copy link
Contributor

hey @TrySound. are you working on this one.

I figured out what the issue is. we are not returning the dots array for css values whose type is unparsed, so when we set the value to calc(), the type is set as unparsed, hence the an empty array is returned.

if (
      styleDecl.usedValue.type === "unparsed" ||
      styleDecl.usedValue.type === "guaranteedInvalid"
    ) {
      return [];
    }

we could fix this in two ways.

  1. simply check if the styleDecl.usedValue.value contains calc in it and then we return the dots array. ( but I don't think this is a good fix )
  2. create a new type for calc() called computed, similar to how we have keyword type for values like auto, initial, inherit etc and unit type for values like em, %, px etc, so we don't treat cacl() as unparsed type.

@TrySound
Copy link
Member

These checks were added in this PR. Not sure it is the right solution. Let's delete it.

TrySound added a commit that referenced this issue Mar 25, 2025
## Description
fixes issue #4872 
removed the checks for unparsed style values that was returning an empty
array

## Steps for reproduction

1. use calc as a value in any of the inputs.
2. then close the section accordian to see the blue dot.

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [x] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [x] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

---------

Co-authored-by: Bogdan Chadkin <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:styles Style Panel is the CSS panel on the right complexity:low Good for newcomers, up to a few days of work prio:1 The most important thing to work on type:bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants