@vaadin/vaadin-themable-mixin
Advanced tools
@vaadin/vaadin-themable-mixin - npm Package Compare versions
Comparing version 1.5.1 to 1.5.2
@@ -12,3 +12,3 @@ { | ||
| "name": "@vaadin/vaadin-themable-mixin", | ||
| "version": "1.5.1", | ||
| "version": "1.5.2", | ||
| "main": "vaadin-themable-mixin.js", | ||
@@ -31,2 +31,3 @@ "author": "Vaadin Ltd", | ||
| "dependencies": { | ||
| "lit-element": "^2.0.0", | ||
| "@polymer/polymer": "^3.0.0" | ||
@@ -33,0 +34,0 @@ }, |
@@ -168,2 +168,6 @@ # Table of Contents | ||
| <link rel="import" href="/bower_components/vaadin-themable-mixin/register-styles.html"> | ||
| ... | ||
| <script> | ||
| const { registerStyles, css, unsafeCSS } = Vaadin; | ||
| </script> | ||
| ``` | ||
@@ -182,11 +186,3 @@ | ||
| Using registerStyles imported as an HTMLImport | ||
| ```js | ||
| Vaadin.registerStyles('my-element', Vaadin.css` | ||
| /* Styles which will be included in my-element local scope */ | ||
| `); | ||
| ``` | ||
| Using registerStyles imported as an ES module | ||
| ```js | ||
| registerStyles('my-element', css` | ||
@@ -204,3 +200,3 @@ /* Styles which will be included in my-element local scope */ | ||
| Vaadin.registerStyles('my-element', Vaadin.unsafeCSS(trustedCSSValue)); | ||
| registerStyles('my-element', unsafeCSS(trustedCSSValue)); | ||
| ``` | ||
@@ -215,5 +211,5 @@ | ||
| `; | ||
| const trustedStyles = Vaadin.unsafeCSS(trustedCSSValue); | ||
| const trustedStyles = unsafeCSS(trustedCSSValue); | ||
| Vaadin.registerStyles('my-element', [myStyles, trustedStyles]); | ||
| registerStyles('my-element', [myStyles, trustedStyles]); | ||
| ``` | ||
@@ -225,3 +221,3 @@ | ||
| // Use of "include" is deprecated! | ||
| Vaadin.registerStyles('my-element', Vaadin.css` | ||
| registerStyles('my-element', css` | ||
| /* Optional styles to be included in my-element local scope */ | ||
@@ -235,3 +231,3 @@ `, {include: ['my-style-module']}); | ||
| // Use of "moduleId" is deprecated! | ||
| Vaadin.registerStyles(undefined, Vaadin.css` | ||
| registerStyles(undefined, css` | ||
| /* Styles which will be included in the style module */ | ||
@@ -401,5 +397,5 @@ `, {moduleId: 'my-extended-style-module'}); | ||
| 1. **Expose new custom properties** | ||
| 1. **Expose new custom properties** | ||
| This is the recommended first option for simple situations. If you end up exposing more than a handful of properties, you should consider the second option. | ||
| 2. **Use scoping selectors** | ||
| 2. **Use scoping selectors** | ||
| This approach is used by the built-in variations in Vaadin themes (Lumo and Material), i.e. `theme` attribute. The downside of this approach is that you end up adding the selectors and properties to all instances, even though only some instances will need those styles (they won’t apply unless the scoping selector is used on the host element). | ||
@@ -406,0 +402,0 @@ |
| import '@polymer/polymer/lib/elements/dom-module.js'; | ||
| import { CSSResult } from 'lit-element'; | ||
| export { css, unsafeCSS } from 'lit-element'; | ||
@@ -66,51 +68,1 @@ let moduleIdIndex = 0; | ||
| }; | ||
| /* Template literal tags derived from LitElement */ | ||
| const constructionToken = {}; | ||
| class CSSResult { | ||
| constructor(cssText, safeToken) { | ||
| if (safeToken !== constructionToken) { | ||
| throw new Error( | ||
| 'CSSResult is not constructable. Use `unsafeCSS` or `css` instead.'); | ||
| } | ||
| this.cssText = cssText; | ||
| } | ||
| toString() { | ||
| return this.cssText; | ||
| } | ||
| } | ||
| /** | ||
| * Wrap a value for interpolation in a css tagged template literal. | ||
| * | ||
| * This is unsafe because untrusted CSS text can be used to phone home | ||
| * or exfiltrate data to an attacker controlled site. Take care to only use | ||
| * this with trusted input. | ||
| */ | ||
| export const unsafeCSS = (value) => { | ||
| return new CSSResult(String(value), constructionToken); | ||
| }; | ||
| const textFromCSSResult = (value) => { | ||
| if (value instanceof CSSResult) { | ||
| return value.cssText; | ||
| } else if (typeof value === 'number') { | ||
| return value; | ||
| } else { | ||
| throw new Error( | ||
| `Value passed to 'css' function must be a 'css' function result: ${ | ||
| value}. Use 'unsafeCSS' to pass non-literal values, but | ||
| take care to ensure page security.`); | ||
| } | ||
| }; | ||
| export const css = (strings, ...values) => { | ||
| const cssText = values.reduce( | ||
| (acc, v, idx) => acc + textFromCSSResult(v) + strings[idx + 1], | ||
| strings[0]); | ||
| return new CSSResult(cssText, constructionToken); | ||
| }; |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-3.45%
39774
- Dependency count
- increased by100%
2
- Lines of code
- decreased by-19.32%
167
- Number of lines in readme file
- decreased by-0.69%
575
Dependency changes
+ Addedlit-element@^2.0.0
+ Addedlit-element@2.5.1(transitive)
+ Addedlit-html@1.4.1(transitive)