Abacus tools: use StyleX

See: https://stylexjs.com/

src/abacus-tools/.babelrc.js

@@ -1,5 +1,7 @@
 // @flow strict
 
+const styleXPlugin = require('@stylexjs/babel-plugin');
+
 module.exports = {
   presets: [
     [
@@ -12,4 +14,21 @@ module.exports = {
       },
     ],
   ],
+  plugins: [
+    [
+      styleXPlugin,
+      {
+        // https://stylexjs.com/docs/api/configuration/babel-plugin/
+        dev: process.env.NODE_ENV === 'development',
+        test: false,
+        treeshakeCompensation: true,
+
+        // Required for CSS variable support
+        unstable_moduleResolution: {
+          type: 'commonJS',
+          rootDir: __dirname, // The absolute path to the root directory of the project
+        },
+      },
+    ],
+  ],
 };

src/abacus-tools/.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
     '@adeira/eslint-config/strict', // preset with almost everything
     '@adeira/eslint-config/fbt', // additional FBT rules
     '@adeira/eslint-config/next', // additional Next.js rules
+    '@adeira/eslint-config/react',
   ],
   settings: {
     next: {

src/abacus-tools/README.md

@@ -1 +1,5 @@
+```bash
+yw @adeira/abacus-tools dev
+```
+
 http://localhost:3000/

src/abacus-tools/next.config.js

@@ -9,9 +9,14 @@ const withCustomBabelConfigFile = require('next-plugin-custom-babel-config')({
   babelConfigFile: path.join(__dirname, '.babelrc.js'),
 });
 
+const withStylex = require('@stylexjs/nextjs-plugin')({
+  rootDir: __dirname,
+});
+
 module.exports = (withPlugins(
   [
     [withCustomBabelConfigFile],
+    [withStylex],
     // other plugins here
   ],
   {

src/abacus-tools/package.json

@@ -9,6 +9,8 @@
     "start": "next start --port=3000"
   },
   "dependencies": {
+    "@stylexjs/nextjs-plugin": "^0.6.1",
+    "@stylexjs/stylex": "^0.6.1",
     "next": "^14.2.3",
     "next-compose-plugins": "^2.2.1",
     "next-plugin-custom-babel-config": "^1.0.5",
@@ -18,6 +20,7 @@
   "devDependencies": {
     "@adeira/babel-preset-adeira": "^4.0.0",
     "@babel/core": "^7.24.7",
-    "@playwright/test": "^1.44.1"
+    "@playwright/test": "^1.44.1",
+    "@stylexjs/babel-plugin": "^0.6.1"
   }
 }

src/abacus-tools/pages/_app.js

@@ -1,5 +1,6 @@
 // @flow
 
+import * as sx from '@stylexjs/stylex';
 import * as React from 'react';
 import Link from 'next/link';
 
@@ -10,25 +11,30 @@ export default function MyApp({ Component, pageProps }: $FlowFixMe): React.Node
     <div>
       <Component {...pageProps} />
 
-      <style jsx>{`
-        .navigation {
-          margin-block-start: 5em;
-          color: #bbb;
-          font-size: 0.8em;
-        }
-
-        .navigation a {
-          color: #bbb;
-        }
-      `}</style>
-
-      <div className="navigation">
-        <Link href="/newtab">Time</Link>
+      <div {...sx.props(styles.navigation)}>
+        <Link href="/newtab" {...sx.props(styles.navigationLink)}>
+          Time
+        </Link>
         {' · '}
-        <Link href="/time-from-start-of-year">Elapsed Time</Link>
+        <Link href="/time-from-start-of-year" {...sx.props(styles.navigationLink)}>
+          Elapsed Time
+        </Link>
         {' · '}
-        <Link href="/time-until-end-of-year">Remaining Time</Link>
+        <Link href="/time-until-end-of-year" {...sx.props(styles.navigationLink)}>
+          Remaining Time
+        </Link>
       </div>
     </div>
   );
 }
+
+const styles = sx.create({
+  navigation: {
+    color: '#bbb',
+    fontSize: '0.8em',
+    marginBlockStart: '5em',
+  },
+  navigationLink: {
+    color: '#bbb',
+  },
+});

src/abacus-tools/src/components/Jumbo.js

@@ -1,22 +1,21 @@
 // @flow strict
 
+import * as sx from '@stylexjs/stylex';
 import { type Node } from 'react';
 
 export default function Jumbo(props: { +children: string }): Node {
   return (
-    <>
-      <style jsx>{`
-        .jumbo {
-          font-size: 8em;
-          font-weight: bold;
-          transition: all 0.5s ease-in-out;
-          font-variant-numeric: tabular-nums;
-        }
-      `}</style>
-
-      <div>
-        <div className="jumbo">{props.children}</div>
-      </div>
-    </>
+    <div>
+      <div {...sx.props(styles.jumbo)}>{props.children}</div>
+    </div>
   );
 }
+
+const styles = sx.create({
+  jumbo: {
+    fontSize: '8em',
+    fontVariantNumeric: 'tabular-nums',
+    fontWeight: 'bold',
+    transition: 'all 0.5s ease-in-out',
+  },
+});