Move css-tag.js from @lit/reactive-element to lit-html (or @lit/css)

[shannonmoeller]

Should this be an RFC?

• This is not a substantial change

Which package is this a feature request for?

Lit Core (lit / lit-html / lit-element / reactive-element)

Description

It would be nice to be able to import { adoptStyles, css } from lit-html instead of @lit/reactive-element for projects that use standalone lit-html. This way elements that only want to import lit-html can avoid having to include @lit/reactive-element in their dependencies when all that's wanted is the css helpers.

Current:

import { html } from 'lit-html';
import { adoptStyles, css } from '@lit/reactive-element';

Proposed

Option 1:

import { adoptStyles, css, html } from 'lit-html';

Option 2:

import { html } from 'lit-html';
import { adoptStyles, css } from 'lit-html/css-tag.js';

I personally prefer option 1, but I understand the reasoning behind preferring option 2, similar to how directives are optionally imported.

Alternatives and Workarounds

Alternative

It might even be a good idea to create @lit/html and @lit/css packages, but that might be RFC territory:

import { html } from '@lit/html';
import { adoptStyles, css } from '@lit/css';

Workaround

It's currently possible to use the css helpers by importing them from @lit/reactive-element, but it kinda breaks the mental model of standalone use of lit-html.

[justinfagnani]

The CSS tag utilities have no overlap with lit-html's responsibilities though. lit-html doesn't do anything with either CSS or shadow roots.

[shannonmoeller]

@justinfagnani That makes sense. Perhaps the alternative I recommended of a new @lit/css package then?

Update: Here's an example of an element that's not using @lit/reactive-element, but still benefits from being able to access css. https://github.com/shannonmoeller/funlit/blob/main/examples/fun-shadow.html

[justinfagnani]

That use seems great though. That module is not going to pull in anything else from reactive-element. The only thing that would be saved by a separate lit/css package is a couple kB of reactive element implementation on disk in node_modules/.

[shannonmoeller]

I guess my issue is philosophical. One of my main goals of funlit is to not need lit-element or reactive-element at all. Asking users to install it to get access to a utility that has nothing to do with lit-element nor reactive-element in the same way it has nothing to do with lit-html as you pointed out is confusing for my target audience.

[justinfagnani]

Do they have to know? Can you just re-export the css tag from your library?

[shannonmoeller]

They need to know, yes, because I'm declaring lit-html as a peerDependency to allow users to use whatever version works best for their project (currently works with lit-html v2 and v3 and can even be an alias for hyperHTML) and to support bundlers via npm and browsers via importmap.

I could just copy css-tag.js into the project, but that feels far worse for users.