lit
lit copied to clipboard
Move `css-tag.js` from `@lit/reactive-element` to `lit-html` (or `@lit/css`)
Should this be an RFC?
- [X] 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
.
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.
@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
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/.
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.
Do they have to know? Can you just re-export the css
tag from your library?
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.