@perspective-dev/viewer 4.5.0 → 4.5.2

package/src/rust/components/containers/split_panel.rs

@@ -19,9 +19,6 @@ use web_sys::HtmlElement;
 use yew::html::Scope;
 use yew::prelude::*;
 
-use crate::components::style::LocalStyle;
-use crate::css;
-
 #[derive(Properties, Default)]
 pub struct SplitPanelProps {
     pub children: Children,
@@ -201,7 +198,6 @@ impl Component for SplitPanel {
         let count = iter.len();
         let contents = html! {
             <>
-                <LocalStyle href={css!("containers/split-panel")} />
                 for (i, x) in iter {
                     if i == 0 {
                         if count == 1 {

package/src/rust/components/containers/tab_list.rs

@@ -12,8 +12,6 @@
 
 use yew::{Callback, Children, Component, Html, Properties, classes, html};
 
-use crate::components::style::LocalStyle;
-use crate::css;
 use crate::presentation::ColumnTab;
 
 #[derive(Properties, Debug, PartialEq)]
@@ -87,7 +85,6 @@ impl<T: ColumnTab> Component for TabList<T> {
 
         html! {
             <>
-                <LocalStyle href={css!("containers/tabs")} />
                 <div id="settings_tab_bar">{ for gutter_tabs }</div>
                 <div id="format-tab" class="tab-content scrollable">
                     { ctx.props().children.iter().nth(self.selected_idx) }

package/src/rust/components/datetime_column_style.rs

@@ -23,12 +23,10 @@ use wasm_bindgen::prelude::*;
 use yew::prelude::*;
 
 use super::modal::{ModalLink, SetModalLink};
-use super::style::LocalStyle;
 use crate::components::datetime_column_style::custom::DatetimeStyleCustom;
 use crate::components::datetime_column_style::simple::DatetimeStyleSimple;
 use crate::components::form::select_value_field::SelectValueField;
 use crate::config::*;
-use crate::css;
 use crate::utils::WeakScope;
 
 /// Format-only widget for `datetime` columns. Renders the `date_format`
@@ -126,7 +124,6 @@ impl Component for DatetimeColumnStyle {
     fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <>
-                <LocalStyle href={css!("column-style")} />
                 <div id="column-style-container" class="datetime-column-style-container">
                     if ctx.props().enable_time_config {
                         <SelectValueField<String>

package/src/rust/components/editable_header.rs

@@ -28,9 +28,13 @@ pub struct EditableHeaderProps {
     pub initial_value: Option<String>,
     pub placeholder: Rc<String>,
 
+    // TODO remove this pattern
     #[prop_or_default]
     pub reset_count: u8,
 
+    #[prop_or_default]
+    pub update_on_input: bool,
+
     /// Session metadata snapshot — threaded from `SessionProps`.
     pub metadata: SessionMetadataRc,
 
@@ -163,6 +167,16 @@ impl Component for EditableHeader {
             EditableHeaderMsg::SetNewValue(value)
         });
 
+        let update_on_input = ctx.props().update_on_input;
+        let oninput = ctx.link().batch_callback(move |e: yew::InputEvent| {
+            if update_on_input {
+                let value = e.target_unchecked_into::<HtmlInputElement>().value();
+                vec![EditableHeaderMsg::SetNewValue(value)]
+            } else {
+                vec![]
+            }
+        });
+
         html! {
             <div class={classes} onclick={ctx.link().callback(|_| EditableHeaderMsg::OnClick(()))}>
                 if let Some(icon) = ctx.props().icon_type { <TypeIcon ty={icon} /> }
@@ -173,6 +187,7 @@ impl Component for EditableHeader {
                     disabled={!ctx.props().editable}
                     {onblur}
                     {onkeyup}
+                    {oninput}
                     value={self.value.clone()}
                     placeholder={self.placeholder.clone()}
                 />

package/src/rust/components/empty_row.rs

@@ -20,8 +20,6 @@ use web_sys::*;
 use yew::prelude::*;
 
 use crate::components::filter_dropdown::FilterDropDownElement;
-use crate::components::style::LocalStyle;
-use crate::css;
 
 #[derive(Properties, Derivative)]
 #[derivative(Debug)]
@@ -87,7 +85,6 @@ impl Component for EmptyRow {
 
         html! {
             <div class="pivot-column column-empty">
-                <LocalStyle href={css!("empty-column")} />
                 <input
                     spellcheck="false"
                     ref={self.input_ref.clone()}

package/src/rust/components/expression_editor.rs

@@ -16,10 +16,8 @@ use perspective_client::{ExprValidationError, clone};
 use yew::prelude::*;
 
 use super::form::code_editor::*;
-use super::style::LocalStyle;
 use crate::session::{Session, SessionMetadata, SessionMetadataRc};
 use crate::tasks::{ExprValidation, validate_expression};
-use crate::*;
 
 #[derive(Properties, PartialEq, Clone)]
 pub struct ExpressionEditorProps {
@@ -54,10 +52,12 @@ pub struct ExpressionEditor {
     expr: Rc<String>,
     error: Option<ExprValidationError>,
     oninput: Callback<Rc<String>>,
+
     /// Monotonically increasing request id used to drop stale
     /// validation results when the user types faster than the engine
     /// can validate.
     validation_req_id: u64,
+
     /// The id of the most recently dispatched validation; the result
     /// is only applied when its echoed id matches.
     last_dispatched_req_id: u64,
@@ -131,7 +131,6 @@ impl Component for ExpressionEditor {
         clone!(ctx.props().disabled);
         html! {
             <>
-                <LocalStyle href={css!("expression-editor")} />
                 <label class="item_title">{ "Expression" }</label>
                 <div id="editor-container" class={disabled_class}>
                     <CodeEditor

package/src/rust/components/filter_dropdown.rs

@@ -20,12 +20,11 @@ use yew::html::ImplicitClone;
 use yew::prelude::*;
 
 use super::portal::PortalModal;
+use super::style::StyleSurface;
 use crate::session::Session;
 use crate::utils::*;
 use crate::*;
 
-static CSS: &str = include_str!(concat!(env!("OUT_DIR"), "/css/filter-dropdown.css"));
-
 #[derive(Default)]
 struct FilterDropDownState {
     values: Vec<String>,
@@ -220,6 +219,7 @@ impl Component for FilterDropDownPortal {
             html! {
                 <PortalModal
                     tag_name="perspective-dropdown"
+                    surface={StyleSurface::FilterDropdown}
                     {target}
                     own_focus=false
                     {on_close}
@@ -267,7 +267,7 @@ fn FilterDropDownView(props: &FilterDropDownViewProps) -> Html {
         }
     };
 
-    html! { <><style>{ CSS }</style>{ body }</> }
+    html! { <>{ body }</> }
 }
 
 fn filter_values(

package/src/rust/components/font_loader.rs

@@ -154,12 +154,12 @@ impl FontLoaderProps {
                 }
             }
 
-            let fut = async { select_all(block_fonts.into_iter()).await.0 };
+            let fut = async { select_all(block_fonts).await.0 };
             block_promises.push(ApiFuture::new(fut))
         }
 
         if block_promises.len() != preload_fonts.len() {
-            web_sys::console::warn_1(&format!("Missing preload fonts {:?}", &preload_fonts).into());
+            web_sys::console::warn_1(&format!("Missing preload fonts {:?}", preload_fonts).into());
         }
 
         let res = join_all(block_promises)

package/src/rust/components/form/code_editor.rs

@@ -19,8 +19,6 @@ use yew::prelude::*;
 
 use crate::components::form::highlight::highlight;
 use crate::components::function_dropdown::{FunctionDropDownElement, FunctionDropDownPortal};
-use crate::components::style::LocalStyle;
-use crate::css;
 use crate::exprtk::{Cursor, tokenize};
 use crate::utils::*;
 
@@ -174,7 +172,6 @@ pub fn code_editor(props: &CodeEditorProps) -> Html {
     clone!(props.disabled);
     html! {
         <>
-            <LocalStyle href={css!("form/code-editor")} />
             <div id="editor" {class}>
                 <div id="line_numbers" ref={lineno_ref}>{ line_numbers }</div>
                 <div id="editor-inner" {class}>

package/src/rust/components/form/debug.rs

@@ -18,8 +18,6 @@ use wasm_bindgen::prelude::*;
 use yew::prelude::*;
 
 use crate::components::form::code_editor::CodeEditor;
-use crate::components::style::LocalStyle;
-use crate::css;
 use crate::js::{MimeType, copy_to_clipboard, paste_from_clipboard};
 use crate::presentation::*;
 use crate::renderer::*;
@@ -166,8 +164,6 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
 
     html! {
         <>
-            <LocalStyle href={css!("containers/tabs")} />
-            <LocalStyle href={css!("form/debug")} />
             <div id="debug-panel-overflow">
                 <div id="debug-panel" class="sidebar_column" ref={sizer}>
                     <div id="debug-panel-controls">

package/src/rust/components/function_dropdown.rs

@@ -20,10 +20,9 @@ use yew::html::ImplicitClone;
 use yew::prelude::*;
 
 use super::portal::PortalModal;
+use super::style::StyleSurface;
 use crate::utils::*;
 
-static CSS: &str = include_str!(concat!(env!("OUT_DIR"), "/css/function-dropdown.css"));
-
 #[derive(Default)]
 struct FunctionDropDownState {
     values: Vec<CompletionItemSuggestion>,
@@ -158,6 +157,7 @@ impl Component for FunctionDropDownPortal {
             html! {
                 <PortalModal
                     tag_name="perspective-dropdown"
+                    surface={StyleSurface::FunctionDropdown}
                     {target}
                     own_focus=false
                     {on_close}
@@ -211,7 +211,7 @@ fn FunctionDropDownView(props: &FunctionDropDownViewProps) -> Html {
         }
     };
 
-    html! { <><style>{ CSS }</style>{ body }</> }
+    html! { <>{ body }</> }
 }
 
 fn filter_values(input: &str) -> Vec<CompletionItemSuggestion> {

package/src/rust/components/number_series_style.rs

@@ -14,10 +14,8 @@ use web_sys::{HtmlInputElement, InputEvent};
 use yew::prelude::*;
 
 use super::modal::{ModalLink, SetModalLink};
-use super::style::LocalStyle;
 use crate::components::form::select_enum_field::SelectEnumField;
 use crate::config::*;
-use crate::css;
 use crate::utils::WeakScope;
 
 #[derive(Properties)]
@@ -125,7 +123,6 @@ impl Component for NumberSeriesStyle {
 
         html! {
             <>
-                <LocalStyle href={css!("column-style")} />
                 <div id="column-style-container" class="number-series-style-container">
                     <SelectEnumField<ChartType>
                         label="chart-type"

package/src/rust/components/plugin_selector.rs

@@ -12,8 +12,6 @@
 
 use yew::prelude::*;
 
-use super::style::LocalStyle;
-use crate::css;
 use crate::utils::PtrEqRc;
 
 /// Pure value props — no engine handles, no PubSub subscriptions.
@@ -85,7 +83,6 @@ impl Component for PluginSelector {
 
         html! {
             <>
-                <LocalStyle href={css!("plugin-selector")} />
                 <div id="plugin_selector_container" {class}>
                     <PluginSelect name={plugin_name} on_click={callback} />
                     <div id="plugin_selector_border" />

package/src/rust/components/plugin_tab.rs

@@ -22,9 +22,7 @@ use yew::prelude::*;
 use crate::components::column_settings_sidebar::style_tab::primitive_field::{
     BoolField, ColorField, ColorRangeField, EnumField, NumberFieldPrimitive,
 };
-use crate::components::style::LocalStyle;
 use crate::config::ControlSpec;
-use crate::css;
 use crate::queries::get_plugin_config_schema;
 use crate::renderer::Renderer;
 use crate::session::Session;
@@ -212,9 +210,6 @@ pub fn PluginTab(props: &PluginTabProps) -> Html {
 
     html! {
         <div id="plugin-tab" class="sidebar_column scrollable">
-            <LocalStyle href={css!("column-style")} />
-            <LocalStyle href={css!("plugin-settings-panel")} />
-            <LocalStyle href={css!("containers/tabs")} />
             <div id="plugin-config-container" class="tab-section">{ components }</div>
         </div>
     }

package/src/rust/components/portal.rs

@@ -20,7 +20,7 @@ use web_sys::*;
 use yew::prelude::*;
 
 use crate::components::modal::ModalOrientation;
-use crate::components::style::StyleProvider;
+use crate::components::style::{StyleProvider, StyleSurface};
 use crate::utils::*;
 
 #[derive(Properties, PartialEq)]
@@ -41,6 +41,9 @@ pub struct PortalModalProps {
     pub tag_name: &'static str,
 
     pub theme: String,
+
+    /// Which popup CSS surface this portal's ShadowRoot adopts.
+    pub surface: StyleSurface,
 }
 
 pub enum PortalModalMsg {
@@ -209,7 +212,7 @@ impl Component for PortalModal {
             <>
                 <style>{ css }</style>
                 <ContextProvider<ModalOrientation> context={self.rev_vert.clone()}>
-                    <StyleProvider root={self.host.clone()}>
+                    <StyleProvider root={self.host.clone()} surface={ctx.props().surface}>
                         { for ctx.props().children.iter() }
                     </StyleProvider>
                 </ContextProvider<ModalOrientation>>

package/src/rust/components/render_warning.rs

@@ -12,8 +12,6 @@
 
 use yew::prelude::*;
 
-use super::style::LocalStyle;
-use crate::css;
 use crate::renderer::limits::RenderLimits;
 
 #[derive(Properties, PartialEq)]
@@ -81,7 +79,6 @@ pub fn render_warning(props: &RenderWarningProps) -> Html {
         let onclick = Callback::from(move |_: MouseEvent| on_dismiss.emit(()));
         html! {
             <>
-                <LocalStyle href={css!("render-warning")} />
                 <div
                     class="plugin_information plugin_information--warning"
                     id="plugin_information--size"

package/src/rust/components/status_bar.rs

@@ -15,12 +15,12 @@ use web_sys::*;
 use yew::prelude::*;
 
 use super::status_indicator::StatusIndicator;
-use super::style::LocalStyle;
 use crate::components::containers::select::*;
 use crate::components::copy_dropdown::CopyDropDownMenu;
 use crate::components::export_dropdown::ExportDropDownMenu;
 use crate::components::portal::PortalModal;
 use crate::components::status_bar_counter::StatusBarRowsCounter;
+use crate::components::style::StyleSurface;
 use crate::config::*;
 use crate::js::*;
 use crate::presentation::{Presentation, PresentationProps};
@@ -332,7 +332,6 @@ impl Component for StatusBar {
         if is_settings {
             html! {
                 <>
-                    <LocalStyle href={css!("status-bar")} />
                     <div
                         ref={&self.statusbar_ref}
                         id={ctx.props().id.clone()}
@@ -377,7 +376,7 @@ impl Component for StatusBar {
                                 <div id="plugin-settings"><slot name="statusbar-extra" /></div>
                                 <span class="hover-target">
                                     <span id="reset" class="button" onmousedown={&onreset}>
-                                        <span class="icon" />
+                                        <span class="icon shift-alt-icon" />
                                         <span class="icon-label" />
                                     </span>
                                 </span>
@@ -418,6 +417,7 @@ impl Component for StatusBar {
                     </div>
                     <PortalModal
                         tag_name="perspective-copy-menu"
+                        surface={StyleSurface::DropdownMenu}
                         target={self.copy_target.clone()}
                         own_focus=true
                         on_close={on_close_copy}
@@ -427,6 +427,7 @@ impl Component for StatusBar {
                     </PortalModal>
                     <PortalModal
                         tag_name="perspective-export-menu"
+                        surface={StyleSurface::DropdownMenu}
                         target={self.export_target.clone()}
                         own_focus=true
                         on_close={on_close_export}

package/src/rust/components/string_column_style.rs

@@ -13,10 +13,8 @@
 use yew::prelude::*;
 
 use super::modal::{ModalLink, SetModalLink};
-use super::style::LocalStyle;
 use crate::components::form::select_enum_field::SelectEnumField;
 use crate::config::*;
-use crate::css;
 use crate::utils::WeakScope;
 
 /// Format-only widget for [`String`] columns. Renders the `format` enum
@@ -91,7 +89,6 @@ impl Component for StringColumnStyle {
         let format_mode_changed = ctx.link().callback(StringColumnStyleMsg::FormatChanged);
         html! {
             <>
-                <LocalStyle href={css!("column-style")} />
                 <div id="column-style-container" class="string-column-style-container">
                     <SelectEnumField<FormatMode>
                         label="format"

package/src/rust/components/style/mod.rs

@@ -10,43 +10,76 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-//! A micro-framework for associating local CSS snippets with `yew::Component`s
-//! in a Custom Element's `ShadowRoot`.
+//! Associates a single, build-time CSS bundle with a `yew::Component` tree
+//! rendered into a Custom Element's `ShadowRoot`.
 //!
-//! Embedding a `<LocalStyle>` element will only create the underlying `<style>`
-//! tag once (when `Component::view()` is called the first time), even if
-//! multiple copies of the `Component` exist in the tree.
+//! Each `src/css` file is inlined and minified by `lightningcss` (see
+//! `build.rs` + the `_viewer_bundle.css` and per-popup `_column_dropdown.css`
+//! / `_filter_dropdown.css` / `_function_dropdown.css` / `_dropdown_menu.css`
+//! entrypoints) into one stylesheet per "surface". A `<StyleProvider>` at the
+//! root of a shadow tree adopts its surface's stylesheet exactly once;
+//! constructed `CSSStyleSheet`s are cheap and shared across every viewer
+//! instance.
 //!
 //! # Example
 //!
-//! ```
+//! ```ignore
 //! html! {
-//!     <StyleProvider>
-//!         <LocalStyle href={ css!("my-style") } />
+//!     <StyleProvider root={host} surface={StyleSurface::Viewer}>
 //!         <h1>{ "I am styled!" }</h1>
 //!     </StyleProvider>
 //! }
 //! ```
 
-mod local_style;
-mod style_cache;
 mod style_provider;
 
-pub use local_style::LocalStyle;
-pub use style_provider::StyleProvider;
-
-#[macro_export]
-macro_rules! css {
-    ($name:expr) => {{
-        (
-            $name,
-            include_str!(concat!(env!("OUT_DIR"), "/css/", $name, ".css")),
-        )
-    }};
-    ($path:expr, $name:expr) => {{
-        (
-            $name,
-            include_str!(concat!(env!("OUT_DIR"), "/", $path, "/", $name, ".css")),
-        )
-    }};
+pub use style_provider::{StyleProvider, StyleSurface};
+
+/// The viewer-surface bundle: every `src/css` file except the floating-popup
+/// sheets. Adopted into the `<perspective-viewer>` ShadowRoot.
+fn viewer_bundle() -> &'static str {
+    include_str!(concat!(env!("OUT_DIR"), "/css/_viewer_bundle.css"))
+}
+
+/// Per-popup-surface bundles. Each floating popup root adopts exactly its own
+/// self-contained sheet (mirroring the pre-bundle behavior where every popup
+/// instance carried only its own CSS) so the four popup styles never collide —
+/// in particular `column-dropdown.css`'s `!important` inverted rules stay
+/// confined to the column-name completion dropdown.
+fn column_dropdown_bundle() -> &'static str {
+    include_str!(concat!(env!("OUT_DIR"), "/css/_column_dropdown.css"))
+}
+fn filter_dropdown_bundle() -> &'static str {
+    include_str!(concat!(env!("OUT_DIR"), "/css/_filter_dropdown.css"))
+}
+fn function_dropdown_bundle() -> &'static str {
+    include_str!(concat!(env!("OUT_DIR"), "/css/_function_dropdown.css"))
+}
+fn dropdown_menu_bundle() -> &'static str {
+    include_str!(concat!(env!("OUT_DIR"), "/css/_dropdown_menu.css"))
+}
+
+thread_local! {
+    static VIEWER_SHEET: web_sys::CssStyleSheet = make_sheet(viewer_bundle());
+    static COLUMN_DROPDOWN_SHEET: web_sys::CssStyleSheet = make_sheet(column_dropdown_bundle());
+    static FILTER_DROPDOWN_SHEET: web_sys::CssStyleSheet = make_sheet(filter_dropdown_bundle());
+    static FUNCTION_DROPDOWN_SHEET: web_sys::CssStyleSheet = make_sheet(function_dropdown_bundle());
+    static DROPDOWN_MENU_SHEET: web_sys::CssStyleSheet = make_sheet(dropdown_menu_bundle());
+}
+
+fn make_sheet(css: &str) -> web_sys::CssStyleSheet {
+    let sheet = web_sys::CssStyleSheet::new().unwrap();
+    sheet.replace_sync(css).unwrap();
+    sheet
+}
+
+/// The memoized, shared `CSSStyleSheet` for a given [`StyleSurface`].
+pub(crate) fn surface_sheet(surface: StyleSurface) -> web_sys::CssStyleSheet {
+    match surface {
+        StyleSurface::Viewer => VIEWER_SHEET.with(|x| x.clone()),
+        StyleSurface::ColumnDropdown => COLUMN_DROPDOWN_SHEET.with(|x| x.clone()),
+        StyleSurface::FilterDropdown => FILTER_DROPDOWN_SHEET.with(|x| x.clone()),
+        StyleSurface::FunctionDropdown => FUNCTION_DROPDOWN_SHEET.with(|x| x.clone()),
+        StyleSurface::DropdownMenu => DROPDOWN_MENU_SHEET.with(|x| x.clone()),
+    }
 }

package/src/rust/components/style/style_provider.rs

@@ -10,9 +10,26 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+use wasm_bindgen::{JsCast, JsValue};
 use yew::prelude::*;
 
-use super::style_cache::StyleCache;
+use super::surface_sheet;
+
+/// Which prebuilt CSS bundle a [`StyleProvider`] adopts into its root.
+#[derive(Clone, Copy, Debug, PartialEq, Eq, Default)]
+pub enum StyleSurface {
+    /// The `<perspective-viewer>` ShadowRoot.
+    #[default]
+    Viewer,
+    /// Column-name completion dropdown (inverted color scheme).
+    ColumnDropdown,
+    /// Filter-value completion dropdown.
+    FilterDropdown,
+    /// Expression function-completion dropdown.
+    FunctionDropdown,
+    /// Copy / Export menu (non-inverted color scheme).
+    DropdownMenu,
+}
 
 #[derive(Properties, PartialEq)]
 pub struct StyleProviderProps {
@@ -20,32 +37,48 @@ pub struct StyleProviderProps {
 
     #[prop_or(true)]
     pub is_shadow: bool,
+
+    #[prop_or_default]
+    pub surface: StyleSurface,
+
     pub children: Children,
 }
 
-/// A context which injects any CSS snippet registered within its tree, doing
-/// so only once for each unqiue snippet name.
-///
-/// CSS can be registered within sub-components via the `<LocalStyle>` component
-/// and `css!()` resource inlining macro.
-pub struct StyleProvider {
-    cache: StyleCache,
-}
+/// Adopts the build-time CSS bundle for its [`StyleSurface`] into the root's
+/// `adoptedStyleSheets` once, on creation. Unlike the previous per-snippet
+/// `LocalStyle` registration, children no longer register CSS individually.
+pub struct StyleProvider;
 
 impl Component for StyleProvider {
     type Message = ();
     type Properties = StyleProviderProps;
 
     fn create(ctx: &Context<Self>) -> Self {
-        let cache = StyleCache::new(ctx.props().is_shadow, &ctx.props().root);
-        Self { cache }
+        adopt_surface_sheet(ctx.props());
+        Self
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
-        html! {
-            <ContextProvider<StyleCache> context={self.cache.clone()}>
-                { for ctx.props().children.iter() }
-            </ContextProvider<StyleCache>>
-        }
+        html! { <>{ for ctx.props().children.iter() }</> }
+    }
+}
+
+/// Push the surface's shared stylesheet onto the root's `adoptedStyleSheets`,
+/// unless it is already present (a root may host more than one provider).
+fn adopt_surface_sheet(props: &StyleProviderProps) {
+    let root: JsValue = if props.is_shadow {
+        props.root.shadow_root().unwrap().into()
+    } else {
+        web_sys::window().unwrap().document().unwrap().into()
+    };
+
+    let sheets = js_sys::Reflect::get(&root, &"adoptedStyleSheets".into())
+        .unwrap()
+        .unchecked_into::<js_sys::Array>();
+
+    let sheet = surface_sheet(props.surface);
+    let sheet_val: &JsValue = sheet.as_ref();
+    if sheets.index_of(sheet_val, 0) < 0 {
+        sheets.push(sheet_val);
     }
 }

package/src/rust/components/style_controls/number_string_format.rs

@@ -19,9 +19,7 @@ use perspective_client::config::ColumnType;
 pub use types::*;
 use yew::{Callback, Component, Properties, html};
 
-use crate::components::style::LocalStyle;
 use crate::config::*;
-use crate::css;
 
 #[derive(Properties, PartialEq, Clone)]
 pub struct CustomNumberFormatProps {
@@ -211,12 +209,7 @@ impl Component for CustomNumberFormat {
 
     fn view(&self, ctx: &yew::prelude::Context<Self>) -> yew::prelude::Html {
         html! {
-            <>
-                <LocalStyle href={css!("column-style")} />
-                { self.style_section(ctx) }
-                { self.digits_section(ctx) }
-                { self.misc_section(ctx) }
-            </>
+            <>{ self.style_section(ctx) }{ self.digits_section(ctx) }{ self.misc_section(ctx) }</>
         }
     }
 }