update and fork

[jasonwilliams]

• hwb(), var() and calc() added to the css language server. This raises the completions body length to 160 in tests
• Update dependencies

[karlhorky]

So since these updates were released in styled-components.vscode-styled-components@1.7.6, I tested them out, to see if it would get rid of this aspect-ratio warning from the issue below:

• Add aspect-ratio as default valid property microsoft/vscode-css-languageservice#317

I first tried out my installed version styled-components.vscode-styled-components@1.7.5 with my new version of VS Code (1.74.0)... and... actually the error was already gone 🤔😳 (the error + warning below is actually a real typo, just to test that the error checking is working)

Indeed, it also works with styled-components.vscode-styled-components@1.7.6:

---

So maybe somehow the updates of dependencies in vscode-css-languageservice@6.2.1 already fixed it? (with the new release of VS Code 1.74.0 maybe?

• update dependencies & prepare 6.2.1 microsoft/vscode-css-languageservice#319

[karlhorky]

Ran into the problem with a different CSS property just now - accent-color doesn't appear to work, in either the normal styled-components.vscode-styled-components@1.7.5 Release version or the styled-components.vscode-styled-components@1.7.6 Pre-Release version (see below).

Maybe the property is too new and not yet in the vscode-css-languageservice data?

The error message is "Unknown property: 'accent-color".

[jasonwilliams]

yeah CSS properties aren't handled here but maybe you can help me understand a bit more how this chain works.
My understanding is it was added already: microsoft/vscode-custom-data#33 but it hasn't made its way down to here, so maybe there's an issue somewhere.

We use https://github.com/microsoft/vscode-css-languageservice which pulls from https://github.com/microsoft/vscode-custom-data/tree/main/web-data and I can see it in there: https://github.com/microsoft/vscode-custom-data/blob/main/web-data/data/browsers.css-data.json#L19798

You may have to get the debugger out and have a look, directions for testing are here:
https://github.com/styled-components/vscode-styled-components/blob/main/CONTRIBUTING.md#intellisense

Once setup you should see data travelling from CSS language server -> typescript styled plugin -> VSCode. I would just follow the chain all the way to the root until you can see why it's not showing up.

Also, if you're able to make a new issue in VSCode repo about that, that would be helpful also

[karlhorky]

Interesting, with VS Code 1.77.0 and styled-components.vscode-styled-components@1.7.5, the aspect-ratio warnings don't show up anymore.

But also, no warnings about invalid properties are showing up 😬 (see accent-coooler below), so maybe there's something wrong here generally:

[jasonwilliams]

@karlhorky see styled-components/vscode-styled-components#387 (comment)

you should try vs 1.7.7 (you’re using 1.7.5)

[karlhorky]

Yeah, I am on the Release version. I will wait until the new versions are no longer marked as Pre-Release to upgrade (as many users will)

[karlhorky]

But yes, the 1.7.7 Pre-Release version does resolve the issue (see below). Downgrading again now to the Release version.

[nyxb]

i have this problem:

[jasonwilliams]

@nyxb see https://github.com/styled-components/vscode-styled-components#i-get-unknown-property-x-on-a-property-i-know-is-valid

[nyxb]

yeah but it has no effect.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "allowImportingTsExtensions": true,
    "strictNullChecks": true,
    //  "noImplicitAny": false,
    "plugins": [
      {
        "name": "next"
      },
      {
        "name": "typescript-styled-plugin",
        "lint": {
          "validProperties": [
            "-webkit-background-clip",
            "vector-effect"
          ]
        }
      }
    ],
    "paths": {
      "@components/*": ["./src/components/*"],
      "@hooks/*": ["./src/hooks/*"],
      "@constants": ["./src/constants"],
      "@helpers/*": ["./src/helpers/*"],
      "@utils": ["./src/utils"],
      "@lib/*": ["./src/lib/*"],
      "@types": ["./types"],
      "@layouts/*": ["./src/layouts/*"],
      "@content": ["./src/content"],
      "@server/*": ["./src/server/*"],
      "@post-helpers/*": ["./src/post-helpers/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "types/**/*.d.ts", "src/helpers/mdx-components.helpers.js", "src/helpers/mdx-components.helpers.js", "src/components/Playground/Toolbar/FormatButton.js"],
  "exclude": ["node_modules"]
}