RFC - auto process sources

[jpudysz]

Description

In beta.5, we released an extended Babel configuration that enabled many developers to configure it in a way that allows us to process additional paths: https://www.unistyl.es/v3/other/babel-plugin#extra-configuration

You can now use:

• autoProcessImports to process your monorepo imports
• autoProcessPaths to process third-party node_modules

We can introduce an additional configuration, autoProcessRoot, where the user needs to specify the root folder of the app. Within this path and its subpaths, all imports will be processed to trigger the Babel plugin.

This will address the following cases:

// There is no absolute path or react-native-unistyles import
import { forwardRef } from 'react'
import { View as RNView } from 'react-native'
import type { ViewProps as RNViewProps, ViewStyle } from 'react-native'

import { styles } from './View.styles'

// There is no react-native-unistyles import
import { Text } from 'react-native'

export const InnerComponent = ({ style }) => {
  return (
    <Text style={style}>Hello</Text>
  )
}

Example config:

module.exports = function (api) {
    api.cache(true)

    return {
        plugins: [
            ['react-native-unistyles/plugin', {
                autoProcessRoot: 'src'
            }]
        ]
    }
}

Steps to Reproduce

Snack or Repository Link (Optional)

No response

Unistyles Version

3.0.0-beta.5

React Native Version

0.76.5

Platforms

Web, iOS, Android

Expo

None

[terreng]

An option like autoProcessRoot would be great, and unless I'm missing something, it seems like this should be default/recommended. Is there a harm to having the Babel plugin process everything just in case they import styles or have them passed as props? Is there a situation where you wouldn't want this?

[jpudysz]

It will take few more ms to start your dev server.
Most developers keep StyleSheet in the same file as Component, so we didn't know that we should add it.

[terreng]

Unistyles is positioned as a drop-in replacement for React Native’s StyleSheet. The website describes it as 'a superset of StyleSheet' and says, 'If you’re familiar with styling in React Native, then you already know how to use Unistyles.' In the Getting Started instructions, it even suggests you can 'simply replace React Native’s StyleSheet with the StyleSheet exported from Unistyles.'

Based on this messaging, it’s entirely reasonable to expect Unistyles to 'just work' as a replacement. However, this issue highlights a major difference in behavior that breaks that assumption.

I think addressing this issue is essential for making Unistyles a true superset of StyleSheet. Until then, it seems like a significant limitation that should be explicitly mentioned in the documentation to help set expectations for users like me.

[jpudysz]

You need to relax a little. Unistyles 3.0 has over 1K+ commits made in just seven months. We’ve put a lot of effort into making it work.

I can’t predict everyone’s coding style. I never would have imagined someone putting a StyleSheet inside a component... no one does that. It’s still in beta, and I can’t include a perfect error message for every edge case.

I’m not sure why you’re frustrated, but it would help to read the docs first. We’ve also invested a lot of time and effort into them.

As you can see, I’ve added an RFC to track this issue, so it will be resolved soon.

[terreng]

I apologize if I've come across harshly, and I mean no disrespect. I'm only trying to be helpful and constructive. I have nothing but complete respect for what you're building, and I'm excited about using it. And I appreciate the amount of effort you've put into making it.

I also understand that the issues I've encountered are uncommon and were unanticipated. It was not clear to me from the docs that these things wouldn't work, and I couldn't find anything about the errors I was running in to, which is what led me to open an issue.

It has been my understanding that one goal of Unistyles is for it to be a superset of / drop-in replacement for Stylesheet. That goal really excites me, and that's why I'm bringing up the issues that stem from a lack of parity between Unistyles and Stylesheet. Maybe you aren't aiming for complete parity, in which case it's just a misunderstanding on my part. Either way, I hope you can see how I was led to believe that it was intended to work the same way.

[jpudysz]

All good, we gonna polish it and everyone will be happy 🥳

[davelsan]

Hi! Quick question, would autoProcessImports support glob-like patterns?

For example

module.exports = function (api) {
    api.cache(true)

    return {
        plugins: [
            ['react-native-unistyles/plugin', {
                autoProcessImports: './components/**/*.styles.ts'
            }]
        ]
    }
}

[jpudysz]

Why you need that? Can we pass root folder instead?

[davelsan]

Yes, the root folder is enough. I was incorrectly assuming it's the "styles" files that need processing, but as I understand it's actually the components that import them.

[jpudysz]

Implemented in #525

[jpudysz]

Released in 3.0.0-nightly-20250127.