scopedCss function

ScopedCss scopedCss(
  1. String css, {
  2. String? name,
})

Creates a new ScopedCss module from css with an optional component name.

Deterministically parses and rewrites all local class selectors in css to isolate them under a short content-derived hash.

Provides zero-runtime CSS Modules with bit-for-bit identical output between Server-Side Rendering (renderToHtml) and browser DOM mounting (mount).

final buttonStyles = scopedCss('''
  .btn {
    padding: 8px 16px;
    border-radius: 6px;
    background: #6366f1;
    color: #ffffff;
  }
  .btn:hover {
    background: #4f46e5;
  }
  .btn.disabled {
    opacity: 0.5;
    pointer-events: none;
  }
''', name: 'btn');

BloomNode submitButton(bool isDisabled) => Button(
  className: buttonStyles.cx(['btn', isDisabled && 'disabled']),
  children: [
    buttonStyles.node,
    const Text('Submit'),
  ],
);

Implementation

ScopedCss scopedCss(String css, {String? name}) =>
    ScopedCss.compile(css, name: name);