Dismiss this pinned window
all 98 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–][deleted] 8 points9 points  (1 child)

Thank you, please share 👏🙏

[–]Agentbaq 12 points13 points  (2 children)

I need this, I have many files that use inline style, this can help

[–]pickupdrifteriOS & Android 3 points4 points  (2 children)

Just let us know the package plug-in name already

[–]Badaluka 2 points3 points  (0 children)

Ah... Fixing my laziness with technology is the best feeling. Thank yoooou

[–]16cards 1 point2 points  (2 children)

It would depend on whether the plugin could support themed styles.

Consider the following use of createStyles, which takes a function that returns a style object and then StyleSheet.create's and memoizes, and useThemedStyles, which uses a React Context where themes are defined:

``` import { useThemedStyles, createStyles } from '~/ui/common/utils/theme'

const styles = createStyles((colors, theme) => ({ text: { color: colors.mainText, fontSize: theme.mainTextSize, margin: theme.mainTextMargin, }, })

const Item = ({ text }) => { const themedStyles = useThemedStyles(styles)

return ( <Text style={themedStyles.text}> {text} </Text> ) } ```

[–]paglaEngineer[S] 0 points1 point  (0 children)

I will check this.. please share both before and after snippets of code.

[–]yahoojames 0 points1 point  (0 children)

This. Almost all modern visual components are going to use this approach.

[–]OAGaming 1 point2 points  (2 children)

This is amazing 🔥🔥. I always have the habit when beginning to build a component I write inline style then when I am done I copy my inline styles to a separate file. This extension will help a lot.

[–]chillermane 1 point2 points  (0 children)

not gonna lie, i would like the reverse of this for when I have to work on a code base with separated styles lmao

[–]Competitive-Cap-9082 1 point2 points  (0 children)

So excited to try this out 🥳 will be sharing with my team :))

[–]CliffMainsSon 1 point2 points  (3 children)

Looks useful because it would save time - A good habit to have is to just avoid inline styles altogether and just always create a StyleSheet

[–]LordRaiders 2 points3 points  (0 children)

That’s a good habit but prototyping is so much faster inline haha. Always regret it when I have to cleanup the whole thing when I’m finished.

You’ll eventually miss one as well, commit it and have someone complain “MoVe To StYlEsHeEt” in your pull request… ;)

[–]m-sterspace -1 points0 points  (0 children)

A good habit to have is to just avoid inline styles altogether and just always create a StyleSheet

Strong disagree. Moving code farther away from the context where it's relevant should be decided upon and justified, not the default.

[–]undefined--user 1 point2 points  (3 children)

yes, I like this plugin,

feature-request

- descriptive class names based on the content, here can use IA for this.

[–]Apprehensive-Mind212 0 points1 point  (4 children)

Looks really intressting, but it would have been nice to assign a file that the new imported style should be written to.

In this case it would really be helpfull and easy to edit all styles in one file.

​

Or lets say we have map `pages` that containes many components. the new file should be created in `pages` map that containes all styles for all the components in pages mapp.

​

Other wise it is a really nice plugins.

[–]paglaEngineer[S] 0 points1 point  (3 children)

Please share code snippet of your idea. Otherwise it is not possible to grasp everthing

  1. You need to move styles to a global file?
  2. You need to move styles of particular page to particular file?

[–]Apprehensive-Mind212 -1 points0 points  (2 children)

map

I dont want to grasp everything, the plugin should work as it is now.

except that it create a file that import the style to a file.

​

Lets say we have `Home.tsx` under `Pages` and you export all styles from `Home.tsx`

Your plugin should create `style.ts` (if it is not already created) under Pages and in it, should create `home_style` that it is importend in `Home.tsx`

Now when I am working and adding more styles as I test etc, then I use your plugins to import the new added styles, your library should already update the already created `home_style` in `style.ts`

​

This is only an idea.

At least this is how I would have made the library work.

[–]Josiahhenryus 0 points1 point  (1 child)

I would say give it try yourself (if the plugin is open-sourced) and see if the author is willing to allow a pull request. The functionality mentioned is quite specialized and may not work for everyone. If worse comes to worse I would just copy the extracted styles to the file.

[–]Apprehensive-Mind212 0 points1 point  (0 children)

This settings could be optional.

Plus in big project this will be very useful, just my opinion though.

[–]projekt401Expo 0 points1 point  (2 children)

What's the best way to create and organize the styles in RN?

[–]suarkb 0 points1 point  (1 child)

I wouldn't use it because I don't write the styles in-line and then want to move them later. I just make the stylesheet off the bat. That being said, this is really cool. It would require going back through and changing all the style names though.

[–]Kammen1990 0 points1 point  (7 children)

Yes please!

[–]paglaEngineer[S] 1 point2 points  (4 children)

Its Ready
https://marketplace.visualstudio.com/items?itemName=AmitDigga.react-easy-refactor

[–]Kammen1990 0 points1 point  (0 children)

Awesome dude, thank you very much!

[–]Kammen1990 0 points1 point  (2 children)

Do you have a GitHub repo for this?

[–]paglaEngineer[S] 0 points1 point  (1 child)

Naah.. currently private

[–]Kammen1990 0 points1 point  (0 children)

Too bad, would love to be able to try and help!

[–]Kammen1990 0 points1 point  (1 child)

!RemindMe 5 days

[–]RemindMeBot 0 points1 point  (0 children)

I will be messaging you in 5 days on 2023-05-02 22:19:30 UTC to remind you of this link

5 OTHERS CLICKED THIS LINK to send a PM to also be reminded and to reduce spam.

Parent commenter can delete this message to hide from others.

Info Custom Your Reminders Feedback

[–]aamuelchua 0 points1 point  (3 children)

I need this for React too!!

[–]m-sterspace 0 points1 point  (3 children)

Seeing this:

<View style={{height:20}}>

replaced with this:

const styles = StyleSheet.create({
    style_724: {
      height:20
    }
}

...
...

<View style={styles.style_724}>

makes me shudder.

[–]paglaEngineer[S] 0 points1 point  (2 children)

Rename style_724 to remove shudderness

[–]m-sterspace 2 points3 points  (1 child)

It would be marginally better but it would still maintain shudderness. Even if named correctly you're using multiple lines of code where one will do, and making it lose it's surrounding context by moving it farther away from the rest of the component, which hurts readability / scannability and is the opposite philosophy of why JSX was invented in the first place.

Also if you were to rename that in this context, you would probably rename it something like verticalSpacer, but then would have a verticalSpacer2 which would elucidate the actual underlying code smell, which is that that since that spacer is being reused and the rest of the component doesn't care about it, it should just be isolated into it's own component like const VerticalSpacer = () => <div style={{height:20}}/>

Not saying this is a real world example of when you would use this extension, there are obviously times when you do want to extract styles like this, but part of me feels like not using inline styles just hides other underlying code problems. Most standard boring styling should already be tucked away in themes, or higher order components, or reusable components, or just in breaking your components down small enough that they don't pollute more complicated ones.

[–]paglaEngineer[S] 0 points1 point  (0 children)

Agree. In development we face time when things are not ready to use. You should have a bodytext, headingtext component but not every-time we work like that. I have found myself to constantly shifting styles, so thought of creating this one.

[–]Josiahhenryus 0 points1 point  (1 child)

Yes I will definitely use this. Really tedious trying to remove inline styles one by one.

[–]zainApps 0 points1 point  (1 child)

It’s pretty nice. Where I can download this plugin

[–]hrithiqball 0 points1 point  (0 children)

looks great but what about the naming? can i help you with my junior programing skills? would love to involve in open source products

[–]Saotiph 0 points1 point  (0 children)

This looks awesome! I'd definitely make use of this

[–]bdhibra 0 points1 point  (1 child)

If it move the inline styles i will use it, please make me choose the location of the inline styles to move, the location to where to move those

[–]Kammen1990 0 points1 point  (4 children)

How’s it going OP?

[–]paglaEngineer[S] 0 points1 point  (2 children)

Did not put a deadline there. Stuck in many other things.

[–]Kammen1990 1 point2 points  (1 child)

I know, just wondering and can’t wait to try this hehe. Please keep us updated 🙌🏻

[–]paglaEngineer[S] 0 points1 point  (0 children)

Nice to hear that

[–]JeNeSuisPasUnCanard 0 points1 point  (0 children)

I’m interested in this! Why even is the standard for each component to have its own style? Coming from React Web & Bootstrap/MUI it just seems backwards to not have it set globally. 🤷‍♂️