Allowing number values in CSSResults

[daKmoR]

hey,

we have some default number values for our styling.
Reason:

• We want to keep them the same across multiple elements
• These values should not be changeable (e.g. we don't want to use css variables)
  • as we don't want them as part of our "api"
  • as we want to do javascript calculations
  • as we want to keep the door open to optimize these variables "away" inside css via a build step

Live Demo

https://stackblitz.com/edit/ems7at?file=custom-greeting.js

Steps to Reproduce

Use a number

import { defaultPadding } from './css-constants.js';
// const defaultPadding = 5;

static get styles() {
  return [css`
    :host {
      padding: ${defaultPadding*2}px;
    }
  `];
}

Expected Results

Renders with padding of 10px.

imho Numbers should be allowed as they "are save" and can not be used for any form of css attack right?

Actual Results

Error thrown

Error: Value passed to 'css' function must be a 'css' function result: 10.

Browsers Affected

• all

Versions

• lit-element: v2.0.0-rc.x

[kenchris]

CSS environment variables is supposed to handle this: https://drafts.csswg.org/css-env-1/#env-function

But it isn't specced yet how to add custom environment variables from either CSS or JS. Maybe @justinfagnani can push internally for moving that forward instead of the above idea

[sorvell]

We've decided to add an unsafeCss function to help accommodate this. It's named "unsafe" so users are aware this must be done with care to avoid security issues.

[daKmoR]

nice 💪 makes it definitely more useful 👍 especially for import.meta.url 🤗

I'm still unsure why such a wrapper would be needed for a value of type number?
I assumed a number is always safe? I feel like I am missing something if that is not the case 🙈

padding: ${unsafeCss( 5*2 )}px;

feels kinda strange...

[sorvell]

Fixed via #474.