MARKETPLACE
PLUGINS
NEBULA - INLINE CSS INJECTOR
Nebula - Inline CSS Injector logo

Nebula - Inline CSS Injector

Published November 2025
   •    Updated December 2025

Plugin details

Nebula Inline CSS Injector - injects user CSS into the page and (when possible) applies style rules directly as inline styles to matching elements, honoring media queries and forcing repaints for visual consistency.


Nebula - Inline CSS Injector


  

 

Description

Overview

  • Nebula Inline CSS Injector converts a block of CSS into a persistent <style> element and, where possible, applies style rules directly to matching DOM nodes as inline properties (using !important) to ensure styles take effect even in constrained environments.

How It Works

  • Creates or reuses a single persistent stylesheet in the document head to hold the supplied CSS.
  • Parses the CSS using a temporary style element and the browser CSSOM to iterate cssRules.
  • For each CSSStyleRule, the plugin attempts to query matching nodes and write the rule declarations to each node.style using setProperty(..., 'important'). Pseudo-selectors are skipped to avoid invalid inline application.
  • Media rules are evaluated with window.matchMedia; inner style rules are applied only when the media query currently matches.
  • Performs an additional delayed pass (100ms) to catch nodes that may appear/settle after initial parse and forces a repaint on the plugin root to improve visual sync.

When to Use

  • Use when you need to ensure CSS rules override other stylesheet complexities (embedding !important inline styles) or when the environment prevents reliable stylesheet precedence (some iframe/CMS constraints).
  • Useful for themes injected into third-party pages where adding a stylesheet alone may not be sufficient.

Benefits

  • Higher specificity by applying properties inline (uses !important) so styles persist against competing rules.
  • Honors media queries and applies only the currently relevant rule set.
  • Graceful fallback — if CSSOM parsing fails, the plugin still injects a stylesheet to the document head.

Key Features

  • Persistent stylesheet insertion and reuse (prevents duplicate <style> tags).
  • CSSOM-based parsing to convert style rules into inline properties for matching elements.
  • Media query evaluation with matchMedia to conditionally apply rules.
  • Delayed secondary pass to cover dynamic DOM changes shortly after initialization.
  • Non-destructive: temporary parsing elements are removed after use.

Free

For everyone

stars   •   0 ratings
4 installs  
This plugin does not collect or track your personal data.

Other actions

Platform

Web

Contributor details

Nebula logo
Nebula
Joined 2023   •   24 Plugins
View contributor profile

Instructions

Installation
  • Drop the plugin script into your Nebula workflow and pass the CSS string via the plugin input named css.
  • No external dependencies required.

Core Functionality

  • Input: properties.css — raw CSS string to inject and (when possible) convert to inline styles.
  • Creates/reuses a <style> element identified by nebula-inline-css-{instanceId} and sets its textContent to the provided CSS.
  • Parses rules using a temporary <style> element to read CSSOM rules (sheet.cssRules) and applies declarations inline to matching nodes via node.style.setProperty(prop, val, 'important').
  • Skips rules whose selectors contain pseudo selectors (e.g., ::before, :hover) because inline style application cannot represent those pseudo-element/pseudo-class semantics.
  • Evaluates @media rules with window.matchMedia and applies inner rules only when the query matches at runtime.

Plugin Elements

  • Persistent style element: created in document.head and reused across runs to hold the full CSS textContent.
  • Temporary parse element: created and removed immediately after reading cssRules; used only for CSSOM parsing and inline application.

Inputs

  • css (string) — required: a block of CSS rules to inject into the page. Example: .my-class { color: red; } @media (max-width: 600px) { .my-class { font-size: 12px; } }

Returned Values & Instance State

  • No return values. The plugin stores state on instance.data:
    • styleEl — DOM reference to the persistent stylesheet
    • styleId — generated id for the persistent stylesheet
    • _nebula_inline_applied_once — guard to run the delayed pass only once

Workflow Usage

  • Provide CSS to the plugin through the Nebula property css. The plugin updates the persistent stylesheet when the CSS string changes.
  • The inline-application pass will run immediately (via CSSOM) and once again after a short delay to catch dynamic DOM changes. Use this plugin in pages where you control the CSS input and expect immediate styling effect.

Best Practices & Recommendations

  • Keep the CSS size reasonable. Applying many rules inline to large node sets can be expensive — prefer scoped selectors and avoid global wildcards when possible.
  • Avoid relying on pseudo-element/pseudo-class rules for styles that must be converted inline; those will be skipped. For pseudo styles, include a fallback or keep them in the persistent stylesheet only.
  • When injecting into pages with strict Content Security Policy (CSP), verify that 'unsafe-inline' is permitted for style injection, or use a CSP-compatible approach (e.g., nonce-based stylesheet approved by the page). The plugin may fail silently if CSP blocks style insertion.
  • If you expect heavy DOM mutations or late-loaded content, couple this plugin with a MutationObserver in your host code to re-run a focused inline-apply pass for newly inserted nodes rather than re-parsing the entire stylesheet frequently.
  • Callers should clean up plugin state on component teardown (remove persistent stylesheet) if injecting into short-lived documents to avoid orphaned elements. The plugin currently does not remove the persistent stylesheet automatically.

Performance & Edge Cases

  • CSSOM parsing relies on the browser exposing sheet.cssRules — some environments (cross-origin stylesheets, restrictive iframes) may throw. The plugin already falls back to only injecting the stylesheet when parsing fails; monitor console warnings for failures.
  • Selectors with pseudo classes/elements are skipped to prevent invalid inline manipulations. Complex selectors that the browser rejects will be caught and safely ignored.
  • Using node.style.setProperty(..., 'important') raises the specificity to be near-maximal, but it cannot reproduce selector-level behavior (e.g., `:hover` transitions) — keep those as CSS rules in the stylesheet as well.
  • Applying inline properties to very large nodeLists can cause jank; consider throttling or selective application by narrowing selectors.

Example Use Cases

  • Theme injection into third-party widgets where the widget’s own stylesheet outranks newly added styles — inline properties ensure theme colors apply.
  • CMS environments where adding a global stylesheet is possible but not reliable due to cascade conflicts — use together with scoped selectors to target specific container nodes.
  • Testing environments or visual overrides where immediate, deterministic style precedence is required for UI snapshots.

Troubleshooting

  • If styles are not applying:
    • Confirm properties.css contains valid CSS and that the persistent <style> tag appears in document.head.
    • Check the browser console for the plugin warning: “nebula: parse css via CSSOM falhou -> fallback stylesheet aplicada” — indicates CSSOM parsing failed and only stylesheet injection occurred.
    • Ensure CSP allows inline style insertion or that script has permission to modify the DOM head.
  • If some rules are missing after inline application:
    • Verify selectors do not include pseudo-classes/elements (these are intentionally skipped).
    • Try narrowing selectors to reduce the matched node count or simplify combinators that may be interpreted differently by querySelectorAll.
  • If you see performance problems when applying styles:
    • Limit the number of rules converted to inline, or implement an external MutationObserver that triggers incremental reapplication only for newly added nodes.

Support

Types

This plugin can be found under the following types:
Background Services   •   Element

Categories

This plugin can be found under the following categories:
Containers   •   Productivity   •   Technical   •   Blog   •   Small Business   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Immerse
Early access
Store
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales