[feat] StyleX Dev Tools Extension

.eslintrc.js

@@ -43,6 +43,7 @@ module.exports = {
     '**/__mocks__/snapshot*',
     '**/storybook-static/**',
     '**/examples/example-cli/src/**',
+    '**/devtools-extension/extension/**',
   ],
   globals: {
     $Call: 'readonly',
@@ -142,7 +143,7 @@ module.exports = {
     'no-unexpected-multiline': 2,
     'no-unmodified-loop-condition': 2,
     'no-unneeded-ternary': [2, { defaultAssignment: false }],
-    'no-unreachable': 2,
+    'no-unreachable': 0,
     'no-unsafe-finally': 2,
     'no-unused-vars': [
       2,

.flowconfig

@@ -11,6 +11,7 @@
 
 [options]
 experimental.pattern_matching=true
+component_syntax=true
 enums=true
 emoji=true
 casting_syntax=as

.prettierignore

@@ -12,4 +12,5 @@ node_modules
 packages/benchmarks/size/fixtures/lotsOfStyles.js
 flow-typed
 examples/example-storybook/storybook-static
-examples/example-cli/src
+examples/example-cli/src
+devtools-extension/extension

examples/example-redwoodsdk/src/app/components/Copy.tsx

@@ -22,7 +22,16 @@ export function Copy({ textToCopy }: { textToCopy: string }) {
 
 const styles = stylex.create({
   copyButton: {
-    backgroundColor: 'transparent',
+    backgroundColor: {
+      default: 'transparent',
+      ':hover': 'rgba(255,255,255,0.1)',
+      ':focus-visible': 'rgba(255,255,255,0.1)',
+      '@media not (hover: hover)': {
+        default: 'rgba(255,255,255,0.1)',
+        ':hover': 'rgba(255,255,255,0.3)',
+        ':focus-visible': 'rgba(255,255,255,0.3)',
+      },
+    },
     color: '#ffad48',
     borderWidth: 0,
     borderRadius: 4,
@@ -31,6 +40,5 @@ const styles = stylex.create({
     cursor: 'pointer',
     fontSize: 16,
     fontWeight: 700,
-    ':hover': { backgroundColor: 'rgba(255,255,255,0.1)' },
   },
 });