Ensure css_files are referenced from correct relative path (#3289)

* Ensure css_files are referenced from correct relative path

* Add tests

* Fix flake

panel/io/resources.py

@@ -275,10 +275,19 @@ def css_files(self):
         files = super(Resources, self).css_files
         self.extra_resources(files, '__css__')
 
+        css_files = []
+        for css_file in files:
+            if (css_file.startswith(state.base_url) or css_file.startswith('static/')):
+                if css_file.startswith(state.base_url):
+                    css_file = css_file[len(state.base_url):]
+                if state.rel_path:
+                    css_file = f'{state.rel_path}/{css_file}'
+            css_files.append(css_file)
+
         for cssf in config.css_files:
             if os.path.isfile(cssf) or cssf in files:
                 continue
-            files.append(cssf)
+            css_files.append(cssf)
         if self.mode == 'server':
             if state.rel_path:
                 dist_dir = f'{state.rel_path}/{LOCAL_DIST}'
@@ -290,8 +299,8 @@ def css_files(self):
         for cssf in glob.glob(str(DIST_DIR / 'css' / '*.css')):
             if self.mode == 'inline':
                 break
-            files.append(dist_dir + f'css/{os.path.basename(cssf)}')
-        return files
+            css_files.append(dist_dir + f'css/{os.path.basename(cssf)}')
+        return css_files
 
     @property
     def render_js(self):

panel/tests/test_server.py

@@ -18,7 +18,7 @@
 from panel.pane import Markdown
 from panel.reactive import ReactiveHTML
 from panel.template import BootstrapTemplate
-from panel.widgets import Button, Tabulator
+from panel.widgets import Button, Tabulator, Terminal
 
 
 def test_get_server(html_server_session):
@@ -677,3 +677,31 @@ def test_server_component_custom_resources_with_subpath_and_prefix_relative_url(
     r = requests.get(f"http://localhost:{port}/prefix/subpath/component")
     content = r.content.decode('utf-8')
     assert 'href="../components/panel.tests.test_server/CustomComponent/__css__/./assets/custom.css"' in content
+
+
+def test_server_component_css_with_prefix_relative_url():
+    component = Terminal()
+
+    port = 6027
+    serve({'component': component}, port=port, threaded=True, show=False)
+
+    # Wait for server to start
+    time.sleep(1)
+
+    r = requests.get(f"http://localhost:{port}/component")
+    content = r.content.decode('utf-8')
+    assert 'href="static/extensions/panel/bundled/terminal/[email protected]/css/xterm.css' in content
+
+
+def test_server_component_css_with_subpath_and_prefix_relative_url():
+    component = Terminal()
+
+    port = 6028
+    serve({'/subpath/component': component}, port=port, threaded=True, show=False, prefix='prefix')
+
+    # Wait for server to start
+    time.sleep(1)
+
+    r = requests.get(f"http://localhost:{port}/prefix/subpath/component")
+    content = r.content.decode('utf-8')
+    assert 'href="../static/extensions/panel/bundled/terminal/[email protected]/css/xterm.css' in content