[Feature]: adding CSS options like Postcss and CSS in JS

[anikethsaha]

As this project is on a way towards becoming more flexible and customizable. Its pretty good to give the user an option to use any of the modern + classical styling options Planning to have styling options using the following libraries

• Modern CSS using Postcss
• CSS Modules ( Postcss-css-module or css-loader ) by @wincentrtz

CSS IN JS

• Emotion
• Styled-Component by @wincentrtz
• aphrodite
• linaria
• any other if you want to add Classical Styling Make a way for usual styling using stylesheet and linking it to the html can be done too

Can add all or any or none 😁

---

Note, as of v1, these features will be implemented as addons which can be added using mern.json config file, to support the implementation of these addons, after you make changes in your fork, I will be submitting a PR in your fork with the support of making it configurable with mern.json, so please do let me know once you are done with your changes. Try to avoid making changes in the core part of the project and keep it as minimal as possible. like if it's a CSS-in-JS library addition, make changes in the hello component and add the required dependencies you need.

[wincentrtz]

Hello @anikethsaha

I want to help for CSS IN JS Task

Is it still available?

[anikethsaha]

Awesome. Yeah it's still available. Which library you are going to add?

[wincentrtz]

I want to add Styled Component @anikethsaha

Actually this is my first open source contribution. Can u guide me here?

[anikethsaha]

That's great. You can fork this project, clone it to your pc and run npm install Then create a new branch using git checkout -b [your-branch-name] You can add any name to your branch. Like feat/styled-component Now you have your project setup. Now install the required libraries like styled-component And make ur changes Just try to add styles for the hello.jsx component. Ping me on Twitter if you have any doubts : https://twitter.com/anik220798

[wincentrtz]

Okay gonna do it now

[wincentrtz]

Hi @anikethsaha

I have finished it, that means i can make a pull request right?

[anikethsaha]

Woo...that was fast ⏩ Yeah you can raise a Pull request now ! Make sure all the tests are running !

[anikethsaha]

you have to push it in your fork from your local machine ! use this command git push origin <your-branch-name> It will work if you have cloned your fork ! Please let me know if you are facing any problem

[wincentrtz]

Done it @anikethsaha Please check it on #114

[wincentrtz]

Thanks for ur help @anikethsaha

Feel free to chat me if you need some help

[anikethsaha]

Yeah sure ! 😃

[anikethsaha]

Hey ! @wincentrtz Actually I wanted to add those styling or any extra stuff as a pluggable thing like the user can get options or choose from any of these What do you think about how can we achieve that by keeping minimum work!

I thought of making different branches for each task

[wincentrtz]

If you create a lot of branches, it's going to be hard to maintain it. For example, you are making some of the style branches. Then you are using graphql or axios or some 3rd party again and create their own branches. It's going to be difficult for the developer to combine every single dependency that has been separated into its own branch.

I think we can create a lot of custom hooks and for example, you can see this: https://github.com/styled-components/styled-components/issues/2342 By using it we can give a lot of tools for developer that has been using this code to choose what they want because we have prepared it.

It will make our code cleaner and it can be scaled too.

[anikethsaha]

Yeah, branches are not a good option. I am working on creating a config file for the project. keep an eye on v1 branch. Will push some new changes soon

[manas2297]

is the issue open? I would like to help

[anikethsaha]

Yeah it's open but need a little tweak to make it configurable with the v1. Please dm me on https://twitter.com/anik220798 and I will tell you how to make it supportable with mern.json

[anikethsaha]

@manas2297 I guess you can work on any of the remaining options. From here https://github.com/anikethsaha/mern/issues/107#issue-502975601

[manas2297]

@anikethsaha tell me how to configure it locally

[anikethsaha]

@manas2297, after cloning it, simply run npm install and that's it. You can work on a separate branch to keep the master safe

---

Also, for this particular issue, please try to avoid touching the core part, like if you want to add any library for css-in-js, simply add it in the src/client/components/hello . To make it configurable, what I will do is, After you implemented everything, I need to do some copy-paste stuff and writing a script in scripts folder. I will put a PR in your fork with these changes. Please dm me on twitter or anywhere you want, I will you in detail how things gonna take place.

[saurabsalhotra]

Hi was this pull request closed? Is this still available?

[rehanrawat]

Hi! Can I work on this issue?

[0xClint]

Hello I want to contribute.