From 874c3d83455b3171b7eecc81b74cb7c4350d857d Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 10 Feb 2026 13:13:10 +0000 Subject: [PATCH 1/7] Fix react-toastify Sass @import deprecation warnings Warning fixed: - "Sass @import rules are deprecated" emitted from "react-toastify/scss/main.scss" during yarn build. Approach: - Stop compiling Toastify Sass source and import the packages compiled CSS (react-toastify/dist/ReactToastify.css) instead. - Remove the upstream SCSS @use from InternalStyles.scss. Why this approach: - Preserves Toastify styling behavior while eliminating upstream Sass deprecation output in our build. - Avoids carrying or maintaining local forks of third-party styles. Alternatives considered: - Keep importing SCSS and suppress warnings globally: rejected because it hides actionable deprecations. - Patch Toastify Sass locally: rejected due to maintenance overhead and divergence from upstream. Co-authored-by: Chris Zetter --- src/assets/stylesheets/ExternalStyles.scss | 1 + src/assets/stylesheets/InternalStyles.scss | 2 -- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/assets/stylesheets/ExternalStyles.scss b/src/assets/stylesheets/ExternalStyles.scss index 9b4f218a8..44c9bf0fb 100644 --- a/src/assets/stylesheets/ExternalStyles.scss +++ b/src/assets/stylesheets/ExternalStyles.scss @@ -3,5 +3,6 @@ @use "../../../node_modules/react-toggle/style.css"; @use "../../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css"; @use "../../../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css"; +@use "../../../node_modules/react-toastify/dist/ReactToastify.css"; @use "../../../node_modules/material-symbols/sharp.scss"; @use "../../../node_modules/plotly.js/src/css/style.scss" as plotlyStyle; diff --git a/src/assets/stylesheets/InternalStyles.scss b/src/assets/stylesheets/InternalStyles.scss index abcecdba4..923d89be9 100644 --- a/src/assets/stylesheets/InternalStyles.scss +++ b/src/assets/stylesheets/InternalStyles.scss @@ -1,5 +1,3 @@ -@use "../../../node_modules/react-toastify/scss/main.scss" as *; - @use "./rpf_design_system/colours" as *; @use "./rpf_design_system/font-size" as *; @use "./rpf_design_system/font-weight" as *; From 302daac65b8c9bb64e95588cc0210ee0a1f1707b Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 10 Feb 2026 13:13:38 +0000 Subject: [PATCH 2/7] Fix material-symbols Sass deprecations by using CSS asset Warnings fixed: - "Sass @import rules are deprecated" from material-symbols/sharp.scss. - "Global built-in functions are deprecated" (to-lower-case, str-index, str-slice, str-length) from material-symbols/_core.scss. Approach: - Replace material-symbols/sharp.scss import with material-symbols/sharp.css in ExternalStyles.scss. Why this approach: - Uses upstream distributed CSS, so our build no longer compiles third-party Sass that triggers deprecation warnings. - Keeps the same font-face and utility class output with minimal risk. Alternatives considered: - Keep SCSS and silence deprecations: rejected because it masks dependency issues broadly. - Patch material-symbols Sass locally: rejected due to long-term maintenance burden. Co-authored-by: Chris Zetter --- src/assets/stylesheets/ExternalStyles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/stylesheets/ExternalStyles.scss b/src/assets/stylesheets/ExternalStyles.scss index 44c9bf0fb..ca1dd5a81 100644 --- a/src/assets/stylesheets/ExternalStyles.scss +++ b/src/assets/stylesheets/ExternalStyles.scss @@ -4,5 +4,5 @@ @use "../../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css"; @use "../../../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css"; @use "../../../node_modules/react-toastify/dist/ReactToastify.css"; -@use "../../../node_modules/material-symbols/sharp.scss"; +@use "../../../node_modules/material-symbols/sharp.css"; @use "../../../node_modules/plotly.js/src/css/style.scss" as plotlyStyle; From 91525a9b1b5fd5eb3d44462430f39e1a1bb1e155 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 10 Feb 2026 13:13:50 +0000 Subject: [PATCH 3/7] Fix Sass legacy JS API deprecation in webpack build Warning fixed: - "The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0." repeated during yarn build. Approach: - Upgrade sass-loader from v10 to v13 (Node 16 compatible) and configure sass-loader with api: "modern". - Add Sass load paths for node_modules so package imports resolve under the modern API. - Update design-system-react @forward path to its explicit distributed SCSS entrypoint for reliable modern resolution. Why this approach: - Removes dependence on the deprecated Sass legacy API instead of suppressing the warning. - Keeps compatibility with current CI Node runtime while modernizing Sass integration. Alternatives considered: - Stay on sass-loader v10 and suppress the legacy API warning: rejected because this leaves deprecated behavior in place. - Jump to sass-loader v14+: rejected because those versions require newer Node than current CI. Co-authored-by: Chris Zetter --- package.json | 2 +- src/assets/stylesheets/ExternalStyles.scss | 2 +- webpack.config.js | 4 ++++ yarn.lock | 19 +++++++++---------- 4 files changed, 15 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 9dbc89a68..085017c5d 100644 --- a/package.json +++ b/package.json @@ -175,7 +175,7 @@ "resolve": "1.18.1", "resolve-url-loader": "^3.1.2", "sass": "^1.51.0", - "sass-loader": "^10.0.0", + "sass-loader": "^13.3.3", "semver": "7.3.2", "style-it": "^2.1.4", "style-loader": "1.3.0", diff --git a/src/assets/stylesheets/ExternalStyles.scss b/src/assets/stylesheets/ExternalStyles.scss index ca1dd5a81..1dcb15fea 100644 --- a/src/assets/stylesheets/ExternalStyles.scss +++ b/src/assets/stylesheets/ExternalStyles.scss @@ -1,4 +1,4 @@ -@forward "@raspberrypifoundation/design-system-react/scss/design-system-core"; +@forward "../../../node_modules/@raspberrypifoundation/design-system-react/dist/scss/design-system-core.scss"; @use "../../../node_modules/react-tabs/style/react-tabs.css"; @use "../../../node_modules/react-toggle/style.css"; @use "../../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css"; diff --git a/webpack.config.js b/webpack.config.js index 9cad844ae..c9631433b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -49,6 +49,10 @@ module.exports = { { loader: "sass-loader", options: { + api: "modern", + sassOptions: { + loadPaths: [path.resolve(__dirname, "node_modules")], + }, sourceMap: true, }, }, diff --git a/yarn.lock b/yarn.lock index 960e028d6..17763f1cb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3987,7 +3987,7 @@ __metadata: resolve: "npm:1.18.1" resolve-url-loader: "npm:^3.1.2" sass: "npm:^1.51.0" - sass-loader: "npm:^10.0.0" + sass-loader: "npm:^13.3.3" semver: "npm:7.3.2" skulpt: "npm:^1.2.0" stream-browserify: "npm:^3.0.0" @@ -21820,20 +21820,17 @@ __metadata: languageName: node linkType: hard -"sass-loader@npm:^10.0.0": - version: 10.5.2 - resolution: "sass-loader@npm:10.5.2" +"sass-loader@npm:^13.3.3": + version: 13.3.3 + resolution: "sass-loader@npm:13.3.3" dependencies: - klona: "npm:^2.0.4" - loader-utils: "npm:^2.0.0" neo-async: "npm:^2.6.2" - schema-utils: "npm:^3.0.0" - semver: "npm:^7.3.2" peerDependencies: fibers: ">= 3.1.0" node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 sass: ^1.3.0 - webpack: ^4.36.0 || ^5.0.0 + sass-embedded: "*" + webpack: ^5.0.0 peerDependenciesMeta: fibers: optional: true @@ -21841,7 +21838,9 @@ __metadata: optional: true sass: optional: true - checksum: 10/27b85f852d270a5c84b95f8ba3fbc84e7cbb77a3481f3ff2b74d4ea87f2ad4cefcba70ba41412b80e62ba433c75994d4d12d323d39a24de5087b60b571a1a3c9 + sass-embedded: + optional: true + checksum: 10/a8a8519add9f0bb2d3d1b834dbf30b1b67e22833425755a56640cc20845107850adfc6f243cdab07a5cb26ec964513b950a02dca7b1d5b3cf3659c89bf1988eb languageName: node linkType: hard From 5365e581a0713bd5f9feb2529c6c119f9a10f448 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 10 Feb 2026 13:14:13 +0000 Subject: [PATCH 4/7] Handle Plotly Sass @import deprecations Warning fixed: - "Sass @import rules are deprecated" emitted from plotly.js/src/css/style.scss imports during yarn build. Use the built plotly styles Newer versions of plotly have the built styles that we can use. --- package.json | 2 +- src/assets/stylesheets/ExternalStyles.scss | 2 +- yarn.lock | 10 +++++----- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 085017c5d..ad5d1ca04 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ "node-html-parser": "^6.1.5", "oidc-client": "^1.11.5", "parse-link-header": "^2.0.0", - "plotly.js": "^3.0.2", + "plotly.js": "^3.3.1", "prismjs": "^1.29.0", "prompts": "2.4.0", "prop-types": "^15.8.1", diff --git a/src/assets/stylesheets/ExternalStyles.scss b/src/assets/stylesheets/ExternalStyles.scss index 1dcb15fea..1785f03a1 100644 --- a/src/assets/stylesheets/ExternalStyles.scss +++ b/src/assets/stylesheets/ExternalStyles.scss @@ -5,4 +5,4 @@ @use "../../../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css"; @use "../../../node_modules/react-toastify/dist/ReactToastify.css"; @use "../../../node_modules/material-symbols/sharp.css"; -@use "../../../node_modules/plotly.js/src/css/style.scss" as plotlyStyle; +@use "../../../node_modules/plotly.js/dist/plotly.css" as plotlyStyle; diff --git a/yarn.lock b/yarn.lock index 17763f1cb..a83fd3641 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3949,7 +3949,7 @@ __metadata: optimize-css-assets-webpack-plugin: "npm:5.0.4" parse-link-header: "npm:^2.0.0" path-browserify: "npm:^1.0.1" - plotly.js: "npm:^3.0.2" + plotly.js: "npm:^3.3.1" pnp-webpack-plugin: "npm:1.6.4" postcss-flexbugs-fixes: "npm:4.2.1" postcss-loader: "npm:3.0.0" @@ -18674,9 +18674,9 @@ __metadata: languageName: node linkType: hard -"plotly.js@npm:^3.0.2": - version: 3.0.2 - resolution: "plotly.js@npm:3.0.2" +"plotly.js@npm:^3.3.1": + version: 3.3.1 + resolution: "plotly.js@npm:3.3.1" dependencies: "@plotly/d3": "npm:3.8.2" "@plotly/d3-sankey": "npm:0.7.2" @@ -18728,7 +18728,7 @@ __metadata: topojson-client: "npm:^3.1.0" webgl-context: "npm:^2.2.0" world-calendars: "npm:^1.0.4" - checksum: 10/60a1eb628e6d8729da875e6125b0f247ad1903fec85e10046e50cd72ba83ad732a786a4681784ee9a3dae85cb747979555cef2da4a4929b943cd5c99c2fdcb94 + checksum: 10/0863e4eb1539402f4add29e9d0139881d2be64585c76c61ed35f15e002bc9f5e4e97a878f7ce019cf4991fa38da728afb19993bebb78a5b74f4ec1ba194d86a6 languageName: node linkType: hard From afc29a25a2bff606024d77bebc428b8ca4545de3 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 10 Feb 2026 13:14:23 +0000 Subject: [PATCH 5/7] Update caniuse-lite to clear Browserslist outdated warning Warning fixed: - "Browserslist: caniuse-lite is outdated" shown during yarn build. Approach: - Refresh caniuse-lite/baseline browser mapping data in the lockfile using update-browserslist-db. Why this approach: - This directly resolves the warning with the officially recommended update path. - Keeps target browser data current for autoprefixing/transpilation decisions. Alternatives considered: - Ignore the warning: rejected because stale browser data can skew build targets. - Pin an older browserslist stack: rejected because it delays routine ecosystem updates. Co-authored-by: Chris Zetter --- yarn.lock | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/yarn.lock b/yarn.lock index a83fd3641..8377e15e2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8001,14 +8001,7 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30000981, caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001125, caniuse-lite@npm:^1.0.30001663": - version: 1.0.30001669 - resolution: "caniuse-lite@npm:1.0.30001669" - checksum: 10/cd0b481bb997703cb7651e55666b4aa4e7b4ecf9784796e2393179a15e55c71a6abc6ff865c922bbd3bbfa4a4bf0530d8da13989b97ff8c7850c8a5bd4e00491 - languageName: node - linkType: hard - -"caniuse-lite@npm:^1.0.30001759": +"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30000981, caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001125, caniuse-lite@npm:^1.0.30001663, caniuse-lite@npm:^1.0.30001759": version: 1.0.30001769 resolution: "caniuse-lite@npm:1.0.30001769" checksum: 10/4b7d087832d4330a8b1fa02cd9455bdb068ea67f1735f2aa6324d5b64b24f5079cf6349b13d209f268ffa59644b9f4f784266b780bafd877ceb83c9797ca80ba From 8bc11b8e100e4adf274150422a211b5a5f63313c Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 10 Feb 2026 13:29:22 +0000 Subject: [PATCH 6/7] Update AGENTS guidance for changelog and commit quality Changes: - Clarify that CHANGELOG.md should not be updated; GitHub Releases are the source of truth. - Add commit guidance requiring descriptive messages with rationale and alternatives when relevant. Why: - Aligns repository instructions with current release-note process. - Improves commit history quality and review context for future maintenance. Co-authored-by: Chris Zetter --- AGENTS.md | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index f67ddb71b..e8fdb84dd 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -44,7 +44,8 @@ yarn exec cypress run # or yarn exec cypress open ``` -- `CHANGELOG.md` must be updated for PRs. +- Do not update `CHANGELOG.md`; use GitHub Releases as the source of truth for + release notes. - Stylelint exists (`yarn stylelint`) but is not enabled in CI. ## Code Style & Conventions @@ -55,6 +56,11 @@ yarn exec cypress open `src/assets/stylesheets/InternalStyles.scss` (and external libs in `ExternalStyles.scss`); avoid `rem`, prefer `em` and `--scale-factor`. +## Git & Commit Guidance +- Write descriptive commit messages that explain why a change was made. +- When applicable, include alternatives considered and why they were not + chosen. + ## Security & Safety Guardrails - Never commit secrets or real credentials; `.env`, `.env.webcomponent`, and their `*.local` variants are gitignored. - Never commit generated output: `build/`, `coverage/`, @@ -66,14 +72,14 @@ yarn exec cypress open ## Common Tasks (add feature, add test, refactor, release/deploy if applicable) - **Add feature:** update `src/` components/hooks/redux and any affected assets; - ensure `CHANGELOG.md` reflects user-visible changes. + do not update `CHANGELOG.md`. - **Add test:** unit tests live under `src/` as `*.test.js`; e2e tests live in `cypress/e2e`; run `yarn test` or `yarn exec cypress run`. - **Refactor:** keep Shadow DOM styling constraints in mind; re-run `yarn lint` and `yarn test` after moving files or changing imports. -- **Release/deploy:** follow the release steps in `README.md` (update - `CHANGELOG.md`, bump `package.json` version, PR, tag release); deploys are - driven by `.github/workflows/deploy.yml`. +- **Release/deploy:** follow the release steps in `README.md` (bump + `package.json` version, PR, tag release); do not update `CHANGELOG.md`. + Deploys are driven by `.github/workflows/deploy.yml`. ## Further Reading (relative links) - `README.md` From 5cdb6a48f73a7a4d1f549caaa7a6184b413fda89 Mon Sep 17 00:00:00 2001 From: Chris Zetter <253059100+zetter-rpf@users.noreply.github.com> Date: Wed, 11 Feb 2026 11:54:06 +0000 Subject: [PATCH 7/7] Add in plotly sample project Plotly does have an e2e test, but I wanted to be able to check the styling of it after the 3.3 upgrade --- src/projects/python-plotly.json | 19 +++++++++++++++++++ src/web-component.html | 1 + 2 files changed, 20 insertions(+) create mode 100644 src/projects/python-plotly.json diff --git a/src/projects/python-plotly.json b/src/projects/python-plotly.json new file mode 100644 index 000000000..00421f467 --- /dev/null +++ b/src/projects/python-plotly.json @@ -0,0 +1,19 @@ +{ + "identifier": "python-plotly", + "project_type": "python", + "locale": "en", + "name": "Python Plotly", + "user_id": null, + "instructions": null, + "components": [ + { + "id": "42b4cdc9-d935-4a3d-b39a-32eb44c3ebfe", + "name": "main", + "extension": "py", + "content": "import plotly.express as px\ndf = px.data.gapminder().query(\"country=='Canada'\")\nfig = px.line(df, x=\"year\", y=\"lifeExp\", title='Life expectancy in Canada')\nfig.show()" + } + ], + "image_list": [], + "videos": [], + "audio": [] +} \ No newline at end of file diff --git a/src/web-component.html b/src/web-component.html index 35ed202e5..5ae1fde18 100644 --- a/src/web-component.html +++ b/src/web-component.html @@ -63,6 +63,7 @@ cool-html blank-python-starter cool-python + python-plotly blank-scratch