automatically inject :global

[jantimon]

next-yak automatically uses css modules behind the scenes and in nextjs css modules are local by default.
this means that selectors e.g. html.dark-mode will be scoped automatically to the component

for example

const StyledDiv = styled.div`
  background-color: #f0f0f0;
  html.dark-mode & {
    background-color: #000;
  }
`;

becomes

.StyledDiv-be2f45 {
  background-color: #f0f0f0;
  html.dark-mode-a4e345 & {
    background-color: #000;
  }
}

so although the user wrote html.dark-mode it would NOT match.

as this is unintuitive for most users and therefore next-yak should automatically inject :global

[jantimon]

I guess there are multiple cases:

1. String - (should be global)

const Bar = styled.div`.Foo { ... }`

2. Same file component - (should be local)

const Foo = styled.div``;
const Bar = styled.div`${Foo} { ... }`

3. Constant - (should be global)

const darkMode = ".darkMode";
const Bar = styled.div`${darkMode} { ... }`