1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | export const supportsAdoptingStyleSheets =
|
13 | ('adoptedStyleSheets' in Document.prototype);
|
14 |
|
15 | export class CSSResult {
|
16 |
|
17 | _styleSheet?: CSSStyleSheet|null;
|
18 |
|
19 | readonly cssText: string;
|
20 |
|
21 | constructor(cssText: string) { this.cssText = cssText; }
|
22 |
|
23 |
|
24 |
|
25 | get styleSheet(): CSSStyleSheet|null {
|
26 | if (this._styleSheet === undefined) {
|
27 |
|
28 |
|
29 | if (supportsAdoptingStyleSheets) {
|
30 | this._styleSheet = new CSSStyleSheet();
|
31 | this._styleSheet.replaceSync(this.cssText);
|
32 | } else {
|
33 | this._styleSheet = null;
|
34 | }
|
35 | }
|
36 | return this._styleSheet;
|
37 | }
|
38 | }
|
39 |
|
40 | const textFromCSSResult = (value: CSSResult) => {
|
41 | if (value instanceof CSSResult) {
|
42 | return value.cssText;
|
43 | } else {
|
44 | throw new Error(
|
45 | `Value passed to 'css' function must be a 'css' function result: ${
|
46 | value}.`);
|
47 | }
|
48 | };
|
49 |
|
50 | export const css =
|
51 | (strings: TemplateStringsArray, ...values: CSSResult[]): CSSResult => {
|
52 | const cssText = values.reduce(
|
53 | (acc, v, idx) => acc + textFromCSSResult(v) + strings[idx + 1],
|
54 | strings[0]);
|
55 | return new CSSResult(cssText);
|
56 | }; |
\ | No newline at end of file |