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.
Ref https://github.com/webstudio-is/webstudio/issues/2647
Here replaced shorthand background-position with
background-position-x and background-position-y
Added shorthand expander, migration and merger
for css engine to improve browser support for offsets.
## Description
- fix all types of links (wf doesn't use attr for those, completely
custom data structure)
- update presets, add tons of missing presets
## 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/2647
Here moved the logic to parse values as layers
from parseCss to parseCssValue utilities
so we could get correct values for example when expand shorthands in
migrations or try to parse unparsed values.
We duplicate the logic for parsing css for ai and webflow. Here a bit of
cleanup to simplify further work on shorthands.
Also upgraded unocss and got rid of bug workaround (fixed in unocss)
## Description
1. What is this PR about (link the issue and add a short description)
## 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
## Description
Add support for background parsing into webstudio layers.
With partial support of webflow copy-pasting.
Main support will be in the next PR.
https `id`s are temporary used instead of real URLs to avoid various
encoding/decoding issues, will be changed in next PR or PRs
## Steps for reproduction
Copy-Paste something like this
<img width="1069" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/caf827db-a6f7-43d6-b19c-4467fa1e3968">
Get this
<img width="286" alt="image"
src="https://github.com/webstudio-is/webstudio/assets/5077042/6a59beee-4eea-4f6b-840a-20684e0c0be8">
## 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
## Description
- support pseudo states
- support pseudo elements
## 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
fixes#3593
## Description
This PR
- drops the `parseTransition` for parsing shorthand transition property.
- allows migration of existing transition property to long-hands.
- drops parsing `transition` when added from advanced tab. Because if we
parse and add it as proper layers. It will get remigrated again every
time the app is loaded.
- Adds tests for parsing individual transition properties and even
parses timing functions as timing functions now.
- [x] there is a bug associated with expanding transitions from
shorthands #3608 . Once fixed we need to test the new `FunctionValue`
parsing behaviour.
## Steps for reproduction
- Any previous values of `transitions` should we migrated into new
approach and should be available in the style-panel for using them.
## 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
## Description
fixes#3567
Use long-hand properties to save `transition` values in the style-panel.
## Steps for reproduction
- Add some layers in transition panel in UI.
- Delete some layers
- Swap some layers
## TODO
- [ ] Allow `show/hide` for each layer.
- [ ] Add tests for all the layer handlers for transition.
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
@TrySound i made some refactor to use individual properties as
long-hands instead of short-hand property. I am still yet to add tests
for the new handlers, since they need to be handled in a different way
now for transitions. But you can still play around with the current
setup.
## 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
## Description
- updated mdn build
- fixed font-width
- render unset instead of var()
- skip properties with empty values
- temp rendering input instead of select
- remove the flag
- unprefix -webkit-appearance
## 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
## Description
- adds breakpoints when they are missing
- adds some form components
- rewrites tests to jsx
https://share.descript.com/view/yOz2JeAdrXW
## 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
Oleg Isonen