PR [Feature]: Use Tailwind's built-in Plugin API and configure Intellisense. #93

wkd-kapsule · 2024-11-02T00:43:28Z

This PR enhances the capabilities of configureMonacoTailwindcss. You can now extend the settings of Intellisense, like adding some classAttributes that will trigger autocompletion. And most importantly, you have access to Tailwind's built-in Plugin API. Instead of calling them using the plugins property of your config, you provide the arguments of each function you wish to call within a pluginAPI property.

  configureMonacoTailwindcss(monaco, {
    tailwindConfig,
    intellisense: {tailwindCSS: {classAttributes: ['styles']}},
    pluginAPI: {
      addUtilities: [
        {
          '.button': {
            color: 'var(--black-1)',
            backgroundColor: 'var(--brand-9)',
            padding: '0.5rem 1rem',
            fontSize: '1rem'
          },
          '.button-sm': {
            color: 'var(--black-1)',
            backgroundColor: 'var(--brand-9)',
            padding: '0.25rem 0.5rem',
            fontSize: '0.8rem'
          }
        }
      ]
    }
  })

netlify · 2024-11-02T00:43:43Z

✅ Deploy Preview for monaco-tailwindcss ready!

Name	Link
🔨 Latest commit	`a86ff5d`
🔍 Latest deploy log	https://app.netlify.com/sites/monaco-tailwindcss/deploys/67257933c93a9a000889967a
😎 Deploy Preview	https://deploy-preview-93--monaco-tailwindcss.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

remcohaszing

This PR does too many things. Please keep it focused. I don’t see the need to for the changes to the plugin API and unrelated changes. Let’s keep focus on supporting the configuration API.

remcohaszing · 2024-11-02T13:16:22Z

package.json

+  "directories": {
+    "example": "examples"
+  },
+  "types": "./index.d.ts"
 }


What’s with all these metadata changes? None of the changes here are needed. I also noticed you published your fork as monaco-tailwind and didn’t update any of the metadata? Forking is fine, publishing too, but using such a similar name to publish a fork doesn’t seem like the nices thing to do. It’s also misleading to both your and my users to point your metadata at my project.

Yeah, as I said, this is my very first time contributing, doing PR. I've published a package to test it on the project where I use Monaco. I only later discovered that I could have tested it directly with the demo in the repo. My bad on that. As I knew I would eventually delete the package, I didn't bother to update the metadata accordingly. So no worries about that, I'll update it and delete the package if the changes get merged here.

remcohaszing · 2024-11-02T13:18:24Z

tailwindcss.worker.d.ts

@@ -10,7 +10,7 @@ export interface TailwindWorkerOptions {
   * @returns
   *   A valid Tailwind configuration.
   */
-  prepareTailwindConfig?: (tailwindConfig?: TailwindConfig | string) => Config | PromiseLike<Config>
+  prepareTailwindConfig?: (tailwindConfig?: TailwindConfig | string) => Config


Why was this changed?

I did that in early experiment, trying to get things working. I've put it back as original afterwards, I'll fix it in next commit.

remcohaszing · 2024-11-02T13:21:02Z

index.d.ts

+      }
+    }
+   */
+  intellisense?: Partial<{


VSCode calls this settings. LSP calls it configuration. Since we already have so many things called configuration, I’m leaning towards calling this property settings.

Sounds good

remcohaszing · 2024-11-02T13:23:00Z

index.d.ts

+        recommendedVariantOrder: DiagnosticSeveritySetting
+      }
+    }>
+  }>


I think all of these nested properties should be optional, also the deeply nested ones. Since we’re defining the object, use the optional property symbol ?, not the Partial type.

remcohaszing · 2024-11-02T13:25:01Z

index.d.ts

+      showPixelEquivalents: boolean
+      rootFontSize: number
+      colorDecorators: boolean
+      files: { exclude: string[] }


I think this property is meaningless to the Monaco implementation? Let’s omit it. Also consider for each property what it does, and whether it makes sense to define it.

I frankly don't know which properties are supported in Monaco or even what they do. I just guessed that as they're present (even if empty) in the default settings used, I might as well give access to them. Maybe should we accept only the one that probably matters the most, classAttributes?

remcohaszing · 2024-11-02T13:29:59Z

