Skip to content

file level pure mode opt-out #84

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jantimon opened this issue Dec 11, 2024 · 0 comments · Fixed by #85
Closed

file level pure mode opt-out #84

jantimon opened this issue Dec 11, 2024 · 0 comments · Fixed by #85

Comments

@jantimon
Copy link
Contributor

I got some feedback about styling third-party React components for cssmodules-pure-ignore

in those cases where you need /* cssmodules-pure-ignore */ very often you need it several times e.g. when styling over an external library:

/* cssmodules-pure-ignore */
:global(.select__control) { border: 1px solid #e2e8f0 }

/* cssmodules-pure-ignore */
:global(.select__menu) { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) }

/* cssmodules-pure-ignore */
:global(.select__option--is-selected) { background: #4299e1 }

/* and so on... */

and for postcss-nested it's even worse as every & selector (e.g. &:hover) must have its own ignore comment..

what do you think about adding a cssmodules-pure-no-check flag that can be placed at the file root to disable pure mode for the entire file:

/* cssmodules-pure-no-check */

:global(.select__control) { border: 1px solid #e2e8f0 }
:global(.select__menu) { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) }
:global(.select__option--is-selected) { background: #4299e1 }

I'll add a small pr so maybe looking at it helps to understand the idea

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant