Pre-load component CSS (#6563)

panel/io/resources.py

@@ -614,6 +614,7 @@ def adjust_paths(self, resources):
  Computes relative and absolute paths for resources.
  """
  new_resources = []
+ version_suffix = f'?v={JS_VERSION}'
  cdn_base = f'{config.npm_cdn}/@holoviz/panel@{JS_VERSION}/dist/'
  for resource in resources:
  if not isinstance(resource, str):
@@ -630,6 +631,8 @@ def adjust_paths(self, resources):
  resource = f'{state.rel_path}/{resource}'
  elif self.absolute and self.mode == 'server':
  resource = f'{self.root_url}{resource}'
+ if resource.endswith('.css'):
+ resource += version_suffix
  new_resources.append(resource)
  return new_resources
 

panel/layout/accordion.py

@@ -37,7 +37,7 @@ class Accordion(NamedListPanel):
  >>> pn.Accordion(some_pane_with_a_name, ("Plot", some_plot))
  """
 
- active_header_background = param.String(default='#ccc', doc="""
+ active_header_background = param.String(default='#ddd', doc="""
  Color for currently active headers.""")
 
  active = param.List(default=[], doc="""

panel/layout/card.py

@@ -6,7 +6,6 @@
 
 import param
 
-from ..io.resources import CDN_DIST
 from ..models import Card as BkCard
 from .base import Column, Row
 
@@ -75,10 +74,6 @@ class Card(Column):
  'title': None, 'header': None, 'title_css_classes': None
  }
 
- _stylesheets: ClassVar[List[str]] = [
- f'{CDN_DIST}css/card.css'
- ]
-
  def __init__(self, *objects, **params):
  self._header_layout = Row(css_classes=['card-header-row'], sizing_mode='stretch_width')
  super().__init__(*objects, **params)

panel/models/card.ts

@@ -1,7 +1,10 @@
 import {Column, ColumnView} from "./column"
+import type {StyleSheetLike} from "@bokehjs/core/dom"
 import * as DOM from "@bokehjs/core/dom"
 import type * as p from "@bokehjs/core/properties"
 
+import card_css from "styles/models/card.css"
+
 export class CardView extends ColumnView {
  declare model: Card
 
@@ -27,6 +30,10 @@ export class CardView extends ColumnView {
  })
  }
 
+ override stylesheets(): StyleSheetLike[] {
+ return [...super.stylesheets(), card_css]
+ }
+
  protected override *_stylesheets(): Iterable<DOM.StyleSheet> {
  yield* super._stylesheets()
  yield this.collapsed_style

panel/models/perspective.py

@@ -14,7 +14,7 @@
  'pro', 'pro-dark', 'gruvbox', 'gruvbox-dark',
 ]
 
-PERSPECTIVE_VERSION = '2.8.0'
+PERSPECTIVE_VERSION = '2.9.0'
 
 THEME_PATH = f"@finos/perspective-viewer@{PERSPECTIVE_VERSION}/dist/css/"
 THEME_URL = f"{config.npm_cdn}/{THEME_PATH}"
@@ -23,7 +23,7 @@
 CSS_URLS = [
  f"{THEME_URL}fonts.css",
  f"{THEME_URL}themes.css",
- f"{THEME_URL}variables.css"
+ f"{THEME_URL}variables.css",
 ]
 for theme in PERSPECTIVE_THEMES:
  CSS_URLS.append(f'{THEME_URL}{theme}.css')

panel/models/plotly.ts

@@ -1,3 +1,4 @@
+import type {StyleSheetLike} from "@bokehjs/core/dom"
 import {div} from "@bokehjs/core/dom"
 import type * as p from "@bokehjs/core/properties"
 import {isPlainObject} from "@bokehjs/core/util/types"
@@ -10,6 +11,8 @@ import {deepCopy, get, reshape, throttle} from "./util"
 
 import {HTMLBox, HTMLBoxView, set_size} from "./layout"
 
