Slideshow Block: Wrap Swiper's CSS in our CSS selector

[ockham]

Continuing discussion from Automattic/wp-calypso#30352 (comment).

TODO:

• Make Swiper styling import static
• @import in our SASS file, wrap in our selector:

.wp-block-jetpack-slideshow {
  @import '......./slider.css';
}

Relevant bits from the previous conversation:

Automattic/wp-calypso#30352 (comment) (@simison):

Should we use nested imports to wrap Slider's CSS with our CSS selector?

.wp-block-jetpack-slideshow {
  @import '......./slider.css';
}

Results in:

.wp-block-jetpack-slideshow .swiper-container { }

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#nested_import

Wouldn't that mostly solve the problems around our CSS leaking into any other implementation of Slider on the same page?

As the term "slider" is pretty generic already and Gutenberg has great deprecation transforms in case we want to change it later, I wouldn't be so worried about having the term in the block output per se.

Automattic/wp-calypso#30352 (comment) (@jeffersonrabb):

It's swiper not slider, but your point still stands :-). Currently we're loading Swiper's stylesheet dynamically, so wrapping it isn't possible:

https://github.com/Automattic/wp-calypso/blob/713a6a5e7cc27f4467af5bd97b191d5f1dbbcbbd/client/gutenberg/extensions/slideshow/create-swiper.js#L47

Line 47 in 713a6a5

However, the main win in the dynamic loading is the large Javascript library, so we could include the stylesheet as you're suggesting without too much pain. I guess this becomes a trade-off between CSS leakage and lazy loading.