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
## 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>
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
- 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
- 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
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
Closes https://github.com/webstudio-is/webstudio/issues/3529
## Description
Values that can have custom identifiers (user defined string) were
tested to accept a unit value and they did, because anything is valid.
Now they are not tested with units any more
## Steps for reproduction
1. add animation-name in advanced panel
2. use any name it should stay as-is
3. previously we would add a "px"
## 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
- webflow css preset
## 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
Turns out no-internal-imports did not forbid anything out of the box but
requires specifying specific folders to forbid. This does not scale well
and this rule mostly harms because requires either excluding each
package with submodules or suppressing it with comment.
## Description
Bringing the changes from
https://github.com/webstudio-is/webstudio/pull/3166 as a separate PR
## 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
We allow console.info (btw we should also allow warn/error/info), we
only disallow console.log in the linter because that's what we use for
debugging.
## Steps for reproduction
1. click button
2. expect xyz
## 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
- [ ] 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. Allow scrub on any css value that can be numeric, no matter what
current keyword value might be selected
2. Adjust scrub speed depending on the unit
## Steps for reproduction
1. try scrubing any css value
3. backdrop fill in the effects section won't allow to scrub , which is
correct
4. try changing dfferent units and see how it feels, if the speed is
appropriate
## Code Review
- [ ] hi @istarkov , 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
Adds support for `css-transitions` when users are in `local` state. In
any other state than local, the CRUD operations on transitions are
disabled.
Ref https://github.com/blakeembrey/change-case/releases
Change case in last major merged many packages into one to simplify
maintaining and usage. A few packages like title-case are still separate
as more rare case.
- replaced no-case with change-case (merged into change-case)
- replaced param-case with change-case (merged into change-case and
renamed to kebab (finally))
- replaced camelcase with change-case (has own camelcase utility)
- bumped title-case
## Description
Gonna merge this before next step.
Helper functions to parse tailwind.
1. `expandTailwindShorthand` - Expands shorthand CSS properties into
their long-form equivalents. _'mx' is expanded to 'mr' (margin-right)
and 'ml' (margin-left)._
2. `substituteVariables` - Resolves CSS variables by replacing their
references with actual values. _Transforms `.class { --property: 1px;
margin: var(--property); }` into `.class { margin: 1px; }`._
## Steps for reproduction
See tests.
## 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
Css-data now responsible for generated data and parsers which requires
heavy dependencies like csstree and openai.
Here moved style schema into css-engine which makes is responsible for
own input representation. So now schema and serialization are co-located
in single package.
Cli install size
```diff
du -ck node_modules
- 42680
+ 35516
```
## Description
Adding font smoothing by default to the Body component
https://discord.com/channels/955905230107738152/955907787299360788/1132882679189229649
```
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
```
## Steps for reproduction
1. open any project, see in dev tools these 2 added (or check visually)
## Code Review
- [ ] hi @istarkov , 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-builder/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
Based on discussion, now space section tooltips are shown only on label
hovers
Supports alt/shift clicks
- [x] - During hover alt/shift works
- [x] - In case of multiple properties sources now group them
<img width="292" alt="image"
src="https://github.com/webstudio-is/webstudio-builder/assets/5077042/029b60a5-9a4e-4d85-ba2e-3db4fbbb344d">
## 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-builder/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
While turborepo does not work for us we can try to solve long checks
time with builtin caching. Eslint provides similar one to prettier we
already use.
```
pnpm -r lint
51.53s
pnpm eslint . --ext .ts,.tsx --max-warnings 0
18.10s
pnpm eslint . --ext .ts,.tsx --max-warnings 0 --cache (with cache)
1.82s
```
In this PR I removed all lint scripts in packages and added global one
in the to github workflow. It saves like 30s on my laptop because pnpm.
Already stored cache makes linting almost instant.
Also bumped all eslint dependencies.
Ref https://github.com/webstudio-is/webstudio-builder/issues/1536
Here replaced browser getComputedStyle for currentColor with computing
from data.
`color: inherit` is now considered same as `color: currentColor` and
displayed properly in UI.
Changed initial value for color from inherit to black (in mdn-data it's
canvastext).
Fixes#1793
## Description
I tweaked the prompt and generated new descriptions.
@kof @taylornowotny The results are still not ideal but please take a
look and decide whether we should merge these changes or not (probably
still better than the previous generation).
PS: I tweaked the script a bit so now it creates: `propertiesOverrides`
and `propertiesGenerated` (same for property:value descriptions). This
way we can add overrides to `propertiesOverrides`
---------
Co-authored-by: Giuseppe Gurgone <ggurgone@users.noreply.github.com>
## Description
Using ChatGPT, this scripts generates descriptions for CSS properties
and declarations (property-value).
It uses `keywordValues` from
[`src/__generated__/keyword-values.ts`](https://github.com/webstudio-is/webstudio-builder/blob/css-data-descriptions/packages/css-data/src/__generated__/keyword-values.ts)
to get a list of all the properties and values.
The result is a TS module located at
`./src/__generated__/property-value-descriptions.ts` which exports:
- properties
- declarations
By default it generates descriptions only for new properties/values,
however you can use the `--forceRegenerate` flag to regenerate
everything.
When it comes to generating descriptions for declarations whose value is
a color eg. `background-color: orange` we generate a description for a
generic `property: {color}` declaration (e.g. `background-color:
{color}`) and GPT will generate a description template with a
placeholder `{color}`.
The script then repeats the template for every color value, replacing
`{color}`. This is to avoid generating a ton of similar description and
wasting GPT tokens.
The script needs two env variables:
- process.env.OPENAI_KEY - Your OpenAI API key
https://platform.openai.com/account/api-keys
- process.env.OPENAI_ORG - Your OpenAI Org ID
https://platform.openai.com/account/org-settings
## Steps for reproduction
Run it
```
OPENAI_KEY=your-key OPENAI_ORG=your-org pnpm build:descriptions
```
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- review sample descriptions
## Before merging
- [x] Get approval on sample descriptions
- [x] Generate all the descriptions
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
---------
Co-authored-by: Giuseppe Gurgone <ggurgone@users.noreply.github.com>
Co-authored-by: Oleg Isonen <oleg008@gmail.com>
Ref https://github.com/webstudio-is/webstudio-builder/issues/1301
## 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-builder/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
This PR moves the parse-css-value utility that was before part of the
builder app to the css-data package.
In this package we are adding an initial `parse-css` utility that will take
CSS and convert to a format that we can work on within Webstudio. For
now it is relatively simple and it supports only CSS classes parsing.
Ref https://github.com/webstudio-is/webstudio-builder/issues/1067
We need to move away from getComputedStyle for not local styles in style
panel.
Here added default html style from browser sources. Now we can render it
and properties initial styles instead of computed styles.
Also fixed in properties data generation currentcolor -> currentColor
and removed same from border presets.
## Description
closes#1378
## Steps for reproduction
Take any css property, see it contains
initial, inherit, unset
## 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-builder/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
Backgrounds part 2. ref #877
- [x] - remove repeat section under gradient part
- [x] - info Icon for gradient "code"
The floating panel, gradients support.
<img width="508" alt="image"
src="https://user-images.githubusercontent.com/5077042/224417159-22a27ffd-6460-4d97-8891-f14a9a3331a3.png">
No drag, no hide, no smart insert
## 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-builder/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
There are multiple problems with clipping to text:
1. it is only supported with vendor prefixed -webkit-background-clip
2. it doesn't work with CSS vars (not using them on canvas for this)
## Steps for reproduction
1. add heading
4. set background image src to some image
5. set color to transparent
6. set background-clip to text
7. Background image should be clipped to text
<img width="294" alt="Screenshot 2023-02-24 at 13 49 22"
src="https://user-images.githubusercontent.com/52824/221194656-9e4591ed-5727-45f0-8560-eba35e278819.png">
## 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
- [ ] 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-builder/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-designer/issues/366
There were many unitless initial values with "px" unit. Here I extracted
all possible unit types from properties syntaxes. csstree provides a
list of unit groups which in the future will let us provide correct list
of units for css value input.
While fixing units found a lot of keywords appear from css functions
which are complex values and should be ignored. So here I changed
traversing of properties syntaxes to support only top level values and
keywords.
Mostly gone color words
```diff
-6639 lines 116 KB
+4808 lines 85.8 KB
```
See diff for more info
Ref https://github.com/webstudio-is/webstudio-designer/issues/366
Parsed initial values to get correct unit instead of px for some
properties. There is still edge case with unitless values I'm gonna fix
in another PR.
Also bumped mdn-data and removed overrides fixed on mdn side.
Bogdan Chadkin
