Unable to import CSS into bpmn property panel

Developers
1

I am trying to add custom css to the bpmn-js-properties-panel project but I get the error [!] RollupError: Expression expected (Note that you need plugins to import files that are not JavaScript).

What is the conventional way to import and use css in bpmn-js-propertiespanel ?

2

I saw the remedies and tried out rollback config but still the css is not getting applied, if i have the style in place then it works but when i import as external css file then it fails, what can be done here.

Importing as external file :


import { h } from 'preact';
import './modal.css';

const Dialog = ({ isOpen, onClose }) => {
  if (!isOpen) return null;

  return (
    <div class="dialog-overlay" onClick={onClose}>
      <div class="dialog-content" onClick={(e) => e.stopPropagation()}>
        <h2>Dialog Title</h2>
        <p>This is a dialog box. You can put any content here.</p>
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );
};

export default Dialog;

Defining style within same file :

import { h } from 'preact';

const Dialog = ({ isOpen, onClose }) => {
  if (!isOpen) return null;

  const dialogOverlayStyle = {
    position: 'fixed',
    top: '0',
    left: '0',
    right: '0',
    bottom: '0',
    background: 'rgba(0, 0, 0, 0.5)',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    animation: 'fadeIn 0.3s ease',
  };

  const dialogContentStyle = {
    background: 'white',
    padding: '20px',
    borderRadius: '4px',
    boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
    animation: 'scaleIn 0.3s ease',
  };

  const keyframes = `
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes scaleIn {
      from {
        transform: scale(0.7);
      }
      to {
        transform: scale(1);
      }
    }
  `;

  return (
    <div>
      <style>{keyframes}</style>
      <div style={dialogOverlayStyle} onClick={onClose}>
        <div style={dialogContentStyle} onClick={(e) => e.stopPropagation()}>
          <h2>Dialog Title</h2>
          <p>This is a dialog box. You can put any content here.</p>
          <button onClick={onClose}>Close</button>
        </div>
      </div>
    </div>
  );
};

export default Dialog;```
3

Why do you need to import css in the properties-panel project? Could you add the same CSS to the application that integrates the modeler?

4

I am trying to use components from preact-material-components package which require external css imports.

Ex : Dialog

But as mentioned i am not able to achieve the required CSS as i import, where specifucally are u asking me to add the CSS definitions, do we have any specific css file within bpms-js-properties-panel project itself ?

5

Do I assume correctly that this is about a Camunda Modeler Plugin? As those do not have a index.html file you have 2 options for importing CSS:

  1. You JavaScript creates the style elements dynamically
  2. Bundle everything in one css file and add it in the entry point

You can read more about it here: Plugins | Camunda 8 Docs

6

okay will try that out also is there a way to automate tasks like opening a dmn file in new tab, this is completely out of this thread, question posted here : Open new DNM table on button click plugin

Could u help me out with this?