From 8bdedd79ba2afd7a51a869ab4ded327b6a006eb8 Mon Sep 17 00:00:00 2001 From: web-padawan Date: Thu, 20 Feb 2020 13:05:34 +0200 Subject: [PATCH 1/3] refactor(themable-element): use getStyles API --- packages/themable-element/themable-element.ts | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/themable-element/themable-element.ts b/packages/themable-element/themable-element.ts index 38aa4b1..ffe54c9 100644 --- a/packages/themable-element/themable-element.ts +++ b/packages/themable-element/themable-element.ts @@ -1,6 +1,6 @@ import { DomModule } from '@polymer/polymer/lib/elements/dom-module.js'; import { cssFromModule } from '@polymer/polymer/lib/utils/style-gather.js'; -import { LitElement, unsafeCSS } from 'lit-element'; +import { LitElement, unsafeCSS, CSSResult, CSSResultArray } from 'lit-element'; const sortModules = (modules: Array<{ [s: string]: DomModule }>) => { return Object.keys(modules).sort((moduleNameA, moduleNameB) => { @@ -31,8 +31,9 @@ const sortModules = (modules: Array<{ [s: string]: DomModule }>) => { export class ThemableElement extends LitElement { protected static is: string; - static finalize() { - super.finalize(); + static getStyles(): CSSResult | CSSResultArray | undefined { + const styles = super.getStyles(); + const themes: CSSResultArray = styles ? [styles] : []; // eslint-disable-next-line @typescript-eslint/no-explicit-any const { modules } = DomModule.prototype as any; @@ -42,16 +43,12 @@ export class ThemableElement extends LitElement { if (themeFor) { themeFor.split(' ').forEach((themeForToken: string) => { if (new RegExp(`^${themeForToken.split('*').join('.*')}$`).test(this.is)) { - this._includeStyle(moduleName); + themes.push(unsafeCSS(cssFromModule(moduleName))); } }); } }); - } - static _includeStyle(moduleName: string) { - // Hack to bypass TypeScript private property check - // eslint-disable-next-line dot-notation - this['_styles'].push(unsafeCSS(cssFromModule(moduleName))); + return themes; } } From 0440c4da8aafb876be117b34258d3f4527ca63e5 Mon Sep 17 00:00:00 2001 From: web-padawan Date: Fri, 21 Feb 2020 12:49:06 +0200 Subject: [PATCH 2/3] test(themable-element): update and fix tests --- .../test/themable-element.test.ts | 64 +++++++++---------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/packages/themable-element/test/themable-element.test.ts b/packages/themable-element/test/themable-element.test.ts index a9f4f4e..08e4b19 100644 --- a/packages/themable-element/test/themable-element.test.ts +++ b/packages/themable-element/test/themable-element.test.ts @@ -1,5 +1,5 @@ import { fixture } from '@open-wc/testing-helpers'; -import * as Vaadin from '@vaadin/vaadin-themable-mixin/register-styles.js'; +import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js'; import { html, css } from 'lit-element'; import { ThemableElement } from '../themable-element'; @@ -10,63 +10,63 @@ const bar = 'lit-bar'; const baz = 'lit-baz'; const override = 'lit-override'; -Vaadin.registerStyles( +registerStyles( foo, - Vaadin.css` + css` :host { display: flex; } - [part="text"] { + [part='text'] { color: rgb(255, 255, 255); } ` ); -Vaadin.registerStyles( +registerStyles( `${foo} ${bar}`, - Vaadin.css` - [part="text"] { + css` + [part='text'] { background-color: rgb(255, 0, 0); } ` ); -Vaadin.registerStyles( +registerStyles( baz, - Vaadin.css` - [part="text"] { + css` + [part='text'] { width: 100px; } ` ); -Vaadin.registerStyles( +registerStyles( 'lit-*a*', - Vaadin.css` - [part="text"] { + css` + [part='text'] { position: relative; } ` ); -Vaadin.registerStyles( +registerStyles( override, - Vaadin.css` + css` :host { position: absolute; } - [part="text"] { + [part='text'] { color: rgb(0, 0, 0); } `, { moduleId: 'custom-override-styles-first' } ); -Vaadin.registerStyles( +registerStyles( override, - Vaadin.css` + css` :host { position: relative; } @@ -74,9 +74,9 @@ Vaadin.registerStyles( { moduleId: 'custom-override-styles-second' } ); -Vaadin.registerStyles( +registerStyles( override, - Vaadin.css` + css` :host { display: flex; } @@ -84,14 +84,14 @@ Vaadin.registerStyles( { moduleId: 'vaadin-override-styles-first' } ); -Vaadin.registerStyles( +registerStyles( override, - Vaadin.css` + css` :host { display: block; } - [part="text"] { + [part='text'] { color: rgb(255, 255, 255); opacity: 1; display: block; @@ -100,10 +100,10 @@ Vaadin.registerStyles( { moduleId: 'vaadin-override-styles-second' } ); -Vaadin.registerStyles( +registerStyles( override, - Vaadin.css` - [part="text"] { + css` + [part='text'] { color: rgb(255, 0, 0); display: inline; } @@ -111,10 +111,10 @@ Vaadin.registerStyles( { moduleId: 'lumo-override-styles' } ); -Vaadin.registerStyles( +registerStyles( override, - Vaadin.css` - [part="text"] { + css` + [part='text'] { color: rgb(0, 255, 0); opacity: 0.5; } @@ -171,7 +171,7 @@ class LitOverride extends ThemableElement { customElements.define(override, LitOverride); describe('ThemableElement', () => { - let wrapper; + let wrapper: HTMLElement; let components: Array = []; const getPart = (idx: number) => { @@ -210,8 +210,8 @@ describe('ThemableElement', () => { expect(window.getComputedStyle(getPart(1)).backgroundColor).to.equal('rgb(255, 0, 0)'); }); - it('should inject to subclassed components', () => { - expect(window.getComputedStyle(getPart(2)).backgroundColor).to.equal('rgb(255, 0, 0)'); + it('should not inject to subclassed components', () => { + expect(window.getComputedStyle(getPart(2)).backgroundColor).to.not.equal('rgb(255, 0, 0)'); }); it('should inject to wildcard styles', () => { From 54b5829cd4b7d917f61b36bb466befc2a6f9a3bd Mon Sep 17 00:00:00 2001 From: web-padawan Date: Wed, 18 Mar 2020 23:05:40 +0200 Subject: [PATCH 3/3] feat: require lit-element 2.3.0 or later --- packages/themable-element/package.json | 2 +- yarn.lock | 54 +++++++++++++++++++------- 2 files changed, 40 insertions(+), 16 deletions(-) diff --git a/packages/themable-element/package.json b/packages/themable-element/package.json index 6317d15..74530d1 100644 --- a/packages/themable-element/package.json +++ b/packages/themable-element/package.json @@ -18,7 +18,7 @@ "dependencies": { "@polymer/polymer": "^3.3.0", "@vaadin/vaadin-themable-mixin": "^1.5.2", - "lit-element": "^2.0.0", + "lit-element": "^2.3.0", "lit-html": "^1.0.0" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index d02d797..438fd42 100644 --- a/yarn.lock +++ b/yarn.lock @@ -37,17 +37,17 @@ source-map "^0.5.0" "@babel/core@^7.8.6": - version "7.8.6" - resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.8.6.tgz#27d7df9258a45c2e686b6f18b6c659e563aa4636" - integrity sha512-Sheg7yEJD51YHAvLEV/7Uvw95AeWqYPL3Vk3zGujJKIhJ+8oLw2ALaf3hbucILhKsgSoADOvtKRJuNVdcJkOrg== + version "7.8.7" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.8.7.tgz#b69017d221ccdeb203145ae9da269d72cf102f3b" + integrity sha512-rBlqF3Yko9cynC5CCFy6+K/w2N+Sq/ff2BPy+Krp7rHlABIr5epbA7OxVeKoMHB39LZOp1UY5SuLjy6uWi35yA== dependencies: "@babel/code-frame" "^7.8.3" - "@babel/generator" "^7.8.6" + "@babel/generator" "^7.8.7" "@babel/helpers" "^7.8.4" - "@babel/parser" "^7.8.6" + "@babel/parser" "^7.8.7" "@babel/template" "^7.8.6" "@babel/traverse" "^7.8.6" - "@babel/types" "^7.8.6" + "@babel/types" "^7.8.7" convert-source-map "^1.7.0" debug "^4.1.0" gensync "^1.0.0-beta.1" @@ -97,6 +97,16 @@ lodash "^4.17.13" source-map "^0.5.0" +"@babel/generator@^7.8.7": + version "7.8.8" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.8.8.tgz#cdcd58caab730834cee9eeadb729e833b625da3e" + integrity sha512-HKyUVu69cZoclptr8t8U5b6sx6zoWjh8jiUhnuj3MpZuKT2dJ8zPTuiy31luq32swhI0SpwItCIlU8XW7BZeJg== + dependencies: + "@babel/types" "^7.8.7" + jsesc "^2.5.1" + lodash "^4.17.13" + source-map "^0.5.0" + "@babel/helper-annotate-as-pure@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32" @@ -372,6 +382,11 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.6.tgz#ba5c9910cddb77685a008e3c587af8d27b67962c" integrity sha512-trGNYSfwq5s0SgM1BMEB8hX3NDmO7EP2wsDGDexiaKMB92BaRpS+qZfpkMqUBhcsOTBwNy9B/jieo4ad/t/z2g== +"@babel/parser@^7.8.7": + version "7.8.8" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.8.tgz#4c3b7ce36db37e0629be1f0d50a571d2f86f6cd4" + integrity sha512-mO5GWzBPsPf6865iIbzNE0AvkKF3NE+2S3eRUpE+FE07BOAkXh6G+GW/Pj01hhXjve1WScbaIO4UlY1JKeqCcA== + "@babel/plugin-proposal-async-generator-functions@^7.2.0": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.2.0.tgz#b289b306669dce4ad20b0252889a15768c9d417e" @@ -935,6 +950,15 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" +"@babel/types@^7.8.7": + version "7.8.7" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.7.tgz#1fc9729e1acbb2337d5b6977a63979b4819f5d1d" + integrity sha512-k2TreEHxFA4CjGkL+GYjRyx35W0Mr7DP5+9q6WMkyKXB+904bYmG40syjMFV0oLlhhFCwWl0vA0DyzTDkwAiJw== + dependencies: + esutils "^2.0.2" + lodash "^4.17.13" + to-fast-properties "^2.0.0" + "@commitlint/cli@^8.3.5": version "8.3.5" resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-8.3.5.tgz#6d93a3a8b2437fa978999d3f6a336bcc70be3fd3" @@ -6088,17 +6112,17 @@ lit-analyzer@1.1.9: vscode-html-languageservice "2.1.12" web-component-analyzer "~0.1.17" -lit-element@^2.0.0: - version "2.2.1" - resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.2.1.tgz#79c94d8cfdc2d73b245656e37991bd1e4811d96f" - integrity sha512-ipDcgQ1EpW6Va2Z6dWm79jYdimVepO5GL0eYkZrFvdr0OD/1N260Q9DH+K5HXHFrRoC7dOg+ZpED2XE0TgGdXw== +lit-element@^2.0.0, lit-element@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.3.0.tgz#a78d98e3c17afdfcfa3ab8335e839ac69f5c204e" + integrity sha512-t3ask/FPcNTIixniBjTrkCeNPWOxyEQxWkSNuSqBYARoyg7/EjNT8uNrbgUwKt0GALwN417GI9eHQY1BgXpLUA== dependencies: - lit-html "^1.0.0" + lit-html "^1.1.1" -lit-html@^1.0.0: - version "1.1.2" - resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.1.2.tgz#2e3560a7075210243649c888ad738eaf0daa8374" - integrity sha512-FFlUMKHKi+qG1x1iHNZ1hrtc/zHmfYTyrSvs3/wBTvaNtpZjOZGWzU7efGYVpgp6KvWeKF6ql9/KsCq6Z/mEDA== +lit-html@^1.0.0, lit-html@^1.1.1: + version "1.2.0" + resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.2.0.tgz#4d1a458d70354bd034b4a24fb0d229a4cbc7e0ee" + integrity sha512-PC/oZsNhTiH4/JHIWMtAFePkKYbflmTi1ZHA/FRDKuw/HARINK/MNHWuHuQ8pXKXOIgBzdHZEDApm/7SGZQXgA== load-json-file@^1.0.0: version "1.1.0"