No type information for styles inside `[theme.breakpoints.down()]` object

[MariaSolOs]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Steps:

1. Write the following styled button:

export const StyledButton = styled('button')(({ theme }) => ({
    width: '100%',

    [theme.breakpoints.down('md')]: {
    }
}));

2. Start writing width: 50% inside the [theme.breakpoints.down('md')] styles. Notice how there are no CSS completions such as the ones provided outside that object.

Current behavior 😯

No CSS completions inside [theme.breakpoints.down('XX')] objects.

Expected behavior 🤔

CSS completions are always displayed when using styled.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Browser used: Chrome

  System:
    OS: macOS 12.6
  Binaries:
    Node: 16.17.0 - /private/var/folders/kq/jlq8006j7tg9d32d8frd8w800000gn/T/xfs-69364989/node
    Yarn: 3.2.3 - /private/var/folders/kq/jlq8006j7tg9d32d8frd8w800000gn/T/xfs-69364989/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Edge: Not Found
    Firefox: Not Found
    Safari: 16.0

tsconfig.json file

    {
    "include": [
        "next-env.d.ts",
        "next.config.mjs",
        "**/*.ts",
        "**/*.tsx"
    ],
    "exclude": [
        "node_modules"
    ],
    "compilerOptions": {
        // Type checking
        "allowUnreachableCode": false,
        "allowUnusedLabels": false,
        "noFallthroughCasesInSwitch": true,
        "noImplicitAny": true,
        "noImplicitOverride": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noPropertyAccessFromIndexSignature": true,
        "noUncheckedIndexedAccess": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "strict": true,

        // Modules
        "module": "esnext",
        "moduleResolution": "nodenext",
        "resolveJsonModule": true,

        // Emit
        "importHelpers": true,
        "importsNotUsedAsValues": "error",
        "removeComments": true,
        "sourceMap": true,
        "noEmit": true,

        // JS support
        "allowJs": true,
        "checkJs": true,

        // Interop constraints
        "esModuleInterop": true,
        "isolatedModules": true,
        "forceConsistentCasingInFileNames": true,

        // Language and environment
        "target": "ESNext",
        "jsx": "preserve",
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ],

        // Projects
        "incremental": true,

        // Completeness
        "skipLibCheck": true
    }
}

[siriwatknp]

From what I checked, it does not work but I am not sure if this should be considered a bug or a new feature as we have experienced a typescript performance issue.

[mnajdova]

I am aware of this issue, I am pretty sure it has been reported before, but couldn't find the issue. The broken autocomplete comes from the unknown type added in https://github.com/mui/material-ui/pull/26228. This was needed in order to make the interoperability between @mui/styles & @mui/styled-engine. We may be able to drop these in v6 if we decide to drop the compatibility between the two.

[MariaSolOs]

@mnajdova That would be great!