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

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

@ -1,6 +1,9 @@
export interface ExtendedStyleRule extends CSSStyleRule { export interface ExtendedStyleRule extends CSSStyleRule {
isDeclaredAfter: (selector: string) => boolean; isDeclaredAfter: (selector: string) => boolean;
} }
interface ExtendedStyleDeclaration extends CSSStyleDeclaration {
getPropVal: (prop: string, strip?: boolean) => string;
}
const getIsDeclaredAfter = (styleRule: CSSStyleRule) => (selector: string) => { const getIsDeclaredAfter = (styleRule: CSSStyleRule) => (selector: string) => {
const cssStyleRules = Array.from( const cssStyleRules = Array.from(
@ -36,9 +39,17 @@ class CSSHelp {
?.filter(ele => ele?.selectorText === selector) ?.filter(ele => ele?.selectorText === selector)
.map(x => x.style); .map(x => x.style);
} }
getStyleDeclaration(selector: string): CSSStyleDeclaration | undefined { getStyle(selector: string): ExtendedStyleDeclaration | null {
return this._getStyleRules()?.find(ele => ele?.selectorText === selector) const style = this._getStyleRules().find(
?.style; 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 { getStyleRule(selector: string): ExtendedStyleRule | null {
const styleRule = this._getStyleRules()?.find( const styleRule = this._getStyleRules()?.find(