Chore: Update dependencies (#195)

* Chore: Update dependencies * Fix: formatting issues
facebook · Dec 16, 2023 · 8018f8c · 8018f8c
1 parent ee3ac48
commit 8018f8c
Show file tree

Hide file tree

Showing 29 changed files with 2,800 additions and 2,379 deletions.
diff --git a/.flowconfig b/.flowconfig
@@ -1,5 +1,5 @@
 [version]
-0.223.0
+0.224.0
 
 [ignore]
 .*/build/.*

diff --git a/apps/docs/.prettierrc b/apps/docs/.prettierrc
diff --git a/apps/docs/components/CtaButton.js b/apps/docs/components/CtaButton.js
@@ -11,15 +11,16 @@ import * as React from 'react';
 import * as stylex from '@stylexjs/stylex';
 import Link from '@docusaurus/Link';
 
-export default function CtaButton({children, color, to}) {
+export default function CtaButton({ children, color, to }) {
   return (
     <Link
       {...stylex.props(
         styles.base,
         color === 'pink' && styles.pink,
         color === 'blue' && styles.blue,
       )}
-      to={to}>
+      to={to}
+    >
       {children}
     </Link>
   );

diff --git a/apps/docs/components/Logo.js b/apps/docs/components/Logo.js
@@ -20,7 +20,7 @@ export function LogoText() {
   );
 }
 
-export default function Logo({xstyle}) {
+export default function Logo({ xstyle }) {
   const idA = 'a';
   const idB = 'b';
   const idC = 'c';
@@ -39,7 +39,8 @@ export default function Logo({xstyle}) {
           fx="62.144%"
           fy="40.669%"
           id={idC}
-          r="55.819%">
+          r="55.819%"
+        >
           <stop offset="0%" stopColor="#E5F9FF" />
           <stop offset="21.605%" stopColor="#B2EEFE" />
           <stop offset="57.356%" stopColor="#5ED9FB" />
@@ -52,7 +53,8 @@ export default function Logo({xstyle}) {
           fx="69.561%"
           fy="37.427%"
           id={idF}
-          r="62.945%">
+          r="62.945%"
+        >
           <stop offset="0%" stopColor="#FCD5FD" />
           <stop offset="19.619%" stopColor="#FD9EFF" />
           <stop offset="51.352%" stopColor="#F53BFA" />
@@ -64,7 +66,8 @@ export default function Logo({xstyle}) {
           x1="40.797%"
           x2="74.283%"
           y1="31.719%"
-          y2="59.893%">
+          y2="59.893%"
+        >
           <stop offset="0%" stopColor="var(--fg1)" stopOpacity="0" />
           <stop offset="100%" stopColor="var(--fg1)" />
         </linearGradient>
@@ -73,7 +76,8 @@ export default function Logo({xstyle}) {
           x1="42.442%"
           x2="64.703%"
           y1="56.078%"
-          y2="39.384%">
+          y2="39.384%"
+        >
           <stop offset="0%" stopColor="var(--fg1)" stopOpacity="0" />
           <stop offset="100%" stopColor="var(--fg1)" />
         </linearGradient>
@@ -83,7 +87,8 @@ export default function Logo({xstyle}) {
           id={idE}
           width="133.3%"
           x="-16.7%"
-          y="-16.7%">
+          y="-16.7%"
+        >
           <feGaussianBlur
             in="SourceAlpha"
             result="shadowBlurInner1"
@@ -114,7 +119,8 @@ export default function Logo({xstyle}) {
           id={idH}
           width="124.1%"
           x="-12.1%"
-          y="-12.1%">
+          y="-12.1%"
+        >
           <feGaussianBlur
             in="SourceAlpha"
             result="shadowBlurInner1"

diff --git a/apps/docs/components/LogoBold.js b/apps/docs/components/LogoBold.js
@@ -10,7 +10,7 @@
 import * as React from 'react';
 import * as stylex from '@stylexjs/stylex';
 
-export default function LogoBold({xstyle}) {
+export default function LogoBold({ xstyle }) {
   const id = 'logo-bold';
 
   return (
@@ -21,7 +21,8 @@ export default function LogoBold({xstyle}) {
           x1="40.855%"
           x2="74.131%"
           y1="31.719%"
-          y2="59.893%">
+          y2="59.893%"
+        >
           <stop offset="0%" stopColor="var(--fg1)" stopOpacity="0" />
           <stop offset="100%" stopColor="var(--fg1)" />
         </linearGradient>
@@ -30,7 +31,8 @@ export default function LogoBold({xstyle}) {
           x1="42.121%"
           x2="65.327%"
           y1="56.078%"
-          y2="39.384%">
+          y2="39.384%"
+        >
           <stop offset="0%" stopColor="var(--fg1)" stopOpacity="0" />
           <stop offset="100%" stopColor="var(--fg1)" />
         </linearGradient>

diff --git a/apps/docs/components/StylexAnimatedLogo.js b/apps/docs/components/StylexAnimatedLogo.js
@@ -9,7 +9,7 @@
 
 import * as React from 'react';
 import * as stylex from '@stylexjs/stylex';
-import {LogoText, viewBox} from './Logo';
+import { LogoText, viewBox } from './Logo';
 
 const ANIM_DURATION = '6s';
 const STAGGER = '-2.5s';
@@ -23,17 +23,17 @@ const rotate = stylex.keyframes({
   },
 });
 const fade = stylex.keyframes({
-  '0%': {opacity: 1, transform: 'scale(1)'},
-  '45%': {opacity: 1, transform: 'scale(1)'},
-  '55%': {opacity: 0, transform: 'scale(0.5)'},
-  '90%': {opacity: 0, transform: 'scale(0.5)'},
+  '0%': { opacity: 1, transform: 'scale(1)' },
+  '45%': { opacity: 1, transform: 'scale(1)' },
+  '55%': { opacity: 0, transform: 'scale(0.5)' },
+  '90%': { opacity: 0, transform: 'scale(0.5)' },
 });
 const fade2 = stylex.keyframes({
-  '0%': {opacity: 0, transform: 'scale(0)'},
-  '10%': {opacity: 1, transform: 'scale(1)'},
-  '58%': {opacity: 1, transform: 'scale(1)'},
-  '68%': {opacity: 0, transform: 'scale(0.5)'},
-  '100%': {opacity: 0, transform: 'scale(0.5)'},
+  '0%': { opacity: 0, transform: 'scale(0)' },
+  '10%': { opacity: 1, transform: 'scale(1)' },
+  '58%': { opacity: 1, transform: 'scale(1)' },
+  '68%': { opacity: 0, transform: 'scale(0.5)' },
+  '100%': { opacity: 0, transform: 'scale(0.5)' },
 });
 
 const styles = stylex.create({
@@ -118,7 +118,7 @@ const styles = stylex.create({
   },
 });
 
-export default function StylexAnimatedLogo({style}) {
+export default function StylexAnimatedLogo({ style }) {
   return (
     <div {...stylex.props(styles.root)}>
       <svg {...stylex.props(style)} viewBox={viewBox}>

diff --git a/apps/docs/components/VersionTag.js b/apps/docs/components/VersionTag.js
@@ -9,22 +9,22 @@
 
 import React from 'react';
 import json from '@stylexjs/stylex/package.json';
-const {version} = json;
+const { version } = json;
 
 export const versionTag = version.includes('beta') ? '@beta' : '';
 
 export function VersionTag() {
   return <span>{versionTag}</span>;
 }
 
-export function IfBeta({children}) {
+export function IfBeta({ children }) {
   if (version.includes('beta')) {
     return children;
   }
   return null;
 }
 
-export function IfNotBeta({children}) {
+export function IfNotBeta({ children }) {
   if (version.includes('beta')) {
     return null;
   }

diff --git a/apps/docs/components/YouTube.js b/apps/docs/components/YouTube.js
@@ -26,7 +26,7 @@ const styles = stylex.create({
   },
 });
 
-export default function YouTube({width: _w, height: _h, src, title}) {
+export default function YouTube({ width: _w, height: _h, src, title }) {
   return (
     <div {...stylex.props(styles.container)}>
       <iframe

diff --git a/apps/docs/components/ZStack.js b/apps/docs/components/ZStack.js
@@ -10,7 +10,7 @@
 import React from 'react';
 import * as stylex from '@stylexjs/stylex';
 
-const {useEffect, useState} = React;
+const { useEffect, useState } = React;
 
 const styles = stylex.create({
   container: {
@@ -30,7 +30,7 @@ const styles = stylex.create({
 
 const ActiveItemContext = React.createContext(false);
 
-export function ZStack({children, xstyle}) {
+export function ZStack({ children, xstyle }) {
   const [active, setActive] = useState(0);
 
   useEffect(() => {
@@ -53,7 +53,7 @@ export function ZStack({children, xstyle}) {
   );
 }
 
-export function ZStackItem({children, style}) {
+export function ZStackItem({ children, style }) {
   const active = React.useContext(ActiveItemContext);
   return (
     <span {...stylex.props(styles.item, active && styles.visible, style)}>

diff --git a/apps/docs/components/examples/dev-install.js b/apps/docs/components/examples/dev-install.js
@@ -9,9 +9,9 @@
 
 import React from 'react';
 import CodeBlock from '@theme/CodeBlock';
-import {versionTag} from '../VersionTag';
+import { versionTag } from '../VersionTag';
 
-const codeForCLI = ({prod, dev}) => ({
+const codeForCLI = ({ prod, dev }) => ({
   npm: [
     prod?.length > 0 ? `npm install --save ${prod.join(' ')}` : null,
     dev?.length > 0 ? `npm install --save-dev ${dev.join(' ')}` : null,
@@ -20,11 +20,11 @@ const codeForCLI = ({prod, dev}) => ({
     .join('\n'),
 });
 
-export function DevInstallExample({prod = [], dev = []}) {
+export function DevInstallExample({ prod = [], dev = [] }) {
   const p = prod.map((p) => p + versionTag);
   const d = dev.map((d) => d + versionTag);
 
-  const codeExamples = codeForCLI({prod: p, dev: d});
+  const codeExamples = codeForCLI({ prod: p, dev: d });
 
   return <CodeBlock className="language-bash">{codeExamples.npm}</CodeBlock>;
 }
diff --git a/apps/docs/components/hooks/useViewTransition.js b/apps/docs/components/hooks/useViewTransition.js
@@ -7,7 +7,7 @@
  * @format
  */
 
-import {useLayoutEffect, useRef} from 'react';
+import { useLayoutEffect, useRef } from 'react';
 
 export default function useViewTransition() {
   const promise = useRef(null);
@@ -39,7 +39,7 @@ export default function useViewTransition() {
     transition.current = document.startViewTransition(
       () =>
         new Promise((resolve, reject) => {
-          promise.current = {resolve, reject};
+          promise.current = { resolve, reject };
           callback();
         }),
     );

diff --git a/apps/docs/docusaurus.config.js b/apps/docs/docusaurus.config.js
@@ -29,7 +29,7 @@ const config = {
     [
       'classic',
       /** @type {import('@docusaurus/preset-classic').Options} */
-      ({
+      {
         docs: {
           sidebarPath: require.resolve('./sidebars.js'),
           editUrl: 'https://github.com/facebook/stylex/tree/main/apps/docs/',
@@ -41,7 +41,7 @@ const config = {
         theme: {
           customCss: require.resolve('./src/css/custom.css'),
         },
-      }),
+      },
     ],
   ],
 
@@ -159,7 +159,7 @@ const config = {
         copyright: `Copyright © ${new Date().getFullYear()} Meta Platforms, Inc. Built with Docusaurus.`,
       },
       metadata: [
-        {name: 'og:title', content: 'StyleX'},
+        { name: 'og:title', content: 'StyleX' },
         {
           name: 'og:description',
           content: 'The styling system that powers Meta.',

diff --git a/apps/docs/eslintrc-legacy.js b/apps/docs/eslintrc-legacy.js
@@ -30,7 +30,7 @@ module.exports = {
     // Ignore certain webpack alias because it can't be resolved
     'import/no-unresolved': [
       ERROR,
-      {ignore: ['^@theme', '^@docusaurus', '^@generated']},
+      { ignore: ['^@theme', '^@docusaurus', '^@generated'] },
     ],
     'import/extensions': OFF,
     'header/header': [

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -30,15 +30,14 @@
     "@babel/eslint-parser": "^7.22.15",
     "@stylexjs/babel-plugin": "0.3.0",
     "clean-css": "^5.3.2",
-    "eslint": "^8.19.0",
+    "eslint": "^8.56.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-header": "^3.1.1",
-    "eslint-plugin-import": "^2.28.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "mkdirp": "^1.0.4",
-    "prettier": "^2.7.1",
     "stylelint": "^14.9.1"
   },
   "browserslist": {

diff --git a/apps/docs/scripts/make-stylex-sheet.js b/apps/docs/scripts/make-stylex-sheet.js
@@ -10,7 +10,7 @@
 'use strict';
 
 const fs = require('fs/promises');
-const {transformAsync} = require('@babel/core');
+const { transformAsync } = require('@babel/core');
 const stylexBabelPlugin = require('@stylexjs/babel-plugin');
 const flowSyntaxPlugin = require('@babel/plugin-syntax-flow');
 const jsxSyntaxPlugin = require('@babel/plugin-syntax-jsx');
@@ -46,7 +46,7 @@ async function transformFile(filePath) {
 }
 
 async function getAllFilesOfType(folder, type) {
-  const contents = await fs.readdir(folder, {withFileTypes: true});
+  const contents = await fs.readdir(folder, { withFileTypes: true });
 
   const files = await Promise.all(
     contents.map(async (dirent) => {

diff --git a/apps/docs/sidebars.js b/apps/docs/sidebars.js
@@ -20,7 +20,7 @@
 
 module.exports = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
-  docs: [{type: 'autogenerated', dirName: 'learn'}],
+  docs: [{ type: 'autogenerated', dirName: 'learn' }],
   api: [
     {
       type: 'autogenerated',

diff --git a/apps/docs/src/pages/index.js b/apps/docs/src/pages/index.js
@@ -11,7 +11,7 @@ import * as React from 'react';
 import * as stylex from '@stylexjs/stylex';
 import Layout from '@theme/Layout';
 import StylexAnimatedLogo from '@site/components/StylexAnimatedLogo';
-import {ZStack, ZStackItem} from '../../components/ZStack';
+import { ZStack, ZStackItem } from '../../components/ZStack';
 import CtaButton from '../../components/CtaButton';
 
 export default function Home() {