@@ -8,7 +8,8 @@ import { withLitHtml, html } from '@bolt/core/renderers/renderer-lit-html';
8
8
import { ifDefined } from 'lit-html/directives/if-defined' ;
9
9
import path from 'path' ;
10
10
11
- import classNames from 'classnames/bind' ;
11
+ // Use 'dedupe' version instead of 'bind' to help merge initial classes with those defined here
12
+ import classNames from 'classnames/dedupe' ;
12
13
13
14
import ratioStyles from '@bolt/components-ratio/src/ratio.scss' ;
14
15
import imageStyles from './image.scss' ;
@@ -69,6 +70,10 @@ class BoltImage extends withLitHtml() {
69
70
// IE fires this twice, only let it remove children once
70
71
if ( ! this . _wasInitiallyRendered ) {
71
72
super . connecting && super . connecting ( ) ;
73
+
74
+ const image = this . querySelector ( '.c-bolt-image__image' ) ;
75
+ this . initialClasses = [ ] . slice . call ( image . classList ) ;
76
+
72
77
while ( this . firstChild ) {
73
78
this . removeChild ( this . firstChild ) ;
74
79
}
@@ -129,7 +134,7 @@ class BoltImage extends withLitHtml() {
129
134
// Only JPGs allowed, PNGs can have transparency and may not look right layered over placeholder
130
135
const _canUsePlaceholder = ( _canUseRatio || cover ) && _isJpg ;
131
136
132
- const classes = cx ( 'c-bolt-image__image' , {
137
+ const classes = cx ( ... this . initialClasses , 'c-bolt-image__image' , {
133
138
'c-bolt-image__lazyload' : lazyload ,
134
139
'c-bolt-image__lazyload--fade' : lazyload ,
135
140
'c-bolt-image__lazyload--blur' : lazyload && _isJpg ,
@@ -160,9 +165,18 @@ class BoltImage extends withLitHtml() {
160
165
if ( _canUsePlaceholder ) {
161
166
return html `
162
167
< img
163
- class ="${ cx ( 'c-bolt-image__image-placeholder' , {
164
- 'c-bolt-image--cover' : cover ,
165
- } ) } "
168
+ class ="${ cx (
169
+ ...this . initialClasses ,
170
+ 'c-bolt-image__image-placeholder' ,
171
+ {
172
+ 'c-bolt-image__image' : false ,
173
+ 'c-bolt-image__lazyload' : false ,
174
+ 'c-bolt-image__lazyload--fade' : false ,
175
+ 'c-bolt-image__lazyload--blur' : false ,
176
+ 'js-lazyload' : false ,
177
+ 'c-bolt-image--cover' : cover ,
178
+ } ,
179
+ ) } "
166
180
src ="${ placeholderImage } "
167
181
alt ="${ ifDefined ( alt ? alt : undefined ) } "
168
182
/>
0 commit comments