Is there a cdn address for css resources?

[BinZhiZhu]

Just like js with cdn

<script src="https://unpkg.com/vue-emoji-picker/dist/vue-emoji-picker.js"></script>

expected:

<link href="https://unpkg.com/vue-emoji-picker/dist/vue-emoji-picker.css" rel="stylesheet">

[BinZhiZhu]

https://unpkg.com/browse/vue-emoji-picker@1.0.1/dist/vue-emoji-picker.css is empty now, so css is not packaged?

[DCzajkowski]

Seems like a problem with deployment. I'll have a look, thanks!

[BinZhiZhu]

Seems like a problem with deployment. I'll have a look, thanks!

great! thanks~

So I can directly import css cdn, not need to write and import css style by myself.

[DCzajkowski]

Sorry, I haven't worked on this project for a long time and I haven't realized there is no CSS at all. I think you should create your own that fits your liking.

You can use this as a reference:

.emoji-invoker {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
}
.emoji-invoker:hover {
  transform: scale(1.1);
}
.emoji-invoker > svg {
  fill: #b1c6d0;
}
.emoji-picker {
  position: absolute;
  z-index: 1;
  font-family: Montserrat;
  border: 1px solid #ccc;
  width: 15rem;
  height: 20rem;
  overflow: scroll;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 1px 1px 8px #c7dbe6;
}
.emoji-picker__search {
  display: flex;
}
.emoji-picker__search > input {
  flex: 1;
  border-radius: 10rem;
  border: 1px solid #ccc;
  padding: 0.5rem 1rem;
  outline: none;
}
.emoji-picker h5 {
  margin-bottom: 0;
  color: #b1b1b1;
  text-transform: uppercase;
  font-size: 0.8rem;
  cursor: default;
}
.emoji-picker .emojis {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.emoji-picker .emojis:after {
  content: "";
  flex: auto;
}
.emoji-picker .emojis span {
  padding: 0.2rem;
  cursor: pointer;
  border-radius: 5px;
}
.emoji-picker .emojis span:hover {
  background: #ececec;
  cursor: pointer;
}

Here is a demo: https://codepen.io/DCzajkowski/pen/jzLzWp

[BinZhiZhu]

Sorry, I haven't worked on this project for a long time and I haven't realized there is no CSS at all. I think you should create your own that fits your liking.

You can use this as a reference:

.emoji-invoker {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
}
.emoji-invoker:hover {
  transform: scale(1.1);
}
.emoji-invoker > svg {
  fill: #b1c6d0;
}
.emoji-picker {
  position: absolute;
  z-index: 1;
  font-family: Montserrat;
  border: 1px solid #ccc;
  width: 15rem;
  height: 20rem;
  overflow: scroll;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 1px 1px 8px #c7dbe6;
}
.emoji-picker__search {
  display: flex;
}
.emoji-picker__search > input {
  flex: 1;
  border-radius: 10rem;
  border: 1px solid #ccc;
  padding: 0.5rem 1rem;
  outline: none;
}
.emoji-picker h5 {
  margin-bottom: 0;
  color: #b1b1b1;
  text-transform: uppercase;
  font-size: 0.8rem;
  cursor: default;
}
.emoji-picker .emojis {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.emoji-picker .emojis:after {
  content: "";
  flex: auto;
}
.emoji-picker .emojis span {
  padding: 0.2rem;
  cursor: pointer;
  border-radius: 5px;
}
.emoji-picker .emojis span:hover {
  background: #ececec;
  cursor: pointer;
}

Here is a demo: https://codepen.io/DCzajkowski/pen/jzLzWp

Now i'm doing what you said,I just hope that you can also pack the css files in, so that developers don’t need to cite css by themselves, reducing part of the project size.

It's ok, u can close this issue.

[DCzajkowski]

Now i'm doing what you said,I just hope that you can also pack the css files in, so that developers don’t need to cite css by themselves, reducing part of the project size.

The size of the project won't decrease. You will just move the dependency to a third party you won't have control over.

I am not including CSS for these reasons:

1. I want to limit the number of issues and PRs with cosmetic changes,
2. I want to give devs full power of HTML and CSS, by shifting responsibility of maintaining it by them,
3. I want to have the package as generic as possible. Some websites require different styling.

Having said that, if you really don't want to have the code in your project but on a CDN, you can just paste it in pastebin and link that. Here is a ready link: https://pastebin.com/raw/iPwPZFQv. But I personally wouldn't do that.

[BinZhiZhu]

Now i'm doing what you said,I just hope that you can also pack the css files in, so that developers don’t need to cite css by themselves, reducing part of the project size.

The size of the project won't decrease. You will just move the dependency to a third party you won't have control over.

I am not including CSS for these reasons:

1. I want to limit the number of issues and PRs with cosmetic changes,
2. I want to give devs full power of HTML and CSS, by shifting responsibility of maintaining it by them,
3. I want to have the package as generic as possible. Some websites require different styling.

Having said that, if you really don't want to have the code in your project but on a CDN, you can just paste it in pastebin and link that. Here is a ready link: https://pastebin.com/raw/iPwPZFQv. But I personally wouldn't do that.

thanks