Automattic / Automattic/jetpack
Slideshow Block: Wrap Swiper's CSS in our CSS selector
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
Continuing discussion from https://github.com/Automattic/wp-calypso/pull/30352#discussion_r254273084.
TODO:
- [ ] Make Swiper styling import static
- [ ] `@import` in our SASS file, wrap in our selector:
> ```scss
> .wp-block-jetpack-slideshow {
> @import '......./slider.css';
> }
> ```
Relevant bits from the previous conversation:
https://github.com/Automattic/wp-calypso/pull/30352#discussion_r254273084 (@simison):
> Should we use nested imports to wrap Slider's CSS with our CSS selector?
>
> ```scss
> .wp-block-jetpack-slideshow {
> @import '......./slider.css';
> }
> ```
>
> Results in:
>
> ```css
> .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.
https://github.com/Automattic/wp-calypso/pull/30352#discussion_r254275318 (@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](/Automattic/wp-calypso/commit/713a6a5e7cc27f4467af5bd97b191d5f1dbbcbbd)
>
> 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.
Contributor guide
Research direction
Start with client/gutenberg/extensions/slideshow/create-swiper.js at the referenced stylesheet-loading code, then locate the Slideshow block's SASS file and the imported slider.css. Make the Swiper styling import static and scope its rules under .wp-block-jetpack-slideshow; verify that the generated selectors no longer leak to other Slider implementations.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, scss
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100