src/tailwindcss.worker.ts

          // Default values are based on
          // https://github.com/tailwindlabs/tailwindcss-intellisense/blob/v0.9.1/packages/tailwindcss-language-server/src/server.ts#L259-L287
          tailwindCSS: {
            emmetCompletions: false,
-            classAttributes: ['class', 'className', 'ngClass'],
+            classAttributes: ['class', 'className', 'ngClass', ...classAttributes],


Should the user provided class attributes extend the defaults? Or should it replace them? What does the language server do?

I know that in VS Code you can directly edit the list of attributes within the settings panel or json. Here, we have to go another route. We either extend or override. In my opinion, we should extend with at least class and className as default. You wouldn't want to pass ['styles'] and lose completion/hover on class and className. I think the expected behavior is that styles gets added to the existing list.

If we really want to leave the choice to the user:

// classAttributes would look like this type classAttributes = { extend: string[] } | { override: string[] } // and the implementation like this tailwindCSS: { classAttributes: 'extend' in classAttributes ? ['class', 'className', ...classAttributes.extend] : classAttributes.override }

remcohaszing · 2024-11-02T13:34:24Z

index.d.ts

+ * }
+
+// ...you provide an array containing the arguments
+// for each function you wish to call.


This is your interpretation of how the configuration could work. This might cater to your specific situation, but it might not to others’. The prepareTailwindConfig option from initialize allows you to fully customize how the Tailwind config provided could be interpreted.

Alright, this whole thing was a big overlook, might call it a skill issue, on my side... Remember in the issue that led to this PR when I said I tried initialize but didn't make it work and couldn't really understand what is its purpose?

I was calling that thing just above window.MonacoEnvironment where I create the different workers... This is also my first time using workers, I didn't know better. Now, I've created a file for the worker, use initialize in it and point the tailwindcss worker to that file. And it just works...

wkd-kapsule · 2024-11-02T20:55:49Z

Sorry for this whole debacle and wasted time... Also for the package I've published. It was never my intention to mislead anyone. I'm going to delete it right now.

Anyway, I think that the classAttributes thing could still be a good take away from all this. It would be neat to implement it. Maybe a prepareIntellisenseConfig to go with prepareTailwindConfig?

wkd-kapsule added 4 commits November 1, 2024 19:09

Add support for tailwind config functions

76e8d56

Access to built-in Plugin API and Intellisense's settings

b63467f

Clean up

63b35c2

Correction of JS Doc for PluginAPI

53e29ca

wkd-kapsule changed the title ~~PR [Feature]: Access to Tailwind config's built-in Plugin API and Intellisense's settings.~~ PR [Feature]: Use Tailwind's built-in Plugin API and configure Intellisense. Nov 2, 2024

wkd-kapsule mentioned this pull request Nov 2, 2024

How can we use plugins in the tailwind config? #92

Closed

Corrected a misleading JS Doc

a86ff5d

remcohaszing requested changes Nov 2, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PR [Feature]: Use Tailwind's built-in Plugin API and configure Intellisense. #93

PR [Feature]: Use Tailwind's built-in Plugin API and configure Intellisense. #93

wkd-kapsule commented Nov 2, 2024

netlify bot commented Nov 2, 2024 •

edited

Loading

remcohaszing left a comment

remcohaszing Nov 2, 2024

wkd-kapsule Nov 2, 2024

remcohaszing Nov 2, 2024

wkd-kapsule Nov 2, 2024

remcohaszing Nov 2, 2024

wkd-kapsule Nov 2, 2024

remcohaszing Nov 2, 2024

wkd-kapsule Nov 2, 2024

remcohaszing Nov 2, 2024

wkd-kapsule Nov 2, 2024

remcohaszing Nov 2, 2024

wkd-kapsule Nov 2, 2024

remcohaszing Nov 2, 2024

wkd-kapsule Nov 2, 2024

wkd-kapsule commented Nov 2, 2024

PR [Feature]: Use Tailwind's built-in Plugin API and configure Intellisense. #93

Are you sure you want to change the base?

PR [Feature]: Use Tailwind's built-in Plugin API and configure Intellisense. #93

Conversation

wkd-kapsule commented Nov 2, 2024

netlify bot commented Nov 2, 2024 • edited Loading

✅ Deploy Preview for monaco-tailwindcss ready!

remcohaszing left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wkd-kapsule commented Nov 2, 2024

netlify bot commented Nov 2, 2024 •

edited

Loading