Roadmap (v1.0.0)

[z0al]

What is this?

In this issue, I want to provide some context and share what I have in mind about the future of styled.macro.

It should be made clear that I'm currently experimenting with this library in a private app. My focus is to know what works in practice and what doesn't, explore the limitations, and hopefully come up with ways to address them.

If you are already using styled.macro in a project then I'd love to hear your feedback too. Please either comment on this issue or create a new one and let's have a chat.

Todos

• Accept styles as a string in addition to the current array syntax. (available since v0.9.0)

  Example:

  styled('text-lg text-black dark:text-white', variants);

• TypeScript autocompletion (>= v4.1). It should work at least for the default theme

• Export styleOf helper
  It's similar to styled but it returns the style object directly. It should make it easier to pass styles to props like textStyle, containerStyle ...etc. It will also throw if you passed a style that results in a props e.g. numberOfLines

  Example:

  import { Flatlist } from 'react-native';
  import { styleOf } from 'react-native-styled.macro';
  
  // Instead of `styled(...).style`
  <Flatlist {...props} columnWrapperStyle={styleOf('flex-1 px-4')} />;

• Export theme helper
  Enables accessing theme object directly.

  Example:

  import { theme } from 'react-native-styled.macro';
  
  theme() // { /* the full theme object */}
  theme('colors.gray.700') //  #hex

• Custom theming

  The user should be able to define styled.config.js like this:

  module.exports = {
  	theme: (defaultTheme: Theme) => {
  		return {
  			...defaultTheme,
  			// ... custom stuff
  		};
  	},
  };

• Custom plugins

  The user should be able to add additional style generators (i.e. plugins) via styled.config.js:

  function myPlugin(theme: Theme){
    return {
      'my-style' {
        paddingTop: theme.padding['10']
      }
    }
  }
  
  module.exports = {
    theme: (theme: Theme) => theme,
    plugins: [ myPlugin ]
  };

• Support missing styles

  • Box Shadow
  • Font family
  • Reset helpers for width & height (i.e. w-auto & h-auto). (add w-auto and h-auto #68)

• Review default theme style values. Currently, they mostly follow Tailwind CSS but it may make sense to revisit them to be more useful for React Native Apps.

• Proper documentation and FAQs (and ideally, a docusaurus.io website)

• TBD. Comment below if you have something in mind.

[jeffreyyoung]

Thanks for the great library! One possible default theme addition I would want is a "w-null" style which would resolve to { width: null }. The use case of the "w-null" style would be to override previously set static sizes so that the width can grow naturally. I'd be happy to add it if you think it makes sense!

[z0al]

@jeffreyyoung great suggestion. Would that be the equivalent of w-auto in Tailwind CSS? If yes, then maybe we can call it w-auto instead. The same could be said about the height too, I think.

I added that to the list of todos above but PRs are welcome. To add it we need to adjust the default theme and update docs & Jest Snapshots.

the "w-null" style would be to override previously set static sizes so that the width can grow naturally

Finally, TBH, I don't know if null is the correct value. Do you have a link to double-check?

[jeffreyyoung]

@z0al Yup! w-auto is exactly what I'm looking for! I just checked the docs and it looks like "auto" is the correct value to use. It looks like the stylesheet api will accept null/undefined as a value, and doing so will reset that attribute to the default style, but since the default style is "auto" it makes sense to just use that!

[teovillanueva]

Hey! Is this roadmap updated? Me and my team are going to use this package. if help is needed, we can help!

[z0al]

Hi @teovillanueva . Yes it's updated. I haven't had the time to work on this lately. PRs are always welcome. If you or your team can pick up some items from the roadmap then go for it.

[z0al]

Closing this as I don't plan to work on it anymore.

The ecosystem has changed a lot over the past couple of months and there are so many new great solutions out there and I don't use Tailwind in my personal projects anymore.

This project's main selling point (and limitation) is its use of a macro to avoid runtime overhead (mainly caused by the RN bridge). With the new architecture, this is less relevant as there is no bridge, thankfully.

On an unrelated note: I will be open sourcing a new SQLite ORM for RN in the upcoming weeks, stay tuned.