From 2c343c072682b6e87f0ba5eb427b565455143e8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Zl=C3=A1mal?= Date: Sun, 9 Jun 2024 13:46:16 -0600 Subject: [PATCH 1/3] Eslint config: add StyleX plugin --- src/eslint-config-adeira/CHANGELOG.md | 2 +- .../__snapshots__/index.test.js.snap | 3 + .../__snapshots__/presets.test.js.snap | 3 + src/eslint-config-adeira/package.json | 1 + src/eslint-config-adeira/src/presets/react.js | 5 + yarn.lock | 99 +++++++++++++++++-- 6 files changed, 106 insertions(+), 7 deletions(-) diff --git a/src/eslint-config-adeira/CHANGELOG.md b/src/eslint-config-adeira/CHANGELOG.md index eab2a09def..a26d39436c 100644 --- a/src/eslint-config-adeira/CHANGELOG.md +++ b/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: diff --git a/src/eslint-config-adeira/__tests__/__snapshots__/index.test.js.snap b/src/eslint-config-adeira/__tests__/__snapshots__/index.test.js.snap index e0dbf16709..8c2d776e98 100644 --- a/src/eslint-config-adeira/__tests__/__snapshots__/index.test.js.snap +++ b/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", diff --git a/src/eslint-config-adeira/__tests__/__snapshots__/presets.test.js.snap b/src/eslint-config-adeira/__tests__/__snapshots__/presets.test.js.snap index a8bdbf000a..57143d8d81 100644 --- a/src/eslint-config-adeira/__tests__/__snapshots__/presets.test.js.snap +++ b/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", diff --git a/src/eslint-config-adeira/package.json b/src/eslint-config-adeira/package.json index cec78a9b3f..3963e0c801 100644 --- a/src/eslint-config-adeira/package.json +++ b/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", diff --git a/src/eslint-config-adeira/src/presets/react.js b/src/eslint-config-adeira/src/presets/react.js index 677b494521..7942612333 100644 --- a/src/eslint-config-adeira/src/presets/react.js +++ b/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: [ { diff --git a/yarn.lock b/yarn.lock index ee534105b2..d7a5f74c7c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -95,6 +95,9 @@ __metadata: "@adeira/babel-preset-adeira": "npm:^4.0.0" "@babel/core": "npm:^7.24.7" "@playwright/test": "npm:^1.44.1" + "@stylexjs/babel-plugin": "npm:^0.6.1" + "@stylexjs/nextjs-plugin": "npm:^0.6.1" + "@stylexjs/stylex": "npm:^0.6.1" next: "npm:^14.2.3" next-compose-plugins: "npm:^2.2.1" next-plugin-custom-babel-config: "npm:^1.0.5" @@ -145,6 +148,7 @@ __metadata: dependencies: "@babel/runtime": "npm:^7.24.7" "@next/eslint-plugin-next": "npm:^14.2.3" + "@stylexjs/eslint-plugin": "npm:^0.6.1" deep-diff: "npm:^1.0.2" eslint-config-prettier: "npm:^9.1.0" eslint-plugin-adeira: "npm:^0.15.0" @@ -752,7 +756,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.0.0, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.18.9, @babel/core@npm:^7.21.3, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.3, @babel/core@npm:^7.23.7, @babel/core@npm:^7.23.9, @babel/core@npm:^7.24.7": +"@babel/core@npm:^7.0.0, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.18.9, @babel/core@npm:^7.21.3, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.3, @babel/core@npm:^7.23.6, @babel/core@npm:^7.23.7, @babel/core@npm:^7.23.9, @babel/core@npm:^7.24.7": version: 7.24.7 resolution: "@babel/core@npm:7.24.7" dependencies: @@ -904,7 +908,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-module-imports@npm:^7.24.7": +"@babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-module-imports@npm:7.24.7" dependencies: @@ -1187,7 +1191,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-flow@npm:^7.12.1, @babel/plugin-syntax-flow@npm:^7.24.7, @babel/plugin-syntax-flow@npm:^7.7.4": +"@babel/plugin-syntax-flow@npm:^7.12.1, @babel/plugin-syntax-flow@npm:^7.22.5, @babel/plugin-syntax-flow@npm:^7.24.7, @babel/plugin-syntax-flow@npm:^7.7.4": version: 7.24.7 resolution: "@babel/plugin-syntax-flow@npm:7.24.7" dependencies: @@ -1242,7 +1246,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-jsx@npm:^7.0.0, @babel/plugin-syntax-jsx@npm:^7.24.1, @babel/plugin-syntax-jsx@npm:^7.24.7, @babel/plugin-syntax-jsx@npm:^7.7.2": +"@babel/plugin-syntax-jsx@npm:^7.0.0, @babel/plugin-syntax-jsx@npm:^7.22.5, @babel/plugin-syntax-jsx@npm:^7.24.1, @babel/plugin-syntax-jsx@npm:^7.24.7, @babel/plugin-syntax-jsx@npm:^7.7.2": version: 7.24.7 resolution: "@babel/plugin-syntax-jsx@npm:7.24.7" dependencies: @@ -1341,6 +1345,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-syntax-typescript@npm:^7.22.5": + version: 7.24.7 + resolution: "@babel/plugin-syntax-typescript@npm:7.24.7" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.24.7" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/cdabd2e8010fb0ad15b49c2c270efc97c4bfe109ead36c7bbcf22da7a74bc3e49702fc4f22f12d2d6049e8e22a5769258df1fd05f0420ae45e11bdd5bc07805a + languageName: node + linkType: hard + "@babel/plugin-syntax-typescript@npm:^7.24.1, @babel/plugin-syntax-typescript@npm:^7.7.2": version: 7.24.1 resolution: "@babel/plugin-syntax-typescript@npm:7.24.1" @@ -2245,7 +2260,7 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.22.8, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.24.7": +"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.22.8, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.23.6, @babel/traverse@npm:^7.24.7": version: 7.24.7 resolution: "@babel/traverse@npm:7.24.7" dependencies: @@ -2263,7 +2278,7 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.9, @babel/types@npm:^7.2.2, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.23.0, @babel/types@npm:^7.24.7, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3": +"@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.9, @babel/types@npm:^7.2.2, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.6, @babel/types@npm:^7.24.7, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3": version: 7.24.7 resolution: "@babel/types@npm:7.24.7" dependencies: @@ -5147,6 +5162,64 @@ __metadata: languageName: node linkType: hard +"@stylexjs/babel-plugin@npm:^0.6.1": + version: 0.6.1 + resolution: "@stylexjs/babel-plugin@npm:0.6.1" + dependencies: + "@babel/core": "npm:^7.23.6" + "@babel/helper-module-imports": "npm:^7.22.15" + "@babel/traverse": "npm:^7.23.6" + "@babel/types": "npm:^7.23.6" + "@stylexjs/shared": "npm:0.6.1" + "@stylexjs/stylex": "npm:0.6.1" + checksum: 10c0/3c93d6bb6da2a2901278593c32d24dce4aaebc2ea64f39a045c6c286e9bd8290bf7c0b180c6085f2480012bcd54bb1865c42690c6e43b94f1d3ffc3c6f985e0e + languageName: node + linkType: hard + +"@stylexjs/eslint-plugin@npm:^0.6.1": + version: 0.6.1 + resolution: "@stylexjs/eslint-plugin@npm:0.6.1" + dependencies: + micromatch: "npm:^4.0.5" + checksum: 10c0/d2103f77a86635be8b84c87bad44feb38f63bb9b736fa40e78f367eccb5e09f547bbe157269b079ca4a5be71232808e1bfac97babde3ca49ecb41f4995300c2b + languageName: node + linkType: hard + +"@stylexjs/nextjs-plugin@npm:^0.6.1": + version: 0.6.1 + resolution: "@stylexjs/nextjs-plugin@npm:0.6.1" + dependencies: + "@babel/core": "npm:^7.23.9" + "@babel/plugin-syntax-flow": "npm:^7.22.5" + "@babel/plugin-syntax-jsx": "npm:^7.22.5" + "@babel/plugin-syntax-typescript": "npm:^7.22.5" + "@stylexjs/babel-plugin": "npm:^0.6.1" + peerDependencies: + next: ">=14.0.1" + checksum: 10c0/a2a559b66728c0847b930dcb8b431abe25a2cbbafde015f696f730e191daff4c7a053d2e3360fe54ecd8a8507494268d63e881b1c7d96b06b7ee8fadfc8a2d66 + languageName: node + linkType: hard + +"@stylexjs/shared@npm:0.6.1": + version: 0.6.1 + resolution: "@stylexjs/shared@npm:0.6.1" + dependencies: + postcss-value-parser: "npm:^4.1.0" + checksum: 10c0/c8a4bb0557df4c0be327c9406e37bec7d72dd2aeb0f6334988d1169736b6f815f9bd07b4cf7d3285b0ccc3a7fc0f6a8deb7d21dd35653dcc81d691ba644c2c4c + languageName: node + linkType: hard + +"@stylexjs/stylex@npm:0.6.1, @stylexjs/stylex@npm:^0.6.1": + version: 0.6.1 + resolution: "@stylexjs/stylex@npm:0.6.1" + dependencies: + css-mediaquery: "npm:^0.1.2" + invariant: "npm:^2.2.4" + styleq: "npm:0.1.3" + checksum: 10c0/d1d6fb09c609e5496650da0411ef74e7f5297d615e7a6294fd7987717cbf09c398427590fa68230e62eb2f95cc1701ddbd85bff1d0ef8294617343fed0b7fbf1 + languageName: node + linkType: hard + "@svgr/babel-plugin-add-jsx-attribute@npm:8.0.0": version: 8.0.0 resolution: "@svgr/babel-plugin-add-jsx-attribute@npm:8.0.0" @@ -8750,6 +8823,13 @@ __metadata: languageName: node linkType: hard +"css-mediaquery@npm:^0.1.2": + version: 0.1.2 + resolution: "css-mediaquery@npm:0.1.2" + checksum: 10c0/b7825a78f52ce8a8198e004fcad0d7be1d3c9a0463ecd05ba31a0f2c94fb81468ad6f4d7bf715a6ca775696e7a17500c2a339b5216a6d0f789cbf78f9454d048 + languageName: node + linkType: hard + "css-minimizer-webpack-plugin@npm:^5.0.1": version: 5.0.1 resolution: "css-minimizer-webpack-plugin@npm:5.0.1" @@ -20757,6 +20837,13 @@ __metadata: languageName: node linkType: hard +"styleq@npm:0.1.3": + version: 0.1.3 + resolution: "styleq@npm:0.1.3" + checksum: 10c0/975d951792e65052f1f6e41aaad46492642ce4922b3dc36d4b49b37c8509f9a776794d8f275360f00116a5e6ab1e31514bdcd5840656c4e3213da6803fa12941 + languageName: node + linkType: hard + "supports-color@npm:^5.3.0": version: 5.5.0 resolution: "supports-color@npm:5.5.0" From 5c8424f6bd5024b8637cb509c13527cd1ad665ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Zl=C3=A1mal?= Date: Sun, 9 Jun 2024 13:46:33 -0600 Subject: [PATCH 2/3] Abacus tools: remove `_original_version_` files --- .../_original_version_/Dockerfile | 21 ------ src/abacus-tools/_original_version_/README.md | 21 ------ .../_original_version_/newtab.html | 67 ------------------- 3 files changed, 109 deletions(-) delete mode 100644 src/abacus-tools/_original_version_/Dockerfile delete mode 100644 src/abacus-tools/_original_version_/README.md delete mode 100644 src/abacus-tools/_original_version_/newtab.html diff --git a/src/abacus-tools/_original_version_/Dockerfile b/src/abacus-tools/_original_version_/Dockerfile deleted file mode 100644 index 10c0379e6d..0000000000 --- a/src/abacus-tools/_original_version_/Dockerfile +++ /dev/null @@ -1,21 +0,0 @@ -# Use the official nginx Docker image as base -# This image includes EXPOSE 80 which matches the default nginx port -# https://hub.docker.com/_/nginx -FROM nginx:1.27.0 - -# Define the maintainer of the Dockerfile -LABEL maintainer="mrtnzlml+abacus-tools@gmail.com" - -# Copy the HTML file to the nginx default directory for hosting static files -# If you have more files, like CSS or JS files, you should add more COPY commands or -# switch to use the ADD command to copy a whole directory. -COPY newtab.html /usr/share/nginx/html/index.html - -# The default command will start nginx in the foreground, -# as defined in the base image (nginx) -# It is not necessary to include a CMD or ENTRYPOINT instruction, unless you want to modify it - -# The docker container will listen on port 80, as nginx runs on this port by default -EXPOSE 80 - -# This Dockerfile does not require any arguments at runtime diff --git a/src/abacus-tools/_original_version_/README.md b/src/abacus-tools/_original_version_/README.md deleted file mode 100644 index a3ac1f4dc0..0000000000 --- a/src/abacus-tools/_original_version_/README.md +++ /dev/null @@ -1,21 +0,0 @@ -TODO: remove (replaced by the new Next.js application) - ---- - -To build: - -``` -DOCKER_DEFAULT_PLATFORM=linux/amd64 docker build -t adeira/abacus-tools . -docker run -d -p 3000:80 adeira/abacus-tools -``` - -To publish: - -``` -docker push adeira/abacus-tools -``` - -Ideas for pages (tools): - -- `Intl.DateTimeFormat` and `Intl.RelativeTimeFormat` live examples -- TODO diff --git a/src/abacus-tools/_original_version_/newtab.html b/src/abacus-tools/_original_version_/newtab.html deleted file mode 100644 index d68ff6372a..0000000000 --- a/src/abacus-tools/_original_version_/newtab.html +++ /dev/null @@ -1,67 +0,0 @@ - - - - Current Time Display - - - -
- - - -
- - - - -
- - From 4daf487d9bbfe1807ce095d42fe2be14024cc950 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Zl=C3=A1mal?= Date: Sun, 9 Jun 2024 13:47:28 -0600 Subject: [PATCH 3/3] Abacus tools: use StyleX See: https://stylexjs.com/ --- src/abacus-tools/.babelrc.js | 19 ++++++++++++ src/abacus-tools/.eslintrc.js | 1 + src/abacus-tools/README.md | 4 +++ src/abacus-tools/next.config.js | 5 ++++ src/abacus-tools/package.json | 5 +++- src/abacus-tools/pages/_app.js | 38 ++++++++++++++---------- src/abacus-tools/src/components/Jumbo.js | 27 ++++++++--------- 7 files changed, 68 insertions(+), 31 deletions(-) diff --git a/src/abacus-tools/.babelrc.js b/src/abacus-tools/.babelrc.js index f9136a8436..f3a27426f7 100644 --- a/src/abacus-tools/.babelrc.js +++ b/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 + }, + }, + ], + ], }; diff --git a/src/abacus-tools/.eslintrc.js b/src/abacus-tools/.eslintrc.js index 73635bfce0..b5929133f6 100644 --- a/src/abacus-tools/.eslintrc.js +++ b/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: { diff --git a/src/abacus-tools/README.md b/src/abacus-tools/README.md index b76d1bc9d2..dfb51eaf8c 100644 --- a/src/abacus-tools/README.md +++ b/src/abacus-tools/README.md @@ -1 +1,5 @@ +```bash +yw @adeira/abacus-tools dev +``` + http://localhost:3000/ diff --git a/src/abacus-tools/next.config.js b/src/abacus-tools/next.config.js index 98a244998d..84501fc44e 100644 --- a/src/abacus-tools/next.config.js +++ b/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 ], { diff --git a/src/abacus-tools/package.json b/src/abacus-tools/package.json index 8668aaf9cc..cb7fe48fe3 100644 --- a/src/abacus-tools/package.json +++ b/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" } } diff --git a/src/abacus-tools/pages/_app.js b/src/abacus-tools/pages/_app.js index 70a4d8bcb5..29d9ab27c5 100644 --- a/src/abacus-tools/pages/_app.js +++ b/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
- - -
- Time +
+ + Time + {' · '} - Elapsed Time + + Elapsed Time + {' · '} - Remaining Time + + Remaining Time +
); } + +const styles = sx.create({ + navigation: { + color: '#bbb', + fontSize: '0.8em', + marginBlockStart: '5em', + }, + navigationLink: { + color: '#bbb', + }, +}); diff --git a/src/abacus-tools/src/components/Jumbo.js b/src/abacus-tools/src/components/Jumbo.js index ec0ec70548..17c42d6fc8 100644 --- a/src/abacus-tools/src/components/Jumbo.js +++ b/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 ( - <> - - -
-
{props.children}
-
- +
+
{props.children}
+
); } + +const styles = sx.create({ + jumbo: { + fontSize: '8em', + fontVariantNumeric: 'tabular-nums', + fontWeight: 'bold', + transition: 'all 0.5s ease-in-out', + }, +});