Registry / web-framework / grapesjs-parser-postcss

grapesjs-parser-postcss

library1.0.3jsnpmunverified

The `grapesjs-parser-postcss` plugin provides a custom CSS parser for the GrapesJS web page builder, leveraging PostCSS to handle CSS parsing. This is crucial for avoiding inconsistencies that can arise when importing HTML/CSS templates or embedding custom code directly, as the default browser's CSS Object Model (CSSOM) can be unreliable. The current stable version is `1.0.3`. This plugin primarily focuses on compatibility and fixes, with recent updates ensuring it works seamlessly with the latest GrapesJS versions and PostCSS v8. Its key differentiator is providing a robust and consistent CSS parsing mechanism within GrapesJS, addressing potential styling issues that default browser parsing might introduce, making it an essential tool for advanced GrapesJS usage involving custom CSS structures.

web-framework

npm install grapesjs-parser-postcss

github ↗package ↗

INSTALL

IMPORT

SIG · GRAPESJS-PARSER-PO

grapesjs-parser-postcss

web-frameworkjavascriptv1.0.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

parserPostCSS

✓ import parserPostCSS from 'grapesjs-parser-postcss';

✗ import { parserPostCSS } from 'grapesjs-parser-postcss';

The plugin is exported as a default export for modern JavaScript environments (ESM).

GrapesJSPostCSSParserPlugin

✓ import type { Plugin } from 'grapesjs'; // Assuming Plugin type for GrapesJS plugins import parserPostCSS from 'grapesjs-parser-postcss'; // The plugin itself const GrapesJSPostCSSParserPlugin: Plugin = parserPostCSS;

While the plugin exports a default function, for TypeScript type safety when assigning to a GrapesJS plugin type, you would typically import the default and assign it. The package itself was refactored to TypeScript in v1.0.1, ensuring type declarations are available.

grapesjs-parser-postcss

✓ const parserPostCSS = require('grapesjs-parser-postcss');

✗ const { parserPostCSS } = require('grapesjs-parser-postcss');

For CommonJS environments, the plugin is typically consumed via `require()` as a default export.

This quickstart demonstrates how to initialize a GrapesJS editor and integrate the `grapesjs-parser-postcss` plugin using modern JavaScript (ESM) and TypeScript types. It shows the basic setup and how to pass the plugin to the editor's configuration.

import grapesjs from 'grapesjs'; import parserPostCSS from 'grapesjs-parser-postcss'; // Initialize GrapesJS editor with the PostCSS parser plugin const editor = grapesjs.init({ container : '#gjs', height: '700px', width: '100%', fromElement: true, // Optional: Load content from #gjs element storageManager: { id: 'gjs-', type: 'local', autosave: true, autoload: true, stepsBeforeSave: 1, }, // Include the PostCSS parser plugin plugins: [parserPostCSS], // ... other GrapesJS configurations }); // You can further interact with the editor, e.g., load HTML or CSS editor.setComponents(` <style> .my-class { color: red; font-size: 16px; } </style> <div class="my-class">Hello GrapesJS with PostCSS!</div> `); document.addEventListener('DOMContentLoaded', () => { // Ensure the GrapesJS editor is rendered within the DOM const app = document.getElementById('gjs'); if (!app) { const div = document.createElement('div'); div.id = 'gjs'; document.body.appendChild(div); } });

Debug

Known issues

breakingVersion `1.0.1` introduced significant breaking changes by upgrading to PostCSS 8 and refactoring the plugin to TypeScript. This may require updating your `postcss` dependencies and adjusting import statements if migrating from `0.x` versions.

fix

Ensure your project's `postcss` dependency is compatible with PostCSS 8. Review module import paths and plugin registration in your GrapesJS setup to align with the new TypeScript-based structure.

affects: >=1.0.1

gotchaThis plugin requires GrapesJS `v0.14.33` or higher. Using it with older versions of GrapesJS may lead to unexpected behavior or errors due to API incompatibilities.

fix

Update your GrapesJS dependency to `v0.14.33` or a newer version to ensure full compatibility.

affects: <1.0.0

gotchaThe primary reason to use this plugin is to address inconsistencies in CSS parsing when importing HTML/CSS or using custom code components in GrapesJS. Without it, the browser's native CSSOM might produce different results than expected, especially with complex or non-standard CSS.

fix

Always use `grapesjs-parser-postcss` if you're working with custom CSS or importing external templates into GrapesJS to ensure consistent style application.

affects: >=0.1.1

Errors

Common errors & fixes

TypeError: grapesjs.init is not a function

GrapesJS or the plugin is not correctly loaded or accessible in the global scope/module context.

fix

Verify that `grapesjs` is imported correctly as a module (`import grapesjs from 'grapesjs';`) or loaded via a script tag before the plugin. Also, check that `grapesjs-parser-postcss` is installed and imported/loaded correctly.

Error: PostCSS plugin <plugin-name> requires PostCSS 8.

Your project is using an older version of PostCSS (e.g., v7) while `grapesjs-parser-postcss` v1.0.1+ expects PostCSS 8.

fix

Upgrade your PostCSS installation and any related PostCSS plugins to versions compatible with PostCSS 8. `npm install postcss@^8` or `yarn add postcss@^8`.

Uncaught SyntaxError: Cannot use import statement outside a module

Attempting to use ES module `import` syntax in a browser or Node.js environment that does not support it, typically without a module bundler or proper configuration.

fix

For browser usage without a bundler, use the UMD/IIFE version via CDN `<script src="https://unpkg.com/grapesjs-parser-postcss.min.js"></script>`. For Node.js, ensure your `package.json` has `"type": "module"` or use CommonJS `require()` syntax (`const parserPostCSS = require('grapesjs-parser-postcss');`).

Upgrade

Version history

1.0.3latest on npm

Audit

Dependencies

grapesjsrequiredPeer dependency; the plugin extends GrapesJS functionality and requires it to be present in the application.

postcssrequiredCore runtime dependency; the plugin relies on PostCSS for its parsing capabilities.

Agent activity

10 hits · last 30 days

node

Resources

githubhttps://github.com/GrapesJS/parser-postcss ↗

packagehttps://www.npmjs.com/package/grapesjs-parser-postcss ↗