A CLI to compile an entire folder with StyleX

.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.json5

@@ -0,0 +1,7 @@
+{
+  input: './source',
+  output: './src',
+  // modules: [],
+  cssBundleName: 'stylex_bundle.css',
+  // mode: 'watch',
+}

apps/cli-example/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "next-swc-cli-example",
+  "version": "0.5.1",
+  "private": true,
+  "scripts": {
+    "transform": "stylex -c .stylex.json5"
+  },
+  "dependencies": {
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@stylexjs/cli": "0.5.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,100 @@
+/**
+ * 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 { 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: 'blue',
+    padding: spacing.xxxs,
+    fontFamily: $.fontSans,
+    gap: spacing.xs,
+  },
+  button: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '6rem',
+    aspectRatio: 1,
+    color: 'blue',
+    backgroundColor: {
+      default: 'blue',
+      ':hover': 'blue',
+      [DARK]: {
+        default: 'blue',
+        ':hover': 'blue',
+      },
+    },
+    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: 'blue',
+    minWidth: '6rem',
+    textAlign: 'center',
+    fontFamily: $.fontMono,
+  },
+  largeNumber: {
+    fontSize: text.h3,
+  },
+});

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

@@ -0,0 +1,16 @@
+/**
+ * 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 React from 'react';
+
+export default function Error() {
+    return <p>Error</p>
+}