Raphaël Bosi
19bbd59b53
Front-components compile to a remote-dom worker, so a CSS import like `import 'twenty-ui/style.css'` can't load a stylesheet and was breaking the build at the manifest step. This makes the build inline an imported CSS file as a runtime `<style>` injection that flows through the existing style bridge into the host. Because the CSS is bundled alongside that same build's hashed class names, an app's styling matches its own twenty-ui version regardless of which version the host ships — no server, manifest, or host changes needed. The manifest extractor keeps the no-op CSS loader (it executes the bundle in Node, where `document` is undefined); the inject plugin runs only in the real build and the dev watcher.
19 lines
424 B
TypeScript
19 lines
424 B
TypeScript
import { defineFrontComponent } from 'twenty-sdk/define';
|
|
|
|
import 'twenty-ui/style.css';
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<div style={{ padding: '10px' }}>
|
|
<h2>My Component</h2>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default defineFrontComponent({
|
|
universalIdentifier: 'e1e2e3e4-e5e6-4000-8000-000000000020',
|
|
name: 'my-component',
|
|
description: 'A root-level front component',
|
|
component: MyComponent,
|
|
});
|