## Description
Adds the primary `translate`, `scale`, `rotate`, skew` properties under
transform section. Related to #3411
## Steps for reproduction
- Add multiple properties under the transform section.
- Update values of each property from the UI.
- Hide/Delete each individual property
## Todo
- [x] Need to discuss if the `isExperiemental` flag need to be removed
before merging the branch.
## Code Review
- [x] 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
- [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
- [ ] if any new env variables are added, added them to `.env` file
---------
Co-authored-by: Oleg Isonen <oleg008@gmail.com>
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 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.
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
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
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
These fields should have -webkit- prefix additionally to unprefixed
version to support more browsers.
- background-clip
- user-select
- text-size-adjust
## 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
Ref https://github.com/webstudio-is/webstudio/issues/2647
Here refactored overflow UI to update "overflow-x" and "overflow-y"
longhands instead of "overflow" shorthand.
Removed "overflow" from advanced panel suggestions.
Added support for expanding overflow shorthand for webflow copy paste.
And implemented very basic migrations utility
which always run after data is loaded from server
and sends patch for expanding overflow longhands.
Patch is not sent when no properties are modified. Though eventually we
will need to support versioning to avoid executing old migrations.
<img width="279" alt="Screenshot 2024-06-18 at 19 33 21"
src="https://github.com/webstudio-is/webstudio/assets/5635476/ce44385e-3316-4e34-bc9c-5f790cbdcd4f">
Ref https://github.com/webstudio-is/webstudio/issues/2647
Here upgraded to the latest mdn data and improved properties detection.
Excluded experimental and undocumented css properties.
- font-synthesis got longhands in mdn data
- background-position-x/y got excluded as experimental (though support
is good) but we anyway write as shorthand
- excluded white-space-collapse, text-wrap and text-wrap-* until decide
how to maintain them in the future
- field-sizing and zoom are new additions
## Description
fixes#3451
Allow `show/hide` for individual layers in `filters` and
`backdrop-filters`.
## Steps for reproduction
1. Add some layers for filters and backdrop-filters
2. Play with `show/hide` icon on each layer.
## 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
- [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)
Monorepo setup for storybook is very complicated, it has two major
problems
- it is very annoying to look for any link in commit status
- hard to upgrade comparing with single project setup
Here merged all storybooks into one in the root.
hyphenate-style-name utility is basically oneliner but requires to
install two packages. Considering we will switch to hyphenate property
naming by default, no reason to rely on this package.
Also switched to unprefixed property in css preview and property name
tooltips.
Just shows background-clip instead of -webkit-background-clip.
Ref https://github.com/webstudio-is/webstudio/issues/2903
Here added support for new `<ws:descendent />` component. It allows to
style any children or descendents of components. Primary usage is for
embed content which renders html and need to style tags.
Descendent component accepts "selector" prop which can be suffix like `
img`, ` .image` or `::first-child` pseudo-element.
Potentially it could be used as tag styling for any element.
Can be tested in any element by dropping "Descendent" component from
"internal" category.
Here refactored canvas styles with nesting rules which allow to update
each declaration incrementally and closer to our data format.
Things to test
- initial rendering
- updating values
- ephemeral values
- selecting state, rendered as separate stylesheet
Added shim.ts to contain simplified polyfills for future methods like
Set.prototype.difference which I use here to find added and deleted
styles.
Removed warning from parseCssValue which pollutes log with outdated
messages.
Additionally fixed old bugs
- support ephemeral styles with selector state, for example hover was
not updated on on canvas while updating ephemeral styles
- remove ephemeral custom property from body (bug appeared when added
support ephemeral styles in tokens)
Here got rid of top level stylesheet caching in favor of managing
caching by each rule. So nesting rule, font face and style rule based on
their inputs and methods manage own cached css string.
In stylesheet all the work left is building media queries and
concatenating all rules. This prevents hard to debug cached css after
updates.
Here used new nesting rules to generate atomic styles. Replaced separate
atomic style sheet class with just a method to generate styles
atomically. Inheritance doesn't work well with private fields caz
require a lot of internals to be public.
Seems like unprefixed background-clip: text is supported in all browsers
including chrome (since december 2023) and no longer need to have
workarounds with var().
Though still left prefix in css engine to have better support for
published sites.
Nesting rule is universal representation for
instance style with support for nested state selectors and nested media
queries. Css is generated css of course without css nesting and optimize
media queries but in the future may be generated with nesting for
simplicity.
This is essential to support mixins in css engine. Will support it in
atomic css in other PRs.
## Description
Use canary react
## 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.example`
and the `builder/env-check.js` if mandatory
With new remix setup we may finally not need hoisted linker which makes
pnpm very buggy.
Here added all missing dependencies to package.json and removed node
linker from .npmrc.
## 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.example`
and the `builder/env-check.js` if mandatory
Ref https://github.com/webstudio-is/webstudio/issues/1536
Here added support for css custom properties in style object model.
Added guaranteed-invalid value to schema to represent initial value of
custom properties.
## 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.example`
and the `builder/env-check.js` if mandatory
## 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.example`
and the `builder/env-check.js` if mandatory
## 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.example`
and the `builder/env-check.js` if mandatory
Bogdan Chadkin