search

willofindie / vscode-cssvar

VSCode extension to support CSS Variables Intellisense
https://marketplace.visualstudio.com/items?itemName=phoenisx.cssvar
MIT License
243 stars 4 forks source link

[Feat] Add examples for Tailwindcss setup with PostCSS plugins #64

Closed phoenisx closed 1 year ago

phoenisx commented 2 years ago

This extension already supports a minimal setup, i.e.

  "cssvar.postcssPlugins": [
    "tailwindcss/nesting",
    "tailwindcss"
  ]

This works and it also detects CSS variables dynamically created by TailwindCSS plugins:

image

Improvement

A complex setup where users have custom options passed to plugins is not yet supported. E.g.:

  "cssvar.postcssPlugins": [
    "tailwindcss/nesting", // No way to pass options to this plugin
    "tailwindcss"  // No way to pass options to this plugin
  ]

Support to pass options to each plugin will be added as part of this feature: https://github.com/willofindie/vscode-cssvar/issues/61.

Once the above enhancement is added and released, the following syntax should work, keeping a check on backwards compatibility, resembling ESLint array syntax to pass options to a plugin, as follows:

  "cssvar.postcssPlugins": [
//  ["plugin-name", { plugin: options }]
    ["tailwindcss/nesting", { options }],
    ["tailwindcss", { tailwindOpts }]
  ]