Issue 765 - Sanitize Id

.circleci/config.yml

@@ -27,7 +27,7 @@ jobs:
                     pip install -r dev-requirements.txt --quiet
                     git clone --depth 1 [email protected]:plotly/dash.git dash-main
                     pip install -e ./dash-main[dev,testing] --quiet
-                    cd dash-main/dash-renderer && npm run build && pip install -e . && cd ./../..
+                    cd dash-main/dash-renderer && npm ci && npm run build && pip install -e . && cd ./../..
 
             - run:
                 name: Build
@@ -215,7 +215,7 @@ jobs:
                     . venv/bin/activate
                     git clone --depth 1 [email protected]:plotly/dash.git dash-main
                     pip install -e ./dash-main[dev,testing] --quiet
-                    cd dash-main/dash-renderer && npm run build && pip install -e . && cd ../..
+                    cd dash-main/dash-renderer && npm ci && npm run build && pip install -e . && cd ../..
 
             - run:
                 name: Install test requirements

CHANGELOG.md

@@ -17,6 +17,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - [#724](https://github.com/plotly/dash-table/pull/724) Fix `active_cell` docstring: clarify optional nature of the `row_id` nested prop
 - [#732](https://github.com/plotly/dash-table/pull/732) Fix a bug where opening a dropdown scrolled the table down its last row
 - [#731](https://github.com/plotly/dash-table/pull/731) Fix a bug where `data=None` and `columns=None` caused the table to throw an error
+- [#766](https://github.com/plotly/dash-table/pull/766) Sanitize table `id` for stylesheet injection (fixes usage with Pattern-Matching callbacks)
 
 ## Changed
 - [#758](https://github.com/plotly/dash-table/pull/758) Improve error message for invalid filter queries

package.json

@@ -75,6 +75,7 @@
     "@types/react-select": "^3.0.10",
     "babel-loader": "^8.0.6",
     "css-loader": "^3.4.2",
+    "css.escape": "^1.5.1",
     "cypress": "^3.8.1",
     "d3-format": "^1.4.3",
     "es-check": "^5.1.0",

src/dash-table/components/ControlledTable/index.tsx

@@ -53,7 +53,7 @@ const MAX_WIDTH_ITERATIONS = 30;
 
 export default class ControlledTable extends PureComponent<ControlledTableProps> {
     private readonly menuRef = React.createRef<HTMLDivElement>();
-    private readonly stylesheet: Stylesheet = new Stylesheet(`#${this.props.id}`);
+    private readonly stylesheet: Stylesheet = new Stylesheet(`#${CSS.escape(this.props.id)}`);
     private readonly tableFn = derivedTable(() => this.props);
     private readonly tableFragments = derivedTableFragments();
     private readonly tableStyle = derivedTableStyle();

src/dash-table/index.ts

@@ -1,3 +1,5 @@
+import 'css.escape'; // polyfill
+
 import Environment from 'core/environment';
 import Logger from 'core/Logger';
 

tests/visual/percy-storybook/Css.percy.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import DataTable from 'dash-table/dash/DataTable';
+
+const props = {
+    setProps: () => { },
+    data: [
+        { a: 1, b: 2, c: 3 },
+        { a: 2, b: 4, c: 6 },
+        { a: 3, b: 6, c: 9 }
+    ],
+    columns: [
+        { id: 'a', name: 'A' },
+        { id: 'b', name: 'B' },
+        { id: 'c', name: 'C' }
+    ],
+    css: [
+        { selector: 'td', rule: 'background-color: red !important;' }
+    ]
+};
+
+storiesOf('DashTable/CSS override', module)
+    .add('leading _ without letter', () => (<DataTable
+        {...props}
+        id={'_123'}
+    />))
+    .add('leading number', () => (<DataTable
+        {...props}
+        id={'123'}
+    />))
+    .add('escaped characters', () => (<DataTable
+        {...props}
+        id={'`~!@#$%^&*()=+ \\|/.,:;\'"`?[]<>{}'}
+    />))
+    .add('stringified object as id', () => (<DataTable
+        {...props}
+        id={{ id: 3, group: 'A' }}
+    />));