+import plotly_css from "styles/models/plotly.css"
+
 interface PlotlyHTMLElement extends HTMLDivElement {
  _fullLayout: any
  layout: any
@@ -181,6 +184,10 @@ export class PlotlyPlotView extends HTMLBoxView {
  })
  }
 
+ override stylesheets(): StyleSheetLike[] {
+ return [...super.stylesheets(), plotly_css]
+ }
+
  override remove(): void {
  if (this.container != null) {
  (window as any).Plotly.purge(this.container)

panel/pane/perspective.py

@@ -15,7 +15,6 @@
 from bokeh.models import ColumnDataSource, ImportedStyleSheet
 from pyviz_comms import JupyterComm
 
-from ..io.resources import CDN_DIST
 from ..io.state import state
 from ..reactive import ReactiveData
 from ..util import datetime_types, lazy_load
@@ -332,10 +331,6 @@ class Perspective(ModelPane, ReactiveData):
 
  _updates: ClassVar[bool] = True
 
- _stylesheets: ClassVar[List[str]] = [
- f'{CDN_DIST}css/perspective-datatable.css'
- ]
-
  @classmethod
  def applies(cls, object):
  if isinstance(object, dict) and all(isinstance(v, (list, np.ndarray)) for v in object.values()):
@@ -430,7 +425,7 @@ def _get_theme(self, theme, resources=None):
  from ..models.perspective import THEME_URL
  theme_url = f'{THEME_URL}{theme}.css'
  if self._bokeh_model is not None:
- self._bokeh_model.__css_raw__ = self._bokeh_model.__css_raw__[:3] + [theme_url]
+ self._bokeh_model.__css_raw__ = self._bokeh_model.__css_raw__[:5] + [theme_url]
  return theme_url
 
  def _process_param_change(self, params):

panel/pane/plotly.py

@@ -5,7 +5,7 @@
 from __future__ import annotations
 
 from typing import (
- TYPE_CHECKING, Any, ClassVar, List, Mapping, Optional,
+ TYPE_CHECKING, Any, ClassVar, Mapping, Optional,
 )
 
 import numpy as np
@@ -14,7 +14,6 @@
 from bokeh.models import ColumnDataSource
 from pyviz_comms import JupyterComm
 
-from ..io.resources import CDN_DIST
 from ..util import isdatetime, lazy_load
 from ..viewable import Layoutable
 from .base import ModelPane
@@ -84,10 +83,6 @@ class Plotly(ModelPane):
 
  priority: ClassVar[float | bool | None] = 0.8
 
- _stylesheets: ClassVar[List[str]] = [
- f'{CDN_DIST}css/plotly.css'
- ]
-
  _updates: ClassVar[bool] = True
 
  _rename: ClassVar[Mapping[str, str | None]] = {

panel/dist/css/card.css → panel/styles/models/card.less

@@ -1,10 +1,16 @@
 :host(.card) {
  border-radius: 0.25rem;
+ box-shadow:
+ rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
+ rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  flex: auto;
  outline: 1px solid rgba(0, 0, 0, 0.125);
 }
 
 :host(.accordion) {
+ box-shadow:
+ rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
+ rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  outline: 1px solid rgba(0, 0, 0, 0.125);
  width: 100%;
 }

panel/template/base.py

@@ -29,8 +29,9 @@
 from ..io.notebook import render_template
 from ..io.notifications import NotificationArea
 from ..io.resources import (
- BUNDLE_DIR, CDN_DIST, ResourceComponent, _env, component_resource_path,
- get_dist_path, loading_css, parse_template, resolve_custom_path, use_cdn,
+ BUNDLE_DIR, CDN_DIST, JS_VERSION, ResourceComponent, _env,
+ component_resource_path, get_dist_path, loading_css, parse_template,
+ resolve_custom_path, use_cdn,
 )
 from ..io.save import save
 from ..io.state import curdoc_locked, state
@@ -344,8 +345,9 @@ def resolve_resources(self, cdn: bool | Literal['auto'] = 'auto') -> ResourcesTy
  name = clsname.lower()
  cdn = use_cdn() if cdn == 'auto' else cdn
  dist_path = get_dist_path(cdn=cdn)
+ version_suffix = f'?v={JS_VERSION}'
 
- resource_types['css']['loading'] = f'{dist_path}css/loading.css'
+ css_files['loading'] = f'{dist_path}css/loading.css{version_suffix}'
  raw_css.extend(list(self.config.raw_css) + [loading_css(
  config.loading_spinner, config.loading_color, config.loading_max_height
  )])
@@ -357,6 +359,15 @@ def resolve_resources(self, cdn: bool | Literal['auto'] = 'auto') -> ResourcesTy
  r for r in res if res not in resource_types[rname]
  ]
 
+ for obj, _ in self._render_items.values():
+ if not isinstance(obj, Viewable):
+ continue
+ for o in obj.select(lambda c: hasattr(c, '_stylesheets')):
+ for sts in o._stylesheets:
+ if not cdn:
+ sts = sts.replace(CDN_DIST, dist_path)
+ css_files[os.path.basename(sts)] = sts + version_suffix
+
  for rname, js in self.config.js_files.items():
  if '//' not in js and state.rel_path:
  js = f'{state.rel_path}/{js}'
@@ -387,7 +398,7 @@ def resolve_resources(self, cdn: bool | Literal['auto'] = 'auto') -> ResourcesTy
 
  css_file = os.path.basename(css)
  if (BUNDLE_DIR / tmpl_name / css_file).is_file():
- css_files[f'base_{css_file}'] = dist_path + f'bundled/{tmpl_name}/{css_file}'
+ css_files[f'base_{css_file}'] = f'{dist_path}bundled/{tmpl_name}/{css_file}{version_suffix}'
  elif isurl(css):
  css_files[f'base_{css_file}'] = css
  elif resolve_custom_path(self, css):

panel/template/bootstrap/bootstrap.html

@@ -28,9 +28,11 @@
  --header-color: {{ header_color or "var(--design-primary-text-color, var(--panel-on-primary-color))" }};
  --sidebar-width: {{ sidebar_width }}px;
  }
- #header {
+ #header, #header :host {
  --bs-body-bg: var(--header-background);
  --bs-body-color: var(--header-color);
+ --design-background-text-color: var(--header-color);
+ --design-background-color: var(--header-background);
  background-color: var(--header-background);
  color: var(--header-color);
  }

panel/template/fast/grid/fast_grid_template.html

@@ -52,6 +52,8 @@
  --neutral-fill-hover: var(--header-background);
  --neutral-fill-rest: var(--header-background);
  --neutral-foreground-rest: var(--header-color);
+ --design-background-text-color: var(--header-color);
+ --design-background-color: var(--header-background);
  background: var(--header-background);
  color: var(--header-color);
  }

panel/template/fast/list/fast_list_template.html

@@ -22,15 +22,17 @@
  --neutral-fill-hover: var(--header-background);
  --neutral-fill-rest: var(--header-background);
  --neutral-foreground-rest: var(--header-color);
+ --design-background-text-color: var(--header-color);
+ --design-background-color: var(--header-background);
  background: var(--header-background);
  color: var(--header-color);
  }
  #sidebar {
  min-width: var(--sidebar-width);
  max-width: var(--sidebar-width);
- {% if not main_layout %}
- background-color: var(--panel-surface-color);
- {% endif %}
+ {% if not main_layout %}
+ background-color: var(--panel-surface-color);
+ {% endif %}
  }
 </style>
 {% endblock %}

panel/template/golden/golden.html

@@ -8,6 +8,8 @@
  --sidebar-width: {{ sidebar_width }}px;
  }
  #header {
+ --design-background-text-color: var(--header-color);
+ --design-background-color: var(--header-background);
  background-color: var(--header-background);
  color: var(--header-color);
  }

panel/template/material/material.html

@@ -10,6 +10,8 @@
 #header {
  --mdc-theme-background: var(--header-background);
  --mdc-theme-on-background: var(--header-color);
+ --design-background-text-color: var(--header-color);
+ --design-background-color: var(--header-background);
  background-color: var(--header-background);
  color: var(--header-color);
 }

panel/template/react/react.html

@@ -32,6 +32,8 @@
  --sidebar-width: {{ sidebar_width }}px;
  }
  #header {
+ --design-background-text-color: var(--header-color);
+ --design-background-color: var(--header-background);
  background-color: var(--header-background);
  color: var(--header-color);
  }

panel/template/vanilla/vanilla.html

@@ -10,6 +10,8 @@
  #header {
  --background-color: var(--header-background);
  --text-color: var(--header-color);
+ --design-background-text-color: var(--header-color);
+ --design-background-color: var(--header-background);
  background-color: var(--header-background);
  color: var(--header-color);
  {% if theme._name == 'default' %}

panel/tests/io/test_resources.py

@@ -8,7 +8,7 @@
 
 from panel.config import config, panel_extension as extension
 from panel.io.resources import (
- CDN_DIST, DIST_DIR, PANEL_DIR, Resources, resolve_custom_path,
+ CDN_DIST, DIST_DIR, JS_VERSION, PANEL_DIR, Resources, resolve_custom_path,
  resolve_stylesheet, set_resource_mode,
 )
 from panel.io.state import set_curdoc
@@ -88,7 +88,7 @@ def test_resources_model_server(document):
  'static/extensions/panel/bundled/datatabulator/luxon/build/global/luxon.min.js',
  ]
  assert resources.css_files == [
- 'static/extensions/panel/bundled/datatabulator/tabulator-tables@5.5.0/dist/css/tabulator_simple.min.css'
+ f'static/extensions/panel/bundled/datatabulator/tabulator-tables@5.5.0/dist/css/tabulator_simple.min.css?v={JS_VERSION}'
  ]
 
 def test_resources_model_cdn(document):
@@ -101,7 +101,7 @@ def test_resources_model_cdn(document):
  f'{CDN_DIST}bundled/datatabulator/luxon/build/global/luxon.min.js',
  ]
  assert resources.css_files == [
- f'{CDN_DIST}bundled/datatabulator/tabulator-tables@5.5.0/dist/css/tabulator_simple.min.css'
+ f'{CDN_DIST}bundled/datatabulator/tabulator-tables@5.5.0/dist/css/tabulator_simple.min.css?v={JS_VERSION}'
  ]
 
 def test_resources_model_inline(document):
@@ -126,8 +126,8 @@ def test_resources_reactive_html_server(document):
  'static/extensions/panel/bundled/gridstack/gridstack@7.2.3/dist/gridstack-all.js'
  ]
  assert resources.css_files == [
- 'static/extensions/panel/bundled/gridstack/gridstack@7.2.3/dist/gridstack.min.css',
- 'static/extensions/panel/bundled/gridstack/gridstack@7.2.3/dist/gridstack-extra.min.css'
+ f'static/extensions/panel/bundled/gridstack/gridstack@7.2.3/dist/gridstack.min.css?v={JS_VERSION}',
+ f'static/extensions/panel/bundled/gridstack/gridstack@7.2.3/dist/gridstack-extra.min.css?v={JS_VERSION}'
  ]
 
 def test_resources_reactive_html_cdn(document):
@@ -139,8 +139,8 @@ def test_resources_reactive_html_cdn(document):
  f'{CDN_DIST}bundled/gridstack/gridstack@7.2.3/dist/gridstack-all.js'
  ]
  assert resources.css_files == [
- f'{CDN_DIST}bundled/gridstack/gridstack@7.2.3/dist/gridstack.min.css',
- f'{CDN_DIST}bundled/gridstack/gridstack@7.2.3/dist/gridstack-extra.min.css'
+ f'{CDN_DIST}bundled/gridstack/gridstack@7.2.3/dist/gridstack.min.css?v={JS_VERSION}',
+ f'{CDN_DIST}bundled/gridstack/gridstack@7.2.3/dist/gridstack-extra.min.css?v={JS_VERSION}'
  ]
 
 def test_resources_reactive_html_inline(document):