From 18d25299a11f59cb0a94ca7a64df3e561deb8391 Mon Sep 17 00:00:00 2001 From: Kylor Hall <136543114+kylorhall-atlassian@users.noreply.github.com> Date: Thu, 31 Oct 2024 12:09:51 +1300 Subject: [PATCH] Update the website to document the end-to-end lifecycle of Compiled (#1738) * Update the website to document the end-to-end lifecycle of Compiled * Don't Prettier css * Minor documentation * Updates from review --- website/packages/docs/package.json | 4 +- .../packages/docs/src/examples/css-prop.tsx | 8 +- .../docs/src/pages/about-compiled.mdx | 2 +- .../packages/docs/src/pages/how-it-works.mdx | 165 ++++++++++++++++++ .../packages/docs/src/pages/installation.mdx | 2 +- website/packages/examples/package.json | 4 +- .../src/css-prop-conditional-rules.tsx | 33 ++-- website/packages/examples/src/index.ts | 2 +- website/packages/landing/package.json | 4 +- .../landing/src/components/example.tsx | 29 +-- .../landing/src/pages/landing-content.mdx | 103 ++--------- website/packages/ui/package.json | 4 +- website/yarn.lock | 86 ++++----- 13 files changed, 260 insertions(+), 186 deletions(-) create mode 100644 website/packages/docs/src/pages/how-it-works.mdx diff --git a/website/packages/docs/package.json b/website/packages/docs/package.json index 1a5739b18..113853e92 100644 --- a/website/packages/docs/package.json +++ b/website/packages/docs/package.json @@ -9,8 +9,8 @@ "dependencies": { "@babel/core": "^7.24.5", "@babel/preset-typescript": "^7.24.1", - "@compiled/babel-plugin": "^0.28.8", - "@compiled/react": "^0.17.1", + "@compiled/babel-plugin": "latest", + "@compiled/react": "latest", "@compiled/website-examples": "^1.0.0", "@compiled/website-ui": "^1.0.0", "@mdx-js/loader": "^1.6.22", diff --git a/website/packages/docs/src/examples/css-prop.tsx b/website/packages/docs/src/examples/css-prop.tsx index b2bc2f742..e8691a162 100644 --- a/website/packages/docs/src/examples/css-prop.tsx +++ b/website/packages/docs/src/examples/css-prop.tsx @@ -1,5 +1,6 @@ import { cssProp } from '@compiled/website-examples'; import { Example } from '@compiled/website-ui'; +import { Fragment } from 'react'; export const CssPropObj = (): JSX.Element => { return ( @@ -116,7 +117,7 @@ export const CssPropCompositionNoStyle = (): JSX.Element => { export const CssPropConditionalRules = (): JSX.Element => { return ( { require('!!raw-loader!@compiled/website-examples/dist/js/css-prop-conditional-rules.js') .default }> - Arrange + + Hello + world + ); }; diff --git a/website/packages/docs/src/pages/about-compiled.mdx b/website/packages/docs/src/pages/about-compiled.mdx index 886d2716c..0fb7670f2 100644 --- a/website/packages/docs/src/pages/about-compiled.mdx +++ b/website/packages/docs/src/pages/about-compiled.mdx @@ -1,7 +1,7 @@ --- section: 1-Getting started name: About Compiled -order: 2 +order: 1 --- # About Compiled diff --git a/website/packages/docs/src/pages/how-it-works.mdx b/website/packages/docs/src/pages/how-it-works.mdx new file mode 100644 index 000000000..e3b202e27 --- /dev/null +++ b/website/packages/docs/src/pages/how-it-works.mdx @@ -0,0 +1,165 @@ +--- +order: 3 +section: 1-Getting started +--- + +# How it Works + +Once you've [installed and configured](/installation) everything, you can start using it, +but it's best to explain what happens under the hood. + +Compiled uses Babel (with pre-configuration options via Webpack and Parcel) to transform styles +into atomic CSS determined at build time, resulting in **very performant components**. + +Let's take a typical component you might write: + +```jsx +/** @jsxImportSource @compiled/react */ +import { css } from '@compiled/react'; +import type { ReactNode } from 'react'; + +type Props = { inverted?: boolean, children: ReactNode }; + +const largeTextStyles = css({ + fontSize: '48px', + padding: '8px', + background: '#eee', +}); +const invertedStyles = css({ + background: '#333', + color: '#fff', +}); + +export const LargeText = ({ inverted, children }: Props): JSX.Element => { + return {children}; +}; +``` + +## Runtime styles (unperformant) + +With the most basic Babel setup, Compiled will be transformed to **runtime styles**. +This is typically used in a development or testing environments. + +It is **not recommended in production environments** as it will be less performant, but also mixing +runtime and extraction can result in breaking visual changes from atomic specificity conflicts. +Refer to [extracted styles](#extracted-styles) below for the recommendation. + +```bash +$ babel src +Successfully compiled 1 file with Babel (9ms) +``` + +You'll see a few things happening in the code below: + +1. All styles are converted into [Atomic CSS](/atomic-css) for reuse. +2. Some styles, such as `padding:8px` will be expanded out to `padding-left`, `padding-right`, etc, + while others might be sorted. [Read more about this](shorthand) +3. All `css()` calls are replaced with `null` and instead the styles are injected at runtime with the + `className` inlined. Note that `cssMap()` works slightly differently and maintains the object syntax. +4. There are a few internal runtime functions that are used to manage the styles like `ax` and `CC`. + [Read more about this](/pkg-react-runtime) +5. [Postcss](https://postcss.org/), [autoprefixer](https://github.com/postcss/autoprefixer), and some other + optimizations will run over your code to make it more performant and safer for use. + +```jsx +import { ax, ix, CC, CS } from '@compiled/react/runtime'; +const _8 = '._syazu67f{color:#fff}'; +const _7 = '._bfhk1d6m{background-color:#333}'; +const _6 = '._bfhkr75e{background-color:#eee}'; +const _5 = '._19bvftgi{padding-left:1pc}'; +const _4 = '._n3tdftgi{padding-bottom:1pc}'; +const _3 = '._u5f3ftgi{padding-right:1pc}'; +const _2 = '._ca0qftgi{padding-top:1pc}'; +const _ = '._1wybckbl{font-size:3pc}'; +const largeTextStyles = null; +const invertedStyles = null; +export const LargeText = ({ inverted, children }) => { + return ( + + {[_, _2, _3, _4, _5, _6, _7, _8]} + + {children} + + + ); +}; +``` + +## Extracted styles + +We highly suggest you turn on style extraction to distribute styles statically at build time, +either through [NPM](https://npmjs.com/) or Production environments. Doing this, styles will +have their **runtime stripped and styles extracted** to an [atomic style sheet](/atomic-css). + +Refer to [stylesheet extraction](/css-extraction-webpack) for more details. + +Let's compare this to runtime styles, assuming we have Parcel configured + +```bash +$ parcel build ./src/index.html +✨ Built in 4.94s +dist/index.html 246 B 349ms +dist/index.019bae5f.js 136.13 KB 806ms +# This generates `index.compiled.css` file(s) too. +🌽 ✅ Done in 6.26s +``` + +You'll see a few different things are happening in the code below: + +1. All styles are moved into a separate file, `index.compiled.css`, that is imported into this file for + your bundler to pick up and combine and serve to the user. +2. The runtime injection of `` is no longer required because the styles are statically available. + +The main difference beyond the greatly reduced runtime cost is that the atomic styles can be completely deduplicated. + +```diff ++import "./index.compiled.css"; +-import { ax, ix, CC, CS } from '@compiled/react/runtime'; ++import { ax, ix } from "@compiled/react/runtime"; +-const _8 = '._syazu67f{color:#fff}'; +-const _7 = '._bfhk1d6m{background-color:#333}'; +-const _6 = '._bfhkr75e{background-color:#eee}'; +-const _5 = '._19bvftgi{padding-left:8px}'; +-const _4 = '._n3tdftgi{padding-bottom:8px}'; +-const _3 = '._u5f3ftgi{padding-right:8px}'; +-const _2 = '._ca0qftgi{padding-top:8px}'; +-const _ = '._1wybckbl{font-size:3pc}'; +var largeTextStyles = null; +var invertedStyles = null; +export const LargeText = ({ inverted, children }) => { + return ( +- +- {[_, _2, _3, _4, _5, _6, _7, _8]} + + {children} + +- + ); +}; +``` + +For reference, the atomic stylesheet is created just as before, now in `index.compiled.css`, and with +the bundler config, these `*.compiled.css` files will be merged together with duplicates removed, resulting +in a drastically smaller CSS payload to the customer. + +These `*.compiled.css` files could be distributed via NPM or collected and bundled to customers. + + +```css +._19bvftgi{padding-left:8px} +._1wybckbl{font-size:3pc} +._bfhk1d6m{background-color:#333} +._bfhkr75e{background-color:#eee} +._ca0qftgi{padding-top:8px} +._n3tdftgi{padding-bottom:8px} +._syazu67f{color:#fff} +._u5f3ftgi{padding-right:8px} +``` diff --git a/website/packages/docs/src/pages/installation.mdx b/website/packages/docs/src/pages/installation.mdx index 04c5cc245..309915652 100644 --- a/website/packages/docs/src/pages/installation.mdx +++ b/website/packages/docs/src/pages/installation.mdx @@ -1,5 +1,5 @@ --- -order: 3 +order: 2 section: 1-Getting started --- diff --git a/website/packages/examples/package.json b/website/packages/examples/package.json index 10e2bdb64..56dd211e6 100644 --- a/website/packages/examples/package.json +++ b/website/packages/examples/package.json @@ -16,8 +16,8 @@ "@babel/core": "^7.24.5", "@babel/preset-react": "^7.24.1", "@babel/preset-typescript": "^7.24.1", - "@compiled/babel-plugin": "^0.28.8", - "@compiled/react": "^0.17.1", + "@compiled/babel-plugin": "latest", + "@compiled/react": "latest", "@types/react": "^18.3.1", "@types/react-dom": "^18.3.0", "typescript": "^5.4.5" diff --git a/website/packages/examples/src/css-prop-conditional-rules.tsx b/website/packages/examples/src/css-prop-conditional-rules.tsx index 8ae9a3090..b83e80246 100644 --- a/website/packages/examples/src/css-prop-conditional-rules.tsx +++ b/website/packages/examples/src/css-prop-conditional-rules.tsx @@ -2,29 +2,18 @@ import { css } from '@compiled/react'; import type { ReactNode } from 'react'; -type LozengeProps = { - children: ReactNode; - primary: boolean; -}; +type Props = { inverted?: boolean; children: ReactNode }; -const primaryStyles = css({ - border: '3px solid pink', - color: 'pink', +const largeTextStyles = css({ + fontSize: '48px', + padding: '8px', + background: '#eee', }); - -const notPrimaryStyles = css({ - border: '3px solid blue', - color: 'blue', +const invertedStyles = css({ + background: '#333', + color: '#fff', }); -const moreStyles = css({ - // any styles here will override what is in - // primaryStyles and notPrimaryStyles - padding: '4px 8px', - fontWeight: 600, - borderRadius: 3, -}); - -export const Lozenge = ({ children, primary }: LozengeProps): JSX.Element => ( - {children} -); +export const LargeText = ({ inverted, children }: Props): JSX.Element => { + return {children}; +}; diff --git a/website/packages/examples/src/index.ts b/website/packages/examples/src/index.ts index 308be5670..6f28a8765 100644 --- a/website/packages/examples/src/index.ts +++ b/website/packages/examples/src/index.ts @@ -8,7 +8,7 @@ import { CompositionIdentifier } from './css-prop-composition-identifier'; import { CustomColorText as CssPropCompositionIncorrect } from './css-prop-composition-incorrect'; import { CompositionMultiple } from './css-prop-composition-multiple'; import { CustomColorText as CssPropCompositionNoStyle } from './css-prop-composition-no-style'; -import { Lozenge as CssPropConditionalRules } from './css-prop-conditional-rules'; +import { LargeText as CssPropConditionalRules } from './css-prop-conditional-rules'; import { EmphasisText as CssPropDynamic } from './css-prop-dynamic-decl'; import { EmphasisText as CssPropObj } from './css-prop-obj'; import { EmphasisText as CssPropString } from './css-prop-string'; diff --git a/website/packages/landing/package.json b/website/packages/landing/package.json index f6d91409a..2ee4c75f8 100644 --- a/website/packages/landing/package.json +++ b/website/packages/landing/package.json @@ -9,8 +9,8 @@ "start": "webpack serve" }, "dependencies": { - "@compiled/react": "^0.17.1", - "@compiled/webpack-loader": "^0.12.7", + "@compiled/react": "latest", + "@compiled/webpack-loader": "latest", "@compiled/website-examples": "^1.0.0", "@compiled/website-ui": "^1.0.0", "@mdx-js/loader": "^1.6.22", diff --git a/website/packages/landing/src/components/example.tsx b/website/packages/landing/src/components/example.tsx index ef40092ed..b83e80246 100644 --- a/website/packages/landing/src/components/example.tsx +++ b/website/packages/landing/src/components/example.tsx @@ -1,18 +1,19 @@ /** @jsxImportSource @compiled/react */ - +import { css } from '@compiled/react'; import type { ReactNode } from 'react'; -type Props = { - color: string; - children: ReactNode; -}; +type Props = { inverted?: boolean; children: ReactNode }; -export const LargeText = (props: Props): JSX.Element => ( - - {props.children} - -); +const largeTextStyles = css({ + fontSize: '48px', + padding: '8px', + background: '#eee', +}); +const invertedStyles = css({ + background: '#333', + color: '#fff', +}); + +export const LargeText = ({ inverted, children }: Props): JSX.Element => { + return {children}; +}; diff --git a/website/packages/landing/src/pages/landing-content.mdx b/website/packages/landing/src/pages/landing-content.mdx index 4b157ee02..2a5491e1f 100644 --- a/website/packages/landing/src/pages/landing-content.mdx +++ b/website/packages/landing/src/pages/landing-content.mdx @@ -1,105 +1,36 @@ import { ExampleContainer, ExampleRoot } from '@compiled/website-ui'; import { LargeText } from '../components/example'; -## Don't change a thing +## Performant, comfortable CSS-in-JS Using **APIs and behavior you may already be familiar with**, write your styles in JavaScript with the **full power of CSS** — -leveraging the language to create expressive & dynamic experiences. +leveraging the language to create expressive and dynamic experiences. -```jsx -/** @jsxImportSource @compiled/react */ - -import { css } from '@compiled/react'; +This requires [some installation](./docs/installation) to work, head over to the documentation to get started. -const largeTextStyles = css({ fontSize: '48px' }); +For a peek under the hood, see [how it works](./docs/how-it-works). -export const LargeText = ({ color, children }) => { - const dynamicColorStyles = css({ color: color }); - - return {children}; -}; -``` +1. Basic usage: - ```jsx -Hello world -``` - -Hello world - -## Speed up your styles - -Build with your bundler of choice or just [Babel](https://babeljs.io/docs/en/config-files), -resulting in **very performant components** that have their **styles built ahead of time**. +/** @jsxImportSource @compiled/react */ +import { css } from '@compiled/react'; -```json -{ - "plugins": ["@compiled/babel-plugin"] -} -``` +const largeTextStyles = css({ fontSize: '48px', padding: '8px', background: '#eee' }); +const invertedStyles = css({ background: '#333', color: '#fff' }); -```bash -$ babel src -Successfully compiled 1 file with Babel (9ms) +export const LargeText = ({ inverted, children }) => { + return {children}; +}; ``` ```jsx -import { CC, CS } from '@compiled/react/runtime'; - -const _2 = '._syaz4rde{color: var(--_kmurgp)}'; -const _ = '._1wybfyhu{font-size: 48px}'; - -export const LargeHotPinkText = ({ color, children }) => ( - - {[_, _2]} - - {children} - - -); -``` - -## Extract styles - -Turn on extraction and all components styled in your app and sourced through [NPM](https://npmjs.com/) will have their **runtime stripped and styles extracted** to an [atomic style sheet](./docs/atomic-css). - -1. Bundle your app - -```bash -$ webpack -webpack 5.26.3 compiled successfully in 1912 ms +Hello +world ``` -2. All styles and runtime are removed - -```diff --import { CC, CS } from '@compiled/react/runtime'; -- --const _2 = '._syaz4rde{color: var(--_kmurgp)}'; --const _ = '._1wybfyhu{font-size: 48px}'; - -export const LargeHotPinkText = ({ color, children }) => ( -- -- {[_, _2]} - - {children} - -- -); -``` - -3. An atomic style sheet is generated - -```css -._1wybfyhu { - font-size: 48px; -} -._syaz4rde { - color: var(--_kmurgp); -} -``` +2. Would render as: -Compiled brings distributed styles from platform, -product, -and the wider ecosystem together. +Hello +world diff --git a/website/packages/ui/package.json b/website/packages/ui/package.json index 73f07d04c..bca26429a 100644 --- a/website/packages/ui/package.json +++ b/website/packages/ui/package.json @@ -8,8 +8,8 @@ "@babel/core": "^7.24.5", "@babel/preset-react": "^7.24.1", "@babel/preset-typescript": "^7.24.1", - "@compiled/babel-plugin": "^0.28.8", - "@compiled/react": "^0.17.1", + "@compiled/babel-plugin": "latest", + "@compiled/react": "latest", "@types/react": "^18.3.1", "@types/react-dom": "^18.3.0", "@types/react-syntax-highlighter": "^15.5.13", diff --git a/website/yarn.lock b/website/yarn.lock index 23d8b6418..997c1d207 100644 --- a/website/yarn.lock +++ b/website/yarn.lock @@ -1110,23 +1110,23 @@ resolved "https://registry.yarnpkg.com/@changesets/types/-/types-0.4.0.tgz#3413badb2c3904357a36268cb9f8c7e0afc3a804" integrity sha512-TclHHKDVYQ8rJGZgVeWiF7c91yWzTTWdPagltgutelGu/Psup5PQlUq6svx7S8suj+jXcaE34yEEsfIvzXXB2Q== -"@compiled/babel-plugin-strip-runtime@^0.28.8": - version "0.28.8" - resolved "https://registry.yarnpkg.com/@compiled/babel-plugin-strip-runtime/-/babel-plugin-strip-runtime-0.28.8.tgz#3c85d58dae1b1a32575f6f84e896104026bb24fd" - integrity sha512-fgouNui+RVDUvO7p07YBXhll1H6x44A73gprY9wPj1f6BEwo5b+z4uf+TQhPBbW7D9J7BBztV6gMpDTdflmWbg== +"@compiled/babel-plugin-strip-runtime@^0.32.2": + version "0.32.2" + resolved "https://packages.atlassian.com/api/npm/npm-remote/@compiled/babel-plugin-strip-runtime/-/babel-plugin-strip-runtime-0.32.2.tgz#46aa86b88afde6f86a0ab6c7243f071f1281f0b5" + integrity sha512-UtnZPYkS2+KCt+jKMqe6MG4uymwdKAAgiZm328Dj3P/OqCjUwk8kYw7Y8AvH3Tovlx5HksEuHsd01A19sWb25Q== dependencies: "@babel/core" "^7.21.8" "@babel/helper-plugin-utils" "^7.21.5" "@babel/template" "^7.20.7" "@babel/traverse" "^7.23.2" "@babel/types" "^7.21.5" - "@compiled/css" "^0.13.0" - "@compiled/utils" "^0.11.0" + "@compiled/css" "^0.17.0" + "@compiled/utils" "^0.13.0" -"@compiled/babel-plugin@^0.28.8": - version "0.28.8" - resolved "https://registry.yarnpkg.com/@compiled/babel-plugin/-/babel-plugin-0.28.8.tgz#4f677ce44e18b0227b93366934b9974625e3a5ee" - integrity sha512-eYVrgrLcbYOxkWlTq9HP5nlKTjORMoLF83LDteNBLQ3iDKDCIF7tIL9FvOjYRb7Q8h007W43rYh2Gww7wBAPhw== +"@compiled/babel-plugin@^0.32.2", "@compiled/babel-plugin@latest": + version "0.32.2" + resolved "https://packages.atlassian.com/api/npm/npm-remote/@compiled/babel-plugin/-/babel-plugin-0.32.2.tgz#849fda50405f4f22cd77ad6f22922d0d831a8322" + integrity sha512-HW3F5W8vvW3mDzSbKvTdLJTGurtyXNrK1gdBqBwLwodpOOZwh+Catlym/0XFEo9u/PusfO+ifMZpyP1qtpABLw== dependencies: "@babel/core" "^7.21.8" "@babel/generator" "^7.21.5" @@ -1137,17 +1137,17 @@ "@babel/template" "^7.20.7" "@babel/traverse" "^7.23.2" "@babel/types" "^7.21.5" - "@compiled/css" "^0.13.0" - "@compiled/utils" "^0.11.0" + "@compiled/css" "^0.17.0" + "@compiled/utils" "^0.13.0" "@emotion/is-prop-valid" "^1.2.1" resolve "^1.22.8" -"@compiled/css@^0.13.0": - version "0.13.0" - resolved "https://registry.yarnpkg.com/@compiled/css/-/css-0.13.0.tgz#af8b2e091f51b2eb5f1784f9e618691fa9a5100c" - integrity sha512-XqDhtjQsE2QnlA8G/IOCdhxYwfOZT9CNzCvIJ+TjwVtY4liFbDOkU7/mG7Hy4aYqply1k5VejMtOpW/KI/Do1A== +"@compiled/css@^0.17.0": + version "0.17.1" + resolved "https://packages.atlassian.com/api/npm/npm-remote/@compiled/css/-/css-0.17.1.tgz#57d9ae9e9f67cd8fb8c1612686a9a8ee67a53e1f" + integrity sha512-dltmYS9WJlb6NmSIvhYXftA7U/NCvyRVjQnIhXA+qZAvrxByFpdZ9ZV1blasscdGc12jmvrnq40fdGY3WQX83g== dependencies: - "@compiled/utils" "^0.11.0" + "@compiled/utils" "^0.13.0" autoprefixer "^10.4.14" cssnano-preset-default "^5.2.14" postcss "^8.4.31" @@ -1157,32 +1157,32 @@ postcss-selector-parser "^6.0.13" postcss-values-parser "^6.0.2" -"@compiled/react@^0.17.1": - version "0.17.1" - resolved "https://registry.yarnpkg.com/@compiled/react/-/react-0.17.1.tgz#1ca011b475f25f29331ffe4a171e39bef9f12c9d" - integrity sha512-1CzTOrwNHOUmz9QGYHv8R8J6ejUyaNYiaUN6/dIM0Wu3G5CIam0KgsqvRikfGPrTtBfAQYMmdI9ytzxUKYwJrg== +"@compiled/react@latest": + version "0.18.1" + resolved "https://packages.atlassian.com/api/npm/npm-remote/@compiled/react/-/react-0.18.1.tgz#d5d4be81e982e610f506f18763b7475b8f3f81f2" + integrity sha512-sL2UqrWaErILSPdnkg1Mt7CyVIET+j9+TArVSU609/wE/72KN3THFIUiMMmI1P8kX7CskPY7JdkcU6q70vPmVQ== dependencies: csstype "^3.1.2" -"@compiled/utils@^0.11.0": - version "0.11.0" - resolved "https://registry.yarnpkg.com/@compiled/utils/-/utils-0.11.0.tgz#737586aeb4483914ded276d12b655cf2bb714292" - integrity sha512-pQPpmMVhkaZn5qqNhRDG7VHfZMAQphQKD7/6A9efv/j8JNlYIDk7PO8hUHOlU9WUFkHlZva7Y5I+DvuhvnSXNg== +"@compiled/utils@^0.13.0": + version "0.13.0" + resolved "https://packages.atlassian.com/api/npm/npm-remote/@compiled/utils/-/utils-0.13.0.tgz#a769ce7ab77a75834ecc62460647ad78a8675f52" + integrity sha512-v1QBEzBNJaVUhOrBJlglQFxYH7wgMAdXE0XP9bYhpEPBI4onEWsKw6wn0oJwI2F+quAIJftChfyJdVzmusIhSA== dependencies: convert-source-map "^2.0.0" source-map "^0.7.4" -"@compiled/webpack-loader@^0.12.7": - version "0.12.7" - resolved "https://registry.yarnpkg.com/@compiled/webpack-loader/-/webpack-loader-0.12.7.tgz#02c610bff9379ca3274912900fa4ed4fa91122aa" - integrity sha512-W7dmlEG1ih3YboztPTTc0yY1K+Ne/ywoqtrjpwYVNnq8aIK0W/kRQs+nDoENruIbN25GYdqIDCms93/g/SW/8A== +"@compiled/webpack-loader@latest": + version "0.18.1" + resolved "https://packages.atlassian.com/api/npm/npm-remote/@compiled/webpack-loader/-/webpack-loader-0.18.1.tgz#2071c94011d1f0a543775eb5f0a624c7f37a762b" + integrity sha512-jRF0Xm+7JWo6IbR28QjQZzGsawviq2Q16vD2sIY5TDqI42RR6kF0dBJRKC2coe01TvSeVGDGH4FGY4jKM38W8Q== dependencies: "@babel/core" "^7.21.8" "@babel/parser" "^7.21.8" - "@compiled/babel-plugin" "^0.28.8" - "@compiled/babel-plugin-strip-runtime" "^0.28.8" - "@compiled/css" "^0.13.0" - "@compiled/utils" "^0.11.0" + "@compiled/babel-plugin" "^0.32.2" + "@compiled/babel-plugin-strip-runtime" "^0.32.2" + "@compiled/css" "^0.17.0" + "@compiled/utils" "^0.13.0" enhanced-resolve "^5.15.0" loader-utils "^2.0.4" webpack-sources "^3.2.3" @@ -6523,16 +6523,7 @@ statuses@2.0.1: resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c" integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA== -"string-width-cjs@npm:string-width@^4.2.0": - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - -string-width@^4.1.0: +"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -6597,14 +6588,7 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - -strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==