search

jantimon / next-yak

a streamlined CSS-in-JS solution tailor-made for Next.js, seamlessly combining the expressive power of styled-components syntax with efficient build-time extraction and minimal runtime footprint, ensuring optimal performance and easy integration with existing atomic CSS frameworks like Tailwind CSS
https://yak.js.org
108 stars 2 forks source link

fix nested css selectors #85

Closed jantimon closed 4 months ago

jantimon commented 4 months ago

Our current approach has an edge case for dynamic styles inside a foreign selector e.g.:

     import styles from "./page.module.css";
     import { styled, css } from "next-yak";
     const Button = styled.button`
      font-size: 2rem;
      font-weight: bold;

      form & {
        color: red;
      }

      .Icon {
        ${($primary) => $primary && css`background: black;`}
      }

      display: block;
    }`

By parsing the css we can split the css correctly and build up the correct css selector.

Bonus: we can get rid of :where for faster selectors

vercel[bot] commented 4 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
yacijs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 5, 2024 0:17am
codspeed-hq[bot] commented 4 months ago

CodSpeed Performance Report

Merging #85 will not alter performance

Comparing feature/css-parsing (c971a0b) with main (47d2ed6)

Summary

✅ 2 untouched benchmarks

jantimon commented 4 months ago

I think the way we handle CSS-Variables changed and that should also be reflected in the docs.

Maybe you actively decided against using path.scope.generateUidIdentifier https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md#generating-a-uid, but It looks to me as if we should use it for our identifiers 😉

Thank you for submitting it. It allows me to work further on the CSS prop.

good point - actually my implementation was incomplete

for production we should not return readable css variable names but short css variable names.

added the necessary code here #f9addbe0e00288d51f9171f5764b2b2c855cfa40