Upgrade InjectCSS sample from SPFx v1.8.0 to v1.20.0

[tom-daly]

By submitting this pull request, you agree to the contribution guidelines

If you aren't familiar with how to contribute to open-source repositories using GitHub, or if you find the instructions on this page confusing, sign up for one of our Sharing is Caring events. It's completely free, and we'll guide you through the process.

Q	A
Bug fix?	no
New feature?	no
New sample?	no
Related issues?	#1414

What's in this Pull Request?

These changes upgrade the solution from SPFx v1.8.0 to v1.20.0.

It also fixes the warning from the linter by adding the proper typing

It also includes modified instructions on how to deploy using PnP PowerShell since the new instructions Sept 9, 2024.

[Adam-it]

Thank you for opening a PR to our samples repo and helping us upgrade our project 👍
We will try to review this PR ASAP

[Adam-it]

@tom-daly Awesome work 👏👏👏
I had a quick check and managed to build and deploy the solution on my tenant. You Rock 🤩

I noticed a few old dependencies which should be aligned with SPFx version. I know the extension does not use them but since they are in the packge.json file we may fix them up as well. Please do give them a double check before we proceed 🙏

this kind of info you may always catch using the validate action using SPFx Toolkit or m365 spfx project doctor command using CLI for Microsoft 365.

[tom-daly]

This was the only 1 of my commits where I used the m365 cli to check the upgrade and it didn't work well. I also ran the dr and it did not pick up your suggestions but just remove gulp and add gulp-cli. I've taken the package dependencies from a clean v1.20.0 project and will be checking that in momentarily.

[Adam-it]

This was the only 1 of my commits where I used the m365 cli to check the upgrade and it didn't work well. I also ran the dr and it did not pick up your suggestions but just remove gulp and add gulp-cli. I've taken the package dependencies from a clean v1.20.0 project and will be checking that in momentarily.

I used SPFx Toolkit to support me in this review and the validate action picked up this as well.
if you had any problems with CLI for M365 please (if you have time) open up an issue in the CLI repo so that we may pick it up.
Anyway thanks for a quick turn around. I will do a recheck ASAP

[Adam-it]

@tom-daly thanks for the quick turn around.
I think we are almost there. Let's do a bit of clean up and we should be ready to merge 🚀

[Adam-it]

I think we should not update the package-lock.json which is outside of the sample folder.
Lets revert this

[Adam-it]

@tom-daly are you still working on this PR? If it is ready to be merged please do let us know by hitting the Ready for review button 👍

[Adam-it]

@tom-daly Awesome work 👏👏👏👏
You Rock 🤩