nxtchg/pieces

Simple, stand-alone, reusable components.

pieces's Issues

I can't Import vs-notify in my vue 2+ project

This error message keeps coming up at line 38 of vs-notify.js:
Uncaught ReferenceError: Vue is not defined
How can I fix it?

NPM

Would you mind adding this to NPM?

Empty at-rules are being compiled

The CSS parser ignores empty rules and doesn't compile them, and that's great, in my opinion.

However, empty at-rules are being compiled and aren't being ignored.

For example, the following CSS code:

@media (max-width: 1024px) {

}

is being unnecessarily compiled to: @media (max-width: 1024px){}

---

Besides, the following CSS code:

@media (max-width: 1024px) {
    div {
    }
}

is being unnecessarily compiled to: @media (max-width: 1024px){}, too.

@document is causing a parsing error

The following CSS code:

@document url("https://www.example.com/") {
    h1 {
        color: green;
    }
}

is causing this parsing error: TypeError: m[1] is undefined

@supports' condition is becoming "undefined" in the compiled result

The following CSS code:

@supports (display: grid) {
    main {
        display: grid;
    }
}

is being compiled to:

@supports undefined{main{display:grid;}}

Alert area box visible when alert is not active

Hi - thanks for this Vue component.

It's working well on my site to show alerts, but there seems to be a small issue with CSS as shown in the attached image.

Specifically, there's a subtle blocked area appearing where the alert is set to show up when activated. This area moves around when positioning the alert to appear at the top left, bottom right, etc.

Any ideas how to get rid of it?

My code:
<vs-notify group="alert" position="bottom right" :duration="6000"></vs-notify>

this.$notify("alert", response.body.ErrorMessage, "error");

I've not tried to adjust styling on the notify element at all.

-Ken

Some syntax errors are not being reported

The following syntax errors are not being reported:

Unclosed block (when the next rule's selectors contain colons):

body {
    color: #000;


p:first-child {
    color: #111;
}

Unclosed bracket:

a[href {
    color: #111;
}

Unclosed parenthesis:

li:nth-child(even {
    color: #111;
}

p::before {
    content: attr(data-test;
}

p {
    background: url(images/bg.jpg;
}

div {
   width: calc(10% + 20px;
}

@import url(main.css;

Unclosed string:

p::before {
    content: "test;
}

p {
    background: url("images/bg.jpg);
}

p {
    font-family: "Test;
}

a[href="index.php] {
   color: #111;
}

@import "main.css;

Unclosed comment:

/* Lorem ipsum *

Double colon:

p {
    color:: #111;
}

Selector format error:

p; {
    color:: #111;
}

@​font-face at-rule missing name:

@ {
    font-style: normal;
    font-weight: 400;
    font-family: "Font Awesome";
    src: url(fonts/fa-regular-400.woff2) format("woff2"),
         url(fonts/fa-regular-400.woff) format("woff");
}

@import's url and media queries are becoming "undefined" in the compiled result

Both of the following CSS codes:

@import url(main.css);

@import url(main.css) (max-width: 1024px);

are being compiled to:

@import undefined;

Vendor-prefixed @document is causing a compiling error

The following CSS code:

@-moz-document url-prefix() {
    h1 {
        color: green;
    }
}

is causing this compiling error: TypeError: this[n.type] is not a function

Uppercased at-rule name is causing parsing error

For example, the following valid at-rules are causing parsing error

@MEDIA (max-width: 1024px) {
    div {
        color: #000;
    }
}

@IMPORT url(main.css);