add css-preprocessor options to app schematic

ZachJW34 · Jun 4, 2020 · 1effa14 · 1effa14
1 parent be8c796
commit 1effa14
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 4 deletions.
diff --git a/libs/vue-plugin/package.json b/libs/vue-plugin/package.json
@@ -13,6 +13,12 @@
     "@angular-devkit/core": "~9.1.0",
     "@angular-devkit/schematics": "~9.1.0",
     "@vue/cli-shared-utils": "~4.3.0",
-    "rxjs": "6.5.4"
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0",
+    "rxjs": "6.5.4",
+    "sass": "^1.26.3",
+    "sass-loader": "^8.0.2",
+    "stylus": "^0.54.7",
+    "stylus-loader": "^3.0.2"
   }
 }
diff --git a/libs/vue-plugin/src/schematics/application/files/src/app/app.vue.template b/libs/vue-plugin/src/schematics/application/files/src/app/app.vue.template
@@ -88,8 +88,29 @@ export default Vue.extend({
 });
 </script>
 
-<style>
-#app {
+<style<% if (style !== 'css') {  %> lang="<%= style %>"<% } %>>
+<% if (style === 'stylus') { %>#app
+  font-family Avenir, Helvetica, Arial, sans-serif
+  -webkit-font-smoothing antialiased
+  -moz-osx-font-smoothing grayscale
+  text-align center
+  color #2c3e50
+  margin-top 60px
+
+h3
+  margin 40px 0 0
+
+ul
+  list-style-type none
+  padding 0
+
+li
+  display inline-block
+  margin 0 10px
+
+a
+  color #42b983
+<% } else { %>#app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -110,5 +131,5 @@ li {
 }
 a {
   color: #42b983;
-}
+}<% } %>
 </style>
diff --git a/libs/vue-plugin/src/schematics/application/schema.d.ts b/libs/vue-plugin/src/schematics/application/schema.d.ts
@@ -2,6 +2,7 @@ export interface ApplicationSchematicSchema {
   name: string;
   tags?: string;
   directory?: string;
+  style: 'css' | 'scss' | 'less' | 'stylus';
   unitTestRunner: 'jest' | 'none';
   e2eTestRunner: 'cypress' | 'none';
   routing: boolean;

diff --git a/libs/vue-plugin/src/schematics/application/schema.json b/libs/vue-plugin/src/schematics/application/schema.json
@@ -23,6 +23,30 @@
       "description": "A directory where the project is placed",
       "alias": "d"
     },
+    "style": {
+      "description": "The file extension to be used for style files.",
+      "type": "string",
+      "default": "css",
+      "x-prompt": {
+        "message": "Which style format would you like to use?",
+        "type": "list",
+        "items": [
+          { "value": "css", "label": "CSS" },
+          {
+            "value": "scss",
+            "label": "SCSS       [ https://sass-lang.com/documentation/syntax#scss   ]"
+          },
+          {
+            "value": "stylus",
+            "label": "Stylus     [ https://stylus-lang.com                           ]"
+          },
+          {
+            "value": "less",
+            "label": "LESS       [ http://lesscss.org                               ]"
+          }
+        ]
+      }
+    },
     "unitTestRunner": {
       "type": "string",
       "enum": ["jest", "none"],

diff --git a/libs/vue-plugin/src/schematics/application/schematic.spec.ts b/libs/vue-plugin/src/schematics/application/schematic.spec.ts
@@ -13,6 +13,7 @@ describe('application schematic', () => {
     unitTestRunner: 'jest',
     e2eTestRunner: 'cypress',
     routing: false,
+    style: 'css',
     skipFormat: false
   };
 
@@ -100,6 +101,89 @@ describe('application schematic', () => {
     expect(
       tree.readContent('apps/my-app-e2e/src/integration/app.spec.ts')
     ).toContain("'Welcome to Your Vue.js + TypeScript App'");
+
+    expect(tree.readContent('apps/my-app/src/app/app.vue'))
+      .toContain(tags.stripIndent`
+        <style>
+        #app {
+          font-family: Avenir, Helvetica, Arial, sans-serif;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+          text-align: center;
+          color: #2c3e50;
+          margin-top: 60px;
+        }
+        h3 {
+          margin: 40px 0 0;
+        }
+        ul {
+          list-style-type: none;
+          padding: 0;
+        }
+        li {
+          display: inline-block;
+          margin: 0 10px;
+        }
+        a {
+          color: #42b983;
+        }
+        </style>
+      `);
+  });
+
+  describe('--style', () => {
+    it('should generate a scss style block', async () => {
+      const tree = await testRunner
+        .runSchematicAsync('app', { ...options, style: 'scss' }, appTree)
+        .toPromise();
+
+      expect(tree.readContent('apps/my-app/src/app/app.vue')).toContain(
+        '<style lang="scss">'
+      );
+    });
+
+    it('should generate a less style block', async () => {
+      const tree = await testRunner
+        .runSchematicAsync('app', { ...options, style: 'less' }, appTree)
+        .toPromise();
+
+      expect(tree.readContent('apps/my-app/src/app/app.vue')).toContain(
+        '<style lang="less">'
+      );
+    });
+
+    it('should generate a stylus style block', async () => {
+      const tree = await testRunner
+        .runSchematicAsync('app', { ...options, style: 'stylus' }, appTree)
+        .toPromise();
+
+      expect(tree.readContent('apps/my-app/src/app/app.vue'))
+        .toContain(tags.stripIndent`
+          <style lang="stylus">
+          #app
+            font-family Avenir, Helvetica, Arial, sans-serif
+            -webkit-font-smoothing antialiased
+            -moz-osx-font-smoothing grayscale
+            text-align center
+            color #2c3e50
+            margin-top 60px
+
+          h3
+            margin 40px 0 0
+
+          ul
+            list-style-type none
+            padding 0
+
+          li
+            display inline-block
+            margin 0 10px
+
+          a
+            color #42b983
+          </style>
+      `);
+    });
   });
 
   describe('--unitTestRunner none', () => {