gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(client): remove whitespace from calculated values (#42400)

Browse Source 
* feat(client?): remove whitespace for calculated values

* feat(client): remove whitespace from styledeclaration

* do not automatically strip

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: include all properties of CSSStyleDeclaration

* fix test for getPropVal

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
Shaun Hamilton
2021-06-10 22:59:02 +01:00
committed by GitHub
parent c7882fed9b
commit af2a7658b4
2 changed files with 29 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
client/src/utils/css-help.test.ts
View File

@ -17,12 +17,17 @@ describe('css-help', () => {
const conditionText = mediaRule.media[0];
mediaRule.conditionText = conditionText;
});
describe('getStyleDeclaration', () => {
it('should return a CSSStyleDeclartion array of length 1', () => {
expect(t.getStyleDeclarations('*')?.length).toEqual(1);
describe('getStyle', () => {
it('should return an ExtendedCSSStyleDeclartion object of length 1', () => {
expect(t.getStyle('*')?.length).toEqual(1);
});
it('should return a non-empty CSSStyleDeclaration array', () => {
expect(t.getStyleDeclaration('.bb1')).toBeTruthy();
it('should return a non-empty ExtendedCSSStyleDeclaration object', () => {
expect(t.getStyle('.bb1')).toBeTruthy();
});
it('should return a whitespaceless string', () => {
expect(t.getStyle('.bb1d')?.getPropVal('background', true)).toEqual(
'linear-gradient(var(--building-color1)50%,var(--window-color1))'
);
});
});
describe('isPropertyUsed', () => {
@ -41,21 +46,18 @@ describe('css-help', () => {
describe('getPropertyValue', () => {
it('should return custom property value needing trim', () => {
expect(
t
.getStyleDeclaration(':root')
?.getPropertyValue('--building-color1')
.trim()
t.getStyle(':root')?.getPropertyValue('--building-color1')?.trim()
).toEqual('#aa80ff');
});
it('should return value to existing property', () => {
expect(
t.getStyleDeclaration('.bb4a')?.getPropertyValue('background-color')
t.getStyle('.bb4a')?.getPropertyValue('background-color')
).toBeTruthy();
});
it('should return property value without evaluating result', () => {
expect(
t.getStyleDeclaration('.bb4a')?.getPropertyValue('background-color')
).toEqual('var(--building-color4)');
expect(t.getStyle('.bb4a')?.getPropertyValue('background-color')).toEqual(
'var(--building-color4)'
);
});
});
describe('getCSSRules', () => {

17
client/src/utils/css-help.ts
View File

@ -1,6 +1,9 @@
export interface ExtendedStyleRule extends CSSStyleRule {
isDeclaredAfter: (selector: string) => boolean;
}
interface ExtendedStyleDeclaration extends CSSStyleDeclaration {
getPropVal: (prop: string, strip?: boolean) => string;
}
const getIsDeclaredAfter = (styleRule: CSSStyleRule) => (selector: string) => {
const cssStyleRules = Array.from(
@ -36,9 +39,17 @@ class CSSHelp {
?.filter(ele => ele?.selectorText === selector)
.map(x => x.style);
}
getStyleDeclaration(selector: string): CSSStyleDeclaration | undefined {
return this._getStyleRules()?.find(ele => ele?.selectorText === selector)
?.style;
getStyle(selector: string): ExtendedStyleDeclaration | null {
const style = this._getStyleRules().find(
ele => ele?.selectorText === selector
)?.style as ExtendedStyleDeclaration | undefined;
if (!style) return null;
style.getPropVal = (prop: string, strip = false) => {
return strip
? style.getPropertyValue(prop).replace(/\s+/g, '')
: style.getPropertyValue(prop);
};
return style;
}
getStyleRule(selector: string): ExtendedStyleRule | null {
const styleRule = this._getStyleRules()?.find(