pulsar-edit/pulsar
1
1
Fork 0
mirror of https://github.com/pulsar-edit/pulsar.git synced 2024-08-16 14:40:23 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #959 from pulsar-edit/refactor-style-manager

Browse Source 
[core] Simplify/Cleanup `StyleManager`
This commit is contained in:
confused_techie 2024-04-15 16:46:56 -07:00 committed by GitHub
commit cf7040e297
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 87 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
spec/style-manager-spec.js
View File

@ -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); }"

114
src/style-manager.js
View File

@ -144,50 +144,54 @@ module.exports = class StyleManager {
}
}
if (params.skipDeprecatedSelectorsTransformation) {
styleElement.textContent = source;
} else {
const transformed = this.upgradeDeprecatedSelectorsForStyleSheet(
source,
params.context
let textContent = source
let deprecationMessages = [];
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 +230,36 @@ module.exports = class StyleManager {
}
}
upgradeDeprecatedSelectorsForStyleSheet(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'));
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);
}
}
// 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;
}
upgradeDeprecatedMathUsageForStyleSheet(styleSheet, context) {
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'));
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);
}
}