search

kazzkiq / balloon.css

Simple tooltips made of pure CSS
https://kazzkiq.github.io/balloon.css/
MIT License
5.03k stars 448 forks source link

split SASS code in separate files #132

Closed aduh95 closed 4 years ago

aduh95 commented 4 years ago

Allows users that use only balloon-mixins (and not balloon-classes) to avoid importing unused code.

My explicit goal is, on projects that don't use balloon-classes or data- attributes, to change @import "../../node_modules/balloon-css/src/balloon";by import "../../node_modules/balloon-css/src/mixins"; which would result in a 8.2kB reduction of the minified output CSS.

Also this is not a breaking change.

kazzkiq commented 4 years ago

@aduh95 Nice work, but I need more info on that.

Can you please give an use case for using mixins but not data-balloon attributes? Just wondering what could it be used for.

aduh95 commented 4 years ago

Sure, here how I'm doing it:

:host {
  position: relative;
  --balloon-color: #10101044;

  & > span {
    @include base-effects();
    /* other styles down here */
  }

  &::before {
    @include arrow-up();
    @include base-effects();

    content: "";
    position: absolute;
    z-index: 10;
    /* other styles down here */
  }
}

As I'm using web components, it doesn't make much sense to use data- attributes, and it certainly doesn't make much sense for me to add all that CSS if I'm not using it.

kazzkiq commented 4 years ago

Ok, that makes sense. Merged and published on 1.0.4. Thanks