Skip to content

Refactor style engine border styles #43594

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

Merged
ajlende merged 17 commits into from
Sep 15, 2022
Merged

Refactor style engine border styles #43594

Show file tree
Hide file tree
Changes from 1 commit
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
Prev Previous commit
Next Next commit
Use singular nouns for tagged unions
  • Loading branch information
Alex Lende committed Aug 25, 2022
commit 51212d27f5467bed849736275ae4c23a757a8652
4 changes: 2 additions & 2 deletions packages/style-engine/src/styles/border/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
* Internal dependencies
*/
import { camelCase } from 'lodash';
import type { BoxEdges, GenerateFunction, StyleDefinition } from '../../types';
import type { BoxEdge, GenerateFunction, StyleDefinition } from '../../types';
import { generateRule, generateBoxRules } from '../utils';

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

@ramonjd ramonjd Aug 25, 2022

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

@ajlende ajlende Aug 25, 2022

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.

}

function createBorderGenerateFunction( edge: BoxEdges ): GenerateFunction {
function createBorderGenerateFunction( edge: BoxEdge ): GenerateFunction {
return ( style, options ) => {
return [ 'color', 'style', 'width' ].flatMap( ( key ) => {
const path = [ 'border', edge, key ];
Expand Down
4 changes: 2 additions & 2 deletions packages/style-engine/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ export type Box< T extends BoxVariants = undefined > = {
left?: CSSProperties[ T extends undefined ? 'left' : `${ T }Left` ];
};

export type BoxEdges = 'top' | 'right' | 'bottom' | 'left';
export type BoxEdge = '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 BoxEdges > = {
export type BorderIndividualStyles< T extends BoxEdge > = {
color?: CSSProperties[ `border${ Capitalize< T > }Color` ];
style?: CSSProperties[ `border${ Capitalize< T > }Style` ];
width?: CSSProperties[ `border${ Capitalize< T > }Width` ];
Expand Down