UNPKG

@mui/styled-engine

Version:

styled() API wrapper package for emotion.

74 lines (64 loc) 3.18 kB
/** * @mui/styled-engine v9.1.1 * * @license MIT * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ 'use client'; /* eslint-disable no-underscore-dangle */ import emStyled from '@emotion/styled'; import { serializeStyles as emSerializeStyles } from '@emotion/serialize'; // Re-export the public type surface of `@emotion/styled`. Explicit names rather // than `export type *`: an `export *` (even type-only) is disallowed by the // `'use client'` Next.js lint rule. Names locally redeclared below intentionally // shadow Emotion's and are not re-exported here. function styled(tag, options) { // Emotion's `styled` overloads each expect a specific tag/component shape; // none accept the broadened `React.ElementType` union, so cast the passthrough. const stylesFactory = emStyled(tag, options); if (process.env.NODE_ENV !== 'production') { return (...styles) => { const component = typeof tag === 'string' ? `"${tag}"` : 'component'; if (styles.length === 0) { console.error([`MUI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join('\n')); } else if (styles.some(style => style === undefined)) { console.error(`MUI: the styled(${component})(...args) API requires all its args to be defined.`); } return stylesFactory(...styles); }; } return stylesFactory; } export default styled; /** * For internal usage in `@mui/system` package */ // eslint-disable-next-line @typescript-eslint/naming-convention export function internal_mutateStyles(tag, processor) { // Emotion attaches all the styles as `__emotion_styles`. // Ref: https://github.com/emotion-js/emotion/blob/16d971d0da229596d6bcc39d282ba9753c9ee7cf/packages/styled/src/base.js#L186 if (Array.isArray(tag.__emotion_styles)) { tag.__emotion_styles = processor(tag.__emotion_styles); } } // Emotion only accepts an array, but we want to avoid allocations const wrapper = []; // eslint-disable-next-line @typescript-eslint/naming-convention export function internal_serializeStyles(styles) { wrapper[0] = styles; return emSerializeStyles(wrapper); } export { ThemeContext, keyframes, css } from '@emotion/react'; export { default as StyledEngineProvider } from "./StyledEngineProvider/index.mjs"; export { default as GlobalStyles } from "./GlobalStyles/index.mjs"; // TODO v6 - check if we can drop the unknown, as it breaks the autocomplete // For more info on why it was added, see https://github.com/mui/material-ui/pull/26228 // TODO v6 - check if we can drop the unknown, as it breaks the autocomplete // For more info on why it was added, see https://github.com/mui/material-ui/pull/26228 // Omit variants as a key, because we have a special handling for it /** Same as StyledOptions but shouldForwardProp must be a type guard */ /** * @typeparam ComponentProps Props which will be included when withComponent is called * @typeparam SpecificComponentProps Props which will *not* be included when withComponent is called */