feat(core): introduce styling service

projects/core/src/public-api.ts

@@ -3,3 +3,4 @@ export * from './fast-iterable-differ/index';
 export * from './iterable-differs/index';
 export * from './key-value-differs/index';
 export * from './renderer-extension/index';
+export * from './styling/index';

projects/core/src/styling/README.md

@@ -0,0 +1,34 @@
+# Styling
+
+Styling utility.
+
+## Type
+
+**Service**
+
+## Provenance
+
+None.
+
+## NgModule
+
+`@angular-contrib/core#ContribStylingModule`
+
+## Usage
+
+```typescript
+@Component()
+class MyComponent implements OnDestroy {
+  private disposeGlobalStyle: () => void;
+
+  constructor(
+    styling: Styling,
+  ) {
+    this.disposeGlobalStyle = styling.addGlobalStyle(`body { color: red; }`);
+  }
+
+  ngOnDestroy(): void {
+    this.disposeGlobalStyle();
+  }
+}
+```

projects/core/src/styling/index.ts

@@ -0,0 +1,2 @@
+export * from './styling';
+export * from './styling.module';

projects/core/src/styling/styling.module.ts

@@ -0,0 +1,7 @@
+import { NgModule } from '@angular/core';
+import { Styling } from './styling';
+
+@NgModule({
+  providers: [Styling],
+})
+export class ContribStylingModule {}

projects/core/src/styling/styling.spec.ts

@@ -0,0 +1,29 @@
+import { DOCUMENT } from '@angular/common';
+import { TestBed } from '@angular/core/testing';
+import { Styling } from './styling';
+
+describe('Styling', () => {
+  let service: Styling;
+
+  beforeEach(() => {
+    service = TestBed.get(Styling);
+  });
+
+  it('should add global style', () => {
+    const document: Document = TestBed.get(DOCUMENT);
+    const previousLength = document.head.childNodes.length;
+
+    const dispose = service.addGlobalStyle('body { color: red; }');
+
+    const length = document.head.childNodes.length;
+    expect(length).toBe(previousLength + 1);
+
+    const lastChild = document.head.childNodes[length - 1];
+    expect(lastChild instanceof HTMLStyleElement).toBe(true);
+
+    dispose();
+
+    const postDisposeLength = document.head.childNodes.length;
+    expect(postDisposeLength).toBe(previousLength);
+  });
+});

projects/core/src/styling/styling.ts

@@ -0,0 +1,29 @@
+import { Injectable, Renderer2, Inject, RendererFactory2 } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class Styling {
+  private renderer: Renderer2;
+
+  constructor(
+    rendererFactory: RendererFactory2,
+    @Inject(DOCUMENT) private document: any,
+  ) {
+    this.renderer = rendererFactory.createRenderer(null, null);
+  }
+
+  addGlobalStyle(style: string): () => void {
+    const styleElement = this.renderer.createElement('style');
+    this.renderer.setAttribute(styleElement, 'type', 'text/css');
+    this.renderer.setProperty(styleElement, 'textContent', style);
+
+    const doc = this.document as Document;
+    this.renderer.appendChild(doc.head, styleElement);
+
+    return () => {
+      this.renderer.removeChild(doc.head, styleElement);
+    };
+  }
+}