grapesjs / parser-postcss Goto Github PK

Currently, there is an issue with using this package with the newer version of grapesjs. This version has undergone significant changes and upgrades which have resulted in compatibility issues.

### Old Code: Which is having issue
import grapesjs from 'grapesjs';
declare const plugin: grapesjs.Plugin;
export {
plugin as default,
};
export {};

### New Code: Which will fix the issue
import { Plugin } from 'grapesjs';
declare const plugin: Plugin;
export {
plugin as default,
};
export { };

PostCss and BrowserCssParser in base grapesjs return different data format

PostCss example

{
       selectors: '.selector',
       styles: '....',
       atRule: '.....',
       params: '.....'
}

Browser

{
         selectors: [],
         selectorsAdd: '.selector',
         style: '...',
         atRuleText: '.....',
         mediaText: '.....'
}

Could you plan to unificate formats?

Have some problems when I try add content in components like
It sometimes drop media query or some styles

this.model.replaceWith('<div class="test">Test</div><style>.test {}</style>')

Thanks in advanced @artf for develop awesome grapesJS library and this kind of plugins.

What would be the way to setup post CSS plugins with this plugin?
P.S. - I'm trying to configure Tailwind CSS with GrapesJS.

So I am currently trying to implement nested media CSS styles and seems to not work via string. I'm just struggling to understand how to use this plugin correctly. There is no documentation on how to use it properly and just a bit confused. See i can manage to also parse some of the custom CSS to an array but then there also seems to be no option to add the cssRules via an array? please help me with how to properly import CSS Rules with this tool. Thanks!

If the content you are loading has no <style> and you are loading this plugin, the editor init fails to return.