Updates inlineStyle() to use relative imports with import.meta.

dgp1130 · dgp1130 · commit f098807f0029 · 2023-03-04T18:44:30.000-08:00
Refs #69. This brings `inlineStyle()` into parity with `includeScript()`. Input strings are relative to the file they are imported from. I had to update the CSS import map to drop the workspace name in order to use `wkspRelative()` as is. I think this is ok for now as we don't really have a story for inlining styles from different workspace. Most likely this would be done by using bare imports and inlining files from NPM packages, rather than external workspaces.
diff --git a/README.md b/README.md
@@ -154,7 +154,7 @@ export function renderMyComponent(name: string): string {
         ${includeScript('./my_component.mjs', import.meta)}
 
         <!-- Inline the associated CSS styles, scoped to this shadow root. -->
-        ${inlineStyle('my_workspace/my_component/my_component.css')}
+        ${inlineStyle('./my_component.css', import.meta)}
     </template>
     
     <!-- Other components are placed in light DOM and visible at the \`<slot />\`. -->
diff --git a/examples/declarative_shadow_dom/component.mts b/examples/declarative_shadow_dom/component.mts
@@ -13,7 +13,7 @@ export async function renderComponent(lightDom: string): Promise<string> {
                 ${polyfillDeclarativeShadowDom()}
 
                 <!-- Inline styles to apply them within this shadow root. -->
-                ${inlineStyle('rules_prerender/examples/declarative_shadow_dom/component.css')}
+                ${inlineStyle('./component.css', import.meta)}
 
                 <!-- Shadow DOM content, styled with the associated style
                 sheet. -->
diff --git a/examples/external/component/component.mts b/examples/external/component/component.mts
@@ -11,7 +11,7 @@ export function renderComponent(): string {
 
     ${polyfillDeclarativeShadowDom()}
     ${includeScript('./script.mjs', import.meta)}
-    ${inlineStyle('external/component/style.css')}
+    ${inlineStyle('./style.css', import.meta)}
   </template>
 </my-component>
   `.trim();
diff --git a/examples/multi_page/pages.mts b/examples/multi_page/pages.mts
@@ -29,7 +29,7 @@ function generate(content: string): string {
         <meta charset="utf-8">
 
         ${includeScript('./script.mjs', import.meta)}
-        ${inlineStyle('rules_prerender/examples/multi_page/styles.css')}
+        ${inlineStyle('./styles.css', import.meta)}
     </head>
     <body>
         ${content}
diff --git a/examples/site/about/about.mts b/examples/site/about/about.mts
@@ -57,7 +57,7 @@ export default async function*():
         dignissim quis, venenatis non mi. Curabitur lacinia tincidunt vulputate.
         Proin non vehicula risus, id pharetra lorem.</p>
 
-        ${inlineStyle('rules_prerender/examples/site/about/about.css')}
+        ${inlineStyle('./about.css', import.meta)}
     </template>
 </article>
         `),
diff --git a/examples/site/components/base/base.mts b/examples/site/components/base/base.mts
@@ -20,7 +20,7 @@ export async function baseLayout(
     <head>
         <title>${title}</title>
         <meta charset="utf-8">
-        ${inlineStyle('rules_prerender/examples/site/components/base/base.css')}
+        ${inlineStyle('./base.css', import.meta)}
     </head>
     <body>
         ${renderHeader()}
diff --git a/examples/site/components/footer/footer.mts b/examples/site/components/footer/footer.mts
@@ -11,7 +11,7 @@ export function renderFooter(): string {
             <a href="https://bazel.build/" rel="noopener" target="_blank">Bazel</a> and
             <a href="${repo}" rel="noopener" target="_blank">rules_prerender</a>.
         </div>
-        ${inlineStyle('rules_prerender/examples/site/components/footer/footer.css')}
+        ${inlineStyle('./footer.css', import.meta)}
     </template>
 </footer>
     `.trim();
diff --git a/examples/site/components/header/header.mts b/examples/site/components/header/header.mts
@@ -15,7 +15,7 @@ export function renderHeader(): string {
             </ul>
         </nav>
 
-        ${inlineStyle('rules_prerender/examples/site/components/header/header.css')}
+        ${inlineStyle('./header.css', import.meta)}
     </template>
 </header>
     `.trim();
diff --git a/examples/styles/page.mts b/examples/styles/page.mts
@@ -12,7 +12,7 @@ export default function* (): Generator<PrerenderResource, void, void> {
         <div id="shadowroot">
             <template shadowroot="open">
                 <div id="hello">Hello, World!</div>
-                ${inlineStyle('rules_prerender/examples/styles/styles.css')}
+                ${inlineStyle('./styles.css', import.meta)}
             </template>
         </div>
         <div id="goodbye">Goodbye, World!</div>
diff --git a/examples/testonly/component/component.mts b/examples/testonly/component/component.mts
@@ -10,7 +10,7 @@ export function renderComponent(): string {
         <slot></slot>
 
         ${includeScript('./component_script.mjs', import.meta)}
-        ${inlineStyle('rules_prerender/examples/testonly/component/component_styles.css')}
+        ${inlineStyle('./component_styles.css', import.meta)}
     </template>
     ${renderTransitive()}
 </div>
diff --git a/examples/testonly/page.mts b/examples/testonly/page.mts
@@ -8,7 +8,7 @@ export default function*(): Generator<PrerenderResource, void, void> {
             <head>
                 <title>Testonly</title>
 
-                ${inlineStyle('rules_prerender/examples/testonly/page_styles.css')}
+                ${inlineStyle('./page_styles.css', import.meta)}
             </head>
             <body>
                 <h2>Testonly</h2>
diff --git a/examples/testonly/transitive/transitive.mts b/examples/testonly/transitive/transitive.mts
@@ -8,7 +8,7 @@ export function renderTransitive(): string {
         <img src="/images/transitive.png" />
 
         ${includeScript('./transitive_script.mjs', import.meta)}
-        ${inlineStyle('rules_prerender/examples/testonly/transitive/transitive_styles.css')}
+        ${inlineStyle('./transitive_styles.css', import.meta)}
     </template>
 </div>
     `;
diff --git a/packages/declarative_shadow_dom/README.md b/packages/declarative_shadow_dom/README.md
@@ -73,7 +73,7 @@ export function renderMyComponent(): string {
         <span>Shadow DOM content goes inside the template.</span>
 
         <!-- Inline styles inside the template. -->
-        ${inlineStyle('my_workspace/my_component/my_style.css')}
+        ${inlineStyle('./my_style.css', import.meta)}
     </template>
 
     <span>Light DOM content goes outside the template.</span>
diff --git a/packages/rules_prerender/BUILD.bazel b/packages/rules_prerender/BUILD.bazel
@@ -213,7 +213,9 @@ ts_project(
     visibility = ["//packages/renderer:__subpackages__"],
     deps = [
         ":inline_style_map",
+        ":paths",
         "//common/models:prerender_annotation",
+        "//:node_modules/@types/node",
     ],
 )
 
diff --git a/packages/rules_prerender/css/tests/group/group_test.bzl b/packages/rules_prerender/css/tests/group/group_test.bzl
@@ -13,8 +13,8 @@ def _css_group_test_impl(ctx):
     # Verify that `css_group()` re-exports `DefaultInfo`.
     default_info = analysistest.target_under_test(env)[DefaultInfo]
     expected_files = sets.make([
-        "packages/rules_prerender/css/tests/group/bin1_binary_0/rules_prerender/packages/rules_prerender/css/tests/group/lib1.css",
-        "packages/rules_prerender/css/tests/group/bin2_binary_0/rules_prerender/packages/rules_prerender/css/tests/group/lib2.css",
+        "packages/rules_prerender/css/tests/group/bin1_binary_0/packages/rules_prerender/css/tests/group/lib1.css",
+        "packages/rules_prerender/css/tests/group/bin2_binary_0/packages/rules_prerender/css/tests/group/lib2.css",
     ])
     actual_files = sets.make([file.short_path for file in default_info.files.to_list()])
     asserts.new_set_equals(env, expected_files, actual_files)
@@ -24,12 +24,12 @@ def _css_group_test_impl(ctx):
     import_map = css_import_map.import_map
     asserts.equals(env, 2, len(import_map.items()))
 
-    expected_lib1 = "packages/rules_prerender/css/tests/group/bin1_binary_0/rules_prerender/packages/rules_prerender/css/tests/group/lib1.css"
-    actual_lib1 = import_map["rules_prerender/packages/rules_prerender/css/tests/group/lib1.css"].short_path
+    expected_lib1 = "packages/rules_prerender/css/tests/group/bin1_binary_0/packages/rules_prerender/css/tests/group/lib1.css"
+    actual_lib1 = import_map["packages/rules_prerender/css/tests/group/lib1.css"].short_path
     asserts.equals(env, expected_lib1, actual_lib1)
 
-    expected_lib2 = "packages/rules_prerender/css/tests/group/bin2_binary_0/rules_prerender/packages/rules_prerender/css/tests/group/lib2.css"
-    actual_lib2 = import_map["rules_prerender/packages/rules_prerender/css/tests/group/lib2.css"].short_path
+    expected_lib2 = "packages/rules_prerender/css/tests/group/bin2_binary_0/packages/rules_prerender/css/tests/group/lib2.css"
+    actual_lib2 = import_map["packages/rules_prerender/css/tests/group/lib2.css"].short_path
     asserts.equals(env, expected_lib2, actual_lib2)
 
     return analysistest.end(env)
@@ -80,12 +80,12 @@ def _css_group_fails_with_conflicting_maps_test_impl(ctx):
     asserts.expect_failure(env, "Found duplicate CSS import path in `_css_group()`.")
     # Look for conflicting import path.
     asserts.expect_failure(env,
-        "rules_prerender/packages/rules_prerender/css/tests/group/conflicting_lib.css")
+        "packages/rules_prerender/css/tests/group/conflicting_lib.css")
     # Look for conflicting file paths.
     asserts.expect_failure(env,
-        "packages/rules_prerender/css/tests/group/conflicting_bin1_binary_0/rules_prerender/packages/rules_prerender/css/tests/group/conflicting_lib.css")
+        "packages/rules_prerender/css/tests/group/conflicting_bin1_binary_0/packages/rules_prerender/css/tests/group/conflicting_lib.css")
     asserts.expect_failure(env,
-        "packages/rules_prerender/css/tests/group/conflicting_bin2_binary_0/rules_prerender/packages/rules_prerender/css/tests/group/conflicting_lib.css")
+        "packages/rules_prerender/css/tests/group/conflicting_bin2_binary_0/packages/rules_prerender/css/tests/group/conflicting_lib.css")
 
     return analysistest.end(env)
 
diff --git a/packages/rules_prerender/css/tests/import_map/import_map_test.bzl b/packages/rules_prerender/css/tests/import_map/import_map_test.bzl
@@ -12,12 +12,12 @@ def _import_map_test_impl(ctx):
     import_map = css_import_map.import_map
     asserts.equals(env, 2, len(import_map.items()))
 
-    expected_foo = "packages/rules_prerender/css/tests/import_map/bin_binary_0/rules_prerender/packages/rules_prerender/css/tests/import_map/foo.css"
-    actual_foo = import_map["rules_prerender/packages/rules_prerender/css/tests/import_map/foo.css"].short_path
+    expected_foo = "packages/rules_prerender/css/tests/import_map/bin_binary_0/packages/rules_prerender/css/tests/import_map/foo.css"
+    actual_foo = import_map["packages/rules_prerender/css/tests/import_map/foo.css"].short_path
     asserts.equals(env, expected_foo, actual_foo)
 
-    expected_bar = "packages/rules_prerender/css/tests/import_map/bin_binary_0/rules_prerender/packages/rules_prerender/css/tests/import_map/bar.css"
-    actual_bar = import_map["rules_prerender/packages/rules_prerender/css/tests/import_map/bar.css"].short_path
+    expected_bar = "packages/rules_prerender/css/tests/import_map/bin_binary_0/packages/rules_prerender/css/tests/import_map/bar.css"
+    actual_bar = import_map["packages/rules_prerender/css/tests/import_map/bar.css"].short_path
     asserts.equals(env, expected_bar, actual_bar)
 
     return analysistest.end(env)
@@ -52,8 +52,8 @@ def _import_map_from_different_packages_test_impl(ctx):
 
     # Import path contains `subpackage` because that's what the user would import.
     # But the actual file it points to uses the same name in the `css_binaries()` package.
-    expected_lib = "packages/rules_prerender/css/tests/import_map/different_packages_bin_binary_0/rules_prerender/packages/rules_prerender/css/tests/import_map/subpackage/lib.css"
-    actual_lib = import_map["rules_prerender/packages/rules_prerender/css/tests/import_map/subpackage/lib.css"].short_path
+    expected_lib = "packages/rules_prerender/css/tests/import_map/different_packages_bin_binary_0/packages/rules_prerender/css/tests/import_map/subpackage/lib.css"
+    actual_lib = import_map["packages/rules_prerender/css/tests/import_map/subpackage/lib.css"].short_path
     asserts.equals(env, expected_lib, actual_lib)
 
     return analysistest.end(env)
diff --git a/packages/rules_prerender/styles.mts b/packages/rules_prerender/styles.mts
@@ -1,21 +1,44 @@
+import * as path from 'path';
 import { createAnnotation } from '../../common/models/prerender_annotation.mjs';
 import { getMap as getInlineStyleMap } from './inline_style_map.mjs';
+import { wkspRelative } from './paths.mjs';
 
 /**
  * Returns a prerender annotation as a string to be included in prerendered
  * HTML. This is used by the prerender build process to inline the referenced
  * CSS file at the annotation's location in the page.
  */
-export function inlineStyle(importPath: string): string {
+export function inlineStyle(importPath: string, meta: ImportMeta): string {
+    if (!importPath.startsWith('.')) {
+        throw new Error(`Only relative imports are supported and must start with \`./\` or \`../\`: "${importPath}".`);
+    }
+
+    if (!importPath.endsWith('.css')) {
+        throw new Error(`Relative imports *must* include file extensions (end with ".css"): "${importPath}".`);
+    }
+
+    const wkspRelativePath = wkspRelative(new URL(meta.url).pathname);
+    const resolved =
+        path.normalize(path.join(path.dirname(wkspRelativePath), importPath));
+
+    // Validate that the path is still within the Bazel workspace.
+    if (resolved.startsWith('..')) {
+        throw new Error(`Path escapes workspace root. Did you add too many \`..\` paths? Tried resolving "${
+            importPath}" from "${wkspRelativePath}".`);
+    }
+
     // Look up the import path in the inline style map to get its actual file
     // path on disk. This will always exist when executed as part of the
     // renderer, however tests which directly call components won't set the
     // inline style map and it won't exist. In these cases, we just ignore it
     // since such tests would not actually care.
     const inlineStyleMap = getInlineStyleMap();
-    const filePath = inlineStyleMap ? inlineStyleMap.get(importPath) : importPath;
+    const filePath = inlineStyleMap ? inlineStyleMap.get(resolved) : resolved;
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    if (!filePath) throw InlineStyleNotFoundError.from(importPath, inlineStyleMap!);
+    if (!filePath) {
+        throw InlineStyleNotFoundError.from(
+            importPath, resolved, inlineStyleMap!);
+    }
 
     // Return an annotation with the real file path.
     const annotation = createAnnotation({
@@ -28,26 +51,38 @@ export function inlineStyle(importPath: string): string {
 /** An error thrown when an inline style is not found in the inline style map. */
 export class InlineStyleNotFoundError extends Error {
     public importPath: string;
+    public resolvedPath: string;
     public availableImportPaths: string[];
 
-    private constructor({ message, importPath, availableImportPaths }: {
+    private constructor({
+        message,
+        importPath,
+        resolvedPath,
+        availableImportPaths,
+    }: {
         message: string,
         importPath: string,
+        resolvedPath: string;
         availableImportPaths: string[],
     }) {
         super(message);
         this.importPath = importPath;
+        this.resolvedPath = resolvedPath;
         this.availableImportPaths = availableImportPaths;
     }
 
-    public static from(importPath: string, inlineStyleMap: ReadonlyMap<string, string>):
-            InlineStyleNotFoundError {
+    public static from(
+        importPath: string,
+        resolvedPath: string,
+        inlineStyleMap: ReadonlyMap<string, string>,
+    ): InlineStyleNotFoundError {
         const message = `Could not find "${
             importPath}" in the inline style map. Available imports are:\n\n${
             Array.from(inlineStyleMap.keys()).join('\n')}`;
         return new InlineStyleNotFoundError({
             message,
             importPath,
+            resolvedPath,
             availableImportPaths: Array.from(inlineStyleMap.keys()),
         });
     }
diff --git a/packages/rules_prerender/styles_test.mts b/packages/rules_prerender/styles_test.mts
diff --git a/tools/binaries/css_bundler/css_bundle.bzl b/tools/binaries/css_bundler/css_bundle.bzl
diff --git a/tools/binaries/renderer/renderer.mts b/tools/binaries/renderer/renderer.mts
diff --git a/tools/binaries/renderer/renderer_test.mts b/tools/binaries/renderer/renderer_test.mts
