feat: A CLI to compile an entire folder with StyleX (facebook#561)

* CLI transforms file with babel stylex plugin

* transform relative imports to compiled js files

* watch mode that recompiles entire directory on files changed

* cool ascii art

* Handle options from both CLI and config file

* kinda working node_modules compilation

* support passthrough babel presets in config

*  multi-directory input/output

* allow ignoring subdirectories in compiled node modules

---------

Co-authored-by: Naman Goel <[email protected]>

.eslintrc.js

@@ -36,6 +36,7 @@ module.exports = {
     'node_modules',
     'next-env.d.ts',
     'next.config.js',
+    '**/__mocks__/snapshot*',
   ],
   globals: {
     $Call: 'readonly',

.prettierignore

@@ -7,3 +7,4 @@ coverage
 lib
 node_modules
 *.mdx
+**/__mocks__/snapshot*

apps/cli-example/.gitignore

@@ -0,0 +1,4 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# stylex compiled
+src

apps/cli-example/.stylex.json

@@ -0,0 +1,12 @@
+{
+    "input": ["./source"],
+    "output": ["./src"],
+    "cssBundleName": "stylex_bundle.css",
+    "babelPresets": [
+      ["@babel/preset-typescript", { "allExtensions": "true", "isTSX": "true" }],
+      "@babel/preset-react"
+    ],
+    "modules_EXPERIMENTAL": ["@stylexjs/open-props"],
+    "watch": "true"
+  }
+

apps/cli-example/.stylex.json5

@@ -0,0 +1,13 @@
+{
+  input: ['./source'],
+  output: ['./src'],
+  cssBundleName: 'stylex_bundle.css',
+  babelPresets: [
+    ['@babel/preset-typescript', { allExtensions: true, isTSX: true }],
+    '@babel/preset-react',
+  ],
+  modules_EXPERIMENTAL: [
+    ['@stylexjs/open-props', { ignore: ['src', '__tests__'] }],
+  ],
+  // watch: true,
+}

apps/cli-example/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "stylex-cli-example",
+  "version": "0.6.1",
+  "private": true,
+  "scripts": {
+    "transform": "stylex --config .stylex.json5"
+  },
+  "dependencies": {
+    "@stylexjs/open-props": "0.6.1",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@stylexjs/cli": "0.6.1",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "typescript": "^5"
+  }
+}

apps/cli-example/source/app/CardTokens.stylex.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import * as stylex from '@stylexjs/stylex';
+
+export const tokens = stylex.defineVars({
+  arrowTransform: 'translateX(0)',
+});

apps/cli-example/source/app/Counter.tsx

@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+'use client';
+
+import * as stylex from '@stylexjs/stylex';
+import { spacing, text, globalTokens as $ } from './globalTokens.stylex';
+import { colors } from '@stylexjs/open-props/lib/colors.stylex';
+import { useState } from 'react';
+
+export default function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div {...stylex.props(styles.container)}>
+      <button
+        {...stylex.props(styles.button)}
+        onClick={() => setCount((c) => c - 1)}
+      >
+        -
+      </button>
+      <div
+        {...stylex.props(
+          styles.count,
+          Math.abs(count) > 99 && styles.largeNumber,
+        )}
+      >
+        {count}
+      </div>
+      <button
+        {...stylex.props(styles.button)}
+        onClick={() => setCount((c) => c + 1)}
+      >
+        +
+      </button>
+    </div>
+  );
+}
+
+const DARK = '@media (prefers-color-scheme: dark)' as const;
+
+const styles = stylex.create({
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    borderRadius: spacing.md,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.blue7,
+    padding: spacing.xxxs,
+    fontFamily: $.fontSans,
+    gap: spacing.xs,
+  },
+  button: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '6rem',
+    aspectRatio: 1,
+    color: colors.blue7,
+    backgroundColor: {
+      default: colors.gray3,
+      ':hover': colors.gray4,
+      [DARK]: {
+        default: colors.gray9,
+        ':hover': colors.gray8,
+      },
+    },
+    borderWidth: 0,
+    borderStyle: 'none',
+    borderRadius: spacing.xs,
+    padding: spacing.xs,
+    margin: spacing.xs,
+    cursor: 'pointer',
+    fontSize: text.h2,
+    transform: {
+      default: null,
+      ':hover': 'scale(1.025)',
+      ':active': 'scale(0.975)',
+    },
+  },
+  count: {
+    fontSize: text.h2,
+    fontWeight: 100,
+    color: colors.lime7,
+    minWidth: '6rem',
+    textAlign: 'center',
+    fontFamily: $.fontMono,
+  },
+  largeNumber: {
+    fontSize: text.h3,
+  },
+});