kalimahapps / vscode-tailwind-config-viewer

VSCode extension to display tailwind config in sidebar
MIT License
8 stars 0 forks source link

Enhancement Suggestion for Module Parsing Compatibility #11

Closed suiboli314 closed 4 months ago

suiboli314 commented 10 months ago

I've encountered an issue related to the module parsing process #2 in the extension, specifically when integrating with Tailwind/PostCSS/Autoprefixer.

Initially, my configuration was as follows:

export const content = ['./src/components/**/*.{html,jsx}', './src/pages/**/*.{html,jsx}'];
export const darkMode = 'class';
export const theme = {};
export const safelist = [];
export const plugins = [];

This setup functioned correctly. However, I encountered the following error after installing the extension:

 ERR [Extension Host]  --- ERROR----
export default {

SyntaxError: Unexpected token 'export'
    at vscode\data\extensions\kalimahapps.tailwind-config-viewer-0.0.85\build\tailwind-config.js:188:80
    at TailwindConfig.getConfig (vscode\data\extensions\kalimahapps.tailwind-config-viewer-0.0.85\build\tailwind-config.js:138:31)
    at SidebarProvider.updateConfigData (vscode\data\extensions\kalimahapps.tailwind-config-viewer-0.0.85\build\sidebar-provider.js:40:44)

After modifying the syntax with export default as suggested in the tailwind v3.3:

export default {
    content: ['./src/components/**/*.{html,jsx}', './src/pages/**/*.{html,jsx}'],
    darkMode: 'class',
    theme: {},
    safelist: [],
    plugins: [require('@tailwindcss/typography')],
};

The issue persists.

As I see the code, adding "type":"module" to package.json resolved this, but it seems like a workaround. I suggest enhancing the extension to better handle different module definitions, improving flexibility and user experience.

Thank you for considering this suggestion.

abdul-alhasany commented 4 months ago

Thanks for the suggestion. I am not planning to support this since this is where JS development is headed. Using ESM "type":"module" will become the default.