style: wrap long tailwind css classes with eslint

.github/workflows/verify-js.yml

@@ -25,7 +25,7 @@ jobs:
           pnpm add tailwindcss -w
           git restore .
       - name: Format
-        run: pnpm prettier --ignore-path .gitignore --check "**/*.{js,cjs,mjs,jsx,ts,tsx,css,scss,html,json,md,yml,yaml}"
+        run: pnpm prettier --ignore-path .gitignore --check "**/*.{css,scss,html,json,md,mdx,yml,yaml}"
 
   lint-js:
     name: Lint JS

examples/hatchet/typescript-connectors/connectors/dropbox.ts

@@ -58,7 +58,7 @@ const listFolder = dropbox.task({
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-        Authorization: `Bearer ${token.access_token}`,
+        'Authorization': `Bearer ${token.access_token}`,
       },
       body: JSON.stringify({
         path: '',
@@ -82,7 +82,7 @@ const listFolder = dropbox.task({
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          Authorization: `Bearer ${token.access_token}`,
+          'Authorization': `Bearer ${token.access_token}`,
         },
         body: JSON.stringify({
           cursor,
@@ -113,18 +113,18 @@ const enrichEntries = dropbox.task({
     const token = await ctx.parentOutput(getAccessToken);
     const { entries } = await ctx.parentOutput(listFolder);
 
-    const paperFiles = entries.filter((f) => f.name.endsWith('.paper'));
+    const paperFiles = entries.filter(f => f.name.endsWith('.paper'));
     if (paperFiles.length === 0) return entries;
 
     ctx.logger.info(`Retrieving metadata for ${paperFiles.length} files.`);
     const response = await fetch(`${baseUrl}/2/sharing/get_file_metadata/batch`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-        Authorization: `Bearer ${token.access_token}`,
+        'Authorization': `Bearer ${token.access_token}`,
       },
       body: JSON.stringify({
-        files: paperFiles.map((f) => f.path_lower),
+        files: paperFiles.map(f => f.path_lower),
       }),
     });
 
@@ -159,7 +159,7 @@ dropbox.task({
     const token = await ctx.parentOutput(getAccessToken);
     const { entries } = await ctx.parentOutput(enrichEntries);
 
-    const paperFiles = entries.filter((f) => f.name.endsWith('.paper'));
+    const paperFiles = entries.filter(f => f.name.endsWith('.paper'));
     if (paperFiles.length === 0) return;
 
     for (let i = 0; i < paperFiles.length; i++) {
@@ -169,7 +169,7 @@ dropbox.task({
       const response = await fetch(`https://content.dropboxapi.com/2/files/export`, {
         method: 'POST',
         headers: {
-          Authorization: `Bearer ${token.access_token}`,
+          'Authorization': `Bearer ${token.access_token}`,
           'Dropbox-API-Arg': JSON.stringify({
             path: file.path_lower,
             export_format: 'markdown',

examples/node/basics/fs.ts

@@ -18,9 +18,9 @@ async function main() {
       const [u2] = await measure(usingReadStream);
       const [u3] = await measure(usingSharedBuffer);
 
-      const t1 = u1.map((u) => u.arrayBuffers / 1_000_000);
-      const t2 = u2.map((u) => u.arrayBuffers / 1_000_000);
-      const t3 = u3.map((u) => u.arrayBuffers / 1_000_000);
+      const t1 = u1.map(u => u.arrayBuffers / 1_000_000);
+      const t2 = u2.map(u => u.arrayBuffers / 1_000_000);
+      const t3 = u3.map(u => u.arrayBuffers / 1_000_000);
 
       console.log(
         asciichart.plot([t1, t2, t3], {

examples/react/server-rendering/scripts/bench.ts

@@ -7,11 +7,11 @@ export const options = {
 };
 
 const urls = {
-  vite: 'http://127.0.0.1:3000',
+  'vite': 'http://127.0.0.1:3000',
   'vite-stream': 'http://127.0.0.1:3000',
   'next-pages': 'http://127.0.0.1:3000',
   'next-app': 'http://127.0.0.1:3000/app',
-  tss: 'http://127.0.0.1:3000',
+  'tss': 'http://127.0.0.1:3000',
 };
 
 export default function bench() {

examples/react/server-rendering/vite/server-stream.ts

@@ -33,7 +33,7 @@ server.on('request', async function (req, res) {
 
     let renderStream;
     if (isDevelopment) {
-      await new Promise((resolve) => vite.middlewares(req, res, resolve));
+      await new Promise(resolve => vite.middlewares(req, res, resolve));
 
       template = await fs.readFile(path.resolve(import.meta.dirname, 'index.html'), 'utf8');
       template = await vite.transformIndexHtml(url, template);

examples/react/server-rendering/vite/server.ts

@@ -31,7 +31,7 @@ server.on('request', async function (req, res) {
 
     let render;
     if (isDevelopment) {
-      await new Promise((resolve) => vite.middlewares(req, res, resolve));
+      await new Promise(resolve => vite.middlewares(req, res, resolve));
 
       template = await fs.readFile(path.resolve(import.meta.dirname, 'index.html'), 'utf8');
       template = await vite.transformIndexHtml(url, template);

examples/tanstack/start-solid/babel.config.js

@@ -3,15 +3,10 @@ export default function babel(api) {
 
   return {
     plugins: [
-      [
-        '@stylexjs/babel-plugin',
-        {
-          debug: process.env.NODE_ENV === 'development',
-          unstable_moduleResolution: {
-            type: 'commonJS',
-          },
-        },
-      ],
+      ['@stylexjs/babel-plugin', {
+        debug: process.env.NODE_ENV === 'development',
+        unstable_moduleResolution: { type: 'commonJS' },
+      }],
     ],
     parserOpts: {
       plugins: ['jsx', 'typescript'],

examples/tanstack/start-solid/postcss.config.js

@@ -1,4 +1,3 @@
-/* eslint-disable import-x/no-extraneous-dependencies */
 import stylex from '@stylexjs/postcss-plugin';
 import autoprefixer from 'autoprefixer';
 

examples/tanstack/start-solid/src/StaleClosures.tsx

@@ -44,7 +44,7 @@ function Signals() {
       <div ref={timed_log_ref}>Timed Log: </div>
       <div ref={log_ref}>Log: </div>
       <div class="mt-1 flex gap-2">
-        <button onClick={() => set_count((prev) => prev + 1)} {...stylex.props(button_styles.base)}>
+        <button onClick={() => set_count(prev => prev + 1)} {...stylex.props(button_styles.base)}>
           Increment
         </button>
         <button onClick={handle_click} {...stylex.props(button_styles.base)}>

examples/tanstack/start-solid/src/TransitionSignal.tsx

@@ -15,10 +15,10 @@ function TransitionSignal() {
   const [pending, start_transition] = useTransition();
 
   const handle_click = () => {
-    set_page((prev) => prev + 1);
+    set_page(prev => prev + 1);
 
     start_transition(() => {
-      set_page_slow((prev) => prev + 1);
+      set_page_slow(prev => prev + 1);
     });
   };
 

examples/tanstack/start/babel.config.js

@@ -3,15 +3,10 @@ export default function babel(api) {
 
   return {
     plugins: [
-      [
-        '@stylexjs/babel-plugin',
-        {
-          debug: process.env.NODE_ENV === 'development',
-          unstable_moduleResolution: {
-            type: 'commonJS',
-          },
-        },
-      ],
+      ['@stylexjs/babel-plugin', {
+        debug: process.env.NODE_ENV === 'development',
+        unstable_moduleResolution: { type: 'commonJS' },
+      }],
     ],
     parserOpts: {
       plugins: ['jsx', 'typescript'],

examples/tanstack/start/postcss.config.js

@@ -1,4 +1,3 @@
-/* eslint-disable import-x/no-extraneous-dependencies */
 import stylex from '@stylexjs/postcss-plugin';
 import autoprefixer from 'autoprefixer';
 

examples/tanstack/start/src/Gallery.tsx

@@ -33,9 +33,9 @@ const sections = [
     label: 'List Virtualization',
     children: [
       { to: '/list-virt-fixed-height', label: 'Fixed Height' },
-      { to: '/list-virt-fixed-height?variant=content-visibility', label: 'Fixed Height with Content Visibility' }, // prettier-ignore
+      { to: '/list-virt-fixed-height?variant=content-visibility', label: 'Fixed Height with Content Visibility' },
       { to: '/list-virt-dynamic-height', label: 'Dynamic Height with uwrap' },
-      { to: '/list-virt-dynamic-height?wrap=canvas-hypertxt', label: 'Dynamic Height with canvas-hypertxt' }, // prettier-ignore
+      { to: '/list-virt-dynamic-height?wrap=canvas-hypertxt', label: 'Dynamic Height with canvas-hypertxt' },
     ],
   },
   {

examples/tanstack/start/src/StaleClosures.tsx

@@ -65,7 +65,7 @@ function DependencyArray() {
       <div ref={logRef}>Log:</div>
       <div ref={logStaleRef}>Log - Stale:</div>
       <div className="mt-1 flex gap-2">
-        <button onClick={() => setCount((prev) => prev + 1)} {...stylex.props(button_styles.base)}>
+        <button onClick={() => setCount(prev => prev + 1)} {...stylex.props(button_styles.base)}>
           Increment
         </button>
         <button onClick={handleClick} {...stylex.props(button_styles.base)}>
@@ -103,7 +103,7 @@ function EffectEvents() {
       <div>Count: {count}</div>
       <div ref={timedLogRef}>Timed Log:</div>
       <div className="mt-1 flex gap-2">
-        <button onClick={() => setCount((prev) => prev + 1)} {...stylex.props(button_styles.base)}>
+        <button onClick={() => setCount(prev => prev + 1)} {...stylex.props(button_styles.base)}>
           Increment
         </button>
       </div>
@@ -133,7 +133,7 @@ function RefSync() {
   }, []);
 
   const handleIncrement = useCallback(() => {
-    setCount((prev) => prev + 1);
+    setCount(prev => prev + 1);
     countRef.current += 1;
   }, []);
 
@@ -205,7 +205,7 @@ function useStateRef<T>(value: T): [React.RefObject<T>, (newState: T) => void] {
     if (Object.is(ref.current, newState)) return;
 
     ref.current = newState;
-    forceRender((prev) => !prev);
+    forceRender(prev => !prev);
   }
 
   return [ref, setState];

examples/tanstack/start/src/TransitionRedux.tsx

@@ -31,7 +31,7 @@ function TransitionRedux() {
 }
 
 function SettingsPanel() {
-  const page = useAppSelector((state) => state.posts.page);
+  const page = useAppSelector(state => state.posts.page);
 
   const dispatch = useAppDispatch();
 
@@ -57,7 +57,7 @@ function SettingsPanel() {
 }
 
 const Posts = function Posts() {
-  const page = useAppSelector((state) => state.posts.page_slow);
+  const page = useAppSelector(state => state.posts.page_slow);
 
   return (
     <div className="mt-4">

examples/tanstack/start/src/TransitionUseContextSelector.tsx

@@ -25,20 +25,20 @@ function TransitionUseContextSelector() {
 }
 
 function SettingsPanel() {
-  const page = useContextSelector(Context, (v) => v.page);
-  const set_page = useContextSelector(Context, (v) => v.set_page);
-  const set_page_slow = useContextSelector(Context, (v) => v.set_page_slow);
+  const page = useContextSelector(Context, v => v.page);
+  const set_page = useContextSelector(Context, v => v.set_page);
+  const set_page_slow = useContextSelector(Context, v => v.set_page_slow);
 
   const update = useContextUpdate(Context);
 
   const [is_pending, start_transition] = useTransition();
 
   const handle_click = () => {
-    set_page((prev) => prev + 1);
+    set_page(prev => prev + 1);
 
     start_transition(() => {
       update(() => {
-        set_page_slow((prev) => prev + 1);
+        set_page_slow(prev => prev + 1);
       });
     });
   };
@@ -55,7 +55,7 @@ function SettingsPanel() {
 }
 
 const Posts = function Posts() {
-  const page = useContextSelector(Context, (v) => v.page_slow);
+  const page = useContextSelector(Context, v => v.page_slow);
 
   return (
     <div className="mt-4">

examples/tanstack/start/src/TransitionUseSearch.tsx

@@ -26,11 +26,11 @@ function TransitionSearch() {
 
   const handle_click = () => {
     navigate({
-      search: (prev) => ({ page: (Number(prev.page) + 1).toString() }),
+      search: prev => ({ page: (Number(prev.page) + 1).toString() }),
     });
 
     start_transition(() => {
-      set_page_slow((prev) => (prev ? prev + 1 : 1));
+      set_page_slow(prev => (prev ? prev + 1 : 1));
     });
   };
 

examples/tanstack/start/src/TransitionUseState.tsx

@@ -18,10 +18,10 @@ function TransitionUseState() {
   const [is_pending, start_transition] = useTransition();
 
   const handle_click = () => {
-    set_page((prev) => prev + 1);
+    set_page(prev => prev + 1);
 
     start_transition(() => {
-      set_page_slow((prev) => prev + 1);
+      set_page_slow(prev => prev + 1);
     });
   };
 

examples/tanstack/start/src/TransitionZustand.tsx

@@ -29,9 +29,9 @@ interface SettingsPanelProps {
 }
 
 function SettingsPanel({ store }: SettingsPanelProps) {
-  const page = store((state) => state.page);
-  const set_page = store((state) => state.set_page);
-  const set_page_slow = store((state) => state.set_page_slow);
+  const page = store(state => state.page);
+  const set_page = store(state => state.set_page);
+  const set_page_slow = store(state => state.set_page_slow);
 
   const [is_pending, start_transition] = useTransition();
 
@@ -59,7 +59,7 @@ interface PostsProps {
 }
 
 const Posts = function Posts({ store }: PostsProps) {
-  const page = store((state) => state.page_slow);
+  const page = store(state => state.page_slow);
 
   return (
     <div className="mt-4">
@@ -90,10 +90,10 @@ interface State {
 }
 
 const create_store = () => {
-  return create<State>((set) => ({
+  return create<State>(set => ({
     page: 1,
     page_slow: 1,
-    set_page: () => set((state) => ({ page: state.page + 1 })),
-    set_page_slow: () => set((state) => ({ page_slow: state.page_slow + 1 })),
+    set_page: () => set(state => ({ page: state.page + 1 })),
+    set_page_slow: () => set(state => ({ page_slow: state.page_slow + 1 })),
   }));
 };

examples/tanstack/start/src/external-stores/Redux.tsx

@@ -26,8 +26,8 @@ function Redux() {
 function Counter() {
   const dispatch = useAppDispatch();
 
-  const loading = useAppSelector((state) => state.counter.loading);
-  const count = useAppSelector((state) => state.counter.value);
+  const loading = useAppSelector(state => state.counter.loading);
+  const count = useAppSelector(state => state.counter.value);
 
   return (
     <div className="mx-2 my-1">
@@ -85,7 +85,7 @@ function decrement(): CounterAction {
 
 function increment_async() {
   return async (dispatch: AppDispatch) => {
-    await new Promise((resolve) => setTimeout(resolve, 500));
+    await new Promise(resolve => setTimeout(resolve, 500));
     dispatch(increment_by_amount(2));
   };
 }
@@ -96,7 +96,7 @@ function increment_async_a() {
     dispatch(increment_by_amount(1));
 
     try {
-      await new Promise((resolve) => setTimeout(resolve, 500));
+      await new Promise(resolve => setTimeout(resolve, 500));
       dispatch({ type: INCREMENT_FULFILLED, payload: 1 });
     } catch {
       dispatch({ type: INCREMENT_REJECTED });