I'm having a weird issue when using styled-components along with VSCode. Below is basically what I get for any components coming from styled-components, they all return any.
I got it working before, but can't tell when and I can't see what's wrong in the setup to return any for all the components. I tried to move back to tslint config, removing/commenting out all rules inside the eslintrc files, but couldn't make it work either.
Supprisingly enough, I tried the starter kit I'm using for my project and the types there are working with the original setup.
I tried to use the same version of styled-components packages, but still couldn't make it work. Any help, or direction to look at this issue would be very welcomed!
.eslintrc.js
module.exports = { env: { browser: true, es6: true, }, extends: ['plugin:@typescript-eslint/recommended','plugin:@typescript-eslint/recommended-requiring-type-checking','plugin:react/recommended','prettier/@typescript-eslint', ], parser: '@typescript-eslint/parser', parserOptions: { project: './tsconfig.json', sourceType: 'module', ecmaFeatures: { jsx: true }, }, plugins: ['@typescript-eslint', 'react', 'react-native'], rules: { camelcase: 'off','react/display-name': 'off','react/prop-types': 'off','@typescript-eslint/ban-ts-ignore': 'off','@typescript-eslint/camelcase': 'off','@typescript-eslint/explicit-function-return-type': 'off','@typescript-eslint/interface-name-prefix': 'off','@typescript-eslint/no-explicit-any': 'off','@typescript-eslint/no-use-before-define': 'off','@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],'@typescript-eslint/no-non-null-assertion': 'off','@typescript-eslint/unbound-method': 'off','@typescript-eslint/no-unsafe-assignment': 'off','@typescript-eslint/no-unsafe-call': 'off','@typescript-eslint/no-unsafe-member-access': 'off','@typescript-eslint/no-unsafe-return': 'off','@typescript-eslint/no-misused-promises': ['error', { checksVoidReturn: false, }, ],'@typescript-eslint/explicit-module-boundary-types': ['error', { allowArgumentsExplicitlyTypedAsAny: true }], }, settings: { react: { pragma: 'React', version: 'detect', }, }, ignorePatterns: ['node_modules/**/*', 'docs/**/*', 'examples/**/*', 'lib/**/*'],};tsconfig.json
{"compilerOptions": {"allowSyntheticDefaultImports": true,"baseUrl": "./src","experimentalDecorators": true,"inlineSources": true,"jsx": "react","lib": ["es2017", "dom"],"module": "commonjs","moduleResolution": "node","noEmit": true,"noUnusedLocals": true,"noUnusedParameters": true,"plugins": [ {"name": "typescript-styled-plugin","lint": {"validProperties": ["shadow-color","shadow-opacity","shadow-offset","shadow-radius","padding-horizontal","padding-vertical","margin-vertical","margin-horizontal","tint-color","aspect-ratio","elevation" ] } } ],"resolveJsonModule": true,"skipLibCheck": true,"sourceMap": true,"sourceRoot": "./src","strict": true,"strictPropertyInitialization": false,"suppressImplicitAnyIndexErrors": true,"target": "es2015" },"include": [".eslintrc.js", "src/**/*.ts", "src/**/*.tsx"]}"lint": "yarn format && yarn eslint && yarn stylelint","eslint": "tsc -p . --noEmit --skipLibCheck; eslint --fix 'src/**/*.{ts,tsx}'",..."@typescript-eslint/eslint-plugin": "3.8.0","@typescript-eslint/parser": "3.8.0","eslint": "7.6.0","eslint-config-prettier": "6.11.0","eslint-plugin-react": "7.20.5","eslint-plugin-react-native": "3.8.1",styled.d.ts
import 'styled-components';declare module 'styled-components' { // tslint:disable-next-line export interface DefaultTheme { darkMode: boolean; background: string; lightBackground: string; grayBackground: string; darkBackground: string; heading: string; subheading: string; copy: string; stroke: string; underlay: string; map: string; }}