[Feature] Added feature to allow users to select preferred styling la…

…nguage

plop-templates/component_js.hbs

@@ -1,6 +1,7 @@
 import { getPlayById } from 'meta/play-meta-util';
 
 import PlayHeader from 'common/playlists/PlayHeader';
+import './{{pascalCase name}}.{{styling}}';
 
 function {{pascalCase name}}(props) {
  // Do not remove the below lines. 

plop-templates/component_ts.hbs

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { getPlayById } from 'meta/play-meta-util';
 
 import PlayHeader from 'common/playlists/PlayHeader';
+import './{{pascalCase name}}.{{styling}}';
 
 function {{pascalCase name}}(props:any) {
  // Do not remove the below lines. 

plop-templates/style_css.hbs

@@ -0,0 +1 @@
+/* enter stlyes here */

plop-templates/style_scss.hbs

@@ -0,0 +1 @@
+/* enter stlyes here */

plopfile.js

@@ -33,6 +33,12 @@ module.exports = plop => {
  message: 'Language to be used (javascript/typescript):',
  choices: ['js', 'ts']
  },
+ {
+ type: 'list',
+ name: 'styling',
+ message: 'Styling to be used (css/scss):',
+ choices: ['css', 'scss']
+ },
  {
  type: 'list',
  name: 'level',
@@ -71,6 +77,11 @@ module.exports = plop => {
  path: 'src/plays/{{generateFolderName name}}/{{pascalCase name}}.{{language}}x',
  templateFile: 'plop-templates/component_{{language}}.hbs',
  },
+ {
+ type: 'add',
+ path: 'src/plays/{{generateFolderName name}}/{{pascalCase name}}.{{styling}}',
+ templateFile: 'plop-templates/style_{{styling}}.hbs',
+ },
  {
  type: 'add',
  path: 'src/plays/{{generateFolderName name}}/Readme.md',