Skip to content
This repository has been archived by the owner on Jul 6, 2021. It is now read-only.

Prepare for lit-element 2.3.0 version bump #55

Merged
merged 3 commits into from
Mar 18, 2020
Merged

Prepare for lit-element 2.3.0 version bump #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8bdedd7
refactor(themable-element): use getStyles API
web-padawan Feb 20, 2020
0440c4d
test(themable-element): update and fix tests
web-padawan Feb 21, 2020
54b5829
feat: require lit-element 2.3.0 or later
web-padawan Mar 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/themable-element/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
64 changes: 32 additions & 32 deletions packages/themable-element/test/themable-element.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -10,88 +10,88 @@ 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;
}
`,
{ moduleId: 'custom-override-styles-second' }
);

Vaadin.registerStyles(
registerStyles(
override,
Vaadin.css`
css`
:host {
display: flex;
}
`,
{ 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;
Expand All @@ -100,21 +100,21 @@ 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;
}
`,
{ moduleId: 'lumo-override-styles' }
);

Vaadin.registerStyles(
registerStyles(
override,
Vaadin.css`
[part="text"] {
css`
[part='text'] {
color: rgb(0, 255, 0);
opacity: 0.5;
}
Expand Down Expand Up @@ -171,7 +171,7 @@ class LitOverride extends ThemableElement {
customElements.define(override, LitOverride);

describe('ThemableElement', () => {
let wrapper;
let wrapper: HTMLElement;
let components: Array<Element> = [];

const getPart = (idx: number) => {
Expand Down Expand Up @@ -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', () => {
Expand Down
15 changes: 6 additions & 9 deletions packages/themable-element/themable-element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) => {
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
}
54 changes: 39 additions & 15 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -6088,17 +6112,17 @@ [email protected]:
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"
Expand Down