81 Commits
Author SHA1 Message Date
Oleg Isonen f08b72439c fix: Preserve calc flex basis in fragment styles (#6585)
Closes #6584

## Change
A `flex` shorthand with a nested `calc()` and CSS variable could lose
its basis during expansion. Keep the complete basis when it appears
alone, before the numeric flex factors, or after one or two factors. The
parser handles these forms without a function-name list.

Also update `mdn-data` from 2.33.0 to 2.37.2, as requested for this PR.
Regenerated CSS data adds `scroll-axis-lock` and `window-drag`, marks
`zoom` animatable, and refreshes MDN links. The two new property article
links currently lead to missing pages, so the generator uses its
existing MDN search fallback for them. The flex grammar in MDN data did
not change.

The flex parser changes add 20 net non-test lines. The dependency update
adds 3 net handwritten lines in the generator; the rest is package
metadata and generated output.

## Verification
- The reported shorthand regression and a `parseCss` comparison against
explicit longhands failed before the parser fix and pass afterward.
- CSS-data tests: 4,657 passed, 1 skipped. CSS-engine tests: 173 passed.
Targeted Builder Chromium tests: 27 passed.
- CSS-data, CSS-engine, and Builder typechecks; root lint; formatting;
and `git diff --check` passed.
- Frozen lockfile install and the full fixture link/sync/build pipeline
passed. The only fixture output drift came from unrelated synced sitemap
content and was excluded.
- Both CSS generators produced stable output on a second run. Both
fallback MDN search links returned HTTP 200.
- Reviewed Builder `docs/`: no documentation change is needed. Existing
guidance covers property status and animation choices.

## Known limitation
`calc-size()` is preserved during shorthand expansion, but the separate
longhand validator still marks it invalid in non-browser builds. Numeric
and basis functions can also be ambiguous until CSS variables resolve;
this fallback handles the reproduced basis forms, not every possible
calculation.

## Checklist
- [x] Reproduce the reported nested `calc()` value and cover shorthand
and saved-style parsing.
- [x] Preserve the full basis without changing simple flex expansion.
- [x] Simplify the fallback parsing, remove the function-name list, and
test another valid basis function.
- [x] Update `mdn-data` to 2.37.2 and regenerate CSS data and variable
fixtures.
- [x] Use working MDN search links for the two new properties whose
articles return 404.
- [x] Review generated CSS, type, and fixture changes.
- [x] Run CSS tests, typechecks, lint, formatting, and fixtures.
- [x] Review Builder `docs/` for both changes; no documentation update
is needed.
- [x] Review the diff and commit only related files.
- [x] Resolve review feedback for calculated flex bases with optional
factors and basis-first order.
- [x] Verify required PR CI checks after the final update.
2026-10-23 17:24:25 +02:00
Oleg Isonen ab5717c9cf feat: Support CSS properties of every status (#6166)
## Summary

- Make every CSS property in the current MDN dataset available in the
Advanced style workflow, regardless of standards status.
- Mark experimental, nonstandard, and obsolete properties with a yellow
warning icon, status-specific tooltip, and MDN link.
- Add complete CSS anchor-positioning property and value support.
- Update `mdn-data` from 2.28.0 to 2.33.0 and `css-tree` from 3.1.0 to
3.2.1.

## Root cause

Webstudio generated its supported property list from MDN data but
filtered by status and then manually allowed a few experimental and
nonstandard entries. A property could therefore exist in the installed
MDN package without being exposed by the Builder.

Runtime validation had a separate grammar gap. CSS-tree 3.2.1 now
includes the anchor functions and alignment values, but its bundled data
predates the current `position-anchor: normal | match-parent` additions.

## Implementation

- Remove status-based property filtering and the nonstandard-property
allowlist.
- Generate one property-to-status map for 486 standard, 40 experimental,
119 nonstandard, and 15 obsolete properties.
- Show status-specific browser-compatibility guidance for every
non-standard status. Active declarations keep the warning after the
value with 3px left spacing.
- Infer MDN links from existing property metadata and fall back to MDN
search for entries without a direct URL.
- Preserve known vendor prefixes from the generated property inventory
instead of maintaining a prefix allowlist.
- Generate WebKit text fill/stroke longhands directly from MDN instead
of preserving them through parser exceptions.
- Preserve unsupported initial-value shapes as unparsed CSS rather than
excluding their properties.
- Use CSS-tree 3.2.1's native anchor-function and alignment grammars.
Keep one narrow extension for the current `position-anchor` keywords
missing from its bundled MDN data.
- Generate recursively flattened shorthand longhands and initial values
from MDN.
- Expand syntax-defined shorthands generically from CSS-tree's matched
property captures, including function-valued components.
- Decline generic expansion when CSS-tree and MDN disagree about the
longhand set or a longhand repeats.
- Update the font grammar reference and CSS math validation for CSS-tree
3.2.1 compatibility.
- Regenerate CSS metadata and property-variable fixtures.

## Checklist

- [x] Include MDN properties regardless of status.
- [x] Generate status metadata for standard, experimental, nonstandard,
and obsolete properties.
- [x] Show warning icons in Add styles results and active declarations.
- [x] Add status-specific consequences and MDN links.
- [x] Preserve generated vendor-prefixed properties during CSS import.
- [x] Generate WebKit text fill/stroke longhands without parser
exceptions.
- [x] Support `anchor()`, `anchor-size()`, and `anchor-center`.
- [x] Support current `position-anchor` keywords.
- [x] Expand syntax-compatible shorthands through generic MDN metadata
and CSS-tree captures.
- [x] Cover ordered optional, unordered, slash-separated,
function-valued, omitted, CSS-wide, variable, invalid, and
incompatible-data cases.
- [x] Verify new status, warning, prefix, and shorthand tests fail
without their implementations and pass when restored.
- [x] Update to CSS-tree 3.2.1.
- [x] Regenerate CSS metadata and property-variable fixtures.
- [x] Review documentation impact; no authoritative Builder
documentation lists individual supported CSS properties, so no update is
needed.
- [x] Review fixture impact; 668 fixtures and 2,030 valid cases were
regenerated with zero unsupported.

## Verification

- `pnpm --filter @webstudio-is/css-data test` — 4,618 passed, 1 skipped.
- Builder CSS editor and property-status tests — 25 passed.
- CSS data, CSS engine, Project Build, and Builder typechecks passed.
- Lint, formatting, repeated regeneration, and diff checks passed.

## Known limitation

This change covers CSS declarations and values. It does not add a
dedicated Builder editor for the `@position-try` at-rule.

Closes #6162
2026-08-17 14:54:11 +02:00
Oleg IsonenandClaude Fable 5 de23e2a888 chore: migrate toolchain to oxc (oxfmt, oxlint, rolldown-vite) and typeScript 7 (#5868)
## prettier -> oxfmt (0.58.0)

- .oxfmtrc.json generated with `oxfmt --migrate=prettier`: trailingComma
es5, printWidth 80 (oxfmt defaults to 100), sortPackageJson disabled,
.prettierignore patterns folded in (file deleted).
- ignorePatterns additionally exclude yml/yaml/toml/jsonc and
packages/cli/templates/** so oxfmt covers exactly the file set prettier
used to format (ts,tsx,js,json,css,md) and never touches user-facing
scaffolding artifacts.
- root `format` script, nano-staged pre-commit hook and the CI check
(`pnpm oxfmt --check`, replacing `prettier --cache --check` and its
actions/cache step — oxfmt checks the whole repo in ~0.7s) now run
oxfmt.
- every generator script that ran `prettier --write` on __generated__
output now runs `oxfmt` (css-data, icons, html-data, postgrest, sdk,
sdk-components-*, apps/builder tailwind preflight).
- the four scripts that used prettier's JS `format()` API write raw
source instead and their package.json scripts pipe the generated file
through the oxfmt CLI: project-build generate-docs +
generate-runtime-operation-contracts, cli generate-docs, apps/builder
generate-server-only-api-metadata. oxfmt rejects paths containing "..",
so cross-package generated files are formatted via a subshell cd into
the owning package.
- one-time reformat: oxfmt's canonical output differs from prettier on 8
repo source files (binary-operator continuation indent, import() call
wrapping, sub-pixel spacing of empty for-clauses); oxfmt honors existing
`// prettier-ignore` comments so intentional layouts are kept.
- prettier remains ONLY as a cli devDependency for the
prettier/standalone HTML normalizer inside html-to-jsx.test.ts, and
inside fixtures/ + packages/cli/templates/ (ships to scaffolded user
projects; out of scope here).
- editor config switched from esbenp.prettier-vscode to oxc.oxc-vscode
(devcontainer extension list, .vscode editor.defaultFormatter).

## oxlint 1.56 -> 1.73

- oxlint 1.73 rules-of-hooks special-cases hooks NAMED useEffectEvent:
their results may only be called from effects. Our
app/shared/hook-utils/effect-event.ts is a stable-callback helper
(useEvent pattern), intentionally called from event handlers and passed
as props. The rule is disabled via .oxlintrc.json overrides for the five
files doing this (product code untouched); note those files lose
hook-order linting entirely until the rule becomes configurable.

## TypeScript 5.8.2 -> 7.0.2 (native compiler)

- `tsc` is now the Go-based native binary; all `tsgo` script usages
(workspace packages and fixtures) renamed back to `tsc` and
@typescript/native-preview removed (the package is being phased out).
- fixes for TS7 changed defaults and stricter checks:
- `types` now defaults to [] -> base tsconfig sets "types": ["node"]
(restores the implicit-@types/node behavior of TS5).
- `rootDir` now defaults to ./ -> every tsconfig.dts.json sets
"rootDir": "./src" (TS5011 otherwise).
- import assertions removed -> cli/src/cli.ts uses `with { type: "json"
}` (TS2880).
- stricter isolatedDeclarations inference -> explicit annotations in
css-data bin/property-filter.ts (TS9010) and image image-dev.stories.tsx
(TS9013).
- declaration serialization limit -> project-build builder-runtime.ts
runtimeOperationContracts gets an explicit type (TS7056); the annotation
preserves the narrow RuntimeOperationId union.
- TS7 ships no stable programmatic API:
- react-sdk (component-generator tests drive the compiler API) aliases
its typescript devDependency to @typescript/typescript6@^6.0.2; its bin
is `tsc6`, so the package's typecheck still runs native TS7 tsc from the
workspace root.
- generate-arg-types keeps typescript 5.8.2 for react-docgen-typescript.
- fixtures/ and packages/cli/templates/ keep typescript 5.8.2
(user-facing); fixture scripts still work because plain `tsc` resolves
to their local dependency.

## vite -> rolldown-vite 7.3.1 (oxc bundler)

- global pnpm override `"vite": "npm:rolldown-vite@^7.3.1"`: the builder
app (remix v2 vite plugin works unmodified), every package vite build
and the storybook build now bundle on rolldown/oxc.
- vitest is scoped BACK to vanilla vite via `vitest>vite`,
`vite-node>vite` and `@vitest/mocker>vite` overrides because vitest
3.1's runner does not understand rolldown's SSR transform
(__vite_ssr_exportName__ ReferenceError in every suite).
- those overrides pin vite EXACTLY to 6.3.4: letting ^6.3.4 float to
6.4.3 breaks cli prebuild tests (dynamic import of a generated
app/routes/$.tsx fails to resolve under 6.4.3's loader).

## unrelated cleanup requested during review

- apps/builder commands.ts imports duplicate-tokens-group statically
instead of via dynamic import. The circular dependency the dynamic
import guarded against only exists through the command-panel barrel
(command-panel.tsx > groups/index.ts > commands-group.tsx >
commands.ts); importing the group module directly is cycle-free
(verified with madge), matching the neighboring wrap-group and
convert-group imports.

## verification

- pnpm lint, oxfmt --check: clean.
- pnpm -r typecheck (TS7 native) and pnpm dts: clean.
- pnpm -r test: all suites pass (builder 2093 tests, cli 630, react-sdk
45, project-build 11, ...).
- builder app build, full workspace build, cli build and storybook build
all succeed on rolldown-vite.

## 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:
0000)
- [ ] 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: Claude Fable 5 <noreply@anthropic.com>
2026-07-12 01:03:36 +02:00
Oleg Isonen b4941aaaf1 fix: Tailwind border color arbitrary var (#5717) 2026-04-23 17:18:29 +02:00
Oleg Isonen f052200d07 fix: preserve CSS variable and gradient references on paste (#5716)
Preserve var() references in pasted gradient shorthand
(css-data/parse-css.ts)
When expanding shorthand properties (e.g. background), unresolved var()
tokens were lost. Now they're recovered by probing each longhand with a
placeholder, mapping which longhands the var belongs to, and restoring
it.

Fix border-(--x) Tailwind v4 syntax not recognized (tailwind.ts)
borde
2026-04-23 13:22:33 +02:00
Oleg Isonen 198ae5d65a fix: Cross rule CSS var resolution (#5698)
## Description

Pasting this will now resolve correctly

```html
<style>
.my-parent {
    --clr-red: #f00;
    min-height: 75vh;
}

.my-child {
    background: var(--clr-red);
    min-height: 50%;
}
</style>

<div class="my-parent">
    <div class="my-child"></div>
</div>
```
2026-04-14 18:34:40 +02:00
Oleg Isonen 8de2fd47f6 fix: CSS shorthand properties not saved when value contains var() (#5688)
Shorthand properties like background: var(--color) were silently dropped
when pasting into the CSS editor because the shorthand expander can't
handle unresolved var() references.

Fix: CSS vars from the current element's computed styles are now
resolved before expanding shorthands. Inline and nested fallbacks
(var(--a, var(--b))) are supported. If a var still can't be resolved, a
toast error is shown instead of silently dropping the property.
2026-04-12 17:14:01 +02:00
Oleg Isonenandzehjotkah 1f4c53419d feat: Pseudo elements (#5572)
This PR replaces the limited "States" dropdown in the Style Panel with a
flexible input field that supports any CSS selector, pseudo-class, or
pseudo-element. This allows for advanced styling capabilities such as
`:has()`, `:focus-visible`, and complex combinators.

## Key Changes

### Flexible Selector Input
- Replaced the fixed "States" category list with a free-form input
field.
- Supports **any** valid CSS selector (e.g., `:hover`, `::before`,
`:has(:checked)`).
- Validation logic ensures only valid selectors are accepted (triggered
on `Enter` key).

## How to Test
1. Select an element and open the Style Panel.
2. Click on the Local style source or a Token.
3. In the input field (bottom of menu), type a selector like `:hover` or
`:first-child` and press Enter.
4. Verify the selector is added and selected.

---------

Co-authored-by: zehjotkah <111518041+zehjotkah@users.noreply.github.com>
2026-01-19 17:28:47 +01:00
Bogdan Chadkin 4abb7cf3e2 feat: support svg properties in style panel (#5332)
Ref https://github.com/webstudio-is/webstudio/issues/5258

Newer mdn-data contains all stylable svg properties (they finally got
through some documentation and implementation process).

Tweaked all experimental stuff and ditched obsolete properties.

<img width="286" height="538" alt="image"
src="https://github.com/user-attachments/assets/1e579be0-0a12-4013-ab04-09d5e008aeed"
/>
2025-07-18 18:04:26 +02:00
Bogdan Chadkin 5637e71287 refactor: migrate css-data to hyphenated properties (#5031)
All parsers/generators accept and produce hyphenated css property. Camel
case is only used for StyleProperty type.
2025-03-22 22:38:59 +07:00
Bogdan Chadkin af653fa002 refactor: hyphenate keyword values (#4987)
Regenerated keyword values data with hyphenated properties. Since the
new object is strictly typed we can use it directly without
styleConfigByName utility which I removed.
2025-03-13 22:44:57 +07:00
Bogdan Chadkin 3c8ac56c39 refactor: migrate properties data to hyphen case (#4970)
properties data are now more type safe and can accept any CssProperty
name though in case of custom properties (--string) will return
undefined.

This also removes a lot of `keyof typeof properties` castings.
2025-03-08 20:26:40 +07:00
Bogdan Chadkin 0889342c33 refactor: switch to hyphenated preset styles (#4930)
Replaced camel case with kebab in all presets
2025-03-04 17:26:32 +07:00
Oleg Isonen 7b01153f67 experimental: Shorthands autocomplete (#4898)
ref https://github.com/webstudio-is/webstudio/issues/4816

## Description

Shows shorthands in autocomplete when adding properties.

## 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:
0000)
- [ ] 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
2025-02-26 16:45:20 +01:00
Bogdan Chadkin 78a0fa98c1 refactor: output hyphenated properties from css parser (#4900)
We are going to switch to hyphenated properties in styles. Here
refactored css parser to output hyphenated property instead of camel
case and added camelCaseProperty utility which does the opposite of
hyphenateProperty.
2025-02-22 18:11:57 +07:00
Bogdan Chadkin adadbe3aa2 refactor: enable isolated declatations in css data (#4476)
Moved transition related stuff into builder, simplified mdn-data and
added missing types to exports, removed popularity index.
2024-11-30 16:47:26 +07:00
Jaya Krishna Namburu d1bd5df4e1 feat: add links to mdn documentation inside tooltips for sections and properties (#4416)
## Description

fixes #4383 
Tweaked the `__generated__/properties.ts` that is generated at build
time to store `mdn_url` in it. And use these url's to show on the
tooltips for the properties and sections.

## Steps for reproduction
- Open any property, and the tooltip opens
- Inside the tooltip, you should be able to click on the external link
icon.
- The link should take you to a mdn link of the same.


![external-links](https://github.com/user-attachments/assets/9b81d2da-7d5f-4d7f-abdb-e0eaa5902a14)


## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - 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)
2024-11-15 10:20:55 +05:30
Ivan Starkov b762a92214 fix: Option list changes width on hover (#4363)
## Description

closes #4300

Also simplified types instead of unions with 2300+ strings

## 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
2024-11-04 15:17:45 +04:00
Bogdan Chadkin 8d7cf574fc fix: generate text-wrap-style: auto (#4321)
Fixes https://github.com/webstudio-is/webstudio/issues/4218

Turned out text-wrap-style got removed but supported alternative
text-wrap: wrap was not generated instead.
Now all should work.

Also removed invalid text-wrap-mode: auto
2024-10-20 11:50:41 +03:00
Bogdan Chadkin 84250f4cd8 experimental: add :root support (#4175)
Ref https://github.com/webstudio-is/webstudio/issues/3399

Now we have a way to change rem and define global css variables

- show root node in navigator behind flag
- show style panel when root is selected
- inherit styles from root
- show advanced styles defined on root in descendents
- show browser styles for root (`html { display: block }`)
- show initial values instead of `inherit` in root typography
- render root styles on canvas
- property label shows root as the source

Note: generated sites are not supported yet
<img width="825" alt="Screenshot 2024-09-27 at 19 24 41"
src="https://github.com/user-attachments/assets/4c17f86a-74d8-4518-8145-854dbdbee11a">

<img width="1304" alt="Screenshot 2024-09-27 at 19 09 51"
src="https://github.com/user-attachments/assets/6003fd49-5ecb-46cd-9df7-85c571f82e32">
2024-09-28 13:01:43 +02:00
Bogdan Chadkin c81b3d502f experimental: add css custom properties support to advanced styles (#4117)
Ref https://github.com/webstudio-is/webstudio/issues/3399

- added custom properties autocomplete in advanced styles
- fixed unit value detecting to not break var()
- show inherited custom properties in advanced styles
- dropped "types" from properties meta
- parse not top level var(), for example inside layers or function as
unparsed for now

<img width="239" alt="image"
src="https://github.com/user-attachments/assets/640690d4-a52e-43a4-a3a2-6032d30c600f">
<img width="871" alt="Screenshot 2024-09-12 at 21 53 38"
src="https://github.com/user-attachments/assets/f50e52a6-1307-4554-9ee2-cb2f20dd0e2c">
<img width="862" alt="Screenshot 2024-09-12 at 21 53 47"
src="https://github.com/user-attachments/assets/09788e29-df58-41ee-a96e-c28c4006dabb">
2024-09-14 01:37:10 +02:00
Jaya Krishna Namburu 99851a40d6 feat: Add tooltips for individual properties in style panels by the descriptions generated by ai (#3964)
## Description

This PR adds tooltips for all the layer based sections in the transform
property. The rest of the properties already have their tooltips managed
by the `PropertyName` component. I have taken our previous tooltips as
based and used a AI suggested one and proof read those. So, please let
me know if there are any suggestions to change.

## Steps for reproduction

- verify tooltips for `translate`, `scale`, `rotate` and `skew`,
`box-shadow`, `text-shadow`, `drop-shadow` properties.

## 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)
2024-09-03 21:23:57 +05:30
Jaya Krishna Namburu e5ec6a1475 feat: add offset-position and offset-anchor properties under advanced section (#3970)
fixes #3963 

## Description
Adds `offset-position` property to be available under the advanced
section. Of all the `offset-*` properties. Looks like only `position` is
marked as experimental in `mdn-data`. But, according to can-i-use. It
seems it has a fair amount of support among browsers.
https://caniuse.com/mdn-css_properties_offset-position
![Screenshot 2024-08-20 at 11 44
59 AM](https://github.com/user-attachments/assets/ab080a22-4e94-453a-8587-38be95cc83dc)


## Steps for reproduction
- Add `offset-position` property under the advanced tab.
- check for description of the property.
- Ability to reset the property from the advanced tab.

## 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
- [ ] 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)
2024-08-21 13:05:10 +02:00
Bogdan Chadkin 3dd8c2f482 refactor: upgrade html-tags (#3946)
The new version exports types with normal casing,
the package is completely esm and reexports json with new syntax.

https://github.com/sindresorhus/html-tags/blob/main/index.js#L1

Also reused voidHtmlTags in collapsed instance logic.
2024-08-16 11:24:57 +02:00
Bogdan Chadkin c7e88531d7 refactor: optimize html styles access (#3939)
Ref https://github.com/webstudio-is/webstudio/issues/1536

Styles are accessed for specific fields and never iterated. Here output
html styles as single map with composite key tag:property.
2024-08-15 18:26:26 +02:00
Bogdan Chadkin 3a35b6cbc3 refactor: rewrite html styles with css (#3938)
Ref https://github.com/webstudio-is/webstudio/issues/1536

We have a proper parser which can convert raw css into webstudio styles.
Rewrite should simplify maintaining and allow to change final format
without big rewrites.
2024-08-15 15:15:43 +02:00
Bogdan Chadkin 097d2922c3 build: remove unused eslint suppressions (#3876)
Looks like we forgot to enable the flag
2024-08-04 23:37:59 +02:00
Oleg Isonen 7f1af26ad8 fix: fix webflow html embed preset styles (#3791)
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
2024-07-25 21:26:11 +02:00
Bogdan Chadkin a65ab3379f build: forbid unused parameters (#3732)
Enabled flag in tsconfig to forbid unused parameters.
2024-07-15 21:17:13 +02:00
Ivan StarkovandOleg Isonen 6e41286635 experimental: Add Desktop Webflow Navbar support (#3665)
## 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>
2024-07-10 18:36:01 +03:00
Bogdan Chadkin 2c28259c16 experimental: fix style preset generation (#3677)
Here fixed style presets generation to reflect new parsed css format.
2024-07-05 17:22:55 +03:00
Bogdan Chadkin 2af8d57b8e experimental: support transition-behavior property (#3650)
This is the new property and not supported by csstree out of the box. So
we try to parse it manually. Fixes a few invalid in webflow preset.
2024-06-30 15:15:11 +03:00
Bogdan Chadkin 009c5d8e2d experimental: parse non-standard properties (#3648)
Ref https://github.com/webstudio-is/webstudio/issues/2647

Fixed parsing non-standard properties with prefixes

- font-smoothing
- -webkit-font-smoothing
- -moz-osx-font-smoothing
- tap-highlight-color
- -webkit-tap-highlight-color
- -webkit-overflow-scrolling
2024-06-30 02:25:18 +03:00
Bogdan Chadkin 87210fa069 feat: expand backgound-position shorthand (#3646)
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.
2024-06-29 13:43:37 +03:00
Bogdan Chadkin a7676c5042 feat: support -webkit-line-clamp (#3640)
Ref https://github.com/webstudio-is/webstudio/issues/2647 Closes
https://github.com/webstudio-is/webstudio/issues/3427

Here added -webkit-line-clamp and -webkit-box-orient properties support
which is the only way to add multiline truncation at the moment.

All properties with prefixes are stored without camel casing. With font
smoothing as the only exception because added very early.

<img width="911" alt="Screenshot 2024-06-28 at 17 48 08"
src="https://github.com/webstudio-is/webstudio/assets/5635476/ca773cf0-81f0-47d7-97c8-5f78751332d4">
2024-06-28 20:13:19 +03:00
Oleg Isonen 853c0f7d48 experimental: Paste from webflow 11 (#3623)
## 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
2024-06-27 14:35:14 +02:00
Bogdan Chadkin 6ec8aaeeb7 feat: support text-wrap (#3620)
Here revamped white-space and added support for text-wrap. Basically
both expands into

- white-space-collapse
- text-wrap-mode
- text-wrap-style

And then for better browser support all of them are merged in final css.

<img width="256" alt="Screenshot 2024-06-26 at 13 00 14"
src="https://github.com/webstudio-is/webstudio/assets/5635476/288de3c3-b045-4745-a9f0-34d97e97c0e9">
<img width="358" alt="Screenshot 2024-06-26 at 12 51 13"
src="https://github.com/webstudio-is/webstudio/assets/5635476/e2826389-0e00-443a-b402-e7890df4a02a">
2024-06-26 17:55:00 +03:00
Jaya Krishna Namburu 931e571081 refactor: drop parseTransition shorthand and add migration for transition shorthand (#3607)
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
2024-06-26 06:53:05 +02:00
Oleg Isonen f8635a6691 experimental: Paste from webflow 8 (#3572)
## 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
2024-06-21 18:10:28 +02:00
Bogdan Chadkin 9e23dc9580 feat: switch to overflow longhands (#3588)
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">
2024-06-20 11:51:00 +03:00
Bogdan Chadkin 126fe3d66a experimental: expand font variant and synthesis shorthands (#3580)
Ref https://github.com/webstudio-is/webstudio/issues/2647
2024-06-18 17:51:26 +03:00
Bogdan Chadkin dfc216723a refactor: upgrade mdn-data (#3578)
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
2024-06-17 14:35:38 +03:00
Oleg Isonen 9b08f1dbbc fix: Properties like animation-name were receiving unneeded px suffix (#3543)
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
2024-06-12 19:41:01 +02:00
Oleg Isonen 4aef12cd7a experimental: Paste from webflow 4 (#3491)
## 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
2024-06-05 17:14:23 +02:00
Bogdan Chadkin eb2e397d0a build: drop eslint-plugin-import (#3333)
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.
2024-05-09 18:53:35 +04:00
Oleg Isonen 2c24e1f478 chore: Improved descriptions prompt and descriptions (#3186)
## 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
2024-04-17 11:13:43 +02:00
Oleg Isonen cd0174807d chore: use console.info instead of console.log (#3049)
## 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
2024-03-24 12:52:46 +01:00
Oleg Isonen 6887463746 feat: Scrub improvements (#2904)
## 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
2024-02-13 20:12:09 +01:00
Jaya Krishna Namburu f1adb0e426 feat: Add UI element to control transition property. (#2538)
Adds `transition-property` UI
2023-11-05 12:47:44 +01:00
Jaya Krishna Namburu 60a6a7fbf2 feat: Add css transitions (#2511)
## 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.
2023-11-01 18:36:08 +01:00