Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor style engine border styles #43594

Merged
merged 17 commits into from
Sep 15, 2022
Merged

Refactor style engine border styles #43594

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
0e6cc31
Refactor createBorderGenerateFunction
Aug 25, 2022
d243abb
Add missing return type to generateRule
Aug 25, 2022
ba50355
Further refactor border styles
Aug 25, 2022
52c02c0
Refactor to use exported GenerateFunction type
Aug 25, 2022
a08f587
Rename individualProperty to edge
Aug 25, 2022
3cb3f01
Rename BorderIndividualProperty to BoxEdges
Aug 25, 2022
51212d2
Use singular nouns for tagged unions
Aug 25, 2022
983a349
Rename functions to be more consistent
Aug 25, 2022
d2e06d1
Add lodash import under external
Aug 25, 2022
4339957
Refactor to prefer interfaces
Aug 25, 2022
9ced768
Refactor BoxVariants
Aug 25, 2022
52532ad
Use camelCase from change-case instead
Aug 25, 2022
8b420f4
Rename createBorderGenerateRule -> createBorderGenerateFunction for c…
Aug 25, 2022
990f0a1
Replace change-case with camelCaseJoin util function
Aug 25, 2022
efdf651
Clean up some types and docs for upperFirst
Aug 25, 2022
adb40ef
Add comments explaining the new internal border functions
Aug 25, 2022
3ccc54c
Fix eslint errors
Aug 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions packages/style-engine/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"sideEffects": false,
"dependencies": {
"@babel/runtime": "^7.16.0",
"change-case": "^4.1.2",
"lodash": "^4.17.21"
},
"publishConfig": {
Expand Down
139 changes: 40 additions & 99 deletions packages/style-engine/src/styles/border/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,36 @@
/**
* External dependencies
*/
import { camelCase } from 'change-case';

/**
* Internal dependencies
*/
import type {
BorderIndividualStyles,
BorderIndividualProperty,
GeneratedCSSRule,
Style,
StyleDefinition,
StyleOptions,
} from '../../types';
import { generateRule, generateBoxRules, upperFirst } from '../utils';
import type { BoxEdge, GenerateFunction, StyleDefinition } from '../../types';
import { generateRule, generateBoxRules } from '../utils';

function createBorderGenerateFunction( path: string[] ): GenerateFunction {
return ( style, options ) =>
generateRule( style, options, path, camelCase( path.join( ' ' ) ) );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd say we don't need an external library here.

There's already a util called upperFirst. See the unit test.

So, until we need extra functionality, maybe we could do the following:

const path = [ 'some', 'path', 'to', 'somewhere' ];

console.log( path.map( ( value, index) => index !== 0 ? upperFirst( value ) : value ).join( '' ) );  
// -> somePathToSomewhere

Or we could roll our own camelCase using upperFirst():

const path = [ 'some', 'path', 'to', 'somewhere' ];

function camelCase( [ firstItem, ...rest ] ) {
	return firstItem.toLowerCase() + rest.map( upperFirst ).join( '' );
}

console.log( camelCase( path ) );
// -> somePathToSomewhere

What do you reckon?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was using the lodash version of camelCase first which didn't require adding a dependency, but apparently that is being phased out elsewhere in Gutenberg in favor of change-case.

But adding our own function is easy enough and it can be trimmed a bit more to our use-case, so that's fixed in 990f0a1.

}

const color = {
function createBorderEdgeGenerateFunction( edge: BoxEdge ): GenerateFunction {
return ( style, options ) => {
return [ 'color', 'style', 'width' ].flatMap( ( key ) => {
const path = [ 'border', edge, key ];
return createBorderGenerateFunction( path )( style, options );
} );
};
}

const color: StyleDefinition = {
name: 'color',
generate: (
style: Style,
options: StyleOptions,
path: string[] = [ 'border', 'color' ],
ruleKey: string = 'borderColor'
): GeneratedCSSRule[] => {
return generateRule( style, options, path, ruleKey );
},
generate: createBorderGenerateFunction( [ 'border', 'color' ] ),
};

const radius = {
const radius: StyleDefinition = {
name: 'radius',
generate: ( style: Style, options: StyleOptions ): GeneratedCSSRule[] => {
generate: ( style, options ) => {
return generateBoxRules(
style,
options,
Expand All @@ -39,104 +44,40 @@ const radius = {
},
};

const borderStyle = {
const borderStyle: StyleDefinition = {
name: 'style',
generate: (
style: Style,
options: StyleOptions,
path: string[] = [ 'border', 'style' ],
ruleKey: string = 'borderStyle'
): GeneratedCSSRule[] => {
return generateRule( style, options, path, ruleKey );
},
generate: createBorderGenerateFunction( [ 'border', 'style' ] ),
};

const width = {
const width: StyleDefinition = {
name: 'width',
generate: (
style: Style,
options: StyleOptions,
path: string[] = [ 'border', 'width' ],
ruleKey: string = 'borderWidth'
): GeneratedCSSRule[] => {
return generateRule( style, options, path, ruleKey );
},
generate: createBorderGenerateFunction( [ 'border', 'width' ] ),
};

const borderDefinitionsWithIndividualStyles: StyleDefinition[] = [
color,
borderStyle,
width,
];

/**
* Returns a curried generator function with the individual border property ('top' | 'right' | 'bottom' | 'left') baked in.
*
* @param individualProperty Individual border property ('top' | 'right' | 'bottom' | 'left').
*
* @return StyleDefinition[ 'generate' ]
*/
const createBorderGenerateFunction =
( individualProperty: BorderIndividualProperty ) =>
( style: Style, options: StyleOptions ) => {
const styleValue:
| BorderIndividualStyles< typeof individualProperty >
| undefined = style?.border?.[ individualProperty ];

if ( ! styleValue ) {
return [];
}

return borderDefinitionsWithIndividualStyles.reduce(
(
acc: GeneratedCSSRule[],
borderDefinition: StyleDefinition
): GeneratedCSSRule[] => {
const key = borderDefinition.name;
if (
styleValue.hasOwnProperty( key ) &&
typeof borderDefinition.generate === 'function'
) {
const ruleKey = `border${ upperFirst(
individualProperty
) }${ upperFirst( key ) }`;
acc.push(
...borderDefinition.generate(
style,
options,
[ 'border', individualProperty, key ],
ruleKey
)
);
}
return acc;
},
[]
);
};

const borderTop = {
const borderTop: StyleDefinition = {
name: 'borderTop',
generate: createBorderGenerateFunction( 'top' ),
generate: createBorderEdgeGenerateFunction( 'top' ),
};

const borderRight = {
const borderRight: StyleDefinition = {
name: 'borderRight',
generate: createBorderGenerateFunction( 'right' ),
generate: createBorderEdgeGenerateFunction( 'right' ),
};

const borderBottom = {
const borderBottom: StyleDefinition = {
name: 'borderBottom',
generate: createBorderGenerateFunction( 'bottom' ),
generate: createBorderEdgeGenerateFunction( 'bottom' ),
};

const borderLeft = {
const borderLeft: StyleDefinition = {
name: 'borderLeft',
generate: createBorderGenerateFunction( 'left' ),
generate: createBorderEdgeGenerateFunction( 'left' ),
};

export default [
...borderDefinitionsWithIndividualStyles,
color,
borderStyle,
width,
radius,
borderTop,
borderRight,
Expand Down
2 changes: 1 addition & 1 deletion packages/style-engine/src/styles/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export function generateRule(
options: StyleOptions,
path: string[],
ruleKey: string
) {
): GeneratedCSSRule[] {
const styleValue: string | undefined = get( style, path );

return styleValue
Expand Down
43 changes: 23 additions & 20 deletions packages/style-engine/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,22 @@
*/
import type { CSSProperties } from 'react';

type BoxVariants = 'margin' | 'padding' | undefined;
export type Box< T extends BoxVariants = undefined > = {
type BoxVariant = 'margin' | 'padding';
export interface Box< T extends BoxVariant | undefined = undefined > {
top?: CSSProperties[ T extends undefined ? 'top' : `${ T }Top` ];
right?: CSSProperties[ T extends undefined ? 'right' : `${ T }Right` ];
bottom?: CSSProperties[ T extends undefined ? 'bottom' : `${ T }Bottom` ];
left?: CSSProperties[ T extends undefined ? 'left' : `${ T }Left` ];
};
}

export type BoxEdge = 'top' | 'right' | 'bottom' | 'left';

export type BorderIndividualProperty = 'top' | 'right' | 'bottom' | 'left';
// `T` is one of the values in `BorderIndividualProperty`. The expected CSSProperties key is something like `borderTopColor`.
export type BorderIndividualStyles< T extends BorderIndividualProperty > = {
color?: CSSProperties[ `border${ Capitalize< string & T > }Color` ];
style?: CSSProperties[ `border${ Capitalize< string & T > }Style` ];
width?: CSSProperties[ `border${ Capitalize< string & T > }Width` ];
};
export interface BorderIndividualStyles< T extends BoxEdge > {
color?: CSSProperties[ `border${ Capitalize< T > }Color` ];
style?: CSSProperties[ `border${ Capitalize< T > }Style` ];
width?: CSSProperties[ `border${ Capitalize< T > }Width` ];
}

export interface Style {
border?: {
Expand Down Expand Up @@ -65,31 +66,33 @@ export interface Style {
};
}

export type CssRulesKeys = { default: string; individual: string };
export interface CssRulesKeys {
default: string;
individual: string;
}

export type StyleOptions = {
export interface StyleOptions {
/**
* CSS selector for the generated style.
*/
selector?: string;
};
}

export type GeneratedCSSRule = {
export interface GeneratedCSSRule {
selector?: string;
value: string;
/**
* The CSS key in JS style attribute format, compatible with React.
* E.g. `paddingTop` instead of `padding-top`.
*/
key: string;
};
}

export interface GenerateFunction {
( style: Style, options: StyleOptions ): GeneratedCSSRule[];
}

export interface StyleDefinition {
name: string;
generate?: (
style: Style,
options: StyleOptions | {},
path?: string[],
ruleKey?: string
) => GeneratedCSSRule[];
generate?: GenerateFunction;
}