Css shorthand
That happens due to the browser's CSS parser, which is used by default in GrapesJS. You can prevent that by using grapesjs-parser-postcss
Read full answer below ↓Question
Hello @artf , is there a way to not convert a css added into shorthand?
for example:
border: 4px solid rgb(239, 13, 24);
after visiting the code viewer, the above css is converted to the following
border-top-color: rgb(239, 13, 24);
border-right-color: rgb(239, 13, 24);
border-bottom-color: rgb(239, 13, 24);
border-left-color: rgb(239, 13, 24);
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-width: 4px;
border-right-width: 4px;
border-bottom-width: 4px;
border-left-width: 4px;
how can I prevent this kind of conversion? What I want is to remain this style
border: 4px solid rgb(239, 13, 24);
to what is it.
Answers (2)
That happens due to the browser's CSS parser, which is used by default in GrapesJS. You can prevent that by using grapesjs-parser-postcss
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1608
[Question] Customize CSS class name
GrapesJs editor creates a unique class for element and adds CSS rules to it. For example, Now, is there any way to customize this behaviour...
Issue #809
[Bug]: CSS not added when blocks are drag and dropped after core:canvas-clear command invoked
I'm using grapesjs-blocks-basic plugin that has a number of column blocks. When I drag and drop these blocs onto the canvas they are displa...
Issue #965
Unwanted css after refreshing page
After integrating grapes to my platform a problem comes when, after refreshing the page, I click inside an elements : this one gets the sty...
Issue #1365
[QUESTION] Vertical panel buttons
Hi, I am trying to add vertical buttons in a panel. I have added a flexbox with a vertical direction, but since an additional div is added...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.