Merge pull request #13 from IgniteUI/hPopov/fix-issue-12

Adding support for additional global style files

src/LiveEditingManager.ts

@@ -23,7 +23,7 @@ export async function generateLiveEditing(options: ILiveEditingOptions, baseDir
     console.log("-----------------------------------------------------");
     console.log("Starting Live-Editing Generation - for " + baseDir);
 
-    new SharedAssetsGenerator(options.samplesDir).generateSharedAssets();
+    new SharedAssetsGenerator(options).generateSharedAssets();
 
     await new SampleAssetsGenerator(options).generateSamplesAssets()
         .then(console.log)

src/generators/SampleAssetsGenerator.ts

@@ -156,12 +156,27 @@ export class SampleAssetsGenerator {
             let fileContent = fs.readFileSync(path.join(componentFilePath), "utf8");
             let file = new LiveEditingFile(componentFilePath.substr(componentFilePath.indexOf("src")), fileContent, true, COMPONENT_FILE_EXTENSIONS[i], COMPONENT_FILE_EXTENSIONS[i]);
             this._shortenComponentPath(config, file);
+            if(this.options.additionalSharedStyles?.length &&
+               COMPONENT_FILE_EXTENSIONS[i] === COMPONENT_STYLE_FILE_EXTENSION
+               && config.shortenComponentPathBy) this.resolveRelativePathToGlobalStyles(config.shortenComponentPathBy, file);
+
             componentFiles.push(file);
         }
 
         return componentFiles;
     }
 
+    private resolveRelativePathToGlobalStyles(shortenPath: string , stylefile: LiveEditingFile) {
+        let shortenPathToRelative = shortenPath.replace(new RegExp(/\//g),  " ").trim().split(" ").map(() =>"..").join("/") + "/";
+        let importStatements = stylefile.content.match(new RegExp(/@import ("|')([\.\.]{2}\/){2,}[^;]*/g));
+        if(importStatements?.length) {
+            importStatements.forEach(s => {
+                let newRel = s.replace(shortenPathToRelative, "");
+                stylefile.content = stylefile.content.replace(s, newRel);
+            });
+        }
+    }
+
     private _getAdditionalFiles(config: Config): LiveEditingFile[] {
         let additionalFiles = new Array<LiveEditingFile>();
         for (let i = 0; i < config.additionalFiles.length; i++) {

src/generators/SharedAssetsGenerator.ts

@@ -5,6 +5,7 @@ import { LiveEditingFile, SAMPLE_APP_FOLDER, SAMPLE_SRC_FOLDER } from "./misc/Li
 import { SharedAssetsFile } from "./misc/SharedAssetsFile";
 import { SharedAssetsGeneratorArgs } from "./misc/SharedAssetsGeneratorArgs";
 import { DevDependencyResolver } from "../services/DependencyResolver";
+import { ILiveEditingOptions } from "../public";
 const INDEX_FILE_PATH = path.join(process.cwd(), "src/index.html");
 const POLYPFILLS_FILE_PATH = path.join(process.cwd(), "src/polyfills.ts");
 const STYLES_FILE_PATH = path.join(process.cwd(), "src/styles.scss");
@@ -14,7 +15,7 @@ const APP_COMPONENT_SCSS_PATH = path.join(process.cwd(), "src/app/app.component.
 const APP_COMPONENT_TS_PATH = path.join(__dirname, "../templates/app.component.ts.template");
 export class SharedAssetsGenerator {
 
-    constructor(private sampleAssetsDir: string) {
+    constructor(private options: ILiveEditingOptions) {
         console.log("Live-Editing - SharedAssetsGenerator... ");
     }
 
@@ -36,6 +37,12 @@ export class SharedAssetsGenerator {
         let files = new Array<LiveEditingFile>();
         let polyfillsFile = fs.readFileSync(POLYPFILLS_FILE_PATH, "utf8");
 
+        if(this.options.additionalSharedStyles?.length) {
+            this.options.additionalSharedStyles.forEach(fileName => {
+                let filePath =  path.join(process.cwd(), SAMPLE_SRC_FOLDER, fileName);
+                files.push(new LiveEditingFile(SAMPLE_SRC_FOLDER + fileName, fs.readFileSync(filePath, "utf8")))
+            });
+        }
 
         files.push(new LiveEditingFile(SAMPLE_SRC_FOLDER + "index.html", indexFile));
         files.push(new LiveEditingFile(SAMPLE_SRC_FOLDER + "polyfills.ts", polyfillsFile));
@@ -47,6 +54,6 @@ export class SharedAssetsGenerator {
         files.push(new LiveEditingFile(SAMPLE_APP_FOLDER + "app.component.ts", args.appComponentTsFileContent));
 
         let sharedFile = new SharedAssetsFile(files, new DevDependencyResolver().devDependencies);
-        fs.writeFileSync(this.sampleAssetsDir + "shared.json", JSON.stringify(sharedFile));
+        fs.writeFileSync(this.options.samplesDir + "shared.json", JSON.stringify(sharedFile));
     }
 }

src/generators/misc/SharedAssetsGeneratorArgs.ts

@@ -5,15 +5,17 @@ export class SharedAssetsGeneratorArgs {
     public appComponentStylesFileName: string;
     public appComponentStylesFileContent: string;
     public appComponentTsFileContent: string;
+    public additionalStyles: string[];
 
     constructor(stylesFileName: string, stylesFileContent: string,
                 angularJsonFilePath: string, appComponentStylesFileName: string,
-                appComponentStylesFileContent: string, appComponentTsFileContent: string) {
+                appComponentStylesFileContent: string, appComponentTsFileContent: string, additionalStyles?: string[]) {
         this.stylesFileName = stylesFileName;
         this.stylesFileContent = stylesFileContent;
         this.angularJsonFilePath = angularJsonFilePath;
         this.appComponentStylesFileName = appComponentStylesFileName;
         this.appComponentStylesFileContent = appComponentStylesFileContent;
         this.appComponentTsFileContent = appComponentTsFileContent;
+        this.additionalStyles = additionalStyles;
     }
 }

src/public.ts

@@ -81,5 +81,6 @@ export interface ILiveEditingOptions {
         routerPath:string,
         moduleName?: string
     };
+    additionalSharedStyles?:string[];
 }