feat: generate stylesheets when migrating components and modules (#128)

use `--no-style` to skip the generation of [css | scss] files

Author: sebawita

src/migrate-component/_ns-style/__path__/__styleFileName@addNsExtension__

@@ -0,0 +1,5 @@
+/*
+Add your NativeScript specific styles here.
+To learn more about styling in NativeScript see:
+https://docs.nativescript.org/angular/ui/styling
+*/

src/migrate-component/component-info-utils.ts

@@ -15,7 +15,7 @@ export interface ComponentInfo {
   modulePath: string;
   componentPath: string;
   componentHtmlPath: string;
-  // componentStylePath: string;
+  componentStylePath: string;
 }
 
 let projectSettings: AngularProjectSettings;
@@ -33,11 +33,14 @@ export const parseComponentInfo = (options: MigrateComponentSchema) => (tree: Tr
   const componentPath = findComponentPath(className, modulePath, options, tree);
   const componentHtmlPath = findTemplateUrl(componentPath, className, tree);
 
+  const componentStylePath = findStyleUrl(componentPath, className, tree);
+
   const componentInfo: ComponentInfo = {
     className,
     modulePath,
     componentPath,
-    componentHtmlPath
+    componentHtmlPath,
+    componentStylePath
   }
 
   context.logger.info(`ComponentInfo
@@ -179,3 +182,23 @@ const findTemplateUrl = (componentPath: string, componentClassName: string, tree
   }
 }
 
+const findStyleUrl = (componentPath: string, componentClassName: string, tree: Tree): string => {
+  const source = getSourceFile(tree, componentPath);
+
+  const node = findDecoratorPropertyNode(source, componentClassName, 'Component', 'styleUrls');
+  if (node === null) {
+    return '';
+  }
+
+  if (ts.isArrayLiteralExpression(node) && node.elements.length > 0) {
+    const stylePath = (node.elements[0] as ts.StringLiteral).text;
+
+    return join(
+      dirname(componentPath),
+      stylePath
+    );
+  }
+
+  return '';
+}
+

src/migrate-component/index.ts

@@ -9,6 +9,7 @@ import {
   branchAndMerge,
   mergeWith,
   SchematicsException,
+  noop,
 } from '@angular-devkit/schematics';
 import { InsertChange } from '@schematics/angular/utility/change';
 import { addDeclarationToModule } from '@schematics/angular/utility/ast-utils';
@@ -40,6 +41,9 @@ export default function(options: MigrateComponentSchema): Rule {
     (tree: Tree, context: SchematicContext) =>
       addNsFiles(componentInfo, options)(tree, context),
 
+    (tree: Tree, context: SchematicContext) =>
+      addNsStyle(componentInfo, options)(tree, context),
+
     (tree: Tree) =>
       addComponentToNsModuleProviders(componentInfo, options)(tree)
   ]);
@@ -104,3 +108,23 @@ or if you just want to update the component without updating its module, then re
   );
   tree.commitUpdate(recorder);
 }
+
+const addNsStyle = (componentInfo: ComponentInfo, options: MigrateComponentSchema) => (tree: Tree, context: SchematicContext) => {
+  if (!componentInfo.componentStylePath || !options.style) {
+    return noop;
+  }
+
+  context.logger.info('Adding {N} StyleSheet');
+
+  const templateOptions = {
+    path: dirname(componentInfo.componentHtmlPath),
+    styleFileName: basename(componentInfo.componentStylePath),
+    
+    addNsExtension: (path: string) => addExtension(path, extensions.ns),
+  };
+
+  const templateSource = apply(url('./_ns-style'), [
+      template(templateOptions)
+  ]);
+  return branchAndMerge(mergeWith(templateSource))(tree, context);
+}

src/migrate-component/index_spec.ts

@@ -29,6 +29,7 @@ describe('Migrate component schematic', () => {
         const options: MigrateComponentOptions = {
             project,
             name: componentName,
+            style: true
         };
         const htmlComponentPath = `/src/app/${componentName}/${componentName}.component.html`;
         const xmlComponentPath = `/src/app/${componentName}/${componentName}.component.tns.html`;
@@ -70,6 +71,7 @@ describe('Migrate component schematic', () => {
             project,
             name: componentName,
             module: moduleName,
+            style: true
         };
         const htmlComponentPath = `/src/app/${componentName}/${componentName}.component.html`;
         const xmlComponentPath = `/src/app/${componentName}/${componentName}.component.tns.html`;

src/migrate-component/schema.d.ts

@@ -19,7 +19,10 @@ export interface Schema {
   * Notifies us that the component doesn't belong to any module.
   */
   skipModule?: boolean;
-  
+  /**
+   * Specifies whether stylesheets should be generated.
+   */
+  style: boolean;
   nsext?: string;
   webext?: string;
   /**

src/migrate-component/schema.json

@@ -22,6 +22,10 @@
     "skipModule": {
       "type": "boolean"
     },
+    "style": {
+      "type": "boolean",
+      "default": true
+    },
     "nsext": {
       "type": "string"
     },

src/migrate-module/index.ts

@@ -37,7 +37,7 @@ export default function(options: MigrateModuleSchema): Rule {
 
     addModuleFile(options.name, options.project),
 
-    (tree, context) => migrateComponents(moduleInfo, options.project)(tree, context),
+    (tree, context) => migrateComponents(moduleInfo, options)(tree, context),
     migrateProviders()
   ]);
 }
@@ -55,7 +55,7 @@ const addModuleFile =
         common: true,
       })(tree, context);
 
-const migrateComponents = (moduleInfo: ModuleInfo, project: string) => {
+const migrateComponents = (moduleInfo: ModuleInfo, options: MigrateModuleSchema) => {
   const components = moduleInfo.declarations.filter(d => d.name.endsWith('Component'));
 
   return chain(
@@ -64,7 +64,8 @@ const migrateComponents = (moduleInfo: ModuleInfo, project: string) => {
         name: component.name,
         modulePath: moduleInfo.modulePath,
         nsext,
-        project,
+        project: options.project,
+        style: options.style
       }
       return schematic<MigrateComponentSchema>('migrate-component', convertComponentOptions);
     }),

src/migrate-module/index_spec.ts

@@ -19,6 +19,7 @@ describe('Migrate module Schematic', () => {
   const defaultOptions: MigrateModuleOptions = {
     name: moduleName,
     project,
+    style: true
   };
   const nsModulePath = '/src/app/admin/admin.module.tns.ts';
   const webModulePath = '/src/app/admin/admin.module.ts';

src/migrate-module/schema.d.ts

@@ -7,6 +7,10 @@ export interface Schema {
   * Specifies the module path.
   */
   modulePath?: string;
+  /**
+  * Specifies whether stylesheets should be generated for all components.
+  */
+  style: boolean;
   nsext?: string;
   /**
   * Allows specification of the project to be updated

src/migrate-module/schema.json

@@ -12,6 +12,10 @@
       "type": "string",
       "alias": "p"
     },
+    "style": {
+      "type": "boolean",
+      "default": true
+    },
     "nsext": {
       "type": "string"
     },