duck.html.components.style

Style HTML Component.

This module defines a reusable Style component for embedding CSS styles within an HTML document.

Module Contents

Classes

Style

Style HTML Component.

Functions

_minify_css_chunk	Minifies a chunk of CSS already known to contain no strings or comments.
minify_css	Conservatively minifies CSS: strips comments and collapses redundant whitespace, without ever touching whitespace inside quoted strings or removing spaces that change meaning (descendant combinators, calc() operators, “.btn :hover” style descendant pseudo-selectors).

Data

_COLON_TRAILING_SPACE_RE
_COMMENT_OR_STRING_RE
_SAFE_PUNCTUATION_RE
_WHITESPACE_RUN_RE

API

class duck.html.components.style.Style(element: Optional[str] = None, properties: Optional[Dict[str, str]] = None, props: Optional[Dict[str, str]] = None, style: Optional[Dict[str, str]] = None, inner_html: Optional[Union[str, str, float]] = None, children: Optional[List[duck.html.components.HtmlComponent]] = None, **kwargs)

Bases: duck.html.components.InnerComponent

Style HTML Component.

The Style component allows developers to define and embed custom CSS styles directly within an HTML page. It can be used to dynamically style elements without needing an external stylesheet.

Parameters:

• inner_html – The raw CSS to embed.

• minify – Optional. Whether to minify the CSS. Defaults to True.

Features:

• Supports inline CSS.

• Can be dynamically added to any component.

• Enables styling customization for other components.

• Minifies the embedded CSS by default (comments and redundant whitespace only — see minify_css), pass minify=False to disable.

Example Usage:

style = Style(
    inner_html='''
        .custom-popup {
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 10px;
            border-radius: 5px;
        }
    '''
)
component.add_child(style)

This will generate the following HTML output:

<style>.custom-popup{background-color:rgba(0, 0, 0, 0.8);color:white;padding:10px;border-radius:5px}</style>

Notes:

• Automatic Nonce Addition: When ENABLE_HEADERS_SECURITY_POLICY=True and csp_nonce_flag is set in CSP_TRUSTED_SOURCES, the nonce property is automatically added.

• Request Resolution Required: For the nonce to be set automatically, the request must be resolved. This is achieved by calling get_request_or_raise on the component root (or the current component if the root is None).

• The inner_html parameter must contain valid CSS code.

• This component is intended for inline styles and does not support linking to external CSS files.

• Styles defined within this component will apply globally unless scoped using class or ID selectors.

Initialization

Initialize an HTML component.

Parameters:

• element – The HTML element tag name (e.g., textarea, input, button). Can be None, but make sure element is returned by get_element method.

• accept_inner_html – Whether the HTML component accepts an inner body (e.g., inner-body-here).

• inner_html – Inner html to add to the HTML component. Defaults to None.

• properties – Dictionary for properties to initialize the component with.

• props – Just same as properties argument (added for simplicity).

• style – Dictionary for style to initialize the component with.

• event_handlers – Events to automatically bind. Each dictionary maps an event name to its handler and may include additional keyword arguments forwarded to bind(), e.g. event_handlers=[{"click": on_button_click, **extra_kwargs}].

• **kwargs – Extra keyword arguments

Raises:

HtmlComponentError – If ‘element’ is not a string or ‘inner_html’ is set but ‘accept_inner_html’ is False.

get_element() → str

Returns the HTML tag for the component.

on_create() → None

Initializes the component and, unless disabled, minifies the embedded CSS.

property properties: dict

set_csp_nonce() → None

This tries to retrieve current request nonce.

duck.html.components.style._COLON_TRAILING_SPACE_RE

‘compile(…)’

duck.html.components.style._COMMENT_OR_STRING_RE

‘compile(…)’

duck.html.components.style._SAFE_PUNCTUATION_RE

‘compile(…)’

duck.html.components.style._WHITESPACE_RUN_RE

‘compile(…)’

duck.html.components.style._minify_css_chunk(chunk: str) → str

Minifies a chunk of CSS already known to contain no strings or comments.

Parameters:

chunk – A slice of CSS source outside any string/comment.

Returns:

The minified chunk.

duck.html.components.style.minify_css(css: str) → str

Conservatively minifies CSS: strips comments and collapses redundant whitespace, without ever touching whitespace inside quoted strings or removing spaces that change meaning (descendant combinators, calc() operators, “.btn :hover” style descendant pseudo-selectors).

Parameters:

css – Raw CSS source.

Returns:

The minified CSS.