MOBILE-2902 core: New component for adding style tags

src/components/components.module.ts

@@ -51,6 +51,7 @@ import { CoreIonTabsComponent } from './ion-tabs/ion-tabs';
 import { CoreIonTabComponent } from './ion-tabs/ion-tab';
 import { CoreInfiniteLoadingComponent } from './infinite-loading/infinite-loading';
 import { CoreUserAvatarComponent } from './user-avatar/user-avatar';
+import { CoreStyleComponent } from './style/style';
 
 @NgModule({
     declarations: [
@@ -87,7 +88,8 @@ import { CoreUserAvatarComponent } from './user-avatar/user-avatar';
         CoreIonTabsComponent,
         CoreIonTabComponent,
         CoreInfiniteLoadingComponent,
-        CoreUserAvatarComponent
+        CoreUserAvatarComponent,
+        CoreStyleComponent
     ],
     entryComponents: [
         CoreContextMenuPopoverComponent,
@@ -131,7 +133,8 @@ import { CoreUserAvatarComponent } from './user-avatar/user-avatar';
         CoreIonTabsComponent,
         CoreIonTabComponent,
         CoreInfiniteLoadingComponent,
-        CoreUserAvatarComponent
+        CoreUserAvatarComponent,
+        CoreStyleComponent
     ]
 })
 export class CoreComponentsModule {}

src/components/style/style.ts

@@ -0,0 +1,73 @@
+// (C) Copyright 2015 Martin Dougiamas
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, ElementRef, Input, OnChanges, SimpleChange } from '@angular/core';
+
+/**
+ * Component to add a <style> tag.
+ *
+ * @description
+ * This component will include a <style> tag with some CSS rules that can optionally be pefixed.
+ *
+ * Example:
+ *
+ * <core-style [css]="'p { color: red; }'" prefix=".custom-rules"></core-style>
+ */
+@Component({
+    selector: 'core-style',
+    template: ''
+})
+export class CoreStyleComponent implements OnChanges {
+    @Input() css: string; // CSS rules.
+    @Input() prefix?: string; // Prefix to add to CSS rules.
+
+    constructor(private element: ElementRef) {}
+
+    /**
+     * Component being changed.
+     */
+    ngOnChanges(changes: { [name: string]: SimpleChange }): void {
+        const css = this.prefixCSS(this.css, this.prefix);
+
+        if (this.element && this.element.nativeElement) {
+            this.element.nativeElement.innerHTML = '<style>' + css + '</style>';
+        }
+    }
+
+    /**
+     * Add a prefix to all rules in a CSS string.
+     *
+     * @param {string} css CSS code to be prefixed.
+     * @param {string} prefix Prefix css selector.
+     * @return {string} Prefixed CSS.
+     */
+    protected prefixCSS(css: string, prefix: string): string {
+        if (!css) {
+            return '';
+        }
+
+        if (!prefix) {
+            return css;
+        }
+
+        // Remove comments first.
+        let regExp = /\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm;
+        css = css.replace(regExp, '');
+
+        // Add prefix.
+        regExp = /([^]*?)({[^]*?}|,)/g;
+
+        return css.replace(regExp, prefix + ' $1 $2');
+    }
+}