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: css-modules/postcss-modules-local-by-default#65

next.js is still using an old version of postcss-modules-local-by-default: vercel/next.js#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 cartesapp/cartes#704
Some routes work in dev, some others don't. I'll investigate :)

[laem]

Looks like it solved the problem, thanks !