## Description
fixes#3355
Allows filter parser to parse `rgba` and `hex` values when copy pasted.
I added some tests for filters too, we added initiall before as the css
filters parser returns false positives. But now, i added all the valid
tests, so at least we can catch things like this in future.
## Steps for reproduction
- Use the following filter values to test them.
```
drop-shadow(10px 10px 25px blue)
drop-shadow(10px 10px 25px rgba(0, 0, 255, 1))
drop-shadow(10px 10px 25px #0000FF)
```
## 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
There are still certain places in tests where we are using external
snapshots in property-parsers. Moved those to inline now and updated the
snapshots.
## Code Review
- [ ] hi @kof, I need you to do
## Before requesting a review
- [x] made a self-review
## Before merging
- [x] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [x] added tests
## Description
`box-shadow` and `text-shadow` both share the same syntax signature.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#syntaxhttps://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow#syntax
The only difference is `text-shadow` don't have `inset` and `spread`
values. And added a extractor which can be used in future for
text-shadow UI.
## 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] added tests
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)
fixes#3243
## Description
We should use tuples for handling filters. Don't know when i switched to
layers, but the initial implementation of the filters started as tuples
itself.
- [ ] We might probably need a migration for the existing projects to
change it to tuple if needed. Let me know, I can help with that as well.
## Steps for reproduction
1. Add a css filter in the sections panel.
2. Add another css filter and edit it using the code view.
3. Swap filters using the drag and drop action.
4. Deploy the project and the multiple filters applied in the same
element should work as expected.
## 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
- [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
Closes https://github.com/webstudio-is/webstudio/issues/3203
If DOM parser is available, let it do the parsing and don't rely on
csstree if possible for validation
## 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
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
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
This is the first one from the `box-shadow` UI series. Starting with the
extracting individual resources from the `TupleValue`
Related to #2523
## 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
fix no-underline
## 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
closes#2405
## 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
Adds utils to work with JSX and transform it to Webstudio Embed Template
as well as converting Tailwind styles to Webstudio Embed Template style
declarations and a fake `<HeroIcon>` component to `HtmlEmbed` with
inline SVG taken from heroicons (we will need this for ai).
## Description
1. I was wrong about borders conversion when wrote shorthand, fixed.
2. Add border-style: solid whenever needed if borderWidth is defined
(tailwind has border-style: solid predefined)
3. Add box-shadows transform
## Steps for reproduction
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
## Description
1. Add support of simple tuple types to the parseCssValue
2. Add background properties conversion
## 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
## Description
transform tailwind classes to webstudio format
Next PRs.
Postprocessing backgrounds and shadows support. As of now backgrounds
will be drawn but will not be visible at style panel
## 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
## Description
- apply tailwind transform, expand and substitute to get compatible css
with webstudio
- media and pseudo classes temporarily removed from variable
substitution (need specificity calculations for both, we don't support
media in templates)
## 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
## 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
## Description
This is a WIP PR, and will be adding more details about the feature and
the changes that are going in...
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi, 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
---------
Co-authored-by: Bogdan Chadkin <trysound@yandex.ru>
Co-authored-by: Oleg Isonen <oleg008@gmail.com>
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
- Fixes a bunch of wrong logic for showing style source origin info in
the tooltip
- Renders GPT descriptions
## Steps for reproduction
1. check tooltips in style panel
## 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
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
closes#1751
useEffect unsubscribe called parsing and unhandled error caused
everything to break
## 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
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.
:active and :visited states on links have special behaviour. They are
vendor defined until color on stateless link is defined. Similar to how
vars work there is var with default. And when var is somewhere defined
default is overriden.
Though using vars for this specific case is too complex here easier
solution. We can just remove active and visited states on default
styles. User may never see this inconsistency as usually would modify
color on stateless link first and then go to active or visited states.
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
closes#1304
To not expose computed style or do hard currentColor recalculation. I
added currentColor: StyleValue to the styleInfo color property.
## Steps for reproduction
Set currentColor on border or background or color, see in color picker
it works
## 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
Jaya Krishna Namburu