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

Jump to bottom

Style engine: export util to compile CSS custom var from preset string #64490

Merged
merged 3 commits into from
Aug 15, 2024
Merged

Style engine: export util to compile CSS custom var from preset string #64490

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c394672
Remove compileStyleValue
ramonjd Aug 14, 2024
47f315c
CHANGELOG.md
ramonjd Aug 14, 2024
3fadf97
Rename function to getCSSValueFromRawStyle
ramonjd Aug 15, 2024
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
7 changes: 3 additions & 4 deletions packages/block-editor/src/components/global-styles/use-global-styles-output.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
} from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
import { useContext, useMemo } from '@wordpress/element';
import { getCSSRules } from '@wordpress/style-engine';
import { getCSSRules, getCSSValueFromRawStyle } from '@wordpress/style-engine';
import { privateApis as componentsPrivateApis } from '@wordpress/components';

/**
Expand All @@ -24,7 +24,6 @@ import {
scopeFeatureSelectors,
appendToSelector,
getBlockStyleVariationSelector,
compileStyleValue,
getResolvedValue,
} from './utils';
import { getBlockCSSSelector } from './get-block-css-selector';
Expand Down Expand Up @@ -357,7 +356,7 @@ export function getStylesDeclarations(
? name
: kebabCase( name );
declarations.push(
`${ cssProperty }: ${ compileStyleValue(
`${ cssProperty }: ${ getCSSValueFromRawStyle(
getValueFromObjectPath( styleValue, [ prop ] )
) }`
);
Expand All @@ -369,7 +368,7 @@ export function getStylesDeclarations(
? key
: kebabCase( key );
declarations.push(
`${ cssProperty }: ${ compileStyleValue(
`${ cssProperty }: ${ getCSSValueFromRawStyle(
getValueFromObjectPath( blockStyles, pathToValue )
) }`
);
Expand Down
31 changes: 2 additions & 29 deletions packages/block-editor/src/components/global-styles/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import fastDeepEqual from 'fast-deep-equal/es6';
* WordPress dependencies
*/
import { useViewportMatch } from '@wordpress/compose';
import { getCSSValueFromRawStyle } from '@wordpress/style-engine';

/**
* Internal dependencies
Expand Down Expand Up @@ -526,34 +527,6 @@ export function getBlockStyleVariationSelector( variation, blockSelector ) {
return result.join( ',' );
}

/**
* Converts style preset values `var:` to CSS custom var values.
* TODO: Export and use the style engine util: getCSSVarFromStyleValue().
*
* Example:
*
* compileStyleValue( 'var:preset|color|primary' ) // returns 'var(--wp--color-primary)'
*
* @param {string} uncompiledValue A block style value.
* @return {string} The compiled, or original value.
*/
export function compileStyleValue( uncompiledValue ) {
const VARIABLE_REFERENCE_PREFIX = 'var:';
if (
'string' === typeof uncompiledValue &&
uncompiledValue?.startsWith?.( VARIABLE_REFERENCE_PREFIX )
) {
const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
const variable = uncompiledValue
.slice( VARIABLE_REFERENCE_PREFIX.length )
.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )
.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );
return `var(--wp--${ variable })`;
}
return uncompiledValue;
}

/**
* Looks up a theme file URI based on a relative path.
*
Expand Down Expand Up @@ -591,7 +564,7 @@ export function getResolvedRefValue( ruleValue, tree ) {

if ( typeof ruleValue !== 'string' && ruleValue?.ref ) {
const refPath = ruleValue.ref.split( '.' );
const resolvedRuleValue = compileStyleValue(
const resolvedRuleValue = getCSSValueFromRawStyle(
getValueFromObjectPath( tree, refPath )
);

Expand Down
4 changes: 4 additions & 0 deletions packages/style-engine/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Unreleased

### New Features

- Style engine: export util to compile CSS custom var from preset string. ([#64490](https://github.com/WordPress/gutenberg/pull/64490))

## 2.5.0 (2024-08-07)

## 2.4.0 (2024-07-24)
Expand Down
16 changes: 16 additions & 0 deletions packages/style-engine/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,22 @@ _Changelog_

`6.1.0` Introduced in WordPress core.

### getCSSValueFromRawStyle

Returns a WordPress CSS custom var value from incoming style preset value. The preset value follows the pattern `var:description|context|slug`.

Example:

`getCSSValueFromRawStyle( 'var:preset|color|heavenlyBlue' )` // returns 'var(--wp--preset--color--heavenly-blue)'

_Parameters_

- _styleValue_ `string | any`: A raw style value.

_Returns_

- `string | unknown`: A CSS var value.

<!-- END TOKEN(Autogenerated API docs) -->

## Glossary
Expand Down
3 changes: 3 additions & 0 deletions packages/style-engine/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,3 +91,6 @@ export function getCSSRules(

return rules;
}

// Export style utils.
export { getCSSValueFromRawStyle } from './styles/utils';
54 changes: 54 additions & 0 deletions packages/style-engine/src/styles/test/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
/**
* Internal dependencies
*/
import { camelCaseJoin, getCSSValueFromRawStyle, upperFirst } from '../utils';

describe( 'utils', () => {
describe( 'upperFirst()', () => {
it( 'should return an string with a capitalized first letter', () => {
expect( upperFirst( 'toontown' ) ).toEqual( 'Toontown' );
} );
} );

describe( 'camelCaseJoin()', () => {
it( 'should return a camelCase string', () => {
expect( camelCaseJoin( [ 'toon', 'town' ] ) ).toEqual( 'toonTown' );
} );
} );

describe( 'getCSSValueFromRawStyle()', () => {
it.each( [
[ 'min(40%, 400px)', 'min(40%, 400px)' ],
[
'var(--wp--preset--color--yellow-bun)',
'var:preset|color|yellow-bun',
],
[ 'var(--wp--preset--font-size--h-1)', 'var:preset|font-size|h1' ],
[
'var(--wp--preset--font-size--1-px)',
'var:preset|font-size|1px',
],
[
'var(--wp--preset--color--orange-11-orange)',
'var:preset|color|orange11orange',
],
[
'var(--wp--preset--color--heavenly-blue)',
'var:preset|color|heavenlyBlue',
],
[
'var(--wp--preset--background--dark-secrets-100)',
'var:preset|background|dark_Secrets_100',
],
[ null, null ],
[ false, false ],
[ 1000, 1000 ],
[ undefined, undefined ],
] )(
'should return %s using an incoming value of %s',
( expected, value ) => {
expect( getCSSValueFromRawStyle( value ) ).toEqual( expected );
}
);
} );
} );
18 changes: 13 additions & 5 deletions packages/style-engine/src/styles/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export function generateRule(
{
selector: options?.selector,
key: ruleKey,
value: getCSSVarFromStyleValue( styleValue ),
value: getCSSValueFromRawStyle( styleValue ),
},
]
: [];
Expand Down Expand Up @@ -103,7 +103,7 @@ export function generateBoxRules(
} else {
const sideRules = individualProperties.reduce(
( acc: GeneratedCSSRule[], side: string ) => {
const value: string | undefined = getCSSVarFromStyleValue(
const value = getCSSValueFromRawStyle(
getStyleValueByPath( boxStyle, [ side ] )
);
if ( value ) {
Expand All @@ -127,13 +127,21 @@ export function generateBoxRules(
}

/**
* Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.
* Returns a WordPress CSS custom var value from incoming style preset value.
Copy link
Member Author

Choose a reason for hiding this comment

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

Side note: I think the style engine in general could subsume a lot of style utility functions, even in the backend. E.g., ref resolution, CSS var building and more.

I see the benefit as reducing WP_Theme_JSON bloat and grouping 'like' concerns.

* The preset value follows the pattern `var:description|context|slug`.
*
* Example:
*
* `getCSSValueFromRawStyle( 'var:preset|color|heavenlyBlue' )` // returns 'var(--wp--preset--color--heavenly-blue)'
*
* @param styleValue A raw style value.
*
* @return string A CSS var value.
* @return A CSS var value.
*/
export function getCSSVarFromStyleValue( styleValue: string ): string {

export function getCSSValueFromRawStyle(
styleValue: string | any
Copy link
Member

Choose a reason for hiding this comment

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

Nit: I think using any here effectively disables the type checking. I believe we can use = to communicate that we primarily accept string, something like below:

image

Copy link
Member Author

Choose a reason for hiding this comment

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

Oh dang, thanks for the tip. I'll create a quick follow up if you don't mind taking a look.

Copy link
Member Author

Choose a reason for hiding this comment

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

#64528

): string | unknown {
if (
typeof styleValue === 'string' &&
styleValue.startsWith( VARIABLE_REFERENCE_PREFIX )
Expand Down
62 changes: 0 additions & 62 deletions packages/style-engine/src/test/utils.js
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion packages/style-engine/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export interface StyleOptions {

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