Skip to content

Fix build deprecation warnings #1317

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zetter-rpf merged 7 commits into from
Feb 23, 2026
Merged

Fix build deprecation warnings #1317

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
874c3d8
Fix react-toastify Sass @import deprecation warnings
cursoragent Feb 10, 2026
302daac
Fix material-symbols Sass deprecations by using CSS asset
cursoragent Feb 10, 2026
91525a9
Fix Sass legacy JS API deprecation in webpack build
cursoragent Feb 10, 2026
5365e58
Handle Plotly Sass @import deprecations
cursoragent Feb 10, 2026
afc29a2
Update caniuse-lite to clear Browserslist outdated warning
cursoragent Feb 10, 2026
8bc11b8
Update AGENTS guidance for changelog and commit quality
cursoragent Feb 10, 2026
5cdb6a4
Add in plotly sample project
zetter-rpf Feb 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 11 additions & 5 deletions AGENTS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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/`,
Expand All @@ -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`
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
7 changes: 4 additions & 3 deletions src/assets/stylesheets/ExternalStyles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
@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";
@use "../../../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css";
@use "../../../node_modules/material-symbols/sharp.scss";
@use "../../../node_modules/plotly.js/src/css/style.scss" as plotlyStyle;
@use "../../../node_modules/react-toastify/dist/ReactToastify.css";
@use "../../../node_modules/material-symbols/sharp.css";
@use "../../../node_modules/plotly.js/dist/plotly.css" as plotlyStyle;
2 changes: 0 additions & 2 deletions src/assets/stylesheets/InternalStyles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 *;
Expand Down
19 changes: 19 additions & 0 deletions src/projects/python-plotly.json
View file
Open in desktop
Copy link
Contributor

@adrian-rpf adrian-rpf Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this linked to the deprecation warnings?

Copy link
Contributor

@adrian-rpf adrian-rpf Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I guess you were looking at testing it. Makes more sense.

Copy link
Contributor Author

@zetter-rpf zetter-rpf Feb 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that was exactly it (I do put context into commit messages if it's ever not clear in the PR itself)

Original file line number Diff line number Diff line change
@@ -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": []
}
1 change: 1 addition & 0 deletions src/web-component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@
<a href="#" data-project="cool-html">cool-html</a>
<a href="#" data-project="blank-python-starter">blank-python-starter</a>
<a href="#" data-project="cool-python">cool-python</a>
<a href="#" data-project="python-plotly">python-plotly</a>
<a href="#" data-project="blank-scratch">blank-scratch</a>
</div>
<div id="editor-component"></div>
Expand Down
4 changes: 4 additions & 0 deletions webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,10 @@ module.exports = {
{
loader: "sass-loader",
options: {
api: "modern",
sassOptions: {
loadPaths: [path.resolve(__dirname, "node_modules")],
},
sourceMap: true,
},
},
Expand Down
38 changes: 15 additions & 23 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -18674,9 +18667,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"
Expand Down Expand Up @@ -18728,7 +18721,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

Expand Down Expand Up @@ -21820,28 +21813,27 @@ __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
node-sass:
optional: true
sass:
optional: true
checksum: 10/27b85f852d270a5c84b95f8ba3fbc84e7cbb77a3481f3ff2b74d4ea87f2ad4cefcba70ba41412b80e62ba433c75994d4d12d323d39a24de5087b60b571a1a3c9
sass-embedded:
optional: true
checksum: 10/a8a8519add9f0bb2d3d1b834dbf30b1b67e22833425755a56640cc20845107850adfc6f243cdab07a5cb26ec964513b950a02dca7b1d5b3cf3659c89bf1988eb
languageName: node
linkType: hard

Expand Down