## Description
Needed to support all wf presets for fixing this
https://github.com/webstudio-is/webstudio/pull/4155
## Steps for reproduction
1. click button
2. expect xyz
## 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
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] 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
Ref https://github.com/webstudio-is/webstudio/issues/3399
Initially css variable fallback was defined in schema as array though
it's actually a single value by spec and may contain commas. We don't
have css variables in data yet so should be safe to change schema before
too late.
## Description
This PR is to kick off the #3448 track. First of everything we need to
build the gradient selector/indicator
Which should be able to parse the gradient and pick the `stops` and
`colors` and `hints` from it.
## Steps for reproduction
1. click button
2. expect xyz
## 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
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] 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
Here replaced utils for adding and editing transitions with generic ones
which should cover cases for most other sections.
Can be tested adding and editing transitions and code
## Description
This PR adds tooltips for all the layer based sections in the transform
property. The rest of the properties already have their tooltips managed
by the `PropertyName` component. I have taken our previous tooltips as
based and used a AI suggested one and proof read those. So, please let
me know if there are any suggestions to change.
## Steps for reproduction
- verify tooltips for `translate`, `scale`, `rotate` and `skew`,
`box-shadow`, `text-shadow`, `drop-shadow` properties.
## 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
## Before merging
- [x] tested locally and on preview environment (preview dev login:
5de6)
fixes#3963
## Description
Adds `offset-position` property to be available under the advanced
section. Of all the `offset-*` properties. Looks like only `position` is
marked as experimental in `mdn-data`. But, according to can-i-use. It
seems it has a fair amount of support among browsers.
https://caniuse.com/mdn-css_properties_offset-position
## Steps for reproduction
- Add `offset-position` property under the advanced tab.
- check for description of the property.
- Ability to reset the property from the advanced tab.
## Code Review
- [ ] hi @TrySound , 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:
5de6)
## Description
This PR allows to parse the `perspective-origin` property value as
`tuple`. And added test cases for different possible values.
## Steps for reproduction
- Allows to parse `perspective-origin` values as tuples.
## Code Review
- [ ] hi @TrySound , 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
- [x] 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:
5de6)
- [x] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [x] added tests
Ref https://github.com/webstudio-is/webstudio/issues/1536
We have a proper parser which can convert raw css into webstudio styles.
Rewrite should simplify maintaining and allow to change final format
without big rewrites.
## Description
The current parser is not able to parse all the possible values for
`transform-origin` property. The property takes `single`, `double` and
`triple` values. So these need to be parsed as `tuples` to support
`triple` values now.
## Code Review
- [ ] hi @TrySound , 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
## Before merging
- [x] tested locally and on preview environment (preview dev login:
5de6)
- [x] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [x] added tests
Fixes
https://discord.com/channels/955905230107738152/1265688229529784320
wf embed is display block by default, but we have nothing that would set
this because our own preset sets display to content
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1 copy code embed/html embed from webflow
2.paste it and see the display is block, not contents
## 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
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] 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
Here refactored value parser with literal parser
which can be reused in all functions, tuples and layers.
Color parser now relies on specific ast types.
Tuples are generated for all values with multiple nodes.
This all will let us build more universal parsers with less effort.
Here added new utility for builder to support parsing css fragments in
style controls like background, transition, shadows etc.
The idea is to use regular parseCss where possible and fallback to
specified property parsing.
This way we do not need to strip property name manually and can always
have shorthands expanded in result.
Also user can paste multiple properties at once like background-color
and background-image when describe gradient.
<img width="266" alt="Screenshot 2024-07-11 at 16 38 06"
src="https://github.com/webstudio-is/webstudio/assets/5635476/8d3b8454-0f8a-48b2-adbd-389a28993e3a">
## Description
Adds support for parsing `scale` css property. Will be used in bringing
support for transforms ection in style panel.
## Code Review
- [ ] hi @TrySound , 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
- [x] 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:
5de6)
- [ x added tests
## Description
Parses `translate` css property and converts them into tuples. Related
to the series of PR that enables transform property #3411
## 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
## Before merging
- [x] tested locally and on preview environment (preview dev login:
5de6)
- [x] added tests
## Description
Parse `transform` value into tuples. We need to use shorthand transform
property for `skew` and `rotate` to support the UX.
- **skew** doesn't have individual property yet. So need to use this as
backup.
- **rotate** doesn support setting individual `x, y, z` properties on
the long hand property like in the design. So, we are can use transforms
as backup and allow to set individual `rotateX`, `rotateY` and `rotateZ`
values.
## Code Review
- [ ] hi @TrySound , I need you to do
- detailed review (read every line)
## Before requesting a review
- [x] made a self-review
## Before merging
- [x] tested locally and on preview environment (preview dev login:
5de6)
- [x] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [x] added tests
## Description
This
<img width="856" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/f8894380-0dbb-45c7-a1a5-410dbcb01fc8">
To this
<img width="1049" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/bf618095-08be-4c6f-850f-56354e74e738">
## Known issues:
### All
- w-nav-link preset colors do not match
### Mobile
Mobile burger is not shown
- w-nav-button does not have breakpoint style i.e. display: none->block
for mobile
- w-nav-menu does not have breakpoint related style i.e display: block
-> none for mobile
- we don't have widget icons like burger i.e. `"data": { "widget": {
"type": "icon", "icon": "nav-menu" } }` _having breakpoint issues and
that user in any case need to use Sheet on mobile this is ok_
## Steps for reproduction
Copypaste Navbar from webflow 2 webstudio
## 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
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] 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: Oleg Isonen <oleg008@gmail.com>
All value parsers can be generalized at some point to make adding new
feature easier. Here moved timing-function parser into value parser and
reused it in builder.
Ref https://github.com/webstudio-is/webstudio/issues/2647
Here added additional `breakpoint` property to parsed style declaration.
It basically a sanitized media query like `(min-width:768px)` which is
easy to parse. Styles inside unsupported conditions are just stripped
away.
Ref https://github.com/webstudio-is/webstudio/issues/2647
We need to support more grouping properties in parsed css for example
breakpoints would require additional nesting.
Here I took slightly different approach and moved all styles into single
array with additional `selector` property.
Now we can easily support parsing styles without selectors and parsing
styles without breakpoints. And optionally we can always use
`Map.groupBy(styles, styleDecl => styleDecl.selector)` and the same
later by breakpoint.
## Description
Numbers like `.65` were not parsed as valid.
Also I don't think we need to use regexps to check functions validity.
There can be vars calc and anything inside
## Steps for reproduction
1. click button
2. expect xyz
## 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
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] 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
Here improved our checks. No longet rely on "checks" script but run
"test" and "typescript" scripts from each package in monorepo.
Would also make each package less boilerplaty.
Ref https://github.com/webstudio-is/webstudio/issues/2647
Here improved our value parser to not output invalid type every now and
then and just represent unknown properties as unparsed. This will let us
parse it in the future without loosing anything on paste.
Here added universal support for css wide keywords. initial, inherit and
unset will be parsed the same way for layered properties and singular
properties.
It will never be part of layers and always be represented as root
keyword.
Oleg Isonen