Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support devtools for better user experience #110

Merged
merged 1 commit into from
Apr 20, 2022

Conversation

await-ovo
Copy link
Contributor

@await-ovo await-ovo commented Apr 19, 2022

Feature Request

@harlan-zw Hi, first of all, it's nice to be able to use this plugin inside webpack, but it would be nice to be able to use design in devtools like vite.

I really like design in devtools and autocomplete, it is awesome!

So, I've tried to add a backend server to handle post requests from devtools. So far it's working ok in examples:

next-webpack-wini-devtools

Just import "windi-devtools" or "virtual:windi-devtools" into your code and you can experience this very cool feature.

I also added a server user option to customize the host and port of the backend server, like following:

module.exports = {
  webpack: {
    plugins: {
      add: [
        new WindiCSSWebpackPlugin({
          virtualModulePath: 'src',
          server: {
            port: 9999,
            host: 'localhost'
          }
        })
      ],
    },
  }
}

Known Issues

  • If you use eslint-webpack-plugin in your project, you need to configure it to ignore virtual:windi-devtools to avoid errors:
// craco.config.js
module.exports = {
  eslint: {
      pluginOptions: config => {
        config.exclude = ['**/node_modules/**', '**/virtual:windi-devtools*']
        return config;
      },
  }
}
  • When use devtools in examples/umijs, the css does not change when I change the class attribute in browser, I am still looking for the reason.

  • Currently the backend server does not support https

Finally, thank you very much for reading the content of this PR and the review :)

@harlan-zw
Copy link
Member

This is really awesome, great job and thanks for the contribution 👏 @await-ovo!

@harlan-zw harlan-zw merged commit df96ede into windicss:main Apr 20, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants