From edb7196348d21216240e26cefc708d75ee8b4cad Mon Sep 17 00:00:00 2001
From: bendera <szoftverhiba@gmail.com>
Date: Sun, 26 Jan 2025 02:36:51 +0100
Subject: [PATCH 1/3] Fix Icon CSP issues

---
 dev/vscode-icon/nonce.html            | 16 ++++++++++++++--
 src/vscode-icon/vscode-icon.styles.ts |  4 ++++
 src/vscode-icon/vscode-icon.ts        | 19 +++++++++++--------
 3 files changed, 29 insertions(+), 10 deletions(-)
diff --git a/dev/vscode-icon/nonce.html b/dev/vscode-icon/nonce.html
index e105dc218..1cf89e329 100644
--- a/dev/vscode-icon/nonce.html
+++ b/dev/vscode-icon/nonce.html
@@ -3,6 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'none'; script-src 'nonce-abc123'; script-src-elem 'nonce-abc123'; font-src 'self' data: 'nonce-abc123'; style-src-elem 'nonce-abc123'"
+    />
     <title>VSCode Elements</title>
     <link
       rel="stylesheet"
@@ -13,9 +17,14 @@
     <script
       type="module"
       src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+      nonce="abc123"
     ></script>
-    <script type="module" src="/dist/main.js"></script>
-    <script>
+    <script nonce="abc123">
+      window.litNonce = 'abc123';
+      window.vscodeWebviewPlaygroundNonce = 'abc123';
+    </script>
+    <script type="module" src="/dist/main.js" nonce="abc123"></script>
+    <script nonce="abc123">
       const logEvents = (selector, eventType) => {
         document.querySelector(selector).addEventListener(eventType, (ev) => {
           console.log(ev);
@@ -29,6 +38,9 @@ <h1>Using nonce property</h1>
     <main>
       <vscode-demo>
         <vscode-icon name="account"></vscode-icon>
+        <vscode-icon name="loading" size="32" spin spin-duration="3"></vscode-icon>
+        <vscode-button icon="account">Hello World</vscode-button>
+        <vscode-button secondary>Hello World</vscode-button>
       </vscode-demo>
     </main>
   </body>
diff --git a/src/vscode-icon/vscode-icon.styles.ts b/src/vscode-icon/vscode-icon.styles.ts
index e753ddff2..3ba48e092 100644
--- a/src/vscode-icon/vscode-icon.styles.ts
+++ b/src/vscode-icon/vscode-icon.styles.ts
@@ -10,7 +10,11 @@ const styles: CSSResultGroup = [
     }
 
     .codicon[class*='codicon-'] {
+      animation-duration: var(--spin-duration) !important;
       display: block;
+      font-size: var(--size);
+      height: var(--size);
+      width: var(--size);
     }
 
     .icon,
diff --git a/src/vscode-icon/vscode-icon.ts b/src/vscode-icon/vscode-icon.ts
index 4b06d2154..480bd096c 100644
--- a/src/vscode-icon/vscode-icon.ts
+++ b/src/vscode-icon/vscode-icon.ts
@@ -1,7 +1,6 @@
-import {html, TemplateResult} from 'lit';
+import {html, PropertyValues, TemplateResult} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
-import {styleMap} from 'lit/directives/style-map.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {VscElement} from '../includes/VscElement.js';
 import styles from './vscode-icon.styles.js';
@@ -70,6 +69,16 @@ export class VscodeIcon extends VscElement {
     VscodeIcon.nonce = nonce;
   }
 
+  protected willUpdate(changedProperties: PropertyValues): void {
+    if(changedProperties.has('size')) {
+      this.style.setProperty('--size', `${this.size}px`);
+    }
+
+    if (changedProperties.has('spinDuration')) {
+      this.style.setProperty('--spin-duration', `${this.spinDuration}s`);
+    }
+  }
+
   /**
    * For using web fonts in web components, the font stylesheet must be included
    * twice: on the page and in the web component. This function looks for the
@@ -102,12 +111,6 @@ export class VscodeIcon extends VscElement {
         ['codicon-' + this.name]: true,
         spin: this.spin,
       })}
-      style=${styleMap({
-        animationDuration: String(this.spinDuration) + 's',
-        fontSize: this.size + 'px',
-        height: this.size + 'px',
-        width: this.size + 'px',
-      })}
     ></span>`;
 
     const wrapped = this.actionIcon

From b87f98ce3ba47a10257f781d0ef1f26ec7b40fc1 Mon Sep 17 00:00:00 2001
From: bendera <szoftverhiba@gmail.com>
Date: Sun, 26 Jan 2025 16:24:39 +0100
Subject: [PATCH 2/3] Upgrade Playground

---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e6753a211..9e063d1fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,7 @@
         "@types/node": "^22.10.5",
         "@typescript-eslint/eslint-plugin": "^8.19.1",
         "@typescript-eslint/parser": "^8.19.1",
-        "@vscode-elements/webview-playground": "^1.3.0",
+        "@vscode-elements/webview-playground": "^1.4.0",
         "@vscode/codicons": "^0.0.36",
         "@web/dev-server": "^0.4.6",
         "@web/dev-server-esbuild": "^1.0.3",
@@ -4089,9 +4089,9 @@
       }
     },
     "node_modules/@vscode-elements/webview-playground": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@vscode-elements/webview-playground/-/webview-playground-1.3.0.tgz",
-      "integrity": "sha512-IOGaTjiRcKcdyBsxR/ubPd21J9c2KFTFJKrfJA4IS4fSV+LvVIbW30UhAnysy8njnVbtoLECh7gxmcU+xFfoow==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@vscode-elements/webview-playground/-/webview-playground-1.4.0.tgz",
+      "integrity": "sha512-aXW4jI+/efn4mv3Zr9HVRRho4409MmgxMlPwj1+/gwj7HMvWflXw3+HkGmgAaDR87h4BySt1Mft+ygXDXeU3RQ==",
       "dev": true,
       "license": "MIT"
     },
@@ -15066,9 +15066,9 @@
       }
     },
     "@vscode-elements/webview-playground": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@vscode-elements/webview-playground/-/webview-playground-1.3.0.tgz",
-      "integrity": "sha512-IOGaTjiRcKcdyBsxR/ubPd21J9c2KFTFJKrfJA4IS4fSV+LvVIbW30UhAnysy8njnVbtoLECh7gxmcU+xFfoow==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@vscode-elements/webview-playground/-/webview-playground-1.4.0.tgz",
+      "integrity": "sha512-aXW4jI+/efn4mv3Zr9HVRRho4409MmgxMlPwj1+/gwj7HMvWflXw3+HkGmgAaDR87h4BySt1Mft+ygXDXeU3RQ==",
       "dev": true
     },
     "@vscode/codicons": {
diff --git a/package.json b/package.json
index 95b946e0b..b4ef1e3f4 100644
--- a/package.json
+++ b/package.json
@@ -154,7 +154,7 @@
     "@types/node": "^22.10.5",
     "@typescript-eslint/eslint-plugin": "^8.19.1",
     "@typescript-eslint/parser": "^8.19.1",
-    "@vscode-elements/webview-playground": "^1.3.0",
+    "@vscode-elements/webview-playground": "^1.4.0",
     "@vscode/codicons": "^0.0.36",
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-esbuild": "^1.0.3",

From 053aafa299d42d69a6f3f60aa06c19146fd89906 Mon Sep 17 00:00:00 2001
From: bendera <szoftverhiba@gmail.com>
Date: Sun, 26 Jan 2025 16:27:43 +0100
Subject: [PATCH 3/3] Update changelog

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9adabc441..acc24cce0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
+## [Unreleased]
+
+### Fixed
+
+- **Icon**: Eliminating style tags to prevent CSP violations.
+
 ## [1.11.0] - 2025-01-22
 
 ### Fixed
