can the importMap include imported css?

[lschierer]

I am using CSS from the Adobe Spectrum CSS project and it uses exports similar to @spectrum-css/tokens/dist/index.css where @spectrum-css/tokens is the name of the particular package (that one is the base package that has all the design tokens the rest of their packages depend on).

I'm currently importing these with

public static override get styles(): CSSResultArray {
    const SpectrumTokens = unsafeCSS(
      import("/node_modules/@spectrum-css/tokens/dist/index.css", {
        with: { type: "css" },
      })
    );
    const SpectrumTypography = unsafeCSS(
      import("/node_modules/@spectrum-css/typography/dist/index.css", {
        with: { type: "css" },
      })
    );
    const SpectrumPage = unsafeCSS(
      import("/node_modules/@spectrum-css/page/dist/index.css", {
        with: { type: "css" },
      })
    );
    const SpectrumCard = unsafeCSS(
      import("/node_modules/@spectrum-css/card/dist/index.css", {
        with: { type: "css" },
      })
    );
    const baseThemeCss = unsafeCSS(baseTheme);

    if (super.styles !== undefined && Array.isArray(super.styles)) {
      return [
        ...super.styles,
        SpectrumTokens,
        SpectrumTypography,
        SpectrumPage,
        SpectrumCard,
        baseThemeCss,
        HorizontalCard.localStyle,
      ];
    } else {
      return [
        SpectrumTokens,
        SpectrumTypography,
        SpectrumPage,
        SpectrumCard,
        baseThemeCss,
        HorizontalCard.localStyle,
      ];
    }
  }

but from what I read, because they are in node_modules, I ought to be able to use bareword imports without the /node_modules/ part. When I try however, it doesn't find the modules. I believe this is because they end in .css and not in .js, .ts, .mjs, or .mts? Is there a configuration option I've missed?

[lschierer]

it looks like the css files prefixed with /node_modules/ are also not getting bundled by the build command?

[thescientist13]

Hey @lschierer

I'm not super familiar with Spectrum or have tried dynamically importing CSS Module Scripts with Greenwood, so can't say for certain without getting more hands on and / or seeing more of the code I think. Do you have a reproduction repo you can share?

As far as being able to just use a bare specifier, I think that would only work if the package exposes an export / entry point for it which it seems like these packages do, for example:
https://github.com/adobe/spectrum-css/blob/main/tokens/package.json#L16

So dynamic import aside for now, I would generally expect something like this to work, but honestly can't say I've tested bare specifiers in the context of CSS Modules Scripts like before 🙈

import sheet from "@spectrum-css/tokens" with: { type: "css" };

I would be curious if this works though, using a relative file path

import sheet from "../path/to/node_modules/@spectrum-css/tokens/dist/index.css" with: { type: "css" };

# or even this maybe?
import sheet from "@spectrum-css/tokens/dist/index.css" with: { type: "css" };

But yeah, if you have a little reproduction repo to share that would be great for helping me to dive in see what's going on. Either way what you're doing seems like it should be supported by Greenwood in some capacity and we would love to make sure something like Spectrum is supported, and so will definitely keep this in mind as we start our ecosystem compat phase next.

[lschierer]

I'm trying to set up a minimal reproduction. I've got a partial one here, but I'm having trouble with an error that I'm not sure if its my fault or not. if you look at https://github.com/lschierer/greenwood-repoductions/tree/jsTypeErrorGetBody and simply run

1. pnpm i
2. pnpm dev

you will see

node:internal/process/promises:391
    triggerUncaughtException(err, true /* fromPromise */);
    ^
TypeError [Error]: element is not a constructor
    at initializeCustomElement (file:///Users/lschiere/src/schierer/test-css/node_modules/.pnpm/[email protected]/node_modules/wc-compiler/src/wcc.js:220:29)
    at async renderToString (file:///Users/lschiere/src/schierer/test-css/node_modules/.pnpm/[email protected]/node_modules/wc-compiler/src/wcc.js:243:27)
    at async executeRouteModule (file:///Users/lschiere/src/schierer/test-css/node_modules/.pnpm/@[email protected]/node_modules/@greenwood/cli/src/lib/execute-route-module.js:21:24)
    at async executeModule (file:///Users/lschiere/src/schierer/test-css/node_modules/.pnpm/@[email protected]/node_modules/@greenwood/cli/src/lib/ssr-route-worker.js:6:16)
    at async MessagePort.<anonymous> (file:///Users/lschiere/src/schierer/test-css/node_modules/.pnpm/@[email protected]/node_modules/@greenwood/cli/src/lib/ssr-route-worker.js:12:3)

that has to be coming from the the two .js files in the pages directory.

[lschierer]

https://github.com/lschierer/greenwood-repoductions/tree/bare-css-typescript is a reasonable minimal reproduction using typescript.

[thescientist13]

@lschierer
Ah I see.

The issue is that you are exporting both page functions as a single default export. I made a PR to export them individually and can confirm everything builds now. 💯
lschierer/greenwood-repoductions#1

// before
export default { getFrontmatter, getBody }

// after
export { getFrontmatter, getBody }

[thescientist13]

Ok, had a chance to dig into the CSS based imports and confirm that the reason this isn't working as expected is simply due to initial assumptions made around what would need to be supported in an import map at the time it was written, which was well before we added support for Import Attributes.

Made an issue to track adding support for non-JS files to the import map as part of our ecosystem compat phase, and so will be something we plan on addressing soon

[lschierer]

so with the change you proposed, I can consistently style, but only so long as I import with full paths from the project root, /node_modules/@spectrum-css/.... which flies in the face of the "rule of thumb" in https://greenwoodjs.dev/docs/resources/scripts/#node-modules. it appears that not just the html script tag, but the script sources need to use full paths?

I mean, I'm happy that I can style fairly consistently now, but as you can probably tell from the flurry of bug reports I've submitted, I tend to look for consistent documentation as well ;-)

[thescientist13]

Do you mind sharing a snippet (or repo, ideally) of what the final implementation looked like once you got it all working? Would like to review so I can update the docs accordingly. 👍

(thanks again for your feedback in helping us flesh out these new docs!)

[lschierer]

I'm actually still finding it extremely fragile and working on and off in ways I don't fully understand. This is (as the repository name suggests) my 4th attempt at a new generation of my site, mostly because I'm trying to do some things that are just beyond my capabilities really, and I keep trying different tools and approaches to see if one of them proves to be easier for me to grasp. Some of this was also caused because Astro announced the deprecation of their support for Lit, and I really don't want to try to learn a new javascript framework.

You are certainly free to look it over, but I'm saying this much because I'm honestly not sure it'll be of much use because I am not very far along.

[lschierer]

There's some code that I did over the weekend that I forgot to push to that repository and currently only exists on my computer at home, it should be in the repository late tonight.

[thescientist13]

Ok, great, thank you so much. Will keep an eye out for that final push and then I'll dig into those Spectrum style imports and see what I can can come up with.