[Feature] Added feature to allow users to select preferred styling lang

[naiknareshh]

First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

Description

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

This feature allows user to select preferred styling language while creating the play. an empty 'css' or 'scss' file will be automatically added in their play directory based on the selection. No dependencies were added for this change.

Fixes #205

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.

1. Create new plays and alternatively select 'css' and 'scss' when asked for 'Styling to be used (css/scss):'
2. Validate if expected file is getting created in your play directory
3. Validate that expected file type is getting imported in your JSX file

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
react-play	✅ Ready (Inspect)	Visit Preview	May 21, 2022 at 6:06AM (UTC)

[naiknareshh]

This is Ready for Review :)

[atapas]

Thanks @naiknareshh for picking this up.

Review comments given.

If you could post some screenshots of your testing would be great.

Additionally, you need to update the CREATE PLAY Read me file to include this option and change the screenshot there. Please check https://github.com/atapas/react-play/blob/main/CREATE-PLAY.md#%EF%B8%8F-steps-to-create-a-play

[naiknareshh]

Testing Steps

Step 1: Validate 'Style to be used' question is queued up as expected

Step 2: Validate the files are getting created as expected and without any errors in the console

Step 3: Validate proper import statement is added in the JSX file

Step 4: Add some styles to some existing element

Step 5: Validate the styles are reflected properly on the play without any issues

[naiknareshh]

@atapas All comments have been incorporated, please review and let me know if there is anything.

[atapas]

@naiknareshh Looks good to me

[atapas]

@all-contributors please add @naiknareshh for Code

[allcontributors]

@atapas

I've put up a pull request to add @naiknareshh! 🎉