Using with Preact/TypeScript

[tombell]

I'm trying to use nano-css with a new preact project using TypeScript and it's not finding/working with the type definitions in the package.

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "jsx": "react",
    "jsxFactory": "h",
    "lib": ["es5", "es6", "dom"],
    "rootDirs": ["src"]
  }
}

src/nano.ts:

import { preset } from 'nano-css/preset/sheet';

const { rule, sheet } = preset();

export {
  rule,
  sheet,
};

The error I am getting is:

7016[QF available]: Could not find a declaration file for module 'nano-css/preset/sheet'. 
'/Users/tombell/Code/[redacted]/node_modules/nano-css/preset/sheet.js' implicitly has an 'any' type. 
Try `npm install @types/nano-css` if it exists or add a new declaration (.d.ts) file containing `declare module 'nano-css/preset/sheet';

I can disable the error by turning off noImplicitAny, but I would rather not disable that for my actual project.

[44px]

@tombell, seems like you found a solution. Would you mind if I leave it here? This issue is easily googled by "nano-css typescript" so having solution right here can save someone's time.

Adding path mappings in tsconfig.json helps:

"baseUrl": ".",
"paths": {
  "nano-css/*": ["./node_modules/nano-css/"]
}

Please read @tombell's post for detailed example: https://tomb.io/post/typescript-and-preact/#typescript

[tombell]

@44px I don't mind, I wrote the post in case others encountered similar issues, it's worth noting that some of the add-ons in nano-css don't have type definitions currently.

[SagnikPradhan]

Seems like some types are missing 😢 This issue should be opened till it is fixed.