Add: Sass Support with Generators and CSS Variables

changelog.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.4.0] - 30-04-2019
+### Added
+- Support for Sass using variable maps and reference functions
+- Added Generator prompt to use Sass or CSS
+
 ## [1.3.1] - 17-04-2019
 ### Bug Fixes
 - Fixed issue with typos

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stencil-storybook-wrapper",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "A node module to update a stencil and storybook/html project to make it compatible",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

readme.md

@@ -1,7 +1,7 @@
 # Stencil Storybook Wrapper
 This module provides a wrapper to interoperate stencil created app with storybook. 
 
-It works by hooking into the stencil dev server during development, listenig to the websocket during HMR(Hot Module Replacement) and showing the errors or reloading the stencil generated resources.
+It works by hooking into the stencil dev server during development, listening to the websocket during HMR(Hot Module Replacement) and showing the errors or reloading the stencil generated resources.
 
 During production builds for storybook, the output of the stencil build is moved to the `storybook-static` folder and resources requests updated so that the storybook can be deployed.
 
@@ -13,7 +13,9 @@ Using this with a stencil project already modifed by you could lead to un-necess
 ----
 
 ## Prerequisites
-Create a stencil project of the type __*component*__ using the [getting started docs](https://stenciljs.com/docs/getting-started#starting-a-new-project).
+Create a stencil project of the type __*component*__ using the [getting started docs](https://stenciljs.com/docs/getting-started#starting-a-new-project**.
+
+**Note: If using Sass you will also need [stencil sass](https://www.npmjs.com/package/@stencil/sass) installed.**
 
 ## Installation
 
@@ -109,4 +111,4 @@ The wrapper adds a dev server config object to the `package.json` file. You can
 
 Please raise any issues you have while using this wrapper. Any help would also be appreciated.
 
-### **More updates to come...**
+### **More updates to come...**

source/plop/templates/component/component.scss

@@ -0,0 +1,19 @@
+// TemplateComponent Variable Map
+$template-component-vars: (
+    color: red
+);
+
+// TemplateComponent CSS Variable Reference
+@function template-component-var($name) {
+    @return var(--template-component-#{$name});
+}
+
+.template-component {
+    // Convert Sass Variable Map to CSS Variables
+    @each $key, $value in $template-component-vars {
+        --template-component-#{$key}: #{$value};
+    }
+
+    // TemplateComponent Styles
+    color: template-component-var(color);
+}

source/plop/templates/component/component.tsx

@@ -12,6 +12,6 @@ export class TemplateComponent {
   @Prop() test: string = 'Hello World';
 
   render() {
-    return <div class="template-component">{this.test}</div>;
+    return (<div class="template-component">{this.test}</div>);
   }
 }

source/plopfile.stencil.js

@@ -1,75 +1,120 @@
 module.exports = function(plop) {
-  // create your generators here
-  plop.setGenerator('Component', {
-    description: 'Create a stencil JS component',
-    // array of inquirer prompts
-    prompts: [
-      {
-        type: 'input',
-        name: 'name',
-        message: 'Component Name',
-      },
-    ],
-    // array of actions
-    actions: [
-      // Add all the template files to the dest folder
-      {
-        type: 'add',
-        path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.tsx',
-        templateFile: 'plop/templates/component/component.tsx',
-      },
-      {
-        type: 'add',
-        path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.css',
-        templateFile: 'plop/templates/component/component.css',
-      },
-      {
-        type: 'add',
-        path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.e2e.ts',
-        templateFile: 'plop/templates/component/component.e2e.ts',
-      },
-      {
-        type: 'add',
-        path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.stories.js',
-        templateFile: 'plop/templates/component/component.stories.js',
-      },
-      //   Update all the tempates files with the data
-      {
-        type: 'modify',
-        path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.tsx',
-        pattern: /template-component/g,
-        template: '\{{kebabCase name}}',
-      },
-      {
-        type: 'modify',
-        path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.tsx',
-        pattern: /TemplateComponent/g,
-        template: '\{{pascalCase name}}',
-      },
-      {
-        type: 'modify',
-        path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.e2e.ts',
-        pattern: /template-component/g,
-        template: '\{{kebabCase name}}',
-      },
-      {
-        type: 'modify',
-        path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.css',
-        pattern: /template-component/g,
-        template: '\{{kebabCase name}}',
-      },
-      {
-        type: 'modify',
-        path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.stories.js',
-        pattern: /TemplateComponent/g,
-        template: '\{{pascalCase name}}',
-      },
-      {
-        type: 'modify',
-        path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.stories.js',
-        pattern: /template-component/g,
-        template: '\{{kebabCase name}}',
-      },
-    ],
-  });
+    // create your generators here
+    plop.setGenerator('Component', {
+        description: 'Create a stencil JS component',
+        // array of inquirer prompts
+        prompts: [
+            {
+                type: 'input',
+                name: 'name',
+                message: 'Component Name',
+            },
+            {
+                type: 'confirm',
+                name: 'wantSass',
+                message: 'Do you want to use Sass instead of CSS?'
+            }
+        ],
+        // array of actions
+        actions: function(data) {
+            let actions = [
+                {
+                    type: 'add',
+                    path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.tsx',
+                    templateFile: 'plop/templates/component/component.tsx',
+                },
+                {
+                    type: 'add',
+                    path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.e2e.ts',
+                    templateFile: 'plop/templates/component/component.e2e.ts',
+                },
+                {
+                    type: 'add',
+                    path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.stories.js',
+                    templateFile: 'plop/templates/component/component.stories.js',
+                }
+            ];
+
+            // modifers
+
+            let modifierActions = [
+                {
+                    type: 'modify',
+                    path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.tsx',
+                    pattern: /template-component/g,
+                    template: '\{{kebabCase name}}',
+                },
+                {
+                    type: 'modify',
+                    path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.tsx',
+                    pattern: /TemplateComponent/g,
+                    template: '\{{pascalCase name}}',
+                },
+                {
+                    type: 'modify',
+                    path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.e2e.ts',
+                    pattern: /template-component/g,
+                    template: '\{{kebabCase name}}',
+                },
+                {
+                    type: 'modify',
+                    path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.stories.js',
+                    pattern: /TemplateComponent/g,
+                    template: '\{{pascalCase name}}',
+                },
+                {
+                    type: 'modify',
+                    path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.stories.js',
+                    pattern: /template-component/g,
+                    template: '\{{kebabCase name}}',
+                }
+            ];
+
+            if (data.wantSass) {
+                actions.push(
+                    {
+                        type: 'add',
+                        path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.scss',
+                        templateFile: 'plop/templates/component/component.scss',
+                    },
+                    {
+                        type: 'modify',
+                        path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.scss',
+                        pattern: /template-component/g,
+                        template: '\{{kebabCase name}}',
+                    },
+                    {
+                        type: 'modify',
+                        path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.scss',
+                        pattern: /TemplateComponent/g,
+                        template: '\{{pascalCase name}}',
+                    },
+                    {
+                        type: 'modify',
+                        path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.tsx',
+                        pattern: /template-component.css/g,
+                        template: '\{{kebabCase name}}.scss',
+                    },
+                );
+            } else {
+                actions.push(
+                    {
+                        type: 'add',
+                        path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.css',
+                        templateFile: 'plop/templates/component/component.css',
+                    },
+                    {
+                        type: 'modify',
+                        path: 'src/components/\{{kebabCase name}}/\{{kebabCase name}}.css',
+                        pattern: /template-component/g,
+                        template: '\{{kebabCase name}}',
+                    }
+                );
+            }
+
+            actions = actions.concat(modifierActions);
+
+            return actions;
+        }
+    });
 };