Skip to content

Commit

Permalink
Adds inlineStyle() function.
Browse files Browse the repository at this point in the history
Refs #38.

The `inlineStyle()` function simply loads the given input from runfiles and returns it in a `<style />` element. This is useful for inlining styles in specific parts of the document, such as inside a declarative shadow DOM template.
  • Loading branch information
dgp1130 committed Sep 5, 2021
1 parent bfa5f3a commit 4060087
Show file tree
Hide file tree
Showing 6 changed files with 47 additions and 5 deletions.
7 changes: 6 additions & 1 deletion packages/rules_prerender/BUILD.bazel
Original file line number Diff line number Diff line change
Expand Up @@ -168,13 +168,18 @@ jasmine_node_test(
ts_library(
name = "styles",
srcs = ["styles.ts"],
deps = ["//common/models:prerender_annotation"],
deps = [
"//common:fs",
"//common:runfiles",
"//common/models:prerender_annotation",
],
)

ts_library(
name = "styles_test_lib",
srcs = ["styles_test.ts"],
testonly = True,
data = ["//packages/rules_prerender/testdata:styles.css"],
deps = [
":styles",
"@npm//@types/jasmine",
Expand Down
2 changes: 1 addition & 1 deletion packages/rules_prerender/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@

export { PrerenderResource } from 'rules_prerender/common/models/prerender_resource';
export { includeScript } from 'rules_prerender/packages/rules_prerender/scripts';
export { includeStyle } from 'rules_prerender/packages/rules_prerender/styles';
export { includeStyle, inlineStyle } from 'rules_prerender/packages/rules_prerender/styles';
15 changes: 15 additions & 0 deletions packages/rules_prerender/styles.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import * as fs from 'rules_prerender/common/fs';
import { createAnnotation } from 'rules_prerender/common/models/prerender_annotation';
import { resolveRunfile } from 'rules_prerender/common/runfiles';

/**
* Returns a prerender annotation as a string to be included in prerendered
Expand All @@ -12,3 +14,16 @@ export function includeStyle(path: string): string {
});
return `<!-- ${annotation} -->`;
}

/**
* Reads the given CSS file at the provided runfiles path and returns it in a
* `<style />` tag to be inlined in the document.
*/
export async function inlineStyle(path: string): Promise<string> {
const styles = await fs.readFile(resolveRunfile(path), 'utf-8');
return `
<style>
${styles}
</style>
`.trim();
}
24 changes: 21 additions & 3 deletions packages/rules_prerender/styles_test.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,32 @@
import 'jasmine';

import { includeStyle } from 'rules_prerender/packages/rules_prerender/styles';
import { includeStyle, inlineStyle } from 'rules_prerender/packages/rules_prerender/styles';

describe('styles', () => {
describe('includeStyle()', () => {
it('returns a style annotation in an HTML comment', () => {
const annotation = includeStyle('foo/bar/baz.css');

expect(annotation)
.toBe('<!-- bazel:rules_prerender:PRIVATE_DO_NOT_DEPEND_OR_ELSE - {"type":"style","path":"foo/bar/baz.css"} -->');
expect(annotation).toBe(
'<!-- bazel:rules_prerender:PRIVATE_DO_NOT_DEPEND_OR_ELSE - {"type":"style","path":"foo/bar/baz.css"} -->');
});
});

describe('inlineStyle()', () => {
it('resolves to a `<style />` element with the runfiles content of the given file path', async () => {
const styles = await inlineStyle(
'rules_prerender/packages/rules_prerender/testdata/styles.css');
expect(styles).toBe(`
<style>
.foo { color: red; }
</style>
`.trim());
});

it('rejects when the given file path is not found in runfiles', async () => {
await expectAsync(inlineStyle('rules_prerender/does/not/exist.css'))
.toBeRejected();
});
});
});
3 changes: 3 additions & 0 deletions packages/rules_prerender/testdata/BUILD.bazel
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
package(default_visibility = ["//packages/rules_prerender:__pkg__"])

exports_files(["styles.css"])
1 change: 1 addition & 0 deletions packages/rules_prerender/testdata/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.foo { color: red; }

0 comments on commit 4060087

Please sign in to comment.