mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-11-03 02:27:57 +09:00
Oleg Isonen
99371187dc
## Summary - move the complete GitBook documentation tree and assets into Builder under `/docs` - generate the exhaustive MCP page from the local CLI source in the same change - publish GitBook from a release-gated `docs` branch containing the exact successfully released revision - run MCP documentation tests, typechecking, and stale-output checks with the existing generated-docs check - remove links to the Community Discussions repository ## Technical choices - Import the current documentation as a linear snapshot so the branch satisfies Builder's required-linear-history protection. - Keep the Markdown wrapper separate from the TypeScript generator at `scripts/docs/mcp-page.md`. - Generate through `packages/cli/local.js` so CLI guidance and its documentation are reviewed together. - Let `check:generated-docs` reject CLI changes that leave the committed MCP page stale. - After both GitHub release creation and package publication succeed, fast-forward the read-only `docs` branch to the immutable release tag commit. A divergent update fails instead of publishing a different revision. - Configure GitBook to publish `/docs` from the `docs` branch, not directly from `main`. - Exclude `/docs` from the repository-wide `oxfmt` scan so imported GitBook Markdown retains its established formatting; generator tests and stale-output checks still validate the MCP page. - Exclude `transcripts/` and GitHub Discussions from the migration. ## Todo - [x] Import documentation, navigation, includes, and assets under `/docs`. - [x] Generate the MCP page from the local CLI source. - [x] Move MCP generation and validation into Builder. - [x] Require MCP documentation updates alongside CLI changes. - [x] Publish released revisions through a read-only `docs` branch. - [x] Remove Community repository links from Builder and the migrated docs. - [x] Preserve and verify a final Community Git bundle locally. - [ ] Merge this pull request. - [ ] Let the next successful release create or advance the `docs` branch. - [ ] Repoint GitBook Git Sync to `webstudio-is/webstudio`, branch `docs`, root directory `/docs`. - [ ] Verify `docs.webstudio.is`, navigation, assets, anchors, and the MCP page in production. - [ ] Delete `webstudio-is/webstudio-community`. ## Verification - `pnpm check:generated-docs` - `pnpm lint` - `pnpm oxfmt --check` - `git diff --check origin/main...HEAD` - generator regression test demonstrated failing when the GitBook wrapper behavior was removed, then passing after restoration - no fixture inputs or outputs are affected ## Known limitation All documentation merged after the previous release waits for the next successful release before GitBook publishes it. This deliberately keeps the public MCP reference aligned with an installable CLI revision. Ref #5986
2.3 KiB
2.3 KiB
description
| description |
|---|
| Paste CSS into Webstudio, and it'll be translated to the various fields in the Style Panel. |
↔️ CSS
CSS is the design language of the internet. With this feature, you can copy CSS from anywhere and paste it into Webstudio, which will parse it and populate the various fields in the Style Panel.
How to paste CSS
- Copy CSS declaration(s) such as
background: blue;. - In Webstudio, go to the Style Panel > Advanced > and click "+".
- Paste the CSS and press enter.
That's it.
The styles are parsed and displayed in their respective fields (they will also be shown in the Advanced section).
Use cases
- Design tools like Figma and Penpot provide CSS, making copying and pasting individual layer styles into Webstudio easier.
- Third-party libraries like Open Props provide expertly crafted CSS variables, allowing you to import them via paste.
- Custom stylesheets containing Design Systems and other declarations can be imported.
- Inspect your website with DevTools and copy the CSS.
- Online tutorials, CodePen, ChatGPT, and many other sources provide CSS.
Pasting CSS declarations
When pasting into the Style Panel, Webstudio accepts CSS declarations (e.g., background: blue;). Selectors are not needed because Webstudio applies styles directly to the selected instance.
Related
- HTML with CSS – Paste HTML containing
<style>blocks - HTML with Tailwind – Paste HTML containing Tailwind utility classes
- Markdown – Paste Markdown to create components automatically
- Webflow – Copy Webflow components into Webstudio
- Shortcuts – Keyboard shortcuts for faster workflows
- Commands and search – Quick access to commands and settings
- Anatomy of the Webstudio builder – Overview of the Webstudio interface