From a4b0c63eaae5838e55f230fb7452ea65f6f44e3d Mon Sep 17 00:00:00 2001 From: confused_techie Date: Mon, 18 Mar 2024 14:33:55 -0700 Subject: [PATCH 1/3] Refactor/Simplify StyleManager --- src/style-manager.js | 106 ++++++++++++++++++------------------------- 1 file changed, 45 insertions(+), 61 deletions(-) diff --git a/src/style-manager.js b/src/style-manager.js index 89252925c..f8688713f 100644 --- a/src/style-manager.js +++ b/src/style-manager.js @@ -144,50 +144,56 @@ module.exports = class StyleManager { } } - if (params.skipDeprecatedSelectorsTransformation) { - styleElement.textContent = source; - } else { - const transformed = this.upgradeDeprecatedSelectorsForStyleSheet( - source, - params.context + let textContent; + let deprecationMessages = []; + + textContent = source; + + if (!params.skipDeprecatedSelectorsTransformation) { + const transformed = this.upgradeStyleSheet( + textContent, + params.context, + transformDeprecatedShadowDOMSelectors ); - styleElement.textContent = transformed.source; - if (transformed.deprecationMessage) { - this.deprecationsBySourcePath[params.sourcePath] = { - message: transformed.deprecationMessage - }; - this.emitter.emit('did-update-deprecations'); - } + + textContent = transformed.source; + deprecationMessages.push(transformed.deprecationMessage); } if (!params.skipDeprecatedMathUsageTransformation) { - const transformed = this.upgradeDeprecatedMathUsageForStyleSheet( - styleElement.textContent, - params.context + const transformed = this.upgradeStyleSheet( + textContent, + params.context, + transformDeprecatedMathUsage ); - styleElement.textContent = transformed.source; - if (transformed.deprecationMessage) { - // Now we may already have a deprecation message from upgrading deprecated - // selectors, so we want to check if the message already exists for this - // source path, and add to it, otherwise we can create a new one - if (typeof this.deprecationsBySourcePath[params.sourcePath]?.message === "string") { - this.deprecationsBySourcePath[params.sourcePath].message += `\n${transformed.deprecationMessage}`; - this.emitter.emit('did-update-deprecations'); - } else { - // lets create a new deprecation - this.deprecationsBySourcePath[params.sourcePath] = { - message: transformed.deprecationMessage - }; - this.emitter.emit('did-update-deprecations'); - } - } + + textContent = transformed.source; + deprecationMessages.push(transformed.deprecationMessage); + } + + // Once done with any and all transformations we can apply our new textContent + styleElement.textContent = textContent; + + // Reduce the deprecation messages array to remove any null, undefined, or empty text values + // Anything not 'truthy' + deprecationMessages = deprecationMessages.filter((ele) => ele); + + if (deprecationMessages.length > 0) { + // we do in fact have deprecations + let deprecationMsg = deprecationMessages.join("\n"); + + this.deprecationsBySourcePath[params.sourcePath] = { + message: deprecationMsg + }; + this.emitter.emit("did-update-deprecations"); } if (updated) { - this.emitter.emit('did-update-style-element', styleElement); + this.emitter.emit("did-update-style-element", styleElement); } else { this.addStyleElement(styleElement); } + return new Disposable(() => { this.removeStyleElement(styleElement); }); @@ -226,46 +232,24 @@ module.exports = class StyleManager { } } - upgradeDeprecatedSelectorsForStyleSheet(styleSheet, context) { + // Wrapper function useful for applying any upgrades due to deprecations + upgradeStyleSheet(styleSheet, context, cb) { if (this.cacheDirPath != null) { - const hash = crypto.createHash('sha1'); + const hash = crypto.createHash("sha1"); if (context != null) { hash.update(context); } hash.update(styleSheet); - const cacheFilePath = path.join(this.cacheDirPath, hash.digest('hex')); - try { - return JSON.parse(fs.readFileSync(cacheFilePath)); - } catch (e) { - const transformed = transformDeprecatedShadowDOMSelectors( - styleSheet, - context - ); - fs.writeFileSync(cacheFilePath, JSON.stringify(transformed)); - return transformed; - } - } else { - return transformDeprecatedShadowDOMSelectors(styleSheet, context); - } - } - - upgradeDeprecatedMathUsageForStyleSheet(styleSheet, context) { - if (this.cacheDirPath != null) { - const hash = crypto.createHash('sha1'); - if (context != null) { - hash.update(context); - } - hash.update(styleSheet); - const cacheFilePath = path.join(this.cacheDirPath, hash.digest('hex')); + const cacheFilePath = path.join(this.cacheDirPath, hash.digest("hex")); try { return JSON.parse(fs.readFileSync(cacheFilePath)); } catch(e) { - const transformed = transformDeprecatedMathUsage(styleSheet, context); + const transformed = cb(styleSheet, context); fs.writeFileSync(cacheFilePath, JSON.stringify(transformed)); return transformed; } } else { - return transformDeprecatedMathUsage(styleSheet, context); + return cb(styleSheet, context); } } From 8dd3ca738fb831e4eac3f64e32f40527f5116fe4 Mon Sep 17 00:00:00 2001 From: confused-Techie Date: Mon, 18 Mar 2024 16:20:50 -0700 Subject: [PATCH 2/3] Ensure we can call `upgradeStyleSheet` without access to `StyleManager` local functions --- spec/style-manager-spec.js | 55 +++++++++++++++++++++++--------------- src/style-manager.js | 16 +++++++++-- 2 files changed, 47 insertions(+), 24 deletions(-) diff --git a/spec/style-manager-spec.js b/spec/style-manager-spec.js index 3d818a77d..4fde75080 100644 --- a/spec/style-manager-spec.js +++ b/spec/style-manager-spec.js @@ -147,58 +147,65 @@ describe('StyleManager', () => { // go looking for cached files, and will always use the css provided it('does not upgrade already wrapped math', () => { - let upgradedSheet = mathStyleManager.upgradeDeprecatedMathUsageForStyleSheet( + let upgradedSheet = mathStyleManager.upgradeStyleSheet( "p { padding: calc(10px/2); }", - {} + {}, + "math" ); expect(upgradedSheet.source).toEqual("p { padding: calc(10px/2); }"); }); it('does not upgrade negative numbers', () => { - let upgradedSheet = mathStyleManager.upgradeDeprecatedMathUsageForStyleSheet( + let upgradedSheet = mathStyleManager.upgradeStyleSheet( "p { padding: 0 -1px; }", - {} + {}, + "math" ); expect(upgradedSheet.source).toEqual("p { padding: 0 -1px; }"); }); it('upgrades simple division', () => { - let upgradedSheet = mathStyleManager.upgradeDeprecatedMathUsageForStyleSheet( + let upgradedSheet = mathStyleManager.upgradeStyleSheet( "p { padding: 10px/2; }", - {} + {}, + "math" ); expect(upgradedSheet.source).toEqual("p { padding: calc(10px/2); }"); }); it('upgrades multi parameter math', () => { - let upgradedSheet = mathStyleManager.upgradeDeprecatedMathUsageForStyleSheet( + let upgradedSheet = mathStyleManager.upgradeStyleSheet( "p { padding: 0 10px/2 5em; }", - {} + {}, + "math" ); expect(upgradedSheet.source).toEqual("p { padding: 0 calc(10px/2) 5em; }"); }); it('upgrades math with spaces', () => { - let upgradedSheet = mathStyleManager.upgradeDeprecatedMathUsageForStyleSheet( + let upgradedSheet = mathStyleManager.upgradeStyleSheet( "p { padding: 10px / 2; }", - {} + {}, + "math" ); expect(upgradedSheet.source).toEqual("p { padding: calc(10px / 2); }"); }); it('upgrades multiple math expressions in a single line', () => { - let upgradedSheet = mathStyleManager.upgradeDeprecatedMathUsageForStyleSheet( + let upgradedSheet = mathStyleManager.upgradeStyleSheet( "p { padding: 10px/2 10px/3; }", - {} + {}, + "math" ); expect(upgradedSheet.source).toEqual("p { padding: calc(10px/2) calc(10px/3); }"); }); it('does not upgrade base64 strings', () => { // Regression Check - let upgradedSheet = mathStyleManager.upgradeDeprecatedMathUsageForStyleSheet( + let upgradedSheet = mathStyleManager.upgradeStyleSheet( "p { cursor: -webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAL0lEQVQoz2NgCD3x//9/BhBYBWdhgFVAiVW4JBFKGIa4AqD0//9D3pt4I4tAdAMAHTQ/j5Zom30AAAAASUVORK5CYII=')); }", - {} + {}, + "math" ); expect(upgradedSheet.source).toEqual( "p { cursor: -webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAL0lEQVQoz2NgCD3x//9/BhBYBWdhgFVAiVW4JBFKGIa4AqD0//9D3pt4I4tAdAMAHTQ/j5Zom30AAAAASUVORK5CYII=')); }" @@ -206,9 +213,10 @@ describe('StyleManager', () => { }); it('does not modify hsl function where `/` is valid', () => { - let upgradedSheet = mathStyleManager.upgradeDeprecatedMathUsageForStyleSheet( + let upgradedSheet = mathStyleManager.upgradeStyleSheet( "p { caret-color: hsl(228deg 4% 24% / 0.8); }", - {} + {}, + "math" ); expect(upgradedSheet.source).toEqual( "p { caret-color: hsl(228deg 4% 24% / 0.8); }" @@ -216,9 +224,10 @@ describe('StyleManager', () => { }); it('does not modify acos function, where math is valid', () => { - let upgradedSheet = mathStyleManager.upgradeDeprecatedMathUsageForStyleSheet( + let upgradedSheet = mathStyleManager.upgradeStyleSheet( "p { transform: rotate(acos(2 * 0.125)); }", - {} + {}, + "math" ); expect(upgradedSheet.source).toEqual( "p { transform: rotate(acos(2 * 0.125)); }" @@ -226,9 +235,10 @@ describe('StyleManager', () => { }); it('recognizes valid less variables: right side', () => { - let upgradedSheet = mathStyleManager.upgradeDeprecatedMathUsageForStyleSheet( + let upgradedSheet = mathStyleManager.upgradeStyleSheet( "p { padding: @size + 12px; }", - {} + {}, + "math" ); expect(upgradedSheet.source).toEqual( "p { padding: calc(@size + 12px); }" @@ -236,9 +246,10 @@ describe('StyleManager', () => { }); it('recognizes valid less variables: left side', () => { - let upgradedSheet = mathStyleManager.upgradeDeprecatedMathUsageForStyleSheet( + let upgradedSheet = mathStyleManager.upgradeStyleSheet( "p { padding: 12px + @size; }", - {} + {}, + "math" ); expect(upgradedSheet.source).toEqual( "p { padding: calc(12px + @size); }" diff --git a/src/style-manager.js b/src/style-manager.js index f8688713f..e63e03e7f 100644 --- a/src/style-manager.js +++ b/src/style-manager.js @@ -232,8 +232,20 @@ module.exports = class StyleManager { } } - // Wrapper function useful for applying any upgrades due to deprecations - upgradeStyleSheet(styleSheet, context, cb) { + // Wrapper function useful for applying any upgrades due to deprecations + upgradeStyleSheet(styleSheet, context, upgradeName) { + let cb; + + // Allows us to utilize a direct callback, or if calling from outside + // StyleManager we can define a string that works + if (upgradeName === "math") { + cb = upgradeDeprecatedMathUsageForStyleSheet; + } else if (upgradeName === "selector") { + cb = transformDeprecatedShadowDOMSelectors; + } else if (typeof upgradeName === "function") { + cb = upgradeName; + } + if (this.cacheDirPath != null) { const hash = crypto.createHash("sha1"); if (context != null) { From 83f98e98a5585f16e5ee5029bd9f2fd9204781cd Mon Sep 17 00:00:00 2001 From: confused_techie Date: Mon, 15 Apr 2024 16:38:25 -0700 Subject: [PATCH 3/3] Update src/style-manager.js Co-authored-by: DeeDeeG --- src/style-manager.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/style-manager.js b/src/style-manager.js index e63e03e7f..3ba0b4dbe 100644 --- a/src/style-manager.js +++ b/src/style-manager.js @@ -144,11 +144,9 @@ module.exports = class StyleManager { } } - let textContent; + let textContent = source let deprecationMessages = []; - textContent = source; - if (!params.skipDeprecatedSelectorsTransformation) { const transformed = this.upgradeStyleSheet( textContent,