Support unpure style tags ?

[laem]

In my @cartesapp I make heavy use of styled-components to wrap multiple element styled in one component only.

Just tried converting my codebase to yak, I got this error :

 Selector "h1" is not pure (pure selectors must contain at least one local class or id)

  1 | .ExplanationWrapper {
> 2 |   h1 {
    |   ^
  3 |     margin-top: 0;
  4 |   }

Is this a limitation when using Yak ? In this case, I believe it should be noted on the README as a big limitation when migrating.

This is the file in question :

import { styled } from 'next-yak'

export const ExplanationWrapper = styled.div`
    h1 {
        margin-top: 0;
    }
    ol {
        padding-left: 1.5rem;
    }
    margin: 1vw 1rem;
    a {
        color: var(--darkestColor);
    }
    p {
        margin: 1rem 0;
        line-height: 1.4rem;
    }
`
export const ContentSection = styled.section`
    position: relative;
    h1 {
        margin: 0;
        margin-left: 0.1rem;
    }
`

[laem]

I suppose I'm doing something wrong because it seems to work with the Stackblitz demo.

[jantimon]

Selector "h1" is not pure (pure selectors must contain at least one local class or id)

is an error from next.js (postcss-modules-local-by-default) but the code you showed should definitely work

I believe it is cause by this problem: https://github.com/css-modules/postcss-modules-local-by-default/issues/65

next.js is still using an old version of postcss-modules-local-by-default: https://github.com/vercel/next.js/pull/72622

but there is a workaround as described in the readme:

For now Next.js supports nesting only with the postcss-nested plugin. Therefore you have to create a postcss.config.js file in your project root:

// postcss.config.js
module.exports = {
  plugins: {
    "postcss-nested": {},
  },
};

[laem]

Thanks ! I'm running the migration here https://github.com/cartesapp/cartes/pull/704 Some routes work in dev, some others don't. I'll investigate :)

[laem]

Looks like it solved the problem, thanks !