@wyw-in-js/transform 1.1.0 → 2.0.0-alpha.1

package/esm/transform/generators/createStylisPreprocessor.js

@@ -1,354 +1,386 @@
 /* eslint-disable no-continue */
-import * as path from 'path';
-import { compile, middleware, prefixer, serialize, stringify, tokenize, COMMENT, RULESET, KEYFRAMES, DECLARATION } from 'stylis';
+import * as path from "path";
+import { compile, middleware, prefixer, serialize, stringify, tokenize, COMMENT, RULESET, KEYFRAMES, DECLARATION } from "stylis";
 const POSIX_SEP = path.posix.sep;
 export function transformUrl(url, outputFilename, sourceFilename, platformPath = path) {
-  // Replace asset path with new path relative to the output CSS
-  const relative = platformPath.relative(platformPath.dirname(outputFilename),
-  // Get the absolute path to the asset from the path relative to the JS file
-  platformPath.resolve(platformPath.dirname(sourceFilename), url));
-  if (platformPath.sep === POSIX_SEP) {
-    return relative;
-  }
-  return relative.split(platformPath.sep).join(POSIX_SEP);
+	// Replace asset path with new path relative to the output CSS
+	const relative = platformPath.relative(
+		platformPath.dirname(outputFilename),
+		// Get the absolute path to the asset from the path relative to the JS file
+		platformPath.resolve(platformPath.dirname(sourceFilename), url)
+	);
+	if (platformPath.sep === POSIX_SEP) {
+		return relative;
+	}
+	return relative.split(platformPath.sep).join(POSIX_SEP);
 }
-const DEFINED_KEYFRAMES = Symbol('definedKeyframes');
-const ORIGINAL_KEYFRAME_NAME = Symbol('originalKeyframeName');
-const ORIGINAL_VALUE_KEY = Symbol('originalValue');
-const IS_GLOBAL_KEYFRAMES = Symbol('isGlobalKeyframes');
-const getOriginalElementValue = element => {
-  return element ? element[ORIGINAL_VALUE_KEY] ?? element.value : '';
+const DEFINED_KEYFRAMES = Symbol("definedKeyframes");
+const ORIGINAL_KEYFRAME_NAME = Symbol("originalKeyframeName");
+const ORIGINAL_VALUE_KEY = Symbol("originalValue");
+const IS_GLOBAL_KEYFRAMES = Symbol("isGlobalKeyframes");
+const getOriginalElementValue = (element) => {
+	return element ? element[ORIGINAL_VALUE_KEY] ?? element.value : "";
 };
 function throwIfNotProd(key, value, type) {
-  if (process.env.NODE_ENV !== 'production') {
-    throw new Error(`"element.${key}" has type "${type}" (${JSON.stringify(value, null, 2)}), it's not expected. Please report a bug if it happens.`);
-  }
-  return false;
+	if (process.env.NODE_ENV !== "production") {
+		throw new Error(`"element.${key}" has type "${type}" (${JSON.stringify(value, null, 2)}), it's not expected. Please report a bug if it happens.`);
+	}
+	return false;
 }
 function childrenIsString(children) {
-  return typeof children === 'string' || throwIfNotProd('children', children, 'Element[]');
+	return typeof children === "string" || throwIfNotProd("children", children, "Element[]");
 }
 function propsAreStrings(props) {
-  return Array.isArray(props) || throwIfNotProd('props', props, 'string');
+	return Array.isArray(props) || throwIfNotProd("props", props, "string");
 }
 function propsIsString(props) {
-  return typeof props === 'string' || throwIfNotProd('props', props, 'string[]');
+	return typeof props === "string" || throwIfNotProd("props", props, "string[]");
 }
-const isDeclaration = element => {
-  return element.type === DECLARATION && propsIsString(element.props) && childrenIsString(element.children);
+const isDeclaration = (element) => {
+	return element.type === DECLARATION && propsIsString(element.props) && childrenIsString(element.children);
 };
-const isKeyframes = element => {
-  return element.type === KEYFRAMES && propsAreStrings(element.props);
+const isKeyframes = (element) => {
+	return element.type === KEYFRAMES && propsAreStrings(element.props);
 };
-const isRuleset = element => {
-  return element.type === RULESET && propsAreStrings(element.props);
+const isRuleset = (element) => {
+	return element.type === RULESET && propsAreStrings(element.props);
 };
 function nonMediaParent(element) {
-  let {
-    parent
-  } = element;
-  while (parent) {
-    if (parent.type !== '@media') {
-      return parent;
-    }
-    parent = parent.parent;
-  }
-  return null;
+	let { parent } = element;
+	while (parent) {
+		if (parent.type !== "@media") {
+			return parent;
+		}
+		parent = parent.parent;
+	}
+	return null;
 }
-
 /**
- * Stylis plugin that mimics :global() selector behavior from Stylis v3.
- */
-export const stylisGlobalPlugin = element => {
-  function getGlobalSelectorModifiers(el) {
-    const parent = nonMediaParent(el);
-    const value = getOriginalElementValue(el);
-    const parentValue = getOriginalElementValue(parent);
-    if (parent?.children.length === 0 && parentValue.includes(':global(') || parent && !value.includes(':global(')) {
-      return getGlobalSelectorModifiers(parent);
-    }
-    const match = value.match(/(&\f( )?)?:global\(/);
-    if (match === null) {
-      throw new Error(`Failed to match :global() selector in "${value}". Please report a bug if it happens.`);
-    }
-    const [, baseSelector, spaceDelimiter] = match;
-    return {
-      includeBaseSelector: !!baseSelector,
-      includeSpaceDelimiter: !!spaceDelimiter
-    };
-  }
-  if (!isRuleset(element)) {
-    return;
-  }
-  Object.assign(element, {
-    props: element.props.map(cssSelector => {
-      // The value can be changed by other middlewares, but we need an original one with `&`
-      Object.assign(element, {
-        [ORIGINAL_VALUE_KEY]: element.value
-      });
-
-      // Avoids calling tokenize() on every string
-      if (!cssSelector.includes(':global(')) {
-        return cssSelector;
-      }
-      if (element.children.length === 0) {
-        return cssSelector;
-      }
-      const {
-        includeBaseSelector,
-        includeSpaceDelimiter
-      } = getGlobalSelectorModifiers(element);
-      const tokens = tokenize(cssSelector);
-      let selector = '';
-      for (let i = 0, len = tokens.length; i < len; i++) {
-        const token = tokens[i];
-
-        //
-        // Match for ":global("
-        if (token === ':' && tokens[i + 1] === 'global') {
-          //
-          // Match for ":global()"
-          if (tokens[i + 2] === '()') {
-            selector = [...tokens.slice(i + 4), includeSpaceDelimiter ? ' ' : '', ...(includeBaseSelector ? tokens.slice(0, i - 1) : []), includeSpaceDelimiter ? '' : ' '].join('');
-            break;
-          }
-
-          //
-          // Match for ":global(selector)"
-          selector = [tokens[i + 2].slice(1, -1), includeSpaceDelimiter ? ' ' : '', ...(includeBaseSelector ? tokens.slice(0, i - 1) : []), includeSpaceDelimiter ? '' : ' '].join('');
-          break;
-        }
-      }
-      return selector;
-    })
-  });
+* Stylis plugin that mimics :global() selector behavior from Stylis v3.
+*/
+export const stylisGlobalPlugin = (element) => {
+	function getGlobalSelectorModifiers(el) {
+		const parent = nonMediaParent(el);
+		const value = getOriginalElementValue(el);
+		const parentValue = getOriginalElementValue(parent);
+		if (parent?.children.length === 0 && parentValue.includes(":global(") || parent && !value.includes(":global(")) {
+			return getGlobalSelectorModifiers(parent);
+		}
+		const match = value.match(/(&\f( )?)?:global\(/);
+		if (match === null) {
+			throw new Error(`Failed to match :global() selector in "${value}". Please report a bug if it happens.`);
+		}
+		const [, baseSelector, spaceDelimiter] = match;
+		return {
+			includeBaseSelector: !!baseSelector,
+			includeSpaceDelimiter: !!spaceDelimiter
+		};
+	}
+	if (!isRuleset(element)) {
+		return;
+	}
+	Object.assign(element, { props: element.props.map((cssSelector) => {
+		// The value can be changed by other middlewares, but we need an original one with `&`
+		Object.assign(element, { [ORIGINAL_VALUE_KEY]: element.value });
+		// Avoids calling tokenize() on every string
+		if (!cssSelector.includes(":global(")) {
+			return cssSelector;
+		}
+		if (element.children.length === 0) {
+			return cssSelector;
+		}
+		const { includeBaseSelector, includeSpaceDelimiter } = getGlobalSelectorModifiers(element);
+		const tokens = tokenize(cssSelector);
+		let selector = "";
+		for (let i = 0, len = tokens.length; i < len; i++) {
+			const token = tokens[i];
+			//
+			// Match for ":global("
+			if (token === ":" && tokens[i + 1] === "global") {
+				//
+				// Match for ":global()"
+				if (tokens[i + 2] === "()") {
+					selector = [
+						...tokens.slice(i + 4),
+						includeSpaceDelimiter ? " " : "",
+						...includeBaseSelector ? tokens.slice(0, i - 1) : [],
+						includeSpaceDelimiter ? "" : " "
+					].join("");
+					break;
+				}
+				//
+				// Match for ":global(selector)"
+				selector = [
+					tokens[i + 2].slice(1, -1),
+					includeSpaceDelimiter ? " " : "",
+					...includeBaseSelector ? tokens.slice(0, i - 1) : [],
+					includeSpaceDelimiter ? "" : " "
+				].join("");
+				break;
+			}
+		}
+		return selector;
+	}) });
 };
 export function createStylisUrlReplacePlugin(filename, outputFilename) {
-  return element => {
-    if (element.type === 'decl' && outputFilename) {
-      // When writing to a file, we need to adjust the relative paths inside url(..) expressions.
-      // It'll allow css-loader to resolve an imported asset properly.
-      // eslint-disable-next-line no-param-reassign
-      element.return = element.value.replace(/\b(url\((["']?))(\.[^)]+?)(\2\))/g, (_match, p1, _p2, p3, p4) => p1 + transformUrl(p3, outputFilename, filename) + p4);
-    }
-  };
+	return (element) => {
+		if (element.type === "decl" && outputFilename) {
+			// When writing to a file, we need to adjust the relative paths inside url(..) expressions.
+			// It'll allow css-loader to resolve an imported asset properly.
+			// eslint-disable-next-line no-param-reassign
+			element.return = element.value.replace(/\b(url\((["']?))(\.[^)]+?)(\2\))/g, (_match, p1, _p2, p3, p4) => p1 + transformUrl(p3, outputFilename, filename) + p4);
+		}
+	};
 }
 export function createKeyframeSuffixerPlugin() {
-  const prefixes = ['webkit', 'moz', 'ms', 'o', ''].map(i => i ? `-${i}-` : '');
-  const getPrefixedProp = prop => prefixes.map(prefix => `${prefix}${prop}`);
-  const buildPropsRegexp = (prop, isAtRule) => {
-    const [at, colon] = isAtRule ? ['@', ''] : ['', ':'];
-    return new RegExp(`^(${at}(?:${getPrefixedProp(prop).join('|')})${colon})\\s*`);
-  };
-  const animationNameRegexp = /:global\(([\w_-]+)\)|([\w_-]+)/;
-  const getReplacer = (startsWith, searchValue, replacer) => {
-    return input => {
-      const [fullMatch] = input.match(startsWith) ?? [];
-      if (fullMatch === undefined) {
-        return input;
-      }
-      const rest = input.slice(fullMatch.length);
-      return fullMatch + rest.replace(searchValue, replacer);
-    };
-  };
-  const elementToKeyframeSuffix = el => {
-    if (el.parent) {
-      return elementToKeyframeSuffix(el.parent);
-    }
-    return el.value.replaceAll(/[^a-zA-Z0-9_-]/g, '');
-  };
-  const animationPropsSet = new Set([...getPrefixedProp('animation'), ...getPrefixedProp('animation-name')]);
-  const getDefinedKeyframes = element => {
-    if (element[DEFINED_KEYFRAMES]) {
-      return element[DEFINED_KEYFRAMES];
-    }
-    if (element.parent) {
-      return getDefinedKeyframes(element.parent);
-    }
-    const keyframes = new Set();
-    for (const sibling of element.siblings ?? []) {
-      if (sibling[ORIGINAL_KEYFRAME_NAME]) {
-        keyframes.add(sibling[ORIGINAL_KEYFRAME_NAME]);
-        continue;
-      }
-      const name = sibling.props[0];
-      if (!isKeyframes(sibling) || sibling[IS_GLOBAL_KEYFRAMES] === true || name?.startsWith(':global(')) {
-        continue;
-      }
-      keyframes.add(sibling.props[0]);
-    }
-    Object.assign(element, {
-      [DEFINED_KEYFRAMES]: keyframes
-    });
-    return keyframes;
-  };
-  return element => {
-    if (isKeyframes(element) && element.parent) {
-      const suffix = elementToKeyframeSuffix(element);
-      const replaceFn = (_match, globalMatch, scopedMatch) => globalMatch || `${scopedMatch}-${suffix}`;
-      const originalName = element.props[0];
-      const isGlobal = originalName?.startsWith(':global(') ?? false;
-      Object.assign(element, {
-        [ORIGINAL_KEYFRAME_NAME]: isGlobal ? undefined : originalName,
-        [IS_GLOBAL_KEYFRAMES]: isGlobal,
-        props: element.props.map(getReplacer(/^\s*/, animationNameRegexp, replaceFn)),
-        value: getReplacer(buildPropsRegexp('keyframes', true), animationNameRegexp, replaceFn)(element.value)
-      });
-      return;
-    }
-    if (isDeclaration(element)) {
-      const suffix = elementToKeyframeSuffix(element);
-      const keys = ['children', 'return', 'value'];
-      if (animationPropsSet.has(element.props)) {
-        const scopedKeyframes = getDefinedKeyframes(element);
-        const patch = Object.fromEntries(keys.map(key => {
-          const tokens = tokenize(element[key]);
-          let result = '';
-          for (let i = 0; i < tokens.length; i += 1) {
-            if (tokens[i] === ':' && tokens[i + 1] === 'global' && tokens[i + 2].startsWith('(')) {
-              const globalName = tokens[i + 2].substring(1, tokens[i + 2].length - 1);
-              i += 2;
-              result += globalName;
-              if (tokens[i + 1] !== ';') {
-                result += ' ';
-              }
-              continue;
-            }
-            if (scopedKeyframes.has(tokens[i])) {
-              result += `${tokens[i]}-${suffix}`;
-              continue;
-            }
-            result += tokens[i];
-          }
-          return [key, result];
-        }));
-        Object.assign(element, patch);
-      }
-    }
-  };
+	const prefixes = [
+		"webkit",
+		"moz",
+		"ms",
+		"o",
+		""
+	].map((i) => i ? `-${i}-` : "");
+	const getPrefixedProp = (prop) => prefixes.map((prefix) => `${prefix}${prop}`);
+	const buildPropsRegexp = (prop, isAtRule) => {
+		const [at, colon] = isAtRule ? ["@", ""] : ["", ":"];
+		return new RegExp(`^(${at}(?:${getPrefixedProp(prop).join("|")})${colon})\\s*`);
+	};
+	const animationNameRegexp = /:global\(([\w_-]+)\)|([\w_-]+)/;
+	const getReplacer = (startsWith, searchValue, replacer) => {
+		return (input) => {
+			const [fullMatch] = input.match(startsWith) ?? [];
+			if (fullMatch === undefined) {
+				return input;
+			}
+			const rest = input.slice(fullMatch.length);
+			return fullMatch + rest.replace(searchValue, replacer);
+		};
+	};
+	const elementToKeyframeSuffix = (el) => {
+		if (el.parent) {
+			return elementToKeyframeSuffix(el.parent);
+		}
+		return el.value.replaceAll(/[^a-zA-Z0-9_-]/g, "");
+	};
+	const animationPropsSet = new Set([...getPrefixedProp("animation"), ...getPrefixedProp("animation-name")]);
+	const getDefinedKeyframes = (element) => {
+		if (element[DEFINED_KEYFRAMES]) {
+			return element[DEFINED_KEYFRAMES];
+		}
+		if (element.parent) {
+			return getDefinedKeyframes(element.parent);
+		}
+		const keyframes = new Set();
+		for (const sibling of element.siblings ?? []) {
+			if (sibling[ORIGINAL_KEYFRAME_NAME]) {
+				keyframes.add(sibling[ORIGINAL_KEYFRAME_NAME]);
+				continue;
+			}
+			const name = sibling.props[0];
+			if (!isKeyframes(sibling) || sibling[IS_GLOBAL_KEYFRAMES] === true || name?.startsWith(":global(")) {
+				continue;
+			}
+			keyframes.add(sibling.props[0]);
+		}
+		Object.assign(element, { [DEFINED_KEYFRAMES]: keyframes });
+		return keyframes;
+	};
+	return (element) => {
+		if (isKeyframes(element) && element.parent) {
+			const suffix = elementToKeyframeSuffix(element);
+			const replaceFn = (_match, globalMatch, scopedMatch) => globalMatch || `${scopedMatch}-${suffix}`;
+			const originalName = element.props[0];
+			const isGlobal = originalName?.startsWith(":global(") ?? false;
+			Object.assign(element, {
+				[ORIGINAL_KEYFRAME_NAME]: isGlobal ? undefined : originalName,
+				[IS_GLOBAL_KEYFRAMES]: isGlobal,
+				props: element.props.map(getReplacer(/^\s*/, animationNameRegexp, replaceFn)),
+				value: getReplacer(buildPropsRegexp("keyframes", true), animationNameRegexp, replaceFn)(element.value)
+			});
+			return;
+		}
+		if (isDeclaration(element)) {
+			const suffix = elementToKeyframeSuffix(element);
+			const keys = [
+				"children",
+				"return",
+				"value"
+			];
+			if (animationPropsSet.has(element.props)) {
+				const scopedKeyframes = getDefinedKeyframes(element);
+				const patch = Object.fromEntries(keys.map((key) => {
+					const tokens = tokenize(element[key]);
+					let result = "";
+					for (let i = 0; i < tokens.length; i += 1) {
+						if (tokens[i] === ":" && tokens[i + 1] === "global" && tokens[i + 2].startsWith("(")) {
+							const globalName = tokens[i + 2].substring(1, tokens[i + 2].length - 1);
+							i += 2;
+							result += globalName;
+							if (tokens[i + 1] !== ";") {
+								result += " ";
+							}
+							continue;
+						}
+						if (scopedKeyframes.has(tokens[i])) {
+							result += `${tokens[i]}-${suffix}`;
+							continue;
+						}
+						result += tokens[i];
+					}
+					return [key, result];
+				}));
+				Object.assign(element, patch);
+			}
+		}
+	};
 }
-const isMiddleware = obj => obj !== null;
+const isMiddleware = (obj) => obj !== null;
 const displayKeywordRegexp = /^[a-z-]+$/;
-const knownMultiKeywordDisplayTokens = new Set(['block', 'inline', 'flow', 'flow-root', 'flex', 'grid', 'table', 'list-item']);
+const knownMultiKeywordDisplayTokens = new Set([
+	"block",
+	"inline",
+	"flow",
+	"flow-root",
+	"flex",
+	"grid",
+	"table",
+	"list-item"
+]);
 function normalizeMultiKeywordDisplayValue(value) {
-  const trimmed = value.trim();
-  if (trimmed === '' || !/\s/.test(trimmed)) {
-    return null;
-  }
-  const importantRegexp = /!\s*important\s*$/i;
-  const hasImportant = importantRegexp.test(trimmed);
-  const withoutImportant = trimmed.replace(importantRegexp, '').trim();
-  const tokens = withoutImportant.split(/\s+/).filter(Boolean);
-  if (tokens.length < 2) {
-    return null;
-  }
-  const normalizedTokens = tokens.map(token => token.toLowerCase());
-  if (!normalizedTokens.every(token => displayKeywordRegexp.test(token))) {
-    return null;
-  }
-  const tokenSet = new Set(normalizedTokens);
-  const hasInline = tokenSet.has('inline');
-  const hasBlock = tokenSet.has('block');
-  if (hasInline && hasBlock) {
-    return null;
-  }
-  let outside = null;
-  if (hasInline) {
-    outside = 'inline';
-  } else if (hasBlock) {
-    outside = 'block';
-  }
-  const insideCandidates = ['flow-root', 'flow', 'flex', 'grid', 'table'].filter(candidate => tokenSet.has(candidate));
-  if (insideCandidates.length > 1) {
-    return null;
-  }
-  const inside = insideCandidates[0] ?? null;
-  const hasListItem = tokenSet.has('list-item');
-  const canCanonicalize = normalizedTokens.every(token => knownMultiKeywordDisplayTokens.has(token));
-  if (canCanonicalize) {
-    const canonicalOutside = outside ?? 'block';
-    const canonicalInside = inside ?? (hasListItem ? 'flow' : null);
-    if (canonicalInside) {
-      let canonical = null;
-      if (hasListItem) {
-        if (canonicalInside === 'flow' && canonicalOutside === 'block') {
-          canonical = 'list-item';
-        }
-      } else {
-        switch (canonicalInside) {
-          case 'flex':
-            canonical = canonicalOutside === 'inline' ? 'inline-flex' : 'flex';
-            break;
-          case 'grid':
-            canonical = canonicalOutside === 'inline' ? 'inline-grid' : 'grid';
-            break;
-          case 'table':
-            canonical = canonicalOutside === 'inline' ? 'inline-table' : 'table';
-            break;
-          case 'flow-root':
-            canonical = canonicalOutside === 'block' ? 'flow-root' : null;
-            break;
-          case 'flow':
-            canonical = canonicalOutside === 'inline' ? 'inline' : 'block';
-            break;
-          default:
-            break;
-        }
-      }
-      if (canonical) {
-        return hasImportant ? `${canonical}!important` : canonical;
-      }
-    }
-  }
-  const innerDisplay = inside === 'flex' || inside === 'grid' ? inside : null;
-  if (innerDisplay && normalizedTokens[0] === innerDisplay && normalizedTokens.length > 1) {
-    const reordered = [...(outside ? [outside] : []), ...normalizedTokens.filter(token => token !== innerDisplay && token !== outside), innerDisplay].join(' ');
-    return hasImportant ? `${reordered}!important` : reordered;
-  }
-  return null;
+	const trimmed = value.trim();
+	if (trimmed === "" || !/\s/.test(trimmed)) {
+		return null;
+	}
+	const importantRegexp = /!\s*important\s*$/i;
+	const hasImportant = importantRegexp.test(trimmed);
+	const withoutImportant = trimmed.replace(importantRegexp, "").trim();
+	const tokens = withoutImportant.split(/\s+/).filter(Boolean);
+	if (tokens.length < 2) {
+		return null;
+	}
+	const normalizedTokens = tokens.map((token) => token.toLowerCase());
+	if (!normalizedTokens.every((token) => displayKeywordRegexp.test(token))) {
+		return null;
+	}
+	const tokenSet = new Set(normalizedTokens);
+	const hasInline = tokenSet.has("inline");
+	const hasBlock = tokenSet.has("block");
+	if (hasInline && hasBlock) {
+		return null;
+	}
+	let outside = null;
+	if (hasInline) {
+		outside = "inline";
+	} else if (hasBlock) {
+		outside = "block";
+	}
+	const insideCandidates = [
+		"flow-root",
+		"flow",
+		"flex",
+		"grid",
+		"table"
+	].filter((candidate) => tokenSet.has(candidate));
+	if (insideCandidates.length > 1) {
+		return null;
+	}
+	const inside = insideCandidates[0] ?? null;
+	const hasListItem = tokenSet.has("list-item");
+	const canCanonicalize = normalizedTokens.every((token) => knownMultiKeywordDisplayTokens.has(token));
+	if (canCanonicalize) {
+		const canonicalOutside = outside ?? "block";
+		const canonicalInside = inside ?? (hasListItem ? "flow" : null);
+		if (canonicalInside) {
+			let canonical = null;
+			if (hasListItem) {
+				if (canonicalInside === "flow" && canonicalOutside === "block") {
+					canonical = "list-item";
+				}
+			} else {
+				switch (canonicalInside) {
+					case "flex":
+						canonical = canonicalOutside === "inline" ? "inline-flex" : "flex";
+						break;
+					case "grid":
+						canonical = canonicalOutside === "inline" ? "inline-grid" : "grid";
+						break;
+					case "table":
+						canonical = canonicalOutside === "inline" ? "inline-table" : "table";
+						break;
+					case "flow-root":
+						canonical = canonicalOutside === "block" ? "flow-root" : null;
+						break;
+					case "flow":
+						canonical = canonicalOutside === "inline" ? "inline" : "block";
+						break;
+					default: break;
+				}
+			}
+			if (canonical) {
+				return hasImportant ? `${canonical}!important` : canonical;
+			}
+		}
+	}
+	const innerDisplay = inside === "flex" || inside === "grid" ? inside : null;
+	if (innerDisplay && normalizedTokens[0] === innerDisplay && normalizedTokens.length > 1) {
+		const reordered = [
+			...outside ? [outside] : [],
+			...normalizedTokens.filter((token) => token !== innerDisplay && token !== outside),
+			innerDisplay
+		].join(" ");
+		return hasImportant ? `${reordered}!important` : reordered;
+	}
+	return null;
 }
 function createStylisDisplayNormalizationPlugin() {
-  return element => {
-    if (!isDeclaration(element) || element.props !== 'display') {
-      return;
-    }
-    const normalized = normalizeMultiKeywordDisplayValue(element.children);
-    if (!normalized) {
-      return;
-    }
-    const decl = `display:${normalized};`;
-    Object.assign(element, {
-      children: normalized,
-      value: decl
-    });
-  };
+	return (element) => {
+		if (!isDeclaration(element) || element.props !== "display") {
+			return;
+		}
+		const normalized = normalizeMultiKeywordDisplayValue(element.children);
+		if (!normalized) {
+			return;
+		}
+		const decl = `display:${normalized};`;
+		Object.assign(element, {
+			children: normalized,
+			value: decl
+		});
+	};
 }
 function createStylisStringifier(keepComments) {
-  if (!keepComments) {
-    return stringify;
-  }
-  const keepAllComments = keepComments === true;
-  const keepCommentsFilter = keepComments instanceof RegExp ? keepComments : null;
-  return (element, index, children, callback) => {
-    if (element.type === COMMENT) {
-      if (!keepAllComments && keepCommentsFilter) {
-        const commentValue = typeof element.children === 'string' ? element.children : element.value;
-        keepCommentsFilter.lastIndex = 0;
-        if (!keepCommentsFilter.test(commentValue)) {
-          return '';
-        }
-      }
-      return element.value;
-    }
-    return stringify(element, index, children, callback);
-  };
+	if (!keepComments) {
+		return stringify;
+	}
+	const keepAllComments = keepComments === true;
+	const keepCommentsFilter = keepComments instanceof RegExp ? keepComments : null;
+	return (element, index, children, callback) => {
+		if (element.type === COMMENT) {
+			if (!keepAllComments && keepCommentsFilter) {
+				const commentValue = typeof element.children === "string" ? element.children : element.value;
+				keepCommentsFilter.lastIndex = 0;
+				if (!keepCommentsFilter.test(commentValue)) {
+					return "";
+				}
+			}
+			return element.value;
+		}
+		return stringify(element, index, children, callback);
+	};
 }
 export function createStylisPreprocessor(options) {
-  const stringifier = createStylisStringifier(options.keepComments);
-  function stylisPreprocess(selector, text) {
-    const compiled = compile(`${selector} {${text}}\n`);
-    return serialize(compiled, middleware([createStylisUrlReplacePlugin(options.filename, options.outputFilename), stylisGlobalPlugin, options.prefixer === false ? null : createStylisDisplayNormalizationPlugin(), options.prefixer === false ? null : prefixer, createKeyframeSuffixerPlugin(), stringifier].filter(isMiddleware)));
-  }
-  return stylisPreprocess;
+	const stringifier = createStylisStringifier(options.keepComments);
+	function stylisPreprocess(selector, text) {
+		const compiled = compile(`${selector} {${text}}\n`);
+		return serialize(compiled, middleware([
+			createStylisUrlReplacePlugin(options.filename, options.outputFilename),
+			stylisGlobalPlugin,
+			options.prefixer === false ? null : createStylisDisplayNormalizationPlugin(),
+			options.prefixer === false ? null : prefixer,
+			createKeyframeSuffixerPlugin(),
+			stringifier
+		].filter(isMiddleware)));
+	}
+	return stylisPreprocess;
 }
-//# sourceMappingURL=createStylisPreprocessor.js.map
+//# sourceMappingURL=createStylisPreprocessor.js.map