@wordpress/block-editor
Version:
8 lines (7 loc) • 9.37 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/utils/transform-styles/index.js"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport * as parsel from 'parsel-js';\nimport Processor from 'postcss/lib/processor';\nimport CssSyntaxError from 'postcss/lib/css-syntax-error';\nimport prefixSelector from 'postcss-prefix-selector';\nimport rebaseUrl from 'postcss-urlrebase';\n\nconst cacheByWrapperSelector = new Map();\n\nconst ROOT_SELECTOR_TOKENS = [\n\t{ type: 'type', content: 'body' },\n\t{ type: 'type', content: 'html' },\n\t{ type: 'pseudo-class', content: ':root' },\n\t{ type: 'pseudo-class', content: ':where(body)' },\n\t{ type: 'pseudo-class', content: ':where(:root)' },\n\t{ type: 'pseudo-class', content: ':where(html)' },\n];\n\n/**\n * Prefixes root selectors in a way that ensures consistent specificity.\n * This requires special handling, since prefixing a classname before\n * html, body, or :root will generally result in an invalid selector.\n *\n * Some libraries will simply replace the root selector with the prefix\n * instead, but this results in inconsistent specificity.\n *\n * This function instead inserts the prefix after the root tags but before\n * any other part of the selector. This results in consistent specificity:\n * - If a `:where()` selector is used for the prefix, all selectors output\n * by `transformStyles` will have no specificity increase.\n * - If a classname, id, or something else is used as the prefix, all selectors\n * will have the same specificity bump when transformed.\n *\n * @param {string} prefix The prefix.\n * @param {string} selector The selector.\n *\n * @return {string} The prefixed root selector.\n */\nfunction prefixRootSelector( prefix, selector ) {\n\t// Use a tokenizer, since regular expressions are unreliable.\n\tconst tokenized = parsel.tokenize( selector );\n\n\t// Find the last token that contains a root selector by walking back\n\t// through the tokens.\n\tconst lastRootIndex = tokenized.findLastIndex( ( { content, type } ) => {\n\t\treturn ROOT_SELECTOR_TOKENS.some(\n\t\t\t( rootSelector ) =>\n\t\t\t\tcontent === rootSelector.content && type === rootSelector.type\n\t\t);\n\t} );\n\n\t// Walk forwards to find the combinator after the last root.\n\t// This is where the root ends and the rest of the selector begins,\n\t// and the index to insert before.\n\t// Doing it this way takes into account that a root selector like\n\t// 'body' may have additional id/class/pseudo-class/attribute-selector\n\t// parts chained to it, which is difficult to quantify using a regex.\n\tlet insertionPoint = -1;\n\tfor ( let i = lastRootIndex + 1; i < tokenized.length; i++ ) {\n\t\tif ( tokenized[ i ].type === 'combinator' ) {\n\t\t\tinsertionPoint = i;\n\t\t\tbreak;\n\t\t}\n\t}\n\n\t// Tokenize and insert the prefix with a ' ' combinator before it.\n\tconst tokenizedPrefix = parsel.tokenize( prefix );\n\ttokenized.splice(\n\t\t// Insert at the insertion point, or the end.\n\t\tinsertionPoint === -1 ? tokenized.length : insertionPoint,\n\t\t0,\n\t\t{\n\t\t\ttype: 'combinator',\n\t\t\tcontent: ' ',\n\t\t},\n\t\t...tokenizedPrefix\n\t);\n\n\treturn parsel.stringify( tokenized );\n}\n\nfunction transformStyle(\n\t{ css, ignoredSelectors = [], baseURL },\n\twrapperSelector = '',\n\ttransformOptions\n) {\n\t// When there is no wrapper selector and no base URL, there is no need\n\t// to transform the CSS. This is most cases because in the default\n\t// iframed editor, no wrapping is needed, and not many styles\n\t// provide a base URL.\n\tif ( ! wrapperSelector && ! baseURL ) {\n\t\treturn css;\n\t}\n\n\ttry {\n\t\tconst excludedSelectors = [\n\t\t\t...ignoredSelectors,\n\t\t\t...( transformOptions?.ignoredSelectors ?? [] ),\n\t\t\twrapperSelector,\n\t\t];\n\n\t\treturn new Processor(\n\t\t\t[\n\t\t\t\twrapperSelector &&\n\t\t\t\t\tprefixSelector( {\n\t\t\t\t\t\tprefix: wrapperSelector,\n\t\t\t\t\t\ttransform( prefix, selector, prefixedSelector ) {\n\t\t\t\t\t\t\t// For backwards compatibility, don't use the `exclude` option\n\t\t\t\t\t\t\t// of postcss-prefix-selector, instead handle it here to match\n\t\t\t\t\t\t\t// the behavior of the old library (postcss-prefix-wrap) that\n\t\t\t\t\t\t\t// `transformStyle` previously used.\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\texcludedSelectors.some( ( excludedSelector ) =>\n\t\t\t\t\t\t\t\t\texcludedSelector instanceof RegExp\n\t\t\t\t\t\t\t\t\t\t? selector.match( excludedSelector )\n\t\t\t\t\t\t\t\t\t\t: selector.includes( excludedSelector )\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\treturn selector;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst hasRootSelector = ROOT_SELECTOR_TOKENS.some(\n\t\t\t\t\t\t\t\t( rootSelector ) =>\n\t\t\t\t\t\t\t\t\tselector.startsWith( rootSelector.content )\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t// Reorganize root selectors such that the root part comes before the prefix,\n\t\t\t\t\t\t\t// but the prefix still comes before the remaining part of the selector.\n\t\t\t\t\t\t\tif ( hasRootSelector ) {\n\t\t\t\t\t\t\t\treturn prefixRootSelector( prefix, selector );\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn prefixedSelector;\n\t\t\t\t\t\t},\n\t\t\t\t\t} ),\n\t\t\t\tbaseURL && rebaseUrl( { rootUrl: baseURL } ),\n\t\t\t].filter( Boolean )\n\t\t).process( css, {} ).css; // use sync PostCSS API\n\t} catch ( error ) {\n\t\tif ( error instanceof CssSyntaxError ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(\n\t\t\t\t'wp.blockEditor.transformStyles Failed to transform CSS.',\n\t\t\t\terror.message + '\\n' + error.showSourceCode( false )\n\t\t\t);\n\t\t} else {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(\n\t\t\t\t'wp.blockEditor.transformStyles Failed to transform CSS.',\n\t\t\t\terror\n\t\t\t);\n\t\t}\n\n\t\treturn null;\n\t}\n}\n\n/**\n * @typedef {Object} EditorStyle\n * @property {string} css the CSS block(s), as a single string.\n * @property {?string} baseURL the base URL to be used as the reference when rewriting urls.\n * @property {?string[]} ignoredSelectors the selectors not to wrap.\n */\n\n/**\n * @typedef {Object} TransformOptions\n * @property {?string[]} ignoredSelectors the selectors not to wrap.\n */\n\n/**\n * Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.\n *\n * @param {EditorStyle[]} styles CSS rules.\n * @param {string} wrapperSelector Wrapper selector.\n * @param {TransformOptions} transformOptions Additional options for style transformation.\n * @return {Array} converted rules.\n */\nconst transformStyles = ( styles, wrapperSelector = '', transformOptions ) => {\n\tlet cache = cacheByWrapperSelector.get( wrapperSelector );\n\tif ( ! cache ) {\n\t\tcache = new WeakMap();\n\t\tcacheByWrapperSelector.set( wrapperSelector, cache );\n\t}\n\treturn styles.map( ( style ) => {\n\t\tlet css = cache.get( style );\n\t\tif ( ! css ) {\n\t\t\tcss = transformStyle( style, wrapperSelector, transformOptions );\n\t\t\tcache.set( style, css );\n\t\t}\n\t\treturn css;\n\t} );\n};\n\nexport default transformStyles;\n"],
"mappings": "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",
"names": []
}