CSP Violation

[sheremet-va]

This package is inlining css, which violates my CSP rules (default-src 'self'). I know I can enable unsafe-inline but this is unsafe and kinda defeats the purpose.

Is it possible to bundle this package in some other way?

[XiongAmao]

Sorry for the late reply.

I have released v1.2.2, which may fix this issue.
I extract css to dist/external-css/vue-easy-lightbox.css. And .js in this directory(dist/external-css/*.js) do not contain inlining css.

// in this path vue-easy-lightbox/dist/external-css/*.js 
import VueEasyLightbox from 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.es5.esm.min.js'

// you need to import css yourself
import 'vue-easy-lightbox/external-css/vue-easy-lightbox.css' 

[sheremet-va]

Hey! Thank you very much for the clean fix!

Importing in typescript works, but typechecking gives me this error:

(importing css doesn't give me any errors)

For now I fixed it locally with:

declare module 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.es5.common.min.js';

But I think vue-easy-lightbox should support it - since the package has types/index.d.ts , TypeScript support is expected.

[XiongAmao]

I did a search. But haven't found how to add d.ts for named module path dist/*.js yet.

As you mentioned, add d.ts locally is one way:

declare module 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.es5.common.min' {
  import VueEasyLightbox from 'vue-easy-lightbox'
  export default VueEasyLightbox
}

The other way, if you're using webpack:
https://webpack.js.org/configuration/resolve/#resolvealias

// wepback.config.js
module.exports = {
  //...
  resolve: {
    alias: {
      'vue-easy-lightbox$': 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.es5.common.min.js',
    },
  },
};

// in your component
import VueEasyLightbox from 'vue-easy-lightbox' // work

[sheremet-va]

Thank you for your advice with aliasing. Will do that.

I think it can be added to the docs.

[XiongAmao]

Yes, docs updated.
https://onycat.com/vue-easy-lightbox/guide/#external-css-build-1-2-3

[sheremet-va]

Thank you! Closing the issue now

[ghost]

Hi @XiongAmao are external-css builds available for vue2 component or only vue3? thanks

[XiongAmao]

@ekrausso
Hi, it is released in v0.19.0.

[ghost]

@XiongAmao great!! thanks :)