Selecting class via Sass Modules Next.js

[jnemec 3 Likes (Newbie)]

Quote

I've been getting the hang of using GSAP with Next.js, but I had a question about getting a class name by scoping. Is there a way I can select the "styles.content" class without having to add in a regular css class ("content") to be able to select it?

import React, { useRef, useLayoutEffect } from 'react'

import { SanityImageDiv } from '../../../../layout/shared'

import { heroAnimate } from '../animate/animate'
import { gsap } from 'gsap'

import styles from './hero.module.scss'

const Hero = ({
  body,
  buttons,
  heading,
  media = [],
  sectionID = { current: '' },
}) => {
  const sectionRef = useRef(null)

  // GSAP
  useLayoutEffect(() => {
    const ctx = gsap.context(() => {
      const sectionContent = document.querySelector('.content')
      heroAnimate(sectionContent.children)
    })
    return () => ctx.revert()
  }, [])

  return (
    <section id={sectionID.current} className={styles.section} ref={sectionRef}>
      {media.map((item) =>
        item?._type === 'image' ? (
          <SanityImageDiv
            key={item._key}
            className={styles.image}
            image={item.asset}
            alt={item.alt}
          >
            <div className={`content ${styles.content}`}>
              <h2 className={styles.heading}>{heading}</h2>
              <p className={styles.body}>{body}</p>
              <div className={styles.buttons}>
                {buttons?.map((button) => (
                  <a
                    key={button._key}
                    href={`#${button?.sectionID}`}
                    className={styles.button}
                  >
                    {button?.label}
                  </a>
                ))}
              </div>
            </div>
          </SanityImageDiv>
        ) : (
          <div key={item._key}>Unsupported file type</div>
        )
      )}
    </section>
  )
}

export default Hero

 

[Rodrigo 5,376 Likes (Superhero)]

Hi,

 

Unfortunately there’s no way as far as I know. CSS modules are there to scope classes in order to prevent class names collisions.

 

But keep in mind that GSAP Context has scoping built into it, so in your case all you have to do is pass sectionRef as the scope and any selector you use will be scoped to that ref so you’ll avoid selecting any element that has the same class name elsewhere in your application. So passing a custom class the way you’re doing it right now should work.

 

In order to pass the scope into GSAP Context just do this

useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    const sectionContent = gsap.utils.toArray('.content'))
  }, sectionRef)//  <- Scope
  return () => ctx.revert()
}, [])

That should create an array of the content elements inside the ref and not select any other that’s outside.

 

Hopefully this helps.
Happy  Tweening!

[unflux 2 Likes (Newbie)]

Hello,

I use GSAP with css modules and to avoid adding extra classes, i use css attribute selector like this :
 

useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    const sectionContent = gsap.utils.toArray('[class*="content"]'))
  }, sectionRef)
  return () => ctx.revert()
}, [])

So, the scoped class is enough : 
<div className={`${styles.content}`}>

I hope this helps.