feat: add option to auto process root

docs/src/content/docs/v3/other/babel-plugin.mdx

@@ -194,21 +194,39 @@ By leveraging such scopes, we ensure support for any level of nesting!
 
 The Babel plugin comes with a few additional options to extend its usage.
 
+:::caution
+By default babel plugin will look for any `react-native-unistyles` import to start processing your file.
+You can change this behaviour with options below:
+:::
+
+#### `autoProcessRoot`
+
+If you want to process all your files, regardless of whether they include a `react-native-unistyles` import, you can set the `autoProcessRoot` option.
+
+```js
+{
+    autoProcessRoot: 'src' // or 'app', or any name of your root folder
+}
+```
+
+Folder name will be resolved with `process.cwd()`.
+
 #### `autoProcessImports`
 
-By default babel plugin will look for any `react-native-unistyles` import to start processing your file.
-However, in some cases you might want to process files that miss such import:
-- ui-kits that aggregates Unistyles components
-- monorepos that use Unistyles under absolute path like `@codemask/styles`
+This configuration should be used when you want to process only files containing specific imports.
+It can be useful for monorepos that use Unistyles with absolute paths, such as `@codemask/styles`.
 
-If that's your case, you can configure the Babel plugin to process them.
+```js
+{
+    autoProcessImports: ['@codemask/styles'] // whenever Babel encounters this import, it will process your file
+}
+```
 
 #### `autoProcessPaths`
 
-By default babel plugin will ignore `node_modules`.
-However similar to `autoProcessImports`, you can configure it to process extra paths.
-
-Under these paths we will replace `react-native` imports with `react-native-unistyles` factories that will borrow components refs [read more](/v3/other/babel-plugin#3-component-factory-borrowing-ref).
+This configuration is unrelated to the `autoProcessRoot` and `autoProcessImports` options and can be used alongside them.
+By default, the Babel plugin ignores `node_modules`. However, you can extend these paths to attempt converting 3rd components into Unistyles compatible ones.
+Within these paths, we will replace `react-native` imports with `react-native-unistyles` factories that borrow component refs. [Read more](/v3/other/babel-plugin#3-component-factory-borrowing-ref).
 
 Defaults to:
 
@@ -228,7 +246,9 @@ You can apply any of the options above as follows:
 ```js title="babel.config.js"
 /** @type {import('react-native-unistyles/plugin').UnistylesPluginOptions} */
 const unistylesPluginOptions = {
+    autoProcessRoot: 'src',
     autoProcessImports: ['@react-native-ui-kit', '@codemask/styles'],
+
     autoProcessPaths: ['external-library/components'],
     debug: true,
 }

plugin/index.d.ts

@@ -1,18 +1,20 @@
 export interface UnistylesPluginOptions {
+    /**
+     * Example: "src" or "apps/mobile"
+     * Add this option if some of your components don't have `react-native-unistyles` import.
+     * Babel plugin will automatically process all files under this root.
+     */
+    autoProcessRoot?: string
+
   /**
-   * By default babel plugin will look for any `react-native-unistyles` import to start processing your file.
-   * However, in some cases you might want to process files that miss such import:
-   * - ui-kits that aggregates Unistyles components
-   * - monorepos that use Unistyles under absolute path like `@codemask/styles`
-   *
-   * If that's your case, you can configure the Babel plugin to process them.
+   * Example: ['@codemask/styles']
+   * Enable this option if you want to process only files containing specific imports.
    */
   autoProcessImports?: string[]
 
   /**
-   * By default babel plugin will ignore `node_modules`.
-   * However similar to `autoProcessImports`, you can configure it to process extra paths.
-   *
+   * Example: ['external-library/components']
+   * Enable this option to process some 3rd party components under `node_modules`.
    * Under these paths we will replace `react-native` imports with `react-native-unistyles` factories that will borrow components refs [read more](https://www.unistyl.es/v3/other/babel-plugin#3-component-factory-borrowing-ref).
    *
    * Defaults to:

plugin/index.js

@@ -48,14 +48,16 @@ module.exports = function ({ types: t }) {
                     state.file.styleSheetLocalName = ''
                     state.file.tagNumber = 0
                     state.reactNativeImports = {}
-                    state.file.forceProcessing = false
+                    state.file.forceProcessing = state.opts.autoProcessRoot
+                        ? state.filename.includes(`${state.file.opts.root}/${state.opts.autoProcessRoot}/`)
+                        : false
                 },
                 exit(path, state) {
                     if (isInsideNodeModules(state) && !state.file.replaceWithUnistyles) {
                         return
                     }
 
-                    if (state.file.hasAnyUnistyle || state.file.hasVariants || state.file.replaceWithUnistyles) {
+                    if (state.file.hasAnyUnistyle || state.file.hasVariants || state.file.replaceWithUnistyles || state.file.forceProcessing) {
                         addUnistylesImport(t, path, state)
                     }
                 }

src/components/native/Pressable.native.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef } from 'react'
+import React, { forwardRef, useLayoutEffect, useRef } from 'react'
 import { Pressable as NativePressableReactNative } from 'react-native'
 import type { PressableProps as Props, View } from 'react-native'
 import { UnistylesShadowRegistry } from '../../specs'
@@ -11,7 +11,7 @@ type PressableProps = Props & {
 export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ...props }, forwardedRef) => {
     const storedRef = useRef<View | null>()
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         return () => {
             if (storedRef.current) {
                 // @ts-expect-error - this is hidden from TS

src/core/createUnistylesElement.native.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useLayoutEffect, useRef } from 'react'
 import { UnistylesShadowRegistry } from '../specs'
 import { passForwardedRef } from './passForwardRef'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
@@ -19,7 +19,7 @@ const getNativeRef = (Component: any, ref: any) => {
 export const createUnistylesElement = (Component: any) => React.forwardRef((props, forwardedRef) => {
     const storedRef = useRef<unknown>(null)
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         return () => {
             if (storedRef.current) {
                 // @ts-ignore

src/core/createUnistylesImageBackground.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useLayoutEffect, useRef } from 'react'
 import type { Image, ImageBackground, ImageBackgroundProps } from 'react-native'
 import { UnistylesShadowRegistry } from '../specs'
 import { passForwardedRef } from './passForwardRef'
@@ -7,7 +7,7 @@ import { maybeWarnAboutMultipleUnistyles } from './warn'
 export const createUnistylesImageBackground = (Component: typeof ImageBackground) => React.forwardRef<ImageBackground, ImageBackgroundProps>((props, forwardedRef) => {
     const storedImageRef = useRef<Image | null>(null)
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         return () => {
             if (storedImageRef.current) {
                 // @ts-ignore