Abacus tools: use StyleX

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',
+  },
+});

src/eslint-config-adeira/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 Breaking changes ahead!
 
-- New rule enabled: `@next/next/no-async-client-component`
+- New rules enabled: `@next/next/no-async-client-component`, `@stylexjs/valid-styles`, and `@stylexjs/sort-keys`
 
 Breaking changes from `eslint-plugin-testing-library` v6 were implemented, specifically:
 

src/eslint-config-adeira/__tests__/__snapshots__/index.test.js.snap

@@ -94,12 +94,15 @@ exports[`rules snapshot: all stable rules 1`] = `
     "eslint-plugin-jsx-a11y",
     "eslint-plugin-jest-dom",
     "eslint-plugin-testing-library",
+    "@stylexjs/eslint-plugin",
     "eslint-plugin-relay",
     "eslint-plugin-prettier",
   ],
   "rules": {
     "@babel/object-curly-spacing": "off",
     "@babel/semi": "off",
+    "@stylexjs/sort-keys": 2,
+    "@stylexjs/valid-styles": 2,
     "@typescript-eslint/block-spacing": "off",
     "@typescript-eslint/brace-style": "off",
     "@typescript-eslint/comma-dangle": "off",

src/eslint-config-adeira/__tests__/__snapshots__/presets.test.js.snap

@@ -930,9 +930,12 @@ exports[`React preset: React preset 1`] = `
     "eslint-plugin-jsx-a11y",
     "eslint-plugin-jest-dom",
     "eslint-plugin-testing-library",
+    "@stylexjs/eslint-plugin",
     "eslint-plugin-prettier",
   ],
   "rules": {
+    "@stylexjs/sort-keys": 2,
+    "@stylexjs/valid-styles": 2,
     "curly": [
       2,
       "all",

src/eslint-config-adeira/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@next/eslint-plugin-next": "^14.2.3",
+    "@stylexjs/eslint-plugin": "^0.6.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-adeira": "^0.15.0",
     "eslint-plugin-eslint-comments": "^3.2.0",

src/eslint-config-adeira/src/presets/react.js

@@ -17,6 +17,7 @@ module.exports = ({
     'eslint-plugin-jsx-a11y',
     'eslint-plugin-jest-dom',
     'eslint-plugin-testing-library',
+    '@stylexjs/eslint-plugin',
   ],
   rules: {
     // React (https://github.com/yannickcr/eslint-plugin-react)
@@ -247,6 +248,10 @@ module.exports = ({
     'jsx-a11y/role-supports-aria-props': ERROR,
     'jsx-a11y/scope': ERROR,
     'jsx-a11y/tabindex-no-positive': ERROR,
+
+    // StyleX (https://stylexjs.com/docs/learn/installation/#catch-mistakes-with-eslint)
+    '@stylexjs/valid-styles': ERROR,
+    '@stylexjs/sort-keys': ERROR,
   },
   overrides: [
     {