eagerpatch / navita

Atomic CSS-in-JS with zero runtime
https://navita.style
MIT License
51 stars 0 forks source link

Relax types #15

Closed Zn4rK closed 1 year ago

Zn4rK commented 1 year ago

The types for style was a bit too strict in some cases. This relaxes them quite a bit. It's still up to the user to write correct selectors.

Index signatures and template literal strings are not recognised by TypeScript, so users will have to cast in cases such as:

import { style } from '@navita/css';

const someName = 'a b c'.replaceAll(' ', '.');

const x = style({
// TypeScript will not be able to infer this as // "&${string}" even though that's the key. 
// Fix by doing "as const" (in some cases where it's able to be infered) or lie to the compiler like this
[`& ${someName}` as '& someName']: {
  background: 'hotpink',
}
});

// ^- That's a contrived example, and even though it works in Navita,
// you should try to avoid it and structure your html/css better.
// That will create a few css declarations that you are never going to be repeating, thus circumventing atomic css. 
changeset-bot[bot] commented 1 year ago

🦋 Changeset detected

Latest commit: 53e2e2d46954e8f0c55ef64757178274997cdd43

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 14 packages | Name | Type | | --------------------------- | ----- | | @navita/engine | Patch | | @navita/types | Patch | | @navita/css | Patch | | @navita/core | Patch | | @navita/jest | Patch | | navita-example-with-jest | Patch | | with-next-app-dir | Patch | | navita-with-next-example | Patch | | navita-with-vite-example | Patch | | navita-with-webpack-example | Patch | | @navita/vite-plugin | Patch | | @navita/webpack-plugin | Patch | | navita | Patch | | @navita/next-plugin | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR