{"id":368930,"date":"2024-05-21T03:52:30","date_gmt":"2024-05-21T03:52:30","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=368930"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=368930","title":{"rendered":"\u0410\u043d\u0430\u0442\u043e\u043c\u0438\u044f StyleX<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
<\/p>\n

<\/p>\n

<\/p>\n

Hello world!<\/p>\n

<\/p>\n

\u041f\u043e \u0434\u0430\u043d\u043d\u044b\u043c 2023 JavaScript Rising Stars<\/a> \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 StyleX<\/a> \u0437\u0430\u043d\u044f\u043b\u0430 \u0432\u0442\u043e\u0440\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 Styling \/ CSS in JS<\/a> (\u043f\u0435\u0440\u0432\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0432\u043f\u043e\u043b\u043d\u0435 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e \u0437\u0430\u043d\u044f\u043b TailwindCSS<\/a>).<\/p>\n

<\/p>\n

stylex<\/code> \u2014 \u044d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 CSS \u0432 JS<\/code> \u043e\u0442 Facebook<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0441\u0442\u0430\u043b\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438 \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0430\u0431\u0440\u0430\u043b\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c (\u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c \u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 7500 \u0437\u0432\u0435\u0437\u0434 \u043d\u0430 Github<\/a>). \u042d\u0442\u043e \u043e\u0431\u0443\u0441\u043b\u043e\u0432\u043b\u0435\u043d\u043e \u0435\u0435 \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u043e\u0441\u0442\u044c\u044e, \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n

<\/p>\n

\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f, \u043a\u0430\u043a stylex<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041d\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n

<\/a> <\/p>\n

\u041a\u043e\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0432\u044b\u0434\u0435\u0440\u0436\u043a\u0438 \u0438\u0437 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 stylex<\/code> (\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f stylex<\/code>), \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n

<\/p>\n

\u041f\u0440\u0438\u043c\u0435\u0440<\/strong><\/p>\n

<\/p>\n

\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043d\u043e\u043f\u043a\u0438, \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u044e\u0449\u0438\u0439 \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n

<\/p>\n

\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Vite<\/a>:<\/p>\n

<\/p>\n

# stylex-testing - \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 # react-ts - \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d yarn create vite stylex-testing --template react-ts # \u0438\u043b\u0438 npm create vite@latest stylex-testing -- --template react-ts<\/code><\/pre>\n
  <\/p>\n
\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n
  <\/p>\n
cd stylex-testing yarn add @stylexjs\/stylex yarn add -D vite-plugin-stylex-dev # \u0438\u043b\u0438 npm i @stylexjs\/stylex npm i -D vite-plugin-stylex-dev<\/code><\/pre>\n
  <\/p>\n
vite-plugin-stylex-dev<\/a> \u2014 \u043d\u0435\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d stylex<\/code> \u0434\u043b\u044f vite<\/code>.<\/p>\n
  <\/p>\n
\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u0430\u0439\u043b vite.config.ts<\/code>:<\/p>\n
  <\/p>\n
import react from '@vitejs\/plugin-react' import { defineConfig } from 'vite' import { stylexPlugin } from 'vite-plugin-stylex-dev'  export default defineConfig({   plugins: [react(), stylexPlugin()], })<\/code><\/pre>\n
  <\/p>\n
\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0432 \u0444\u0430\u0439\u043b\u0435 index.css<\/code>:<\/p>\n
  <\/p>\n
html, body, #root {   height: 100%; } body {   margin: 0; }<\/code><\/pre>\n
  <\/p>\n
\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a stylex<\/code>.<\/p>\n
  <\/p>\n
\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445\/\u0442\u043e\u043a\u0435\u043d\u043e\u0432<\/a>. \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b tokens.stylex.ts<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f:<\/p>\n
  <\/p>\n
import stylex from '@stylexjs\/stylex'  \/\/ \u041c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441 \u0442\u0435\u043c\u043d\u043e\u0439 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u0441\u0445\u0435\u043c\u044b const DARK = '@media (prefers-color-scheme: dark)'  \/\/ \u0426\u0432\u0435\u0442\u0430 export const colors = stylex.defineVars({   light: { default: '#FBFBFB', [DARK]: '#332D2D' },   dark: { default: '#332D2D', [DARK]: '#FBFBFB' },   primary: '#3B71CA',   success: '#14A44D', })  \/\/ \u041e\u0442\u0441\u0442\u0443\u043f\u044b export const spacing = stylex.defineVars({   none: '0px',   xsmall: '4px',   small: '8px',   medium: '12px',   large: '16px', })<\/code><\/pre>\n
  <\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b components\/Button.tsx<\/code> \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0438. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0441\u0442\u0438\u043b\u0438<\/a> \u043a\u043d\u043e\u043f\u043a\u0438:<\/p>\n
  <\/p>\n
import stylex, { type StyleXStyles } from '@stylexjs\/stylex' import type { HTMLAttributes, PropsWithChildren } from 'react' import { colors, spacing } from '..\/tokens.stylex'  \/\/ 3 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 const styles = stylex.create({   default: {     \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435     \/\/ https:\/\/stylexjs.com\/docs\/learn\/theming\/using-variables\/     padding: `${spacing.small} ${spacing.large}`,     backgroundColor: colors.light,     border: `1px solid ${colors.dark}`,     outline: 'none',     borderRadius: spacing.small,     boxShadow: {       default: '0 2px 3px rgba(0, 0, 0, 0.25)',       ':active': 'none',     },     cursor: 'pointer',     transition: 'all 0.25s ease-in-out',     ':hover': {       backgroundColor: colors.dark,       color: colors.light,     },   },   primary: {     backgroundColor: colors.primary,     color: colors.light,     ':hover': {       backgroundColor: null,       color: null,     },   },   dark: {     backgroundColor: colors.dark,     color: colors.light,     ':hover': {       backgroundColor: colors.light,       color: colors.dark,     },   }, })<\/code><\/pre>\n
  <\/p>\n
\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e stylex<\/code> \u0441\u0438\u043b\u044c\u043d\u043e \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u0442\u043e, \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0432 React Native<\/code><\/a>.<\/p>\n
  <\/p>\n
\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0442\u0438\u043f\u044b \u043f\u0440\u043e\u043f\u043e\u0432 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043d\u043e\u043f\u043a\u0438:<\/p>\n
  <\/p>\n
type Props = PropsWithChildren<   HTMLAttributes<HTMLButtonElement> & {     \/\/ \u0412\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044e `default`     variant?: 'primary' | 'dark'     \/\/ \u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u0444\u043e\u043d\u0430 \u0438 \u0442\u0435\u043a\u0441\u0442\u0430, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e `stylex`     \/\/ \u0421 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0442\u0438\u043b\u0435\u0439 `stylex` \u043b\u0443\u0447\u0448\u0435 `tailwindcss`     customStyles?: StyleXStyles<{       backgroundColor?: string       color?: string     }>   } >  export default function Button({   children,   variant,   customStyles,   ...rest }: Props) {   return (     <button       \/\/ \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u0441\u0442\u0438\u043b\u0438       \/\/ https:\/\/stylexjs.com\/docs\/learn\/styling-ui\/using-styles\/       {...stylex.props(         styles.default,         variant && styles[variant],         customStyles,       )}       {...rest}     >       {children}     <\/button>   ) }<\/code><\/pre>\n
  <\/p>\n
\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0441\u0442\u0438\u043b\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043d\u043e\u043f\u043e\u043a \u0432 \u0444\u0430\u0439\u043b\u0435 App.tsx<\/code>:<\/p>\n
  <\/p>\n
import stylex from '@stylexjs\/stylex' import Button from '.\/components\/Button' import { colors, spacing } from '.\/tokens.stylex'  \/\/ \u0421\u0442\u0438\u043b\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 const styles = stylex.create({   app: {     width: '100%',     height: '100%',     display: 'flex',     justifyContent: 'center',     alignItems: 'center',     gap: spacing.medium,   },   customButton: {     backgroundColor: colors.success,     color: colors.light,   }, })  export default function App() {   return (     <div {...stylex.props(styles.app)}>       <Button>Default<\/Button>       <Button variant='dark'>Dark<\/Button>       <Button variant='primary'>Primary<\/Button>       <Button customStyles={styles.customButton}>         Custom       <\/Button>     <\/div>   ) }<\/code><\/pre>\n
  <\/p>\n
\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438:<\/p>\n
  <\/p>\n
yarn dev # \u0438\u043b\u0438 npm run dev<\/code><\/pre>\n
  <\/p>\n
\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n
    <\/p>\n
  <\/p>\n
  <\/p>\n
\u042d\u0442\u043e \u043f\u043e\u0447\u0442\u0438 \u0432\u0435\u0441\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439 stylex<\/code>. \u041c\u044b \u043d\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0442\u0435\u043c<\/a> \u043f\u0443\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043d\u043e, \u0434\u0443\u043c\u0430\u044e, \u0432\u044b \u0441\u0430\u043c\u0438 \u043b\u0435\u0433\u043a\u043e \u0441 \u044d\u0442\u0438\u043c \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u0442\u0435\u0441\u044c.<\/p>\n
  <\/p>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0441\u0442\u0438\u043b\u0438 \u0438 \u043f\u0440\u043e\u043f\u044b, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0435 stylex<\/code>. \u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c App.tsx<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n
  <\/p>\n
import stylex from '@stylexjs\/stylex'  const stylesForLog = stylex.create({   root: {     display: 'flex',     flexDirection: 'column',   }, }) const stylesForLog2 = stylex.create({   root2: {     display: 'flex',   }, })  \/\/ \u0423\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0433\u043e \u0432\u044b\u0432\u043e\u0434\u0430 const stringify = (obj: Record<string, unknown>) => JSON.stringify(obj, null, 2)  export default function App() {   console.log('result of create:', stringify(stylesForLog))   console.log('result of create 2:', stringify(stylesForLog2))   console.log(stylesForLog.root.display === stylesForLog2.root2.display)   console.log(     'result of props:',     stringify(stylex.props(stylesForLog.root, stylesForLog2.root2)),   )   console.log(     'result of props 2:',     stringify(       \/\/ @ts-ignore       stylex.props(stylesForLog.root, stylesForLog2.root2, { display: 'flex' }),     ),   )    return (     <div {...stylex.props(stylesForLog.root)}><\/div>   ) }<\/code><\/pre>\n
  <\/p>\n
\u0412\u043e\u0442 \u0447\u0442\u043e \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438:<\/p>\n
    <\/p>\n
  <\/p>\n
  <\/p>\n
\u0421\u0442\u0440\u043e\u043a\u0438 \u0442\u0438\u043f\u0430 App__stylesForLog.root<\/code> \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n
  <\/p>\n
display: \"flex\"<\/code> \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u043b\u043e\u0441\u044c \u0432 display: \"x78zum5\"<\/code>, \u043f\u0440\u0438\u0447\u0435\u043c \u043f\u043e\u043b\u0435 display<\/code> \u0432 \u043e\u0431\u043e\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0438\u043c\u0435\u0435\u0442 \u043e\u0434\u043d\u043e \u0438 \u0442\u043e\u0436\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435\u043c stylesForLog.root.display === stylesForLog2.root2.display<\/code>. \u042d\u0442\u043e \u043d\u0430\u0432\u043e\u0434\u0438\u0442 \u043d\u0430 \u043c\u044b\u0441\u043b\u044c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u0442\u0440\u043e\u043a\u0438 \u0442\u0438\u043f\u0430 x78zum5<\/code> \u2014 \u044d\u0442\u043e \u0445\u0435\u0448 \u043f\u0440\u0430\u0432\u0438\u043b CSS<\/code> (\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e: \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/code>).<\/p>\n
  <\/p>\n
\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u0435\u0439 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 styles<\/code> \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0442\u0441\u044f \u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u043e\u043b\u044f className<\/code> \u043e\u0431\u044a\u0435\u043a\u0442\u0430 props<\/code> (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, className: \"xdt5ytf x78zum5\"<\/code>). className<\/code> \u043f\u0443\u0442\u0435\u043c \u0440\u0430\u0441\u043f\u0430\u043a\u043e\u0432\u043a\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 props<\/code> \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 (\u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 button<\/code>).<\/p>\n
  <\/p>\n
\u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 display: flex<\/code> \u0432 \u0432\u0438\u0434\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0435 style<\/code> \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0432 \u0432\u0438\u0434\u0435 \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0445\u0435\u0448-\u043a\u043b\u0430\u0441\u0441 \u043e\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f.<\/p>\n
  <\/p>\n
\u0417\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u0435 \u043f\u043e\u043b\u0435 $$css: true<\/code>, \u043c\u044b \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a \u043d\u0435\u043c\u0443 \u043f\u043e\u0437\u0436\u0435.<\/p>\n
  <\/p>\n
\u0412\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443:<\/p>\n
    <\/p>\n
  <\/p>\n
  <\/p>\n
\u0412 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u0441 data-vite-dev-id=\" vite-plugin:stylex.css\"<\/code> \u043c\u044b \u0432\u0438\u0434\u0438\u043c «\u0445\u0435\u0448-\u043a\u043b\u0430\u0441\u0441\u044b» \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0438\u043c \u0441\u0442\u0438\u043b\u0438: .x78zum5{display:flex}.xdt5ytf{flex-direction:column}<\/code>. \u0422\u0435 \u0436\u0435 \u0445\u0435\u0448-\u043a\u043b\u0430\u0441\u0441\u044b \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0443 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430: <div class=\"x78zum5 xdt5ytf\"><\/div><\/code>.<\/p>\n
  <\/p>\n
\u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n
  <\/p>\n
yarn build # \u0438\u043b\u0438 npm run build<\/code><\/pre>\n
  <\/p>\n
\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0444\u0430\u0439\u043b dist\/assets\/index-[hash].css<\/code>:<\/p>\n
  <\/p>\n
\/* stylex *\/ .x78zum5 {   display: flex; } .xdt5ytf {   flex-direction: column; } \/* index.css *\/ html, body, #root {   height: 100%; } body {   margin: 0; }<\/code><\/pre>\n
  <\/p>\n
\u041e\u0442\u043b\u0438\u0447\u043d\u043e. \u041d\u0430\u0447\u043d\u0435\u043c \u043f\u043e\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 stylex<\/code><\/a>.<\/p>\n
  <\/p>\n
\u0420\u0435\u0432\u0435\u0440\u0441-\u0438\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433<\/strong><\/p>\n
  <\/p>\n
\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435:<\/em> \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0439 \u0440\u0430\u0437\u0431\u043e\u0440 \u043a\u043e\u0434\u0430 \u0430\u043a\u0442\u0443\u0430\u043b\u0435\u043d \u0434\u043b\u044f stylex@0.4.1<\/code>. \u0412 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u043a\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u0438 \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0434\u043e \u043d\u0435\u0443\u0437\u043d\u0430\u0432\u0430\u0435\u043c\u043e\u0441\u0442\u0438 ?<\/p>\n
  <\/p>\n
\u0422\u0430\u043a\u0436\u0435 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>, \u0447\u0442\u043e \u0441 \u0446\u0435\u043b\u044c\u044e \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u043e\u0431\u043b\u0435\u0433\u0447\u0435\u043d\u0438\u044f \u0435\u0433\u043e \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f \u044f \u0431\u0435\u0441\u043f\u043e\u0449\u0430\u0434\u043d\u043e \u0443\u0434\u0430\u043b\u044f\u043b \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u0434\u0430\u0436\u0435 \u0446\u0435\u043b\u044b\u0435 \u0431\u043b\u043e\u043a\u0438 \u043a\u043e\u0434\u0430 ?<\/p>\n
  <\/p>\n
\u041c\u044b \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u043c\u0441\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u0435\u0442\u043e\u0434\u043e\u0432 create<\/code> (\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439) \u0438 props<\/code> (\u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439).<\/p>\n
  <\/p>\n
\u0412\u044b\u0434\u0435\u0440\u0436\u043a\u0438 \u0438\u0437 \u043a\u043e\u0434\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u0430 \u043d\u0435 \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u0438\u0445 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f.<\/p>\n
  <\/p>\n
\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0444\u0430\u0439\u043b\u0430 packages\/stylex\/src\/stylex.js<\/code>:<\/p>\n
  <\/p>\n
\/\/ 294 - \u043d\u043e\u043c\u0435\u0440 \u0441\u0442\u0440\u043e\u043a\u0438 \u043a\u043e\u0434\u0430 export default _stylex  \/\/ 239 function _stylex(...styles) {   const [className] = styleq(styles)   return className } _stylex.props = props _stylex.create = create  \/\/ 36 \/\/ \u041e\u0431 \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u043e\u0437\u0436\u0435 import { styleq } from 'styleq'  \/\/ 136 export const create = stylexCreate  \/\/ 76 function stylexCreate(styles) {   if (__implementations.create != null) {     const create = __implementations.create     return create(styles)   }   throw new Error(     'stylex.create should never be called. It should be compiled away.',   ) }  \/\/ 280 const __implementations = {}  \/\/ 282 export function __monkey_patch__(key, implementation) {   __implementations[key] = implementation }<\/code><\/pre>\n
  <\/p>\n
\u041c\u0435\u0442\u043e\u0434 create<\/code> \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 __implementations<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 __monkey_patch__<\/code>.<\/p>\n
  <\/p>\n
\u0421\u043b\u0435\u0434\u0443\u0435\u043c \u0437\u0430 __monkey_patch__()<\/code> \u0432 \u0444\u0430\u0439\u043b packages\/dev-runtime\/src\/index.js<\/code>:<\/p>\n
  <\/p>\n
\/\/ 10 import { __monkey_patch__ } from '@stylexjs\/stylex' import { styleSheet } from '@stylexjs\/stylex\/lib\/StyleXSheet';  \/\/ 20 import getStyleXCreate from '.\/stylex-create';  \/\/ 45 export default function inject({   insert = defaultInsert,   ...config }) {   \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f `create()`   __monkey_patch__('create', getStyleXCreate({ ...config, insert })); }  \/\/ 24 const defaultInsert = (   key,   ltrRule,   priority,   \/\/ \u041d\u0430 \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c \u043e\u0441\u043e\u0431\u043e\u0433\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f,   \/\/ \u044d\u0442\u043e \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \"\u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e\"   rtlRule, ) => {   if (priority === 0) {     if (injectedVariableObjs.has(key)) {       throw new Error('A VarGroup with this name already exists: ' + key);     } else {       injectedVariableObjs.add(key);     }   }   styleSheet.insert(ltrRule, priority, rtlRule); };  \/\/ 22 const injectedVariableObjs = new Set();<\/code><\/pre>\n
  <\/p>\n
\u041c\u0435\u0442\u043e\u0434 create<\/code> \u2014 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0430\u044f getStyleXCreate({ ...config, defaultInsert })<\/code>.<\/p>\n
  <\/p>\n
\u0412 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 defaultInsert<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 insert<\/code> \u043e\u0431\u044a\u0435\u043a\u0442\u0430 styleSheet<\/code>. \u042d\u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 packages\/stylex\/src\/StyleXSheet.js<\/code>:<\/p>\n
  <\/p>\n
\/\/ 364 export const styleSheet = new StyleXSheet({   supportsVariables: true,   rootTheme: {},   rootDarkTheme: {}, });  \/\/ 85 export class StyleXSheet {   static LIGHT_MODE_CLASS_NAME = LIGHT_MODE_CLASS_NAME;   static DARK_MODE_CLASS_NAME = DARK_MODE_CLASS_NAME;    constructor(opts) {     this.tag = null;     this.injected = false;     this.ruleForPriority = new Map();     this.rules = [];      this.rootTheme = opts.rootTheme;     this.rootDarkTheme = opts.rootDarkTheme;   }    \/\/ \u0426\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u0441\u0445\u0435\u043c\u044b   rootTheme;   rootDarkTheme;    \/\/ \u041c\u0430\u0441\u0441\u0438\u0432, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0432\u0441\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f   \/\/ \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u0432 \u043f\u0440\u0430\u0432\u0438\u043b \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0441\u0442\u0438\u043b\u0435\u0439   rules;    \/\/ \u0418\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u0435\u0433\u0430 `style` \u0432 `document`   injected;    \/\/ \u042d\u043b\u0435\u043c\u0435\u043d\u0442 `style` \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0430\u0432\u0438\u043b   tag;    \/\/ \u0414\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u043e,   \/\/ \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430   ruleForPriority;    \/**    * \u0418\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u0442 \u0442\u0435\u0433 `style`    *\/   getTag() {     const { tag } = this;     invariant(tag != null, 'expected tag');     return tag;   }    \/**    * \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0435\u0433 `style` \u0432 `head`    *\/   inject() {     if (this.injected) {       return;     }      this.injected = true;      \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u0435\u0433 `style`     this.tag = makeStyleTag();     this.injectTheme();   }    \/**    * \u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0442\u0438\u043b\u0438 \u0442\u0435\u043c\u044b - \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435\/\u0442\u043e\u043a\u0435\u043d\u044b    *\/   injectTheme() {     if (this.rootTheme != null) {       this.insert(         buildTheme(`:root, .${LIGHT_MODE_CLASS_NAME}`, this.rootTheme),         0,       );     }     if (this.rootDarkTheme != null) {       this.insert(         buildTheme(           `.${DARK_MODE_CLASS_NAME}:root, .${DARK_MODE_CLASS_NAME}`,           this.rootDarkTheme,         ),         0,       );     }   }    \/**    * \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441\u0442\u0438\u043b\u0435\u0439    *\/   insert(rawLTRRule, priority) {     \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u0440\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438     if (this.injected === false) {       this.inject();     }      const rawRule = rawLTRRule;      \/\/ \u041d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 (\u0438\u0441\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0434\u0443\u0431\u043b\u0438\u043a\u0430\u0442\u044b)     if (this.rules.includes(rawRule)) {       return;     }      \/\/ \u041d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c\u044e,     \/\/ \u044d\u0442\u043e \u043d\u0430\u0441 \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442     const rule = this.normalizeRule(       addSpecificityLevel(rawRule, Math.floor(priority \/ 1000)),     );      \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0434\u043b\u044f \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043f\u043e \u0435\u0433\u043e \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0443,     \/\/ \u044d\u0442\u043e \u043d\u0430\u0441 \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442     const insertPos = this.getInsertPositionForPriority(priority);     this.rules.splice(insertPos, 0, rule);      \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u043a\u0430\u043a \u043a\u043e\u043d\u0435\u0446 \u0433\u0440\u0443\u043f\u043f\u044b \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430     this.ruleForPriority.set(priority, rule);      const tag = this.getTag();     const sheet = tag.sheet;      if (sheet != null) {       try {         \/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CSSStyleSheet\/insertRule         sheet.insertRule(rule, Math.min(insertPos, sheet.cssRules.length));       } catch (err) {         console.error('insertRule error', err, rule, insertPos);       }     }   } }  \/\/ 344 \/**  * \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f `:not(#\\#)` \u0434\u043b\u044f \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u0438; \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b \u0434\u043b\u044f @layer  *\/ function addSpecificityLevel(selector, index) {   if (selector.startsWith('@keyframes')) {     return selector;   }   \/\/ \u0427\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 `not(#\\\\#)`, \u0442\u0435\u043c \u0432\u044b\u0448\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c   const pseudo = Array.from({ length: index })     .map(() => ':not(#\\\\#)')     .join('');    const lastOpenCurly = selector.includes('::')     ? selector.indexOf('::')     : selector.lastIndexOf('{');   const beforeCurly = selector.slice(0, lastOpenCurly);   const afterCurly = selector.slice(lastOpenCurly);    return `${beforeCurly}${pseudo}${afterCurly}`; }  \/\/ 45 \/**  * \u0421\u043e\u0437\u0434\u0430\u0435\u0442 \u0442\u0435\u0433 `style` \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0435\u0433\u043e \u0432 `head`  *\/ function makeStyleTag() {   const tag = document.createElement('style');   tag.setAttribute('type', 'text\/css');   tag.setAttribute('data-stylex', 'true');    const head = document.head || document.getElementsByTagName('head')[0];   invariant(head, 'expected head');   head.appendChild(tag);    return tag; }  \/\/ 28 \/**  * \u041f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0442\u0435\u043c\u0443 \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 CSS  *\/ function buildTheme(selector, theme) {   const lines = [];   lines.push(`${selector} {`);    for (const key in theme) {     const value = theme[key];     lines.push(`  --${key}: ${value};`);   }    lines.push('}');    return lines.join('\\n'); }<\/code><\/pre>\n
  <\/p>\n
\u0417\u0434\u0435\u0441\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u043e\u043a\u0430 sheet.insertRule(rule, position);<\/code>, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0430\u044f \u0437\u0430 \u043e\u0434\u043d\u043e\u043a\u0440\u0430\u0442\u043d\u043e\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0435\u0433\u043e \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430.<\/p>\n
  <\/p>\n
\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u0432 \u0444\u0430\u0439\u043b packages\/dev-runtime\/src\/index.js<\/code> \u0438 \u0441\u043b\u0435\u0434\u0443\u0435\u043c \u0437\u0430 getStyleXCreate<\/code> \u0432 \u0444\u0430\u0439\u043b packages\/dev-runtime\/src\/stylex-create.js<\/code>:<\/p>\n
  <\/p>\n
\/\/ 177 export default function getStyleXCreate(   config, ) {   const stylexCreate = (     styles,   ) => {     return createWithFns(styles, config);   };    return stylexCreate; }  \/\/ 106 \/\/ \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u043e\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \/\/ \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 function createWithFns(   styles,   { insert, ...config }, ) {   const stylesWithoutFns = {};   for (const key in styles) {     const value = styles[key];     stylesWithoutFns[key] = value;   }   \/\/ \u041e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0432\u0430\u0436\u043d\u044b\u0445 \u0441\u0442\u0440\u043e\u043a!   const [compiledStyles, injectedStyles] = create(stylesWithoutFns, config);   \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0445\u0435\u0448-\u043a\u043b\u0430\u0441\u0441\u044b \u0438 \u0441\u0442\u0438\u043b\u0438 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441\u0442\u0438\u043b\u0435\u0439   for (const key in injectedStyles) {     const { ltr, priority, rtl } = injectedStyles[key];     insert(key, ltr, priority, rtl);   }    const temp = compiledStyles;    const finalStyles = { ...temp };    \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438   return finalStyles; }  \/\/ 16 import { create, IncludedStyles, utils } from '@stylexjs\/shared';<\/code><\/pre>\n
  <\/p>\n
\u0424\u0443\u043d\u043a\u0446\u0438\u044f getStyleXCreate<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e stylexCreate<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e createWithFns<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e create<\/code>, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0434\u043d\u0438 \u0441\u0442\u0438\u043b\u0438 (injectedStyles<\/code>) \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 (finalStyles<\/code>). finalStyles<\/code> \u2014 \u044d\u0442\u043e \u0441\u0442\u0438\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u043c\u0435\u0442\u043e\u0434 stylex.props<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 packages\/stylex\/src\/stylex.js<\/code>:<\/p>\n
  <\/p>\n
\/\/ 47 export function props(   this,   ...styles ) {   const options = this;   if (__implementations.props) {     return __implementations.props.call(options, styles);   }   \/\/ \u041c\u044b \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e\u0431 \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u0432 \u043a\u043e\u043d\u0446\u0435   const [className, style] = styleq(styles);   const result = {};   if (className != null && className !== '') {     result.className = className;   }   if (style != null && Object.keys(style).length > 0) {     result.style = style;   }   \/\/ result = { className: \"\u0445\u0435\u0448-\u043a\u043b\u0430\u0441\u0441\u044b\", style: { ...\u0441\u0442\u0438\u043b\u0438 } }   return result; }<\/code><\/pre>\n
  <\/p>\n
\u0421\u043b\u0435\u0434\u0443\u0435\u043c \u0437\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 create<\/code> \u0432 \u0444\u0430\u0439\u043b packages\/shared\/src\/index.js<\/code>:<\/p>\n
  <\/p>\n
\/\/ 43 export const create = styleXCreateSet;  \/\/ 23 import styleXCreateSet from '.\/stylex-create';<\/code><\/pre>\n
  <\/p>\n
\u0411\u0435\u0437 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 ? \u0421\u043b\u0435\u0434\u0443\u0435\u043c \u0437\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 styleXCreateSet<\/code> \u0432 \u0444\u0430\u0439\u043b packages\/shared\/src\/stylex-create.js<\/code>:<\/p>\n
  <\/p>\n
\/\/ 24 \/\/ \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0439 \u0432 \u043c\u0435\u0442\u043e\u0434 `stylex.create` \u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u0435\u0433\u043e. \/\/ \u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0437\u0430\u043c\u0435\u043d\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0441\u0442\u0438\u043b\u0435\u0439 \u043d\u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f CSS-\u043a\u043b\u0430\u0441\u0441\u043e\u0432. \/\/ \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0432\u0441\u0435 \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u043c\u044b\u0435 (injected) \u0441\u0442\u0438\u043b\u0438. \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043a\u043e\u0440\u0442\u0435\u0436 \u0441 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u043c\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439. \/\/ \/\/ \u041f\u0435\u0440\u0435\u0434 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f \u0434\u0443\u0431\u043b\u0438\u043a\u0430\u0442\u043e\u0432 \u0432\u043e \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u043c\u044b\u0445 \u0441\u0442\u0438\u043b\u044f\u0445. export default function styleXCreateSet(   namespaces,   options = defaultOptions, ) {   const resolvedNamespaces = {};   const injectedStyles = {};    for (const namespaceName of Object.keys(namespaces)) {     const namespace = namespaces[namespaceName];      const flattenedNamespace = flattenRawStyleObject(namespace, options);     const compiledNamespaceTuples = flattenedNamespace.map(([key, value]) => {       return [key, value.compiled(options)];     });      const compiledNamespace = objFromEntries(compiledNamespaceTuples);      const namespaceObj = {};     for (const key of Object.keys(compiledNamespace)) {       const value = compiledNamespace[key];       if (value instanceof IncludedStyles) {         namespaceObj[key] = value;       } else {         const classNameTuples =           value.map((v) => (Array.isArray(v) ? v : null)).filter(Boolean);         const className =           classNameTuples.map(([className]) => className).join(' ') || null;         namespaceObj[key] = className;         for (const [className, injectable] of classNameTuples) {           if (injectedStyles[className] == null) {             injectedStyles[className] = injectable;           }         }       }     }     \/\/ `$$css: true` \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f `styleq`     resolvedNamespaces[namespaceName] = { ...namespaceObj, $$css: true };   }    return [resolvedNamespaces, injectedStyles]; }<\/code><\/pre>\n
  <\/p>\n
\u0412\u0435\u0441\u044c \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 \u0444\u0430\u0439\u043b\u0435 stylex\/source-code.js<\/code> \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n
  <\/p>\n
\u041a\u043e\u0434 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 styleXCreateSet<\/code> \u0438 \u0432\u0441\u0435\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0435\u0439 \u0443\u0442\u0438\u043b\u0438\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u043e\u0447\u0442\u0438 800 \u0441\u0442\u0440\u043e\u043a. \u042f \u0432\u044b\u043d\u0435\u0441 \u0435\u0433\u043e \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b stylex\/create-props.js<\/code>. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u0435\u0433\u043e \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e, \u044f \u0436\u0435 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u044e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u0445.<\/p>\n
  <\/p>\n
\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 styleXCreateSet<\/code>:<\/p>\n
  <\/p>\n
const [compiledStyles, injectedStyles] = styleXCreateSet({   root: {     display: 'flex',     flexDirection: 'column',   }, }) console.log(stringify({ compiledStyles, injectedStyles }))<\/code><\/pre>\n
  <\/p>\n
\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n
  <\/p>\n
{   \"compiledStyles\": {     \"root\": {       \"display\": \"x78zum5\",       \"flexDirection\": \"xdt5ytf\",       \"$$css\": true     }   },   \"injectedStyles\": {     \"x78zum5\": {       \"priority\": 3000,       \"ltr\": \".x78zum5{display:flex}\",       \"rtl\": null     },     \"xdt5ytf\": {       \"priority\": 3000,       \"ltr\": \".xdt5ytf{flex-direction:column}\",       \"rtl\": null     }   } }<\/code><\/pre>\n
  <\/p>\n
injectedStyles<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0442\u043e\u0434 styleSheet.insert<\/code>. compiledStyles<\/code> \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 styleq<\/a> \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443.<\/p>\n
  <\/p>\n
\u0412\u044b\u0437\u043e\u0432\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e props<\/code>:<\/p>\n
  <\/p>\n
const result = props(compiledStyles.root) console.log(stringify({ result })) const result2 = props(compiledStyles.root, { display: 'flex' }) console.log(stringify({ result2 }))<\/code><\/pre>\n
  <\/p>\n
\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n
  <\/p>\n
{   \"result\": {     \"className\": \"x78zum5 xdt5ytf\"   } }  {   \"result2\": {     \/\/ \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0445\u0435\u0448-\u043a\u043b\u0430\u0441\u0441\u0430 \u0434\u043b\u044f `display: flex`     \"className\": \"xdt5ytf\",     \"style\": {       \"display\": \"flex\"     }   } }<\/code><\/pre>\n
  <\/p>\n
\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0446\u0435\u043f\u043e\u0447\u043a\u0443 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0439 \u0442\u0430\u043a\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430:<\/p>\n
  <\/p>\n
{   root: {     display: 'flex',   }, }<\/code><\/pre>\n
  <\/p>\n
\u0432 \u0442\u0430\u043a\u0438\u0435:<\/p>\n
  <\/p>\n
{   \"compiledStyles\": {     \"root\": {       \"display\": \"x78zum5\",       \"$$css\": true     }   },   \"injectedStyles\": {     \"x78zum5\": {       \"priority\": 3000,       \"ltr\": \".x78zum5{display:flex}\",       \"rtl\": null     }   } }<\/code><\/pre>\n
  <\/p>\n
function styleXCreateSet(namespaces, options = defaultOptions) {   const resolvedNamespaces = {}   const injectedStyles = {}    for (const namespaceName of Object.keys(namespaces)) {     const namespace = namespaces[namespaceName]     \/\/ !     console.log(stringify({ namespace }))      const flattenedNamespace = flattenRawStyleObject(namespace, options)     \/\/ !     console.log(stringify({ flattenedNamespace }))      const compiledNamespaceTuples = flattenedNamespace.map(([key, value]) => {       return [key, value.compiled(options)]     })     \/\/ !     console.log(stringify({ compiledNamespaceTuples }))      const compiledNamespace = objFromEntries(compiledNamespaceTuples)     \/\/ !     console.log(stringify({ compiledNamespace }))      const namespaceObj = {}     for (const key of Object.keys(compiledNamespace)) {       const value = compiledNamespace[key]       const classNameTuples = value         .map((v) => (Array.isArray(v) ? v : null))         .filter(Boolean)       const className =         classNameTuples.map(([className]) => className).join(' ') || null       namespaceObj[key] = className       for (const [className, injectable] of classNameTuples) {         if (injectedStyles[className] == null) {           injectedStyles[className] = injectable         }       }     }     resolvedNamespaces[namespaceName] = { ...namespaceObj, $$css: true }   }    return [resolvedNamespaces, injectedStyles] }<\/code><\/pre>\n
  <\/p>\n
\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n
  <\/p>\n
{   \"namespace\": {     \"display\": \"flex\"   } }  {   \"flattenedNamespace\": [     [       \"display\",       {         \"property\": \"display\",         \"value\": \"flex\",         \"pseudos\": [],         \"atRules\": []       }     ]   ] }  {   \"compiledNamespaceTuples\": [     [       \"display\",       [         [           \"x78zum5\",           {             \"priority\": 3000,             \"ltr\": \".x78zum5{display:flex}\",             \"rtl\": null           }         ]       ]     ]   ] }  {   \"compiledNamespace\": {     \"display\": [       [         \"x78zum5\",         {           \"priority\": 3000,           \"ltr\": \".x78zum5{display:flex}\",           \"rtl\": null         }       ]     ]   } }<\/code><\/pre>\n
  <\/p>\n
\u0417\u0430 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e \u0445\u0435\u0448\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 CSS<\/code> \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044f convertStyleToClassName<\/code>:<\/p>\n
  <\/p>\n
function convertStyleToClassName(   objEntry,   pseudos,   atRules,   options = defaultOptions, ) {   \/\/ !   console.log(stringify({ objEntry, pseudos, atRules }))    const { classNamePrefix = 'x' } = options   const [key, rawValue] = objEntry   const dashedKey = dashify(key)    const value = Array.isArray(rawValue)     ? rawValue.map((eachValue) => transformValue(key, eachValue, options))     : transformValue(key, rawValue, options)    const sortedPseudos = arraySort(pseudos ?? [])   const sortedAtRules = arraySort(atRules ?? [])    const atRuleHashString = sortedPseudos.join('')   const pseudoHashString = sortedAtRules.join('')    const modifierHashString = atRuleHashString + pseudoHashString || 'null'    const stringToHash = Array.isArray(value)     ? dashedKey + value.join(', ') + modifierHashString     : dashedKey + value + modifierHashString   \/\/ !   console.log(stringify({ dashedKey, value, modifierHashString, stringToHash }))    \/\/ \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: `<>` \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0445\u0435\u0448\u0435\u0439.   \/\/ \u042d\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0443\u0434\u0430\u043b\u0435\u043d\u043e \u0432 \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445   const className = classNamePrefix + createHash('<>' + stringToHash)    const cssRules = generateRule(className, dashedKey, value, pseudos, atRules)   \/\/ !   console.log(stringify({ key, className, cssRules }))   return [key, className, cssRules] }<\/code><\/pre>\n
  <\/p>\n
\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n
  <\/p>\n
{   \"objEntry\": [     \"display\",     \"flex\"   ],   \"pseudos\": [],   \"atRules\": [] }  {   \"dashedKey\": \"display\",   \"value\": \"flex\",   \"modifierHashString\": \"null\",   \/\/ \u0421\u0442\u0440\u043e\u043a\u0430 \u0434\u043b\u044f \u0445\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f   \"stringToHash\": \"displayflexnull\" }  {   \"key\": \"display\",   \/\/ \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0445\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f   \"className\": \"x78zum5\",   \"cssRules\": {     \"priority\": 3000,     \"ltr\": \".x78zum5{display:flex}\",     \"rtl\": null   } }<\/code><\/pre>\n
  <\/p>\n
\u0421\u0442\u0440\u043e\u043a\u0430 \"displayflexnull\"<\/code> \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f\/\u0445\u0435\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 x78zum5<\/code><\/p>\n
  <\/p>\n
\u041d\u0430\u0441\u0442\u043e\u044f\u0449\u0430\u044f \u043c\u0430\u0433\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 createHash<\/code>:<\/p>\n
  <\/p>\n
function createHash(str) {   return murmurhash2_32_gc(str, 1).toString(36) }  function murmurhash2_32_gc(str, seed = 0) {   let l = str.length,     h = seed ^ l,     i = 0,     k    while (l >= 4) {     k =       (str.charCodeAt(i) & 0xff) |       ((str.charCodeAt(++i) & 0xff) << 8) |       ((str.charCodeAt(++i) & 0xff) << 16) |       ((str.charCodeAt(++i) & 0xff) << 24)      k = (k & 0xffff) * 0x5bd1e995 + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16)     k ^= k >>> 24     k = (k & 0xffff) * 0x5bd1e995 + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16)      h =       ((h & 0xffff) * 0x5bd1e995 +         ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)) ^       k      l -= 4     ++i   }    switch (l) {     case 3:       h ^= (str.charCodeAt(i + 2) & 0xff) << 16     case 2:       h ^= (str.charCodeAt(i + 1) & 0xff) << 8     case 1:       h ^= str.charCodeAt(i) & 0xff       h =         (h & 0xffff) * 0x5bd1e995 + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)   }    h ^= h >>> 13   h = (h & 0xffff) * 0x5bd1e995 + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)   h ^= h >>> 15    return h >>> 0 }<\/code><\/pre>\n
  <\/p>\n
MurmurHash2<\/a> \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0438 \u0431\u044b\u0441\u0442\u0440\u0430\u044f \u0445\u0435\u0448-\u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u0449\u0435\u0433\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u0430\u044f \u041e\u0441\u0442\u0438\u043d\u043e\u043c \u042d\u043f\u043f\u043b\u0431\u0438. \u041e\u043d\u0430 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0440\u0438\u043f\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438-\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0439 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 32-\u0440\u0430\u0437\u0440\u044f\u0434\u043d\u043e\u0435 \u0431\u0435\u0437\u0437\u043d\u0430\u043a\u043e\u0432\u043e\u0435 \u0447\u0438\u0441\u043b\u043e.<\/p>\n
  <\/p>\n
\u0412 \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435, \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 styleq<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 props<\/code>:<\/p>\n
  <\/p>\n
const [className, style] = styleq(styles);<\/code><\/pre>\n
  <\/p>\n
styleq<\/code> \u2014 \u044d\u0442\u043e \u0431\u044b\u0441\u0442\u0440\u0430\u044f \u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0441\u0440\u0435\u0434\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f JavaScript<\/code> \u0434\u043b\u044f \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 HTML<\/code>, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430\u043c\u0438 CSS<\/code>. \u0412\u044b\u0437\u043e\u0432 styleq(...styles)<\/code> \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 className<\/code> \u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 (inline) \u0441\u0442\u0438\u043b\u0435\u0439 (\u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432 \u0441\u0442\u0438\u043b\u0435 camelCase<\/code>):<\/p>\n
  <\/p>\n
const [className, inlineStyle] = styleq(styles.root, { opacity });<\/code><\/pre>\n
  <\/p>\n
\u0424\u0443\u043d\u043a\u0446\u0438\u044f styleq<\/code> \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u0433\u043b\u0443\u0431\u043e\u043a\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u043a\u0430\u043a \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u043d\u044b\u0445 (extracted), \u0442\u0430\u043a \u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0441\u0442\u0438\u043b\u0435\u0439:<\/p>\n
  <\/p>\n