## 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
## Description
ref #877 - the ability to parse multiple gradient layers from Figma
closes#1255 - now background added at the top
fixes css value input invalid input now shows as invalid
## Steps for reproduction
Copy some background from figma like
```
background: linear-gradient(180deg, #11181C 0%, rgba(17, 24, 28, 0) 36.09%), none, linear-gradient(180deg, rgba(230, 60, 254, 0.33) 0%, rgba(255, 174, 60, 0) 100%), radial-gradient(54.1% 95.83% at 100% 100%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(122.33deg, rgba(74, 78, 250, 0.2) 0%, rgba(0, 0, 0, 0) 69.38%), radial-gradient(92.26% 201.29% at 98.6% 10.65%, rgba(255, 174, 60, 0.3) 0%, rgba(227, 53, 255, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, radial-gradient(84.64% 267.51% at 10.07% 81.45%, rgba(53, 255, 182, 0.2) 0%, rgba(74, 78, 250, 0.2) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, #EBFFFC;
```
Open any layer paste it into the code, and click enter or blur.
See layers added. BGColor has changed if set.
## 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
- [ ] 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
- [x] 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
ref #877
As in this comment part 1
https://github.com/webstudio-is/webstudio-builder/issues/877#issuecomment-1441897685
<img width="647" alt="image"
src="https://user-images.githubusercontent.com/5077042/223226959-3e9b1832-07aa-425b-afcf-27f7cdafa85c.png">
You can add/remove layers. View/Hide not working. No drag.
## Steps for reproduction
Create new project. (existing could not work well because of migration)
Create background layers. Add images. Set various background layers
params.
## 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)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [x] 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: Oleg Isonen <oleg008@gmail.com>
## Description
This implements object fit and inside a position control to be reused
with background position and others.
https://user-images.githubusercontent.com/52824/223282840-92b54da6-686d-45fe-8fe8-4422beb7572e.mp4
## Steps for reproduction
1. sizes section
2. object position
## 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
ref #877
As a part of above I'm changing
```
export const ImageValue = z.object({
type: z.literal("image"),
value: z.array(z.object({ type: z.literal("asset"), value: ImageAsset })),
});
```
to
```
export const ImageValue = z.object({
type: z.literal("image"),
value: z.object({ type: z.literal("asset"), value: ImageAsset }),
});
```
In favour of using in next PRs
```
const ArrayValue = z.object({
type: z.literal("array"),
value: z.array(z.union([UnitValue, KeywordValue, UnparsedValue, ImageValue])),
});
```
For now, to not break compatibility with existing code I'm not
converting to an array immediately.
Just style types simplification.
'array' type is not now supported on db level, parse/serialize will not
work. Will be done in following PRs
## 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-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
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
## Description
1. What is this PR about (link the issue and add a short description)
Enable using css functions in CssValueInput
closes#990
## Steps for reproduction
Add
`blur(2px)` or
`drop-shadow(16px 16px 20px blue)` or
`blur(2px) drop-shadow(16px 16px 20px blue)` to the filter field
It should work.
## 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-designer/blob/main/apps/designer/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `designer/env-check.js` if mandatory
Jaya Krishna Namburu
