@blockquote-web-components/blockquote-base-style-helpers 1.0.13 → 1.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.js +0 -1
  2. package/README.md +49 -50
  3. package/index.js +1 -5
  4. package/package.json +6 -14
  5. package/src/setDocumentStyles.js +9 -20
package/README.js CHANGED
@@ -168,7 +168,6 @@ export default css`
168
168
 
169
169
  ### Progressive Enhancement:
170
170
 
171
- - support browsers without native `Shadow DOM`
172
171
  - support browsers with native `Shadow DOM` but without `adoptedStyleSheets`
173
172
  - support browsers with native `Shadow DOM` and `adoptedStyleSheets`
174
173
 
package/README.md CHANGED
@@ -33,10 +33,10 @@ import { setComponentSharedStyles } from blockquote-base-style-helpers.js;
33
33
 
34
34
  setComponentSharedStyles('x-foo-shared-styles', css`
35
35
  :host {
36
- background-color: red;
36
+ background-color: red;
37
37
  }
38
38
  p {
39
- color: blue;
39
+ color: blue;
40
40
  }
41
41
  `);
42
42
  ```
@@ -53,10 +53,10 @@ import { getComponentSharedStyles } from 'blockquote-base-style-helpers';
53
53
 
54
54
  class XFoo extends LitElement {
55
55
  static get styles() {
56
- return [
57
- css`...`,
58
- getComponentSharedStyles('x-foo-shared-styles)
59
- ];
56
+ return [
57
+ css`...`,
58
+ getComponentSharedStyles('x-foo-shared-styles)
59
+ ];
60
60
  }
61
61
  }
62
62
  ```
@@ -83,47 +83,47 @@ The last step in the Built-in theme support creation is to [provide the CSS vari
83
83
 
84
84
  ```js
85
85
  export const theme = {
86
- colors: {
87
- ...tertiary0,
88
- ...tertiary1,
89
- ...tertiary2,
90
- ...neutral,
91
- },
92
- fontFace: {
93
- ...fontFace,
94
- },
95
- fonts: {
96
- main: 'Kaisei HarunoUmi, serif',
97
- },
86
+ colors: {
87
+ ...tertiary0,
88
+ ...tertiary1,
89
+ ...tertiary2,
90
+ ...neutral,
91
+ },
92
+ fontFace: {
93
+ ...fontFace,
94
+ },
95
+ fonts: {
96
+ main: 'Kaisei HarunoUmi, serif',
97
+ },
98
98
  };
99
99
 
100
100
  const THEME = `
101
101
  :root {
102
- --red-300: ${theme.colors['--red-300']};
103
- --red-400: ${theme.colors['--red-400']};
104
- --red-500: ${theme.colors['--red-500']};
105
- --red-600: ${theme.colors['--red-600']};
106
- --red-700: ${theme.colors['--red-700']};
107
-
108
- --green-300: ${theme.colors['--green-300']};
109
- --green-400: ${theme.colors['--green-400']};
110
- --green-500: ${theme.colors['--green-500']};
111
- --green-600: ${theme.colors['--green-600']};
112
- --green-700: ${theme.colors['--green-700']};
113
-
114
- --blue-300: ${theme.colors['--blue-300']};
115
- --blue-400: ${theme.colors['--blue-400']};
116
- --blue-500: ${theme.colors['--blue-500']};
117
- --blue-600: ${theme.colors['--blue-600']};
118
- --blue-700: ${theme.colors['--blue-700']};
119
-
120
- --neutral-300: ${theme.colors['--neutral-300']};
121
- --neutral-400: ${theme.colors['--neutral-400']};
122
- --neutral-500: ${theme.colors['--neutral-500']};
123
- --neutral-600: ${theme.colors['--neutral-600']};
124
- --neutral-700: ${theme.colors['--neutral-700']};
125
-
126
- font: normal medium/1.25 sans-serif;
102
+ --red-300: ${theme.colors['--red-300']};
103
+ --red-400: ${theme.colors['--red-400']};
104
+ --red-500: ${theme.colors['--red-500']};
105
+ --red-600: ${theme.colors['--red-600']};
106
+ --red-700: ${theme.colors['--red-700']};
107
+
108
+ --green-300: ${theme.colors['--green-300']};
109
+ --green-400: ${theme.colors['--green-400']};
110
+ --green-500: ${theme.colors['--green-500']};
111
+ --green-600: ${theme.colors['--green-600']};
112
+ --green-700: ${theme.colors['--green-700']};
113
+
114
+ --blue-300: ${theme.colors['--blue-300']};
115
+ --blue-400: ${theme.colors['--blue-400']};
116
+ --blue-500: ${theme.colors['--blue-500']};
117
+ --blue-600: ${theme.colors['--blue-600']};
118
+ --blue-700: ${theme.colors['--blue-700']};
119
+
120
+ --neutral-300: ${theme.colors['--neutral-300']};
121
+ --neutral-400: ${theme.colors['--neutral-400']};
122
+ --neutral-500: ${theme.colors['--neutral-500']};
123
+ --neutral-600: ${theme.colors['--neutral-600']};
124
+ --neutral-700: ${theme.colors['--neutral-700']};
125
+
126
+ font: normal medium/1.25 sans-serif;
127
127
 
128
128
  }`;
129
129
  ```
@@ -134,11 +134,11 @@ const THEME = `
134
134
  // Two call (setDocumentStyles) preserves any existing StyleSheets added via adoptedStyleSheets
135
135
 
136
136
  setDocumentStyles(css`
137
- ${unsafeCSS(theme.fontFace.root)}
137
+ ${unsafeCSS(theme.fontFace.root)}
138
138
  `);
139
139
 
140
140
  setDocumentStyles(css`
141
- ${unsafeCSS(THEME)}
141
+ ${unsafeCSS(THEME)}
142
142
  `);
143
143
  ```
144
144
 
@@ -152,10 +152,10 @@ import { css, unsafeCSS } from 'lit';
152
152
  import { theme } from '../theme/theme.js';
153
153
 
154
154
  export default css`
155
- :host {
156
- display: block;
157
- color: var(--neutral-600, ${unsafeCSS(theme.colors['--neutral-600'])});
158
- }
155
+ :host {
156
+ display: block;
157
+ color: var(--neutral-600, ${unsafeCSS(theme.colors['--neutral-600'])});
158
+ }
159
159
  `;
160
160
  ```
161
161
 
@@ -169,6 +169,5 @@ export default css`
169
169
 
170
170
  ### Progressive Enhancement:
171
171
 
172
- - support browsers without native `Shadow DOM`
173
172
  - support browsers with native `Shadow DOM` but without `adoptedStyleSheets`
174
173
  - support browsers with native `Shadow DOM` and `adoptedStyleSheets`
package/index.js CHANGED
@@ -1,8 +1,4 @@
1
- export {
2
- setDocumentStyles,
3
- supportCustomStyleInterface,
4
- adoptDocumentStyles,
5
- } from './src/setDocumentStyles.js';
1
+ export { setDocumentStyles, adoptDocumentStyles } from './src/setDocumentStyles.js';
6
2
 
7
3
  export { setComponentSharedStyles } from './src/setComponentSharedStyles.js';
8
4
  export { getComponentSharedStyles } from './src/getComponentSharedStyles.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blockquote-web-components/blockquote-base-style-helpers",
3
- "version": "1.0.13",
3
+ "version": "1.0.14",
4
4
  "description": "Webcomponent blockquote-base-style-helpers following open-wc recommendations",
5
5
  "keywords": [
6
6
  "lit",
@@ -54,16 +54,9 @@
54
54
  "sass:watch": "sass-style-template",
55
55
  "sort:package": "npx sort-package-json",
56
56
  "start": "concurrently -k -r \"npm:sass:watch\" \"npm:vite\"",
57
- "start:wds": "concurrently -k -r \"npm:sass:watch\" \"npm:wds\"",
58
57
  "test": "wtr --coverage",
59
58
  "test:watch": "wtr --watch",
60
- "vite": "vite",
61
- "wds": "web-dev-server"
62
- },
63
- "husky": {
64
- "hooks": {
65
- "pre-commit": "lint-staged"
66
- }
59
+ "vite": "vite"
67
60
  },
68
61
  "lint-staged": {
69
62
  "**/*.{js,ts,html}": [
@@ -144,17 +137,16 @@
144
137
  }
145
138
  },
146
139
  "dependencies": {
147
- "@blockquote-web-components/blockquote-base-meta": "^1.0.15",
148
- "@blockquote/polymer": "^3.4.1",
140
+ "@blockquote-web-components/blockquote-base-meta": "^1.0.16",
149
141
  "lit": "^2.0.2"
150
142
  },
151
143
  "devDependencies": {
152
- "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.4.0",
153
- "@blockquote-web-components/blockquote-base-embedded-webview": "^1.3.1"
144
+ "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.4.1",
145
+ "@blockquote-web-components/blockquote-base-embedded-webview": "^1.3.2"
154
146
  },
155
147
  "publishConfig": {
156
148
  "access": "public"
157
149
  },
158
150
  "customElements": "custom-elements.json",
159
- "gitHead": "3d63dcd1610b8197f6c731f2d793e850606e2646"
151
+ "gitHead": "6d26bf3d347428ed85111a48d89152e34197d4cf"
160
152
  }
package/src/setDocumentStyles.js CHANGED
@@ -1,13 +1,12 @@
1
- import { supportsAdoptingStyleSheets } from 'lit';
2
- import '@blockquote/polymer/lib/elements/custom-style.js';
1
+ const supportsAdoptingStyleSheets =
2
+ window.ShadowRoot &&
3
+ (window.ShadyCSS === undefined || /* c8 ignore next */ window.ShadyCSS.nativeShadow) &&
4
+ 'adoptedStyleSheets' in Document.prototype &&
5
+ 'replace' in CSSStyleSheet.prototype;
3
6
 
4
- export const supportCustomStyleInterface =
5
- /* c8 ignore next */
6
- window.ShadyCSS && window.ShadyCSS.CustomStyleInterface && !window.ShadyCSS.nativeShadow;
7
-
8
- const renderDocumentRoot =
9
- /* c8 ignore next */
10
- supportsAdoptingStyleSheets ? document : document.head;
7
+ const renderDocumentRoot = supportsAdoptingStyleSheets
8
+ ? document
9
+ : /* c8 ignore next */ document.head;
11
10
 
12
11
  export const adoptDocumentStyles = (renderRoot, styles) => {
13
12
  if (supportsAdoptingStyleSheets) {
@@ -26,16 +25,6 @@ export const adoptDocumentStyles = (renderRoot, styles) => {
26
25
  }
27
26
  };
28
27
 
29
- const documentCustomStyle = s => {
30
- const customStyle = document.createElement('custom-style');
31
- const style = document.createElement('style');
32
- style.textContent = s.cssText;
33
- customStyle.appendChild(style);
34
- document.head.appendChild(customStyle);
35
- };
36
-
37
28
  export const setDocumentStyles = styles => {
38
- supportCustomStyleInterface
39
- ? documentCustomStyle(styles)
40
- : adoptDocumentStyles(renderDocumentRoot, [styles]);
29
+ adoptDocumentStyles(renderDocumentRoot, [styles]);
41
30
  };