@wordpress/global-styles-engine 1.12.1-next.v.202605131032.0 → 1.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/core/render.cjs +17 -52
- package/build/core/render.cjs.map +2 -2
- package/build/index.cjs +2 -0
- package/build/index.cjs.map +2 -2
- package/build/utils/common.cjs +51 -6
- package/build/utils/common.cjs.map +2 -2
- package/build-module/core/render.mjs +18 -52
- package/build-module/core/render.mjs.map +2 -2
- package/build-module/index.mjs +3 -1
- package/build-module/index.mjs.map +2 -2
- package/build-module/utils/common.mjs +48 -5
- package/build-module/utils/common.mjs.map +2 -2
- package/build-types/core/render.d.ts.map +1 -1
- package/build-types/index.d.ts +1 -1
- package/build-types/index.d.ts.map +1 -1
- package/build-types/utils/common.d.ts +14 -0
- package/build-types/utils/common.d.ts.map +1 -1
- package/package.json +6 -6
- package/src/core/render.tsx +18 -74
- package/src/index.ts +1 -0
- package/src/test/render.test.ts +39 -9
- package/src/test/utils.test.ts +39 -0
- package/src/utils/common.ts +70 -6
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/utils/common.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { getCSSValueFromRawStyle } from '@wordpress/style-engine';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tGlobalStylesSettings,\n\tThemeFileLink,\n\tTypographyPreset,\n\tUnresolvedValue,\n\tGlobalStylesConfig,\n} from '../types';\nimport { getTypographyFontSizeValue } from './typography';\nimport { getValueFromObjectPath } from './object';\n\nexport const ROOT_BLOCK_SELECTOR = 'body';\nexport const ROOT_CSS_PROPERTIES_SELECTOR = ':root';\n\nexport const PRESET_METADATA = [\n\t{\n\t\tpath: [ 'color', 'palette' ],\n\t\tvalueKey: 'color',\n\t\tcssVarInfix: 'color',\n\t\tclasses: [\n\t\t\t{ classSuffix: 'color', propertyName: 'color' },\n\t\t\t{\n\t\t\t\tclassSuffix: 'background-color',\n\t\t\t\tpropertyName: 'background-color',\n\t\t\t},\n\t\t\t{\n\t\t\t\tclassSuffix: 'border-color',\n\t\t\t\tpropertyName: 'border-color',\n\t\t\t},\n\t\t],\n\t},\n\t{\n\t\tpath: [ 'color', 'gradients' ],\n\t\tvalueKey: 'gradient',\n\t\tcssVarInfix: 'gradient',\n\t\tclasses: [\n\t\t\t{\n\t\t\t\tclassSuffix: 'gradient-background',\n\t\t\t\tpropertyName: 'background',\n\t\t\t},\n\t\t],\n\t},\n\t{\n\t\tpath: [ 'color', 'duotone' ],\n\t\tvalueKey: 'colors',\n\t\tcssVarInfix: 'duotone',\n\t\tvalueFunc: ( { slug }: { slug: string } ) =>\n\t\t\t`url( '#wp-duotone-${ slug }' )`,\n\t\tclasses: [],\n\t},\n\t{\n\t\tpath: [ 'shadow', 'presets' ],\n\t\tvalueKey: 'shadow',\n\t\tcssVarInfix: 'shadow',\n\t\tclasses: [],\n\t},\n\t{\n\t\tpath: [ 'typography', 'fontSizes' ],\n\t\tvalueFunc: (\n\t\t\tpreset: TypographyPreset,\n\t\t\tsettings: GlobalStylesSettings\n\t\t) => getTypographyFontSizeValue( preset, settings ),\n\t\tvalueKey: 'size',\n\t\tcssVarInfix: 'font-size',\n\t\tclasses: [ { classSuffix: 'font-size', propertyName: 'font-size' } ],\n\t},\n\t{\n\t\tpath: [ 'typography', 'fontFamilies' ],\n\t\tvalueKey: 'fontFamily',\n\t\tcssVarInfix: 'font-family',\n\t\tclasses: [\n\t\t\t{ classSuffix: 'font-family', propertyName: 'font-family' },\n\t\t],\n\t},\n\t{\n\t\tpath: [ 'spacing', 'spacingSizes' ],\n\t\tvalueKey: 'size',\n\t\tcssVarInfix: 'spacing',\n\t\tvalueFunc: ( { size }: { size: string } ) => size,\n\t\tclasses: [],\n\t},\n\t{\n\t\tpath: [ 'border', 'radiusSizes' ],\n\t\tvalueKey: 'size',\n\t\tcssVarInfix: 'border-radius',\n\t\tclasses: [],\n\t},\n\t{\n\t\tpath: [ 'dimensions', 'dimensionSizes' ],\n\t\tvalueKey: 'size',\n\t\tcssVarInfix: 'dimension',\n\t\tclasses: [],\n\t},\n];\n\nexport const STYLE_PATH_TO_CSS_VAR_INFIX: Record< string, string > = {\n\t'color.background': 'color',\n\t'color.text': 'color',\n\t'filter.duotone': 'duotone',\n\t'elements.link.color.text': 'color',\n\t'elements.link.:hover.color.text': 'color',\n\t'elements.link.typography.fontFamily': 'font-family',\n\t'elements.link.typography.fontSize': 'font-size',\n\t'elements.button.color.text': 'color',\n\t'elements.button.color.background': 'color',\n\t'elements.caption.color.text': 'color',\n\t'elements.button.typography.fontFamily': 'font-family',\n\t'elements.button.typography.fontSize': 'font-size',\n\t'elements.heading.color': 'color',\n\t'elements.heading.color.background': 'color',\n\t'elements.heading.typography.fontFamily': 'font-family',\n\t'elements.heading.gradient': 'gradient',\n\t'elements.heading.color.gradient': 'gradient',\n\t'elements.h1.color': 'color',\n\t'elements.h1.color.background': 'color',\n\t'elements.h1.typography.fontFamily': 'font-family',\n\t'elements.h1.color.gradient': 'gradient',\n\t'elements.h2.color': 'color',\n\t'elements.h2.color.background': 'color',\n\t'elements.h2.typography.fontFamily': 'font-family',\n\t'elements.h2.color.gradient': 'gradient',\n\t'elements.h3.color': 'color',\n\t'elements.h3.color.background': 'color',\n\t'elements.h3.typography.fontFamily': 'font-family',\n\t'elements.h3.color.gradient': 'gradient',\n\t'elements.h4.color': 'color',\n\t'elements.h4.color.background': 'color',\n\t'elements.h4.typography.fontFamily': 'font-family',\n\t'elements.h4.color.gradient': 'gradient',\n\t'elements.h5.color': 'color',\n\t'elements.h5.color.background': 'color',\n\t'elements.h5.typography.fontFamily': 'font-family',\n\t'elements.h5.color.gradient': 'gradient',\n\t'elements.h6.color': 'color',\n\t'elements.h6.color.background': 'color',\n\t'elements.h6.typography.fontFamily': 'font-family',\n\t'elements.h6.color.gradient': 'gradient',\n\t'color.gradient': 'gradient',\n\tshadow: 'shadow',\n\t'typography.fontSize': 'font-size',\n\t'typography.fontFamily': 'font-family',\n};\n\n/**\n * Function that scopes a selector with another one. This works a bit like\n * SCSS nesting except the `&` operator isn't supported.\n *\n * @example\n * ```js\n * const scope = '.a, .b .c';\n * const selector = '> .x, .y';\n * const merged = scopeSelector( scope, selector );\n * // merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'\n * ```\n *\n * @param scope Selector to scope to.\n * @param selector Original selector.\n *\n * @return Scoped selector.\n */\nexport function scopeSelector( scope: string | undefined, selector: string ) {\n\tif ( ! scope || ! selector ) {\n\t\treturn selector;\n\t}\n\n\tconst scopes = scope.split( ',' );\n\tconst selectors = selector.split( ',' );\n\n\tconst selectorsScoped: string[] = [];\n\tscopes.forEach( ( outer ) => {\n\t\tselectors.forEach( ( inner ) => {\n\t\t\tselectorsScoped.push( `${ outer.trim() } ${ inner.trim() }` );\n\t\t} );\n\t} );\n\n\treturn selectorsScoped.join( ', ' );\n}\n\n/**\n * Scopes a collection of selectors for features and subfeatures.\n *\n * @example\n * ```js\n * const scope = '.custom-scope';\n * const selectors = {\n * color: '.wp-my-block p',\n * typography: { fontSize: '.wp-my-block caption' },\n * };\n * const result = scopeFeatureSelector( scope, selectors );\n * // result is {\n * // color: '.custom-scope .wp-my-block p',\n * // typography: { fonSize: '.custom-scope .wp-my-block caption' },\n * // }\n * ```\n *\n * @param scope Selector to scope collection of selectors with.\n * @param selectors Collection of feature selectors e.g.\n *\n * @return Scoped collection of feature selectors.\n */\nexport function scopeFeatureSelectors(\n\tscope: string | undefined,\n\tselectors: string | Record< string, string | Record< string, string > >\n) {\n\tif ( ! scope || ! selectors ) {\n\t\treturn;\n\t}\n\n\tconst featureSelectors: Record<\n\t\tstring,\n\t\tstring | Record< string, string >\n\t> = {};\n\n\tObject.entries( selectors ).forEach( ( [ feature, selector ] ) => {\n\t\tif ( typeof selector === 'string' ) {\n\t\t\tfeatureSelectors[ feature ] = scopeSelector( scope, selector );\n\t\t}\n\n\t\tif ( typeof selector === 'object' ) {\n\t\t\tfeatureSelectors[ feature ] = {};\n\n\t\t\tObject.entries( selector ).forEach(\n\t\t\t\t( [ subfeature, subfeatureSelector ] ) => {\n\t\t\t\t\t// @ts-expect-error\n\t\t\t\t\tfeatureSelectors[ feature ][ subfeature ] = scopeSelector(\n\t\t\t\t\t\tscope,\n\t\t\t\t\t\tsubfeatureSelector as string\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t} );\n\n\treturn featureSelectors;\n}\n\n/**\n * Appends a sub-selector to an existing one.\n *\n * Given the compounded `selector` \"h1, h2, h3\"\n * and the `toAppend` selector \".some-class\" the result will be\n * \"h1.some-class, h2.some-class, h3.some-class\".\n *\n * @param selector Original selector.\n * @param toAppend Selector to append.\n *\n * @return The new selector.\n */\nexport function appendToSelector( selector: string, toAppend: string ) {\n\tif ( ! selector.includes( ',' ) ) {\n\t\treturn selector + toAppend;\n\t}\n\tconst selectors = selector.split( ',' );\n\tconst newSelectors = selectors.map( ( sel ) => sel + toAppend );\n\treturn newSelectors.join( ',' );\n}\n\n/**\n * Generates the selector for a block style variation by creating the\n * appropriate CSS class and adding it to the ancestor portion of the block's\n * selector.\n *\n * For example, take the Button block which has a compound selector:\n * `.wp-block-button .wp-block-button__link`. With a variation named 'custom',\n * the class `.is-style-custom` should be added to the `.wp-block-button`\n * ancestor only.\n *\n * This function will take into account comma separated and complex selectors.\n *\n * @param variation Name for the variation.\n * @param blockSelector CSS selector for the block.\n *\n * @return CSS selector for the block style variation.\n */\nexport function getBlockStyleVariationSelector(\n\tvariation: string,\n\tblockSelector: string\n) {\n\tconst variationClass = `.is-style-${ variation }`;\n\n\tif ( ! blockSelector ) {\n\t\treturn variationClass;\n\t}\n\n\tconst ancestorRegex = /((?::\\([^)]+\\))?\\s*)([^\\s:]+)/;\n\tconst addVariationClass = (\n\t\t_match: string,\n\t\tgroup1: string,\n\t\tgroup2: string\n\t) => {\n\t\treturn group1 + group2 + variationClass;\n\t};\n\n\tconst result = blockSelector\n\t\t.split( ',' )\n\t\t.map( ( part ) => part.replace( ancestorRegex, addVariationClass ) );\n\n\treturn result.join( ',' );\n}\n\n/**\n * Resolves ref values in theme JSON.\n *\n * @param ruleValue A block style value that may contain a reference to a theme.json value.\n * @param tree A theme.json object.\n * @return The resolved value or incoming ruleValue.\n */\nexport function getResolvedRefValue(\n\truleValue: UnresolvedValue,\n\ttree?: GlobalStylesConfig\n): UnresolvedValue {\n\tif ( ! ruleValue || ! tree ) {\n\t\treturn ruleValue;\n\t}\n\n\t/*\n\t * Where the rule value is an object with a 'ref' property pointing\n\t * to a path, this converts that path into the value at that path.\n\t * For example: { \"ref\": \"style.color.background\" } => \"#fff\".\n\t */\n\tif (\n\t\ttypeof ruleValue === 'object' &&\n\t\t'ref' in ruleValue &&\n\t\truleValue?.ref\n\t) {\n\t\tconst resolvedRuleValue = getCSSValueFromRawStyle(\n\t\t\tgetValueFromObjectPath( tree, ruleValue.ref )\n\t\t) as UnresolvedValue;\n\n\t\t/*\n\t\t * Presence of another ref indicates a reference to another dynamic value.\n\t\t * Pointing to another dynamic value is not supported.\n\t\t */\n\t\tif (\n\t\t\ttypeof resolvedRuleValue === 'object' &&\n\t\t\tresolvedRuleValue !== null &&\n\t\t\t'ref' in resolvedRuleValue &&\n\t\t\tresolvedRuleValue?.ref\n\t\t) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tif ( resolvedRuleValue === undefined ) {\n\t\t\treturn ruleValue;\n\t\t}\n\n\t\treturn resolvedRuleValue;\n\t}\n\treturn ruleValue;\n}\n\n/**\n * Looks up a theme file URI based on a relative path.\n *\n * @param file A relative path.\n * @param themeFileURIs A collection of absolute theme file URIs and their corresponding file paths.\n * @return A resolved theme file URI, if one is found in the themeFileURIs collection.\n */\nexport function getResolvedThemeFilePath(\n\tfile: string,\n\tthemeFileURIs?: ThemeFileLink[]\n) {\n\tif ( ! file || ! themeFileURIs || ! Array.isArray( themeFileURIs ) ) {\n\t\treturn file;\n\t}\n\n\tconst uri = themeFileURIs.find(\n\t\t( themeFileUri ) => themeFileUri?.name === file\n\t);\n\n\tif ( ! uri?.href ) {\n\t\treturn file;\n\t}\n\n\treturn uri?.href;\n}\n\n/**\n * Resolves ref and relative path values in theme JSON.\n *\n * @param ruleValue A block style value that may contain a reference to a theme.json value.\n * @param tree A theme.json object.\n * @return The resolved value or incoming ruleValue.\n */\nexport function getResolvedValue(\n\truleValue: UnresolvedValue,\n\ttree: GlobalStylesConfig | undefined\n) {\n\tif ( ! ruleValue || ! tree ) {\n\t\treturn ruleValue;\n\t}\n\n\t// Resolve ref values.\n\tconst resolvedValue = getResolvedRefValue( ruleValue, tree );\n\n\t// Resolve relative paths.\n\tif (\n\t\ttypeof resolvedValue === 'object' &&\n\t\tresolvedValue !== null &&\n\t\t'url' in resolvedValue &&\n\t\tresolvedValue?.url\n\t) {\n\t\tresolvedValue.url = getResolvedThemeFilePath(\n\t\t\tresolvedValue.url,\n\t\t\ttree?._links?.[ 'wp:theme-file' ]\n\t\t);\n\t}\n\n\treturn resolvedValue;\n}\n\nfunction findInPresetsBy(\n\tsettings: GlobalStylesSettings,\n\tblockName?: string,\n\tpresetPath: string[] = [],\n\tpresetProperty: string = 'slug',\n\tpresetValueValue?: string\n) {\n\t// Block presets take priority above root level presets.\n\tconst orderedPresetsByOrigin = [\n\t\tblockName\n\t\t\t? getValueFromObjectPath( settings, [\n\t\t\t\t\t'blocks',\n\t\t\t\t\tblockName,\n\t\t\t\t\t...presetPath,\n\t\t\t ] )\n\t\t\t: undefined,\n\t\tgetValueFromObjectPath( settings, presetPath ),\n\t].filter( Boolean );\n\n\tfor ( const presetByOrigin of orderedPresetsByOrigin ) {\n\t\tif ( presetByOrigin ) {\n\t\t\t// Preset origins ordered by priority.\n\t\t\tconst origins = [ 'custom', 'theme', 'default' ];\n\t\t\tfor ( const origin of origins ) {\n\t\t\t\t// @ts-expect-error\n\t\t\t\tconst presets = presetByOrigin[ origin ];\n\t\t\t\tif ( presets ) {\n\t\t\t\t\tconst presetObject = presets.find(\n\t\t\t\t\t\t( preset: any ) =>\n\t\t\t\t\t\t\tpreset[ presetProperty ] === presetValueValue\n\t\t\t\t\t);\n\t\t\t\t\tif ( presetObject ) {\n\t\t\t\t\t\tif ( presetProperty === 'slug' ) {\n\t\t\t\t\t\t\treturn presetObject;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// If there is a highest priority preset with the same slug but different value the preset we found was overwritten and should be ignored.\n\t\t\t\t\t\tconst highestPresetObjectWithSameSlug = findInPresetsBy(\n\t\t\t\t\t\t\tsettings,\n\t\t\t\t\t\t\tblockName,\n\t\t\t\t\t\t\tpresetPath,\n\t\t\t\t\t\t\t'slug',\n\t\t\t\t\t\t\tpresetObject.slug\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\thighestPresetObjectWithSameSlug[\n\t\t\t\t\t\t\t\tpresetProperty\n\t\t\t\t\t\t\t] === presetObject[ presetProperty ]\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\treturn presetObject;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn undefined;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\nfunction getValueFromPresetVariable(\n\tfeatures: GlobalStylesConfig,\n\tblockName?: string,\n\tvariable?: string,\n\t[ presetType, slug ]: string[] = []\n) {\n\tconst metadata = PRESET_METADATA.find(\n\t\t( data ) => data.cssVarInfix === presetType\n\t);\n\tif ( ! metadata || ! features.settings ) {\n\t\treturn variable;\n\t}\n\n\tconst presetObject = findInPresetsBy(\n\t\tfeatures.settings,\n\t\tblockName,\n\t\tmetadata.path,\n\t\t'slug',\n\t\tslug\n\t);\n\n\tif ( presetObject ) {\n\t\tconst { valueKey } = metadata;\n\t\tconst result = presetObject[ valueKey ];\n\t\treturn getValueFromVariable( features, blockName, result );\n\t}\n\n\treturn variable;\n}\n\nfunction getValueFromCustomVariable(\n\tfeatures: GlobalStylesConfig,\n\tblockName?: string,\n\tvariable?: string,\n\tpath: string[] = []\n): string | undefined {\n\tconst result =\n\t\t( blockName\n\t\t\t? getValueFromObjectPath( features?.settings ?? {}, [\n\t\t\t\t\t'blocks',\n\t\t\t\t\tblockName,\n\t\t\t\t\t'custom',\n\t\t\t\t\t...path,\n\t\t\t ] )\n\t\t\t: undefined ) ??\n\t\tgetValueFromObjectPath( features?.settings ?? {}, [\n\t\t\t'custom',\n\t\t\t...path,\n\t\t] );\n\tif ( ! result ) {\n\t\treturn variable;\n\t}\n\t// A variable may reference another variable so we need recursion until we find the value.\n\treturn getValueFromVariable( features, blockName, result as string );\n}\n\n/**\n * Attempts to fetch the value of a theme.json CSS variable.\n *\n * This function resolves CSS variable references in two formats:\n * - User format: `var:preset|color|red` or `var:custom|spacing|small`\n * - Theme format: `var(--wp--preset--color--red)` or `var(--wp--custom--spacing--small)`\n *\n * It also handles ref-style variables in the format `{ ref: \"path.to.value\" }`.\n *\n * @param features GlobalStylesContext config (user, base, or merged). Represents the theme.json tree.\n * @param blockName The name of a block as represented in the styles property. E.g., 'root' for root-level, and 'core/block-name' for blocks.\n * @param variable An incoming style value. A CSS var value is expected, but it could be any value.\n * @return The value of the CSS var, if found. If not found, returns the original variable argument.\n */\nexport function getValueFromVariable(\n\tfeatures: GlobalStylesConfig,\n\tblockName?: string,\n\tvariable?: string | UnresolvedValue\n): any {\n\tif ( ! variable || typeof variable !== 'string' ) {\n\t\tif (\n\t\t\ttypeof variable === 'object' &&\n\t\t\tvariable !== null &&\n\t\t\t'ref' in variable &&\n\t\t\ttypeof variable.ref === 'string'\n\t\t) {\n\t\t\tconst resolvedVariable = getValueFromObjectPath(\n\t\t\t\tfeatures,\n\t\t\t\tvariable.ref\n\t\t\t);\n\t\t\t// Presence of another ref indicates a reference to another dynamic value.\n\t\t\t// Pointing to another dynamic value is not supported.\n\t\t\tif (\n\t\t\t\t! resolvedVariable ||\n\t\t\t\t( typeof resolvedVariable === 'object' &&\n\t\t\t\t\t'ref' in resolvedVariable )\n\t\t\t) {\n\t\t\t\treturn resolvedVariable;\n\t\t\t}\n\t\t\tvariable = resolvedVariable as string;\n\t\t} else {\n\t\t\treturn variable;\n\t\t}\n\t}\n\tconst USER_VALUE_PREFIX = 'var:';\n\tconst THEME_VALUE_PREFIX = 'var(--wp--';\n\tconst THEME_VALUE_SUFFIX = ')';\n\n\tlet parsedVar;\n\n\tif ( variable.startsWith( USER_VALUE_PREFIX ) ) {\n\t\tparsedVar = variable.slice( USER_VALUE_PREFIX.length ).split( '|' );\n\t} else if (\n\t\tvariable.startsWith( THEME_VALUE_PREFIX ) &&\n\t\tvariable.endsWith( THEME_VALUE_SUFFIX )\n\t) {\n\t\tparsedVar = variable\n\t\t\t.slice( THEME_VALUE_PREFIX.length, -THEME_VALUE_SUFFIX.length )\n\t\t\t.split( '--' );\n\t} else {\n\t\t// We don't know how to parse the value: either is raw of uses complex CSS such as `calc(1px * var(--wp--variable) )`\n\t\treturn variable;\n\t}\n\n\tconst [ type, ...path ] = parsedVar;\n\tif ( type === 'preset' ) {\n\t\treturn getValueFromPresetVariable(\n\t\t\tfeatures,\n\t\t\tblockName,\n\t\t\tvariable,\n\t\t\tpath\n\t\t);\n\t}\n\tif ( type === 'custom' ) {\n\t\treturn getValueFromCustomVariable(\n\t\t\tfeatures,\n\t\t\tblockName,\n\t\t\tvariable,\n\t\t\tpath\n\t\t);\n\t}\n\treturn variable;\n}\n\n/**\n * Encodes a value to a preset variable format if it matches a preset.\n * This is the inverse operation of getValueFromVariable().\n *\n * @example\n * ```js\n * const presetVar = getPresetVariableFromValue(\n * globalStyles.settings,\n * 'core/paragraph',\n * 'color.text',\n * '#ff0000'\n * );\n * // If #ff0000 is the 'red' preset color, returns 'var:preset|color|red'\n * // Otherwise returns '#ff0000'\n * ```\n *\n * @param features GlobalStylesContext settings object.\n * @param blockName The name of a block (e.g., 'core/paragraph').\n * @param variableStylePath The style path (e.g., 'color.text', 'typography.fontSize').\n * @param presetPropertyValue The value to encode (e.g., '#ff0000').\n * @return The preset variable if found, otherwise the original value.\n */\nexport function getPresetVariableFromValue(\n\tfeatures: GlobalStylesSettings,\n\tblockName: string | undefined,\n\tvariableStylePath: string,\n\tpresetPropertyValue: any\n): any {\n\tif ( ! presetPropertyValue ) {\n\t\treturn presetPropertyValue;\n\t}\n\n\tconst cssVarInfix = STYLE_PATH_TO_CSS_VAR_INFIX[ variableStylePath ];\n\n\tconst metadata = PRESET_METADATA.find(\n\t\t( data ) => data.cssVarInfix === cssVarInfix\n\t);\n\n\tif ( ! metadata ) {\n\t\t// The property doesn't have preset data\n\t\t// so the value should be returned as it is.\n\t\treturn presetPropertyValue;\n\t}\n\tconst { valueKey, path } = metadata;\n\n\tconst presetObject = findInPresetsBy(\n\t\tfeatures,\n\t\tblockName,\n\t\tpath,\n\t\tvalueKey,\n\t\tpresetPropertyValue\n\t);\n\n\tif ( ! presetObject ) {\n\t\t// Value wasn't found in the presets,\n\t\t// so it must be a custom value.\n\t\treturn presetPropertyValue;\n\t}\n\n\treturn `var:preset|${ cssVarInfix }|${ presetObject.slug }`;\n}\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { getCSSValueFromRawStyle } from '@wordpress/style-engine';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tGlobalStylesSettings,\n\tThemeFileLink,\n\tTypographyPreset,\n\tUnresolvedValue,\n\tGlobalStylesConfig,\n} from '../types';\nimport { getTypographyFontSizeValue } from './typography';\nimport { getValueFromObjectPath } from './object';\n\nexport const ROOT_BLOCK_SELECTOR = 'body';\nexport const ROOT_CSS_PROPERTIES_SELECTOR = ':root';\n\nexport function splitSelectorList( selector: string ) {\n\tif ( ! selector.includes( ',' ) ) {\n\t\treturn [ selector ];\n\t}\n\n\tconst selectors: string[] = [];\n\tlet currentSelector = '';\n\tlet parenthesesDepth = 0;\n\n\tfor ( const char of selector ) {\n\t\tif ( char === '(' ) {\n\t\t\tparenthesesDepth++;\n\t\t} else if ( char === ')' && parenthesesDepth > 0 ) {\n\t\t\tparenthesesDepth--;\n\t\t} else if ( char === ',' && parenthesesDepth === 0 ) {\n\t\t\tselectors.push( currentSelector );\n\t\t\tcurrentSelector = '';\n\t\t\tcontinue;\n\t\t}\n\n\t\tcurrentSelector += char;\n\t}\n\n\tselectors.push( currentSelector );\n\n\treturn selectors;\n}\n\nexport const PRESET_METADATA = [\n\t{\n\t\tpath: [ 'color', 'palette' ],\n\t\tvalueKey: 'color',\n\t\tcssVarInfix: 'color',\n\t\tclasses: [\n\t\t\t{ classSuffix: 'color', propertyName: 'color' },\n\t\t\t{\n\t\t\t\tclassSuffix: 'background-color',\n\t\t\t\tpropertyName: 'background-color',\n\t\t\t},\n\t\t\t{\n\t\t\t\tclassSuffix: 'border-color',\n\t\t\t\tpropertyName: 'border-color',\n\t\t\t},\n\t\t],\n\t},\n\t{\n\t\tpath: [ 'color', 'gradients' ],\n\t\tvalueKey: 'gradient',\n\t\tcssVarInfix: 'gradient',\n\t\tclasses: [\n\t\t\t{\n\t\t\t\tclassSuffix: 'gradient-background',\n\t\t\t\tpropertyName: 'background',\n\t\t\t},\n\t\t],\n\t},\n\t{\n\t\tpath: [ 'color', 'duotone' ],\n\t\tvalueKey: 'colors',\n\t\tcssVarInfix: 'duotone',\n\t\tvalueFunc: ( { slug }: { slug: string } ) =>\n\t\t\t`url( '#wp-duotone-${ slug }' )`,\n\t\tclasses: [],\n\t},\n\t{\n\t\tpath: [ 'shadow', 'presets' ],\n\t\tvalueKey: 'shadow',\n\t\tcssVarInfix: 'shadow',\n\t\tclasses: [],\n\t},\n\t{\n\t\tpath: [ 'typography', 'fontSizes' ],\n\t\tvalueFunc: (\n\t\t\tpreset: TypographyPreset,\n\t\t\tsettings: GlobalStylesSettings\n\t\t) => getTypographyFontSizeValue( preset, settings ),\n\t\tvalueKey: 'size',\n\t\tcssVarInfix: 'font-size',\n\t\tclasses: [ { classSuffix: 'font-size', propertyName: 'font-size' } ],\n\t},\n\t{\n\t\tpath: [ 'typography', 'fontFamilies' ],\n\t\tvalueKey: 'fontFamily',\n\t\tcssVarInfix: 'font-family',\n\t\tclasses: [\n\t\t\t{ classSuffix: 'font-family', propertyName: 'font-family' },\n\t\t],\n\t},\n\t{\n\t\tpath: [ 'spacing', 'spacingSizes' ],\n\t\tvalueKey: 'size',\n\t\tcssVarInfix: 'spacing',\n\t\tvalueFunc: ( { size }: { size: string } ) => size,\n\t\tclasses: [],\n\t},\n\t{\n\t\tpath: [ 'border', 'radiusSizes' ],\n\t\tvalueKey: 'size',\n\t\tcssVarInfix: 'border-radius',\n\t\tclasses: [],\n\t},\n\t{\n\t\tpath: [ 'dimensions', 'dimensionSizes' ],\n\t\tvalueKey: 'size',\n\t\tcssVarInfix: 'dimension',\n\t\tclasses: [],\n\t},\n];\n\nexport const STYLE_PATH_TO_CSS_VAR_INFIX: Record< string, string > = {\n\t'color.background': 'color',\n\t'color.text': 'color',\n\t'filter.duotone': 'duotone',\n\t'elements.link.color.text': 'color',\n\t'elements.link.:hover.color.text': 'color',\n\t'elements.link.typography.fontFamily': 'font-family',\n\t'elements.link.typography.fontSize': 'font-size',\n\t'elements.button.color.text': 'color',\n\t'elements.button.color.background': 'color',\n\t'elements.caption.color.text': 'color',\n\t'elements.button.typography.fontFamily': 'font-family',\n\t'elements.button.typography.fontSize': 'font-size',\n\t'elements.heading.color': 'color',\n\t'elements.heading.color.background': 'color',\n\t'elements.heading.typography.fontFamily': 'font-family',\n\t'elements.heading.gradient': 'gradient',\n\t'elements.heading.color.gradient': 'gradient',\n\t'elements.h1.color': 'color',\n\t'elements.h1.color.background': 'color',\n\t'elements.h1.typography.fontFamily': 'font-family',\n\t'elements.h1.color.gradient': 'gradient',\n\t'elements.h2.color': 'color',\n\t'elements.h2.color.background': 'color',\n\t'elements.h2.typography.fontFamily': 'font-family',\n\t'elements.h2.color.gradient': 'gradient',\n\t'elements.h3.color': 'color',\n\t'elements.h3.color.background': 'color',\n\t'elements.h3.typography.fontFamily': 'font-family',\n\t'elements.h3.color.gradient': 'gradient',\n\t'elements.h4.color': 'color',\n\t'elements.h4.color.background': 'color',\n\t'elements.h4.typography.fontFamily': 'font-family',\n\t'elements.h4.color.gradient': 'gradient',\n\t'elements.h5.color': 'color',\n\t'elements.h5.color.background': 'color',\n\t'elements.h5.typography.fontFamily': 'font-family',\n\t'elements.h5.color.gradient': 'gradient',\n\t'elements.h6.color': 'color',\n\t'elements.h6.color.background': 'color',\n\t'elements.h6.typography.fontFamily': 'font-family',\n\t'elements.h6.color.gradient': 'gradient',\n\t'color.gradient': 'gradient',\n\tshadow: 'shadow',\n\t'typography.fontSize': 'font-size',\n\t'typography.fontFamily': 'font-family',\n};\n\n/**\n * Function that scopes a selector with another one. This works a bit like\n * SCSS nesting except the `&` operator isn't supported.\n *\n * @example\n * ```js\n * const scope = '.a, .b .c';\n * const selector = '> .x, .y';\n * const merged = scopeSelector( scope, selector );\n * // merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'\n * ```\n *\n * @param scope Selector to scope to.\n * @param selector Original selector.\n *\n * @return Scoped selector.\n */\nexport function scopeSelector( scope: string | undefined, selector: string ) {\n\tif ( ! scope || ! selector ) {\n\t\treturn selector;\n\t}\n\n\tconst scopes = splitSelectorList( scope );\n\tconst selectors = splitSelectorList( selector );\n\n\tconst selectorsScoped: string[] = [];\n\tscopes.forEach( ( outer ) => {\n\t\tselectors.forEach( ( inner ) => {\n\t\t\tselectorsScoped.push( `${ outer.trim() } ${ inner.trim() }` );\n\t\t} );\n\t} );\n\n\treturn selectorsScoped.join( ', ' );\n}\n\n/**\n * Scopes a collection of selectors for features and subfeatures.\n *\n * @example\n * ```js\n * const scope = '.custom-scope';\n * const selectors = {\n * color: '.wp-my-block p',\n * typography: { fontSize: '.wp-my-block caption' },\n * };\n * const result = scopeFeatureSelector( scope, selectors );\n * // result is {\n * // color: '.custom-scope .wp-my-block p',\n * // typography: { fonSize: '.custom-scope .wp-my-block caption' },\n * // }\n * ```\n *\n * @param scope Selector to scope collection of selectors with.\n * @param selectors Collection of feature selectors e.g.\n *\n * @return Scoped collection of feature selectors.\n */\nexport function scopeFeatureSelectors(\n\tscope: string | undefined,\n\tselectors: string | Record< string, string | Record< string, string > >\n) {\n\tif ( ! scope || ! selectors ) {\n\t\treturn;\n\t}\n\n\tconst featureSelectors: Record<\n\t\tstring,\n\t\tstring | Record< string, string >\n\t> = {};\n\n\tObject.entries( selectors ).forEach( ( [ feature, selector ] ) => {\n\t\tif ( typeof selector === 'string' ) {\n\t\t\tfeatureSelectors[ feature ] = scopeSelector( scope, selector );\n\t\t}\n\n\t\tif ( typeof selector === 'object' ) {\n\t\t\tfeatureSelectors[ feature ] = {};\n\n\t\t\tObject.entries( selector ).forEach(\n\t\t\t\t( [ subfeature, subfeatureSelector ] ) => {\n\t\t\t\t\t// @ts-expect-error\n\t\t\t\t\tfeatureSelectors[ feature ][ subfeature ] = scopeSelector(\n\t\t\t\t\t\tscope,\n\t\t\t\t\t\tsubfeatureSelector as string\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t} );\n\n\treturn featureSelectors;\n}\n\n/**\n * Appends a sub-selector to an existing one.\n *\n * Given the compounded `selector` \"h1, h2, h3\"\n * and the `toAppend` selector \".some-class\" the result will be\n * \"h1.some-class, h2.some-class, h3.some-class\".\n *\n * @param selector Original selector.\n * @param toAppend Selector to append.\n *\n * @return The new selector.\n */\nexport function appendToSelector( selector: string, toAppend: string ) {\n\tif ( ! selector.includes( ',' ) ) {\n\t\treturn selector + toAppend;\n\t}\n\tconst selectors = splitSelectorList( selector );\n\tconst newSelectors = selectors.map( ( sel ) => sel + toAppend );\n\treturn newSelectors.join( ',' );\n}\n\n/**\n * Generates the selector for a block style variation by creating the\n * appropriate CSS class and adding it to the ancestor portion of the block's\n * selector.\n *\n * For example, take the Button block which has a compound selector:\n * `.wp-block-button .wp-block-button__link`. With a variation named 'custom',\n * the class `.is-style-custom` should be added to the `.wp-block-button`\n * ancestor only.\n *\n * This function will take into account comma separated and complex selectors.\n *\n * @param variation Name for the variation.\n * @param blockSelector CSS selector for the block.\n *\n * @return CSS selector for the block style variation.\n */\nexport function getBlockStyleVariationSelector(\n\tvariation: string,\n\tblockSelector: string\n) {\n\tconst variationClass = `.is-style-${ variation }`;\n\n\tif ( ! blockSelector ) {\n\t\treturn variationClass;\n\t}\n\n\tconst ancestorRegex = /((?::\\([^)]+\\))?\\s*)([^\\s:]+)/;\n\tconst addVariationClass = (\n\t\t_match: string,\n\t\tgroup1: string,\n\t\tgroup2: string\n\t) => {\n\t\treturn group1 + group2 + variationClass;\n\t};\n\n\tconst result = splitSelectorList( blockSelector ).map( ( part ) =>\n\t\tpart.replace( ancestorRegex, addVariationClass )\n\t);\n\n\treturn result.join( ',' );\n}\n\n/**\n * Generates the selector for a block style variation feature selector.\n *\n * Feature selectors can target a different element than the block root\n * selector. Apply the variation class directly to the selector that receives\n * the declarations instead of deriving it from the block root selector.\n *\n * @param variation Name for the variation.\n * @param featureSelector CSS selector for the feature.\n *\n * @return CSS selector for the block style variation feature.\n */\nexport function getBlockStyleVariationFeatureSelector(\n\tvariation: string,\n\tfeatureSelector: string\n) {\n\tconst variationClass = `.is-style-${ variation }`;\n\tconst selectorParts = splitSelectorList( featureSelector ).map(\n\t\t( selector ) => {\n\t\t\tconst trimmedSelector = selector.trim();\n\t\t\tconst prefix = `${ variationClass } `;\n\n\t\t\tif ( trimmedSelector.startsWith( prefix ) ) {\n\t\t\t\treturn trimmedSelector.slice( prefix.length );\n\t\t\t}\n\n\t\t\treturn trimmedSelector;\n\t\t}\n\t);\n\n\treturn getBlockStyleVariationSelector(\n\t\tvariation,\n\t\tselectorParts.join( ',' )\n\t);\n}\n\n/**\n * Resolves ref values in theme JSON.\n *\n * @param ruleValue A block style value that may contain a reference to a theme.json value.\n * @param tree A theme.json object.\n * @return The resolved value or incoming ruleValue.\n */\nexport function getResolvedRefValue(\n\truleValue: UnresolvedValue,\n\ttree?: GlobalStylesConfig\n): UnresolvedValue {\n\tif ( ! ruleValue || ! tree ) {\n\t\treturn ruleValue;\n\t}\n\n\t/*\n\t * Where the rule value is an object with a 'ref' property pointing\n\t * to a path, this converts that path into the value at that path.\n\t * For example: { \"ref\": \"style.color.background\" } => \"#fff\".\n\t */\n\tif (\n\t\ttypeof ruleValue === 'object' &&\n\t\t'ref' in ruleValue &&\n\t\truleValue?.ref\n\t) {\n\t\tconst resolvedRuleValue = getCSSValueFromRawStyle(\n\t\t\tgetValueFromObjectPath( tree, ruleValue.ref )\n\t\t) as UnresolvedValue;\n\n\t\t/*\n\t\t * Presence of another ref indicates a reference to another dynamic value.\n\t\t * Pointing to another dynamic value is not supported.\n\t\t */\n\t\tif (\n\t\t\ttypeof resolvedRuleValue === 'object' &&\n\t\t\tresolvedRuleValue !== null &&\n\t\t\t'ref' in resolvedRuleValue &&\n\t\t\tresolvedRuleValue?.ref\n\t\t) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tif ( resolvedRuleValue === undefined ) {\n\t\t\treturn ruleValue;\n\t\t}\n\n\t\treturn resolvedRuleValue;\n\t}\n\treturn ruleValue;\n}\n\n/**\n * Looks up a theme file URI based on a relative path.\n *\n * @param file A relative path.\n * @param themeFileURIs A collection of absolute theme file URIs and their corresponding file paths.\n * @return A resolved theme file URI, if one is found in the themeFileURIs collection.\n */\nexport function getResolvedThemeFilePath(\n\tfile: string,\n\tthemeFileURIs?: ThemeFileLink[]\n) {\n\tif ( ! file || ! themeFileURIs || ! Array.isArray( themeFileURIs ) ) {\n\t\treturn file;\n\t}\n\n\tconst uri = themeFileURIs.find(\n\t\t( themeFileUri ) => themeFileUri?.name === file\n\t);\n\n\tif ( ! uri?.href ) {\n\t\treturn file;\n\t}\n\n\treturn uri?.href;\n}\n\n/**\n * Resolves ref and relative path values in theme JSON.\n *\n * @param ruleValue A block style value that may contain a reference to a theme.json value.\n * @param tree A theme.json object.\n * @return The resolved value or incoming ruleValue.\n */\nexport function getResolvedValue(\n\truleValue: UnresolvedValue,\n\ttree: GlobalStylesConfig | undefined\n) {\n\tif ( ! ruleValue || ! tree ) {\n\t\treturn ruleValue;\n\t}\n\n\t// Resolve ref values.\n\tconst resolvedValue = getResolvedRefValue( ruleValue, tree );\n\n\t// Resolve relative paths.\n\tif (\n\t\ttypeof resolvedValue === 'object' &&\n\t\tresolvedValue !== null &&\n\t\t'url' in resolvedValue &&\n\t\tresolvedValue?.url\n\t) {\n\t\tresolvedValue.url = getResolvedThemeFilePath(\n\t\t\tresolvedValue.url,\n\t\t\ttree?._links?.[ 'wp:theme-file' ]\n\t\t);\n\t}\n\n\treturn resolvedValue;\n}\n\nfunction findInPresetsBy(\n\tsettings: GlobalStylesSettings,\n\tblockName?: string,\n\tpresetPath: string[] = [],\n\tpresetProperty: string = 'slug',\n\tpresetValueValue?: string\n) {\n\t// Block presets take priority above root level presets.\n\tconst orderedPresetsByOrigin = [\n\t\tblockName\n\t\t\t? getValueFromObjectPath( settings, [\n\t\t\t\t\t'blocks',\n\t\t\t\t\tblockName,\n\t\t\t\t\t...presetPath,\n\t\t\t ] )\n\t\t\t: undefined,\n\t\tgetValueFromObjectPath( settings, presetPath ),\n\t].filter( Boolean );\n\n\tfor ( const presetByOrigin of orderedPresetsByOrigin ) {\n\t\tif ( presetByOrigin ) {\n\t\t\t// Preset origins ordered by priority.\n\t\t\tconst origins = [ 'custom', 'theme', 'default' ];\n\t\t\tfor ( const origin of origins ) {\n\t\t\t\t// @ts-expect-error\n\t\t\t\tconst presets = presetByOrigin[ origin ];\n\t\t\t\tif ( presets ) {\n\t\t\t\t\tconst presetObject = presets.find(\n\t\t\t\t\t\t( preset: any ) =>\n\t\t\t\t\t\t\tpreset[ presetProperty ] === presetValueValue\n\t\t\t\t\t);\n\t\t\t\t\tif ( presetObject ) {\n\t\t\t\t\t\tif ( presetProperty === 'slug' ) {\n\t\t\t\t\t\t\treturn presetObject;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// If there is a highest priority preset with the same slug but different value the preset we found was overwritten and should be ignored.\n\t\t\t\t\t\tconst highestPresetObjectWithSameSlug = findInPresetsBy(\n\t\t\t\t\t\t\tsettings,\n\t\t\t\t\t\t\tblockName,\n\t\t\t\t\t\t\tpresetPath,\n\t\t\t\t\t\t\t'slug',\n\t\t\t\t\t\t\tpresetObject.slug\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\thighestPresetObjectWithSameSlug[\n\t\t\t\t\t\t\t\tpresetProperty\n\t\t\t\t\t\t\t] === presetObject[ presetProperty ]\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\treturn presetObject;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn undefined;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\nfunction getValueFromPresetVariable(\n\tfeatures: GlobalStylesConfig,\n\tblockName?: string,\n\tvariable?: string,\n\t[ presetType, slug ]: string[] = []\n) {\n\tconst metadata = PRESET_METADATA.find(\n\t\t( data ) => data.cssVarInfix === presetType\n\t);\n\tif ( ! metadata || ! features.settings ) {\n\t\treturn variable;\n\t}\n\n\tconst presetObject = findInPresetsBy(\n\t\tfeatures.settings,\n\t\tblockName,\n\t\tmetadata.path,\n\t\t'slug',\n\t\tslug\n\t);\n\n\tif ( presetObject ) {\n\t\tconst { valueKey } = metadata;\n\t\tconst result = presetObject[ valueKey ];\n\t\treturn getValueFromVariable( features, blockName, result );\n\t}\n\n\treturn variable;\n}\n\nfunction getValueFromCustomVariable(\n\tfeatures: GlobalStylesConfig,\n\tblockName?: string,\n\tvariable?: string,\n\tpath: string[] = []\n): string | undefined {\n\tconst result =\n\t\t( blockName\n\t\t\t? getValueFromObjectPath( features?.settings ?? {}, [\n\t\t\t\t\t'blocks',\n\t\t\t\t\tblockName,\n\t\t\t\t\t'custom',\n\t\t\t\t\t...path,\n\t\t\t ] )\n\t\t\t: undefined ) ??\n\t\tgetValueFromObjectPath( features?.settings ?? {}, [\n\t\t\t'custom',\n\t\t\t...path,\n\t\t] );\n\tif ( ! result ) {\n\t\treturn variable;\n\t}\n\t// A variable may reference another variable so we need recursion until we find the value.\n\treturn getValueFromVariable( features, blockName, result as string );\n}\n\n/**\n * Attempts to fetch the value of a theme.json CSS variable.\n *\n * This function resolves CSS variable references in two formats:\n * - User format: `var:preset|color|red` or `var:custom|spacing|small`\n * - Theme format: `var(--wp--preset--color--red)` or `var(--wp--custom--spacing--small)`\n *\n * It also handles ref-style variables in the format `{ ref: \"path.to.value\" }`.\n *\n * @param features GlobalStylesContext config (user, base, or merged). Represents the theme.json tree.\n * @param blockName The name of a block as represented in the styles property. E.g., 'root' for root-level, and 'core/block-name' for blocks.\n * @param variable An incoming style value. A CSS var value is expected, but it could be any value.\n * @return The value of the CSS var, if found. If not found, returns the original variable argument.\n */\nexport function getValueFromVariable(\n\tfeatures: GlobalStylesConfig,\n\tblockName?: string,\n\tvariable?: string | UnresolvedValue\n): any {\n\tif ( ! variable || typeof variable !== 'string' ) {\n\t\tif (\n\t\t\ttypeof variable === 'object' &&\n\t\t\tvariable !== null &&\n\t\t\t'ref' in variable &&\n\t\t\ttypeof variable.ref === 'string'\n\t\t) {\n\t\t\tconst resolvedVariable = getValueFromObjectPath(\n\t\t\t\tfeatures,\n\t\t\t\tvariable.ref\n\t\t\t);\n\t\t\t// Presence of another ref indicates a reference to another dynamic value.\n\t\t\t// Pointing to another dynamic value is not supported.\n\t\t\tif (\n\t\t\t\t! resolvedVariable ||\n\t\t\t\t( typeof resolvedVariable === 'object' &&\n\t\t\t\t\t'ref' in resolvedVariable )\n\t\t\t) {\n\t\t\t\treturn resolvedVariable;\n\t\t\t}\n\t\t\tvariable = resolvedVariable as string;\n\t\t} else {\n\t\t\treturn variable;\n\t\t}\n\t}\n\tconst USER_VALUE_PREFIX = 'var:';\n\tconst THEME_VALUE_PREFIX = 'var(--wp--';\n\tconst THEME_VALUE_SUFFIX = ')';\n\n\tlet parsedVar;\n\n\tif ( variable.startsWith( USER_VALUE_PREFIX ) ) {\n\t\tparsedVar = variable.slice( USER_VALUE_PREFIX.length ).split( '|' );\n\t} else if (\n\t\tvariable.startsWith( THEME_VALUE_PREFIX ) &&\n\t\tvariable.endsWith( THEME_VALUE_SUFFIX )\n\t) {\n\t\tparsedVar = variable\n\t\t\t.slice( THEME_VALUE_PREFIX.length, -THEME_VALUE_SUFFIX.length )\n\t\t\t.split( '--' );\n\t} else {\n\t\t// We don't know how to parse the value: either is raw of uses complex CSS such as `calc(1px * var(--wp--variable) )`\n\t\treturn variable;\n\t}\n\n\tconst [ type, ...path ] = parsedVar;\n\tif ( type === 'preset' ) {\n\t\treturn getValueFromPresetVariable(\n\t\t\tfeatures,\n\t\t\tblockName,\n\t\t\tvariable,\n\t\t\tpath\n\t\t);\n\t}\n\tif ( type === 'custom' ) {\n\t\treturn getValueFromCustomVariable(\n\t\t\tfeatures,\n\t\t\tblockName,\n\t\t\tvariable,\n\t\t\tpath\n\t\t);\n\t}\n\treturn variable;\n}\n\n/**\n * Encodes a value to a preset variable format if it matches a preset.\n * This is the inverse operation of getValueFromVariable().\n *\n * @example\n * ```js\n * const presetVar = getPresetVariableFromValue(\n * globalStyles.settings,\n * 'core/paragraph',\n * 'color.text',\n * '#ff0000'\n * );\n * // If #ff0000 is the 'red' preset color, returns 'var:preset|color|red'\n * // Otherwise returns '#ff0000'\n * ```\n *\n * @param features GlobalStylesContext settings object.\n * @param blockName The name of a block (e.g., 'core/paragraph').\n * @param variableStylePath The style path (e.g., 'color.text', 'typography.fontSize').\n * @param presetPropertyValue The value to encode (e.g., '#ff0000').\n * @return The preset variable if found, otherwise the original value.\n */\nexport function getPresetVariableFromValue(\n\tfeatures: GlobalStylesSettings,\n\tblockName: string | undefined,\n\tvariableStylePath: string,\n\tpresetPropertyValue: any\n): any {\n\tif ( ! presetPropertyValue ) {\n\t\treturn presetPropertyValue;\n\t}\n\n\tconst cssVarInfix = STYLE_PATH_TO_CSS_VAR_INFIX[ variableStylePath ];\n\n\tconst metadata = PRESET_METADATA.find(\n\t\t( data ) => data.cssVarInfix === cssVarInfix\n\t);\n\n\tif ( ! metadata ) {\n\t\t// The property doesn't have preset data\n\t\t// so the value should be returned as it is.\n\t\treturn presetPropertyValue;\n\t}\n\tconst { valueKey, path } = metadata;\n\n\tconst presetObject = findInPresetsBy(\n\t\tfeatures,\n\t\tblockName,\n\t\tpath,\n\t\tvalueKey,\n\t\tpresetPropertyValue\n\t);\n\n\tif ( ! presetObject ) {\n\t\t// Value wasn't found in the presets,\n\t\t// so it must be a custom value.\n\t\treturn presetPropertyValue;\n\t}\n\n\treturn `var:preset|${ cssVarInfix }|${ presetObject.slug }`;\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/core/render.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/core/render.tsx"],"names":[],"mappings":"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"}
|
package/build-types/index.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ export { transformToStyles as toStyles, getBlockSelectors, getLayoutStyles, proc
|
|
|
11
11
|
export { getBlockSelector } from './core/selectors';
|
|
12
12
|
export { getTypographyFontSizeValue } from './utils/typography';
|
|
13
13
|
export { getDimensionPresetCssVar } from './utils/dimensions';
|
|
14
|
-
export { getValueFromVariable, getPresetVariableFromValue, getResolvedValue, } from './utils/common';
|
|
14
|
+
export { getValueFromVariable, getPresetVariableFromValue, getResolvedValue, splitSelectorList, } from './utils/common';
|
|
15
15
|
export type * from './types';
|
|
16
16
|
export { generatePreviewStateStyles as __unstableGeneratePreviewStateStyles } from './preview-state-styles';
|
|
17
17
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAGhE,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAGtF,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EACN,iBAAiB,IAAI,QAAQ,EAC7B,iBAAiB,EACjB,eAAe,EACf,iBAAiB,GACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGpD,OAAO,EAAE,0BAA0B,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EACN,oBAAoB,EACpB,0BAA0B,EAC1B,gBAAgB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAGhE,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAGtF,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EACN,iBAAiB,IAAI,QAAQ,EAC7B,iBAAiB,EACjB,eAAe,EACf,iBAAiB,GACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGpD,OAAO,EAAE,0BAA0B,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EACN,oBAAoB,EACpB,0BAA0B,EAC1B,gBAAgB,EAChB,iBAAiB,GACjB,MAAM,gBAAgB,CAAC;AAGxB,mBAAmB,SAAS,CAAC;AAE7B,OAAO,EAAE,0BAA0B,IAAI,oCAAoC,EAAE,MAAM,wBAAwB,CAAC"}
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
import type { GlobalStylesSettings, ThemeFileLink, TypographyPreset, UnresolvedValue, GlobalStylesConfig } from '../types';
|
|
5
5
|
export declare const ROOT_BLOCK_SELECTOR = "body";
|
|
6
6
|
export declare const ROOT_CSS_PROPERTIES_SELECTOR = ":root";
|
|
7
|
+
export declare function splitSelectorList(selector: string): string[];
|
|
7
8
|
export declare const PRESET_METADATA: ({
|
|
8
9
|
path: string[];
|
|
9
10
|
valueKey: string;
|
|
@@ -104,6 +105,19 @@ export declare function appendToSelector(selector: string, toAppend: string): st
|
|
|
104
105
|
* @return CSS selector for the block style variation.
|
|
105
106
|
*/
|
|
106
107
|
export declare function getBlockStyleVariationSelector(variation: string, blockSelector: string): string;
|
|
108
|
+
/**
|
|
109
|
+
* Generates the selector for a block style variation feature selector.
|
|
110
|
+
*
|
|
111
|
+
* Feature selectors can target a different element than the block root
|
|
112
|
+
* selector. Apply the variation class directly to the selector that receives
|
|
113
|
+
* the declarations instead of deriving it from the block root selector.
|
|
114
|
+
*
|
|
115
|
+
* @param variation Name for the variation.
|
|
116
|
+
* @param featureSelector CSS selector for the feature.
|
|
117
|
+
*
|
|
118
|
+
* @return CSS selector for the block style variation feature.
|
|
119
|
+
*/
|
|
120
|
+
export declare function getBlockStyleVariationFeatureSelector(variation: string, featureSelector: string): string;
|
|
107
121
|
/**
|
|
108
122
|
* Resolves ref values in theme JSON.
|
|
109
123
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EACX,oBAAoB,EACpB,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,MAAM,UAAU,CAAC;AAIlB,eAAO,MAAM,mBAAmB,SAAS,CAAC;AAC1C,eAAO,MAAM,4BAA4B,UAAU,CAAC;AAEpD,eAAO,MAAM,eAAe;;;;;;;;;;;wBA6CjB,gBAAgB,YACd,oBAAoB;;;;;;;;;;;0BAkBR;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;;IAexC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAE,MAAM,EAAE,MAAM,CA8C/D,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,aAAa,CAAE,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,EAAE,MAAM,UAgBzE;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,qBAAqB,CACpC,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,SAAS,EAAE,MAAM,GAAG,MAAM,CAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAAE,MAAM,EAAE,MAAM,CAAE,CAAE,+DAgCvE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,UAOnE;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,8BAA8B,CAC7C,SAAS,EAAE,MAAM,EACjB,aAAa,EAAE,MAAM,UAsBrB;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAClC,SAAS,EAAE,eAAe,EAC1B,IAAI,CAAC,EAAE,kBAAkB,GACvB,eAAe,CAuCjB;AAED;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CACvC,IAAI,EAAE,MAAM,EACZ,aAAa,CAAC,EAAE,aAAa,EAAE,UAe/B;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC/B,SAAS,EAAE,eAAe,EAC1B,IAAI,EAAE,kBAAkB,GAAG,SAAS,mBAuBpC;AAoHD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,oBAAoB,CACnC,QAAQ,EAAE,kBAAkB,EAC5B,SAAS,CAAC,EAAE,MAAM,EAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,eAAe,GACjC,GAAG,CAgEL;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,0BAA0B,CACzC,QAAQ,EAAE,oBAAoB,EAC9B,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,iBAAiB,EAAE,MAAM,EACzB,mBAAmB,EAAE,GAAG,GACtB,GAAG,CAiCL"}
|
|
1
|
+
{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EACX,oBAAoB,EACpB,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,MAAM,UAAU,CAAC;AAIlB,eAAO,MAAM,mBAAmB,SAAS,CAAC;AAC1C,eAAO,MAAM,4BAA4B,UAAU,CAAC;AAEpD,wBAAgB,iBAAiB,CAAE,QAAQ,EAAE,MAAM,YA0BlD;AAED,eAAO,MAAM,eAAe;;;;;;;;;;;wBA6CjB,gBAAgB,YACd,oBAAoB;;;;;;;;;;;0BAkBR;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;;IAexC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAE,MAAM,EAAE,MAAM,CA8C/D,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,aAAa,CAAE,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,EAAE,MAAM,UAgBzE;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,qBAAqB,CACpC,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,SAAS,EAAE,MAAM,GAAG,MAAM,CAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAAE,MAAM,EAAE,MAAM,CAAE,CAAE,+DAgCvE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,UAOnE;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,8BAA8B,CAC7C,SAAS,EAAE,MAAM,EACjB,aAAa,EAAE,MAAM,UAsBrB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,qCAAqC,CACpD,SAAS,EAAE,MAAM,EACjB,eAAe,EAAE,MAAM,UAoBvB;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAClC,SAAS,EAAE,eAAe,EAC1B,IAAI,CAAC,EAAE,kBAAkB,GACvB,eAAe,CAuCjB;AAED;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CACvC,IAAI,EAAE,MAAM,EACZ,aAAa,CAAC,EAAE,aAAa,EAAE,UAe/B;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC/B,SAAS,EAAE,eAAe,EAC1B,IAAI,EAAE,kBAAkB,GAAG,SAAS,mBAuBpC;AAoHD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,oBAAoB,CACnC,QAAQ,EAAE,kBAAkB,EAC5B,SAAS,CAAC,EAAE,MAAM,EAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,eAAe,GACjC,GAAG,CAgEL;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,0BAA0B,CACzC,QAAQ,EAAE,oBAAoB,EAC9B,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,iBAAiB,EAAE,MAAM,EACzB,mBAAmB,EAAE,GAAG,GACtB,GAAG,CAiCL"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/global-styles-engine",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.14.0",
|
|
4
4
|
"description": "Pure CSS generation engine for WordPress global styles.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -42,10 +42,10 @@
|
|
|
42
42
|
"types": "build-types/index.d.ts",
|
|
43
43
|
"sideEffects": false,
|
|
44
44
|
"dependencies": {
|
|
45
|
-
"@wordpress/blocks": "^15.
|
|
46
|
-
"@wordpress/data": "^10.
|
|
47
|
-
"@wordpress/i18n": "^6.
|
|
48
|
-
"@wordpress/style-engine": "^2.
|
|
45
|
+
"@wordpress/blocks": "^15.20.0",
|
|
46
|
+
"@wordpress/data": "^10.47.0",
|
|
47
|
+
"@wordpress/i18n": "^6.20.0",
|
|
48
|
+
"@wordpress/style-engine": "^2.47.0",
|
|
49
49
|
"colord": "^2.9.2",
|
|
50
50
|
"deepmerge": "^4.3.0",
|
|
51
51
|
"fast-deep-equal": "^3.1.3",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"publishConfig": {
|
|
60
60
|
"access": "public"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "d653c5fd6161571a0c2ebde28553d6e25624eacc"
|
|
63
63
|
}
|
package/src/core/render.tsx
CHANGED
|
@@ -23,6 +23,7 @@ import {
|
|
|
23
23
|
scopeFeatureSelectors,
|
|
24
24
|
appendToSelector,
|
|
25
25
|
getBlockStyleVariationSelector,
|
|
26
|
+
getBlockStyleVariationFeatureSelector,
|
|
26
27
|
getResolvedValue,
|
|
27
28
|
} from '../utils/common';
|
|
28
29
|
import { getBlockSelector } from './selectors';
|
|
@@ -152,6 +153,7 @@ export type BlockSelectors = Record<
|
|
|
152
153
|
* - `fallbackGapValue`: fallback block gap value used by layout rules.
|
|
153
154
|
* - `hasLayoutSupport`: whether layout styles can be generated for the node.
|
|
154
155
|
* - `isStyleVariation`: whether this node is a block style variation.
|
|
156
|
+
* - `variationName`: block style variation name used for feature selectors.
|
|
155
157
|
* - `layoutSelector`: optional selector override for layout styles.
|
|
156
158
|
* - `layoutHasBlockGapSupport`: optional block gap support override for layout styles.
|
|
157
159
|
* - `name`: block name used by block-specific declaration adjustments.
|
|
@@ -170,6 +172,7 @@ interface StylesNode {
|
|
|
170
172
|
fallbackGapValue?: string;
|
|
171
173
|
hasLayoutSupport?: boolean;
|
|
172
174
|
isStyleVariation?: boolean;
|
|
175
|
+
variationName?: string;
|
|
173
176
|
layoutSelector?: string;
|
|
174
177
|
layoutHasBlockGapSupport?: boolean;
|
|
175
178
|
name?: string;
|
|
@@ -339,27 +342,6 @@ function flattenTree(
|
|
|
339
342
|
return result;
|
|
340
343
|
}
|
|
341
344
|
|
|
342
|
-
/**
|
|
343
|
-
* Gets variation selector string from feature selector.
|
|
344
|
-
*
|
|
345
|
-
* @param featureSelector The feature selector
|
|
346
|
-
* @param styleVariationSelector The style variation selector
|
|
347
|
-
* @return Combined selector string
|
|
348
|
-
*/
|
|
349
|
-
function concatFeatureVariationSelectorString(
|
|
350
|
-
featureSelector: string,
|
|
351
|
-
styleVariationSelector: string
|
|
352
|
-
): string {
|
|
353
|
-
const featureSelectors = featureSelector.split( ',' );
|
|
354
|
-
const combinedSelectors: string[] = [];
|
|
355
|
-
featureSelectors.forEach( ( selector ) => {
|
|
356
|
-
combinedSelectors.push(
|
|
357
|
-
`${ styleVariationSelector.trim() }${ selector.trim() }`
|
|
358
|
-
);
|
|
359
|
-
} );
|
|
360
|
-
return combinedSelectors.join( ', ' );
|
|
361
|
-
}
|
|
362
|
-
|
|
363
345
|
/**
|
|
364
346
|
* Updates the text indent selector for paragraph blocks based on the textIndent setting.
|
|
365
347
|
*
|
|
@@ -978,6 +960,7 @@ function getPseudoStyleNodes( node: StylesNode ): StylesNode[] {
|
|
|
978
960
|
name,
|
|
979
961
|
elementName,
|
|
980
962
|
mediaQuery,
|
|
963
|
+
variationName,
|
|
981
964
|
} = node;
|
|
982
965
|
const pseudoSelectors = name
|
|
983
966
|
? VALID_BLOCK_PSEUDO_SELECTORS[ name ] ?? []
|
|
@@ -1005,6 +988,7 @@ function getPseudoStyleNodes( node: StylesNode ): StylesNode[] {
|
|
|
1005
988
|
: undefined,
|
|
1006
989
|
name,
|
|
1007
990
|
elementName,
|
|
991
|
+
variationName,
|
|
1008
992
|
},
|
|
1009
993
|
];
|
|
1010
994
|
} );
|
|
@@ -1027,6 +1011,7 @@ function getResponsiveStyleNodes( node: StylesNode ): StylesNode[] {
|
|
|
1027
1011
|
name,
|
|
1028
1012
|
elementName,
|
|
1029
1013
|
isStyleVariation,
|
|
1014
|
+
variationName,
|
|
1030
1015
|
} = node;
|
|
1031
1016
|
|
|
1032
1017
|
if ( ! name && ! elementName ) {
|
|
@@ -1052,60 +1037,13 @@ function getResponsiveStyleNodes( node: StylesNode ): StylesNode[] {
|
|
|
1052
1037
|
name,
|
|
1053
1038
|
elementName,
|
|
1054
1039
|
isStyleVariation,
|
|
1040
|
+
variationName,
|
|
1055
1041
|
},
|
|
1056
1042
|
];
|
|
1057
1043
|
}
|
|
1058
1044
|
);
|
|
1059
1045
|
}
|
|
1060
1046
|
|
|
1061
|
-
/**
|
|
1062
|
-
* Scopes feature selectors to a style variation selector.
|
|
1063
|
-
*
|
|
1064
|
-
* Variation feature selectors are compound selectors rather than suffixes. For
|
|
1065
|
-
* example, `.wp-image-spacing` becomes `.is-style-foo.wp-image.wp-image-spacing`.
|
|
1066
|
-
*
|
|
1067
|
-
* @param featureSelectors Feature-level selectors from a style node.
|
|
1068
|
-
* @param styleVariationSelector Selector for the style variation.
|
|
1069
|
-
* @return Feature-level selectors scoped to the style variation.
|
|
1070
|
-
*/
|
|
1071
|
-
function getVariationFeatureSelectors(
|
|
1072
|
-
featureSelectors: StylesNode[ 'featureSelectors' ],
|
|
1073
|
-
styleVariationSelector: string
|
|
1074
|
-
): StylesNode[ 'featureSelectors' ] {
|
|
1075
|
-
if ( ! featureSelectors || typeof featureSelectors === 'string' ) {
|
|
1076
|
-
return undefined;
|
|
1077
|
-
}
|
|
1078
|
-
|
|
1079
|
-
return Object.fromEntries(
|
|
1080
|
-
Object.entries( featureSelectors ).map( ( [ feature, selector ] ) => {
|
|
1081
|
-
if ( typeof selector === 'string' ) {
|
|
1082
|
-
return [
|
|
1083
|
-
feature,
|
|
1084
|
-
concatFeatureVariationSelectorString(
|
|
1085
|
-
selector,
|
|
1086
|
-
styleVariationSelector
|
|
1087
|
-
),
|
|
1088
|
-
];
|
|
1089
|
-
}
|
|
1090
|
-
|
|
1091
|
-
return [
|
|
1092
|
-
feature,
|
|
1093
|
-
Object.fromEntries(
|
|
1094
|
-
Object.entries( selector ).map(
|
|
1095
|
-
( [ subfeature, subfeatureSelector ] ) => [
|
|
1096
|
-
subfeature,
|
|
1097
|
-
concatFeatureVariationSelectorString(
|
|
1098
|
-
subfeatureSelector,
|
|
1099
|
-
styleVariationSelector
|
|
1100
|
-
),
|
|
1101
|
-
]
|
|
1102
|
-
)
|
|
1103
|
-
),
|
|
1104
|
-
];
|
|
1105
|
-
} )
|
|
1106
|
-
);
|
|
1107
|
-
}
|
|
1108
|
-
|
|
1109
1047
|
export const getNodesWithStyles = (
|
|
1110
1048
|
tree: GlobalStylesConfig,
|
|
1111
1049
|
blockSelectors: string | BlockSelectors
|
|
@@ -1179,15 +1117,14 @@ export const getNodesWithStyles = (
|
|
|
1179
1117
|
variationStyleNodesToAdd.push( {
|
|
1180
1118
|
styles: variationStyles,
|
|
1181
1119
|
selector: variationSelector,
|
|
1182
|
-
featureSelectors:
|
|
1120
|
+
featureSelectors:
|
|
1183
1121
|
blockSelector?.featureSelectors,
|
|
1184
|
-
variationSelector
|
|
1185
|
-
),
|
|
1186
1122
|
fallbackGapValue:
|
|
1187
1123
|
blockSelector?.fallbackGapValue,
|
|
1188
1124
|
hasLayoutSupport:
|
|
1189
1125
|
blockSelector?.hasLayoutSupport,
|
|
1190
1126
|
isStyleVariation: true,
|
|
1127
|
+
variationName,
|
|
1191
1128
|
layoutSelector:
|
|
1192
1129
|
variationSelector + blockSelector.selector,
|
|
1193
1130
|
layoutHasBlockGapSupport: true,
|
|
@@ -1635,6 +1572,7 @@ function renderStylesNode(
|
|
|
1635
1572
|
layoutHasBlockGapSupport,
|
|
1636
1573
|
skipSelectorWrapper,
|
|
1637
1574
|
name,
|
|
1575
|
+
variationName,
|
|
1638
1576
|
} = node;
|
|
1639
1577
|
let ruleset = '';
|
|
1640
1578
|
const effectiveSelector = selectorSuffix
|
|
@@ -1665,9 +1603,15 @@ function renderStylesNode(
|
|
|
1665
1603
|
Object.entries( featureDeclarations ).forEach(
|
|
1666
1604
|
( [ featureSelector, declarations ] ) => {
|
|
1667
1605
|
if ( declarations.length ) {
|
|
1668
|
-
|
|
1669
|
-
?
|
|
1606
|
+
let selectorForRule = variationName
|
|
1607
|
+
? getBlockStyleVariationFeatureSelector(
|
|
1608
|
+
variationName,
|
|
1609
|
+
featureSelector
|
|
1610
|
+
)
|
|
1670
1611
|
: featureSelector;
|
|
1612
|
+
selectorForRule = selectorSuffix
|
|
1613
|
+
? appendToSelector( selectorForRule, selectorSuffix )
|
|
1614
|
+
: selectorForRule;
|
|
1671
1615
|
const rules = declarations.join( ';' );
|
|
1672
1616
|
ruleset += `:root :where(${ selectorForRule }){${ rules };}`;
|
|
1673
1617
|
}
|
package/src/index.ts
CHANGED
package/src/test/render.test.ts
CHANGED
|
@@ -661,7 +661,7 @@ describe( 'global styles renderer', () => {
|
|
|
661
661
|
styleOptions
|
|
662
662
|
);
|
|
663
663
|
expect( withVariations ).toEqual(
|
|
664
|
-
':root :where(.
|
|
664
|
+
':root :where(.wp-image-spacing.is-style-foo){padding-top: 2px;}:root :where(.wp-image-border-color.is-style-foo){border-color: blue;}:root :where(.is-style-foo.wp-image){color: blue;}'
|
|
665
665
|
);
|
|
666
666
|
} );
|
|
667
667
|
|
|
@@ -868,10 +868,16 @@ describe( 'global styles renderer', () => {
|
|
|
868
868
|
color: {
|
|
869
869
|
text: 'green',
|
|
870
870
|
},
|
|
871
|
+
dimensions: {
|
|
872
|
+
width: '10rem',
|
|
873
|
+
},
|
|
871
874
|
':hover': {
|
|
872
875
|
color: {
|
|
873
876
|
text: 'yellow',
|
|
874
877
|
},
|
|
878
|
+
dimensions: {
|
|
879
|
+
width: '20rem',
|
|
880
|
+
},
|
|
875
881
|
},
|
|
876
882
|
},
|
|
877
883
|
},
|
|
@@ -882,9 +888,15 @@ describe( 'global styles renderer', () => {
|
|
|
882
888
|
|
|
883
889
|
const blockSelectors = {
|
|
884
890
|
'core/button': {
|
|
885
|
-
selector: '.wp-block-button',
|
|
891
|
+
selector: '.wp-block-button .wp-block-button__link',
|
|
892
|
+
featureSelectors: {
|
|
893
|
+
dimensions: {
|
|
894
|
+
root: '.wp-block-button',
|
|
895
|
+
width: '.wp-block-button',
|
|
896
|
+
},
|
|
897
|
+
},
|
|
886
898
|
styleVariationSelectors: {
|
|
887
|
-
foo: '.is-style-foo.wp-block-
|
|
899
|
+
foo: '.wp-block-button.is-style-foo .wp-block-button__link',
|
|
888
900
|
},
|
|
889
901
|
},
|
|
890
902
|
};
|
|
@@ -908,11 +920,11 @@ describe( 'global styles renderer', () => {
|
|
|
908
920
|
);
|
|
909
921
|
|
|
910
922
|
expect( result ).toEqual(
|
|
911
|
-
':root :where(.is-style-foo.wp-block-button){color: green;}:root :where(.is-style-foo.wp-block-button:hover){color: yellow;}'
|
|
923
|
+
':root :where(.wp-block-button.is-style-foo){width: 10rem;}:root :where(.wp-block-button.is-style-foo .wp-block-button__link){color: green;}:root :where(.wp-block-button.is-style-foo:hover){width: 20rem;}:root :where(.wp-block-button.is-style-foo .wp-block-button__link:hover){color: yellow;}'
|
|
912
924
|
);
|
|
913
925
|
} );
|
|
914
926
|
|
|
915
|
-
it( 'outputs variation pseudo styles after
|
|
927
|
+
it( 'outputs variation responsive pseudo styles after default pseudo styles', () => {
|
|
916
928
|
const tree = {
|
|
917
929
|
styles: {
|
|
918
930
|
blocks: {
|
|
@@ -922,19 +934,31 @@ describe( 'global styles renderer', () => {
|
|
|
922
934
|
color: {
|
|
923
935
|
text: 'green',
|
|
924
936
|
},
|
|
937
|
+
dimensions: {
|
|
938
|
+
width: '10rem',
|
|
939
|
+
},
|
|
925
940
|
':hover': {
|
|
926
941
|
color: {
|
|
927
942
|
text: 'blue',
|
|
928
943
|
},
|
|
944
|
+
dimensions: {
|
|
945
|
+
width: '20rem',
|
|
946
|
+
},
|
|
929
947
|
},
|
|
930
|
-
|
|
948
|
+
tablet: {
|
|
931
949
|
color: {
|
|
932
950
|
text: 'red',
|
|
933
951
|
},
|
|
952
|
+
dimensions: {
|
|
953
|
+
width: '30rem',
|
|
954
|
+
},
|
|
934
955
|
':hover': {
|
|
935
956
|
color: {
|
|
936
957
|
text: 'orange',
|
|
937
958
|
},
|
|
959
|
+
dimensions: {
|
|
960
|
+
width: '40rem',
|
|
961
|
+
},
|
|
938
962
|
},
|
|
939
963
|
},
|
|
940
964
|
},
|
|
@@ -946,9 +970,15 @@ describe( 'global styles renderer', () => {
|
|
|
946
970
|
|
|
947
971
|
const blockSelectors = {
|
|
948
972
|
'core/button': {
|
|
949
|
-
selector: '.wp-block-button',
|
|
973
|
+
selector: '.wp-block-button .wp-block-button__link',
|
|
974
|
+
featureSelectors: {
|
|
975
|
+
dimensions: {
|
|
976
|
+
root: '.wp-block-button',
|
|
977
|
+
width: '.wp-block-button',
|
|
978
|
+
},
|
|
979
|
+
},
|
|
950
980
|
styleVariationSelectors: {
|
|
951
|
-
foo: '.is-style-foo.wp-block-
|
|
981
|
+
foo: '.wp-block-button.is-style-foo .wp-block-button__link',
|
|
952
982
|
},
|
|
953
983
|
},
|
|
954
984
|
};
|
|
@@ -967,7 +997,7 @@ describe( 'global styles renderer', () => {
|
|
|
967
997
|
);
|
|
968
998
|
|
|
969
999
|
expect( result ).toEqual(
|
|
970
|
-
':root :where(.is-style-foo.wp-block-button){color: green;}@media (width <=
|
|
1000
|
+
':root :where(.wp-block-button.is-style-foo){width: 10rem;}:root :where(.wp-block-button.is-style-foo .wp-block-button__link){color: green;}@media (480px < width <= 782px){:root :where(.wp-block-button.is-style-foo){width: 30rem;}:root :where(.wp-block-button.is-style-foo .wp-block-button__link){color: red;}}:root :where(.wp-block-button.is-style-foo:hover){width: 20rem;}:root :where(.wp-block-button.is-style-foo .wp-block-button__link:hover){color: blue;}@media (480px < width <= 782px){:root :where(.wp-block-button.is-style-foo:hover){width: 40rem;}:root :where(.wp-block-button.is-style-foo .wp-block-button__link:hover){color: orange;}}'
|
|
971
1001
|
);
|
|
972
1002
|
} );
|
|
973
1003
|
|
package/src/test/utils.test.ts
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
*/
|
|
9
9
|
import type { GlobalStylesConfig } from '../types';
|
|
10
10
|
import {
|
|
11
|
+
getBlockStyleVariationFeatureSelector,
|
|
11
12
|
getBlockStyleVariationSelector,
|
|
12
13
|
getValueFromVariable,
|
|
13
14
|
getPresetVariableFromValue,
|
|
@@ -302,6 +303,13 @@ describe( 'editor utils', () => {
|
|
|
302
303
|
expected:
|
|
303
304
|
'.wp-block.is-style-custom:is(.outer .inner:first-child)',
|
|
304
305
|
},
|
|
306
|
+
{
|
|
307
|
+
type: ':is with selector list',
|
|
308
|
+
selector:
|
|
309
|
+
'.wp-block:is(.outer, .inner:first-child) .content, .wp-block-alternative',
|
|
310
|
+
expected:
|
|
311
|
+
'.wp-block.is-style-custom:is(.outer, .inner:first-child) .content, .wp-block-alternative.is-style-custom',
|
|
312
|
+
},
|
|
305
313
|
{
|
|
306
314
|
type: ':not',
|
|
307
315
|
selector: '.wp-block:not(.outer .inner:first-child)',
|
|
@@ -342,6 +350,37 @@ describe( 'editor utils', () => {
|
|
|
342
350
|
);
|
|
343
351
|
} );
|
|
344
352
|
|
|
353
|
+
describe( 'getBlockStyleVariationFeatureSelector', () => {
|
|
354
|
+
it( 'adds the variation class to the feature selector target', () => {
|
|
355
|
+
expect(
|
|
356
|
+
getBlockStyleVariationFeatureSelector(
|
|
357
|
+
'outline',
|
|
358
|
+
'.wp-block-button'
|
|
359
|
+
)
|
|
360
|
+
).toBe( '.wp-block-button.is-style-outline' );
|
|
361
|
+
} );
|
|
362
|
+
|
|
363
|
+
it( 'removes an outer variation scope before adding the variation class', () => {
|
|
364
|
+
expect(
|
|
365
|
+
getBlockStyleVariationFeatureSelector(
|
|
366
|
+
'outline--3',
|
|
367
|
+
'.is-style-outline--3 .wp-block-button'
|
|
368
|
+
)
|
|
369
|
+
).toBe( '.wp-block-button.is-style-outline--3' );
|
|
370
|
+
} );
|
|
371
|
+
|
|
372
|
+
it( 'preserves selector-list commas inside pseudo-class functions', () => {
|
|
373
|
+
expect(
|
|
374
|
+
getBlockStyleVariationFeatureSelector(
|
|
375
|
+
'outline--3',
|
|
376
|
+
'.is-style-outline--3 .wp-block-button:is(.primary, .secondary), .is-style-outline--3 .wp-block-button .inner'
|
|
377
|
+
)
|
|
378
|
+
).toBe(
|
|
379
|
+
'.wp-block-button.is-style-outline--3:is(.primary, .secondary),.wp-block-button.is-style-outline--3 .inner'
|
|
380
|
+
);
|
|
381
|
+
} );
|
|
382
|
+
} );
|
|
383
|
+
|
|
345
384
|
describe( 'scopeFeatureSelectors', () => {
|
|
346
385
|
it( 'correctly scopes selectors while maintaining selectors object structure', () => {
|
|
347
386
|
const actual = scopeFeatureSelectors( '.custom, .secondary', {
|