vuejs / vueify

Browserify transform for single-file Vue components
MIT License
1.17k stars 152 forks source link

SCSS /deep/ implementation from vue-loader #197

Open ghost opened 7 years ago

ghost commented 7 years ago

The CSS feature of /deep/ (SASS) and >>> which was implemented in v12.2.0 of Vue-loader doesn't seem to be in Vueify. Or have I misunderstood something?

.foo >>> .bar { color: red; }
.foo /deep/ .bar { color: red; }
ghost commented 7 years ago

style-rewrite should have deep alias for >>> combinator, as vue-loader have implemented in version 12.2.0.

Insert below this line.

// ">>>" combinator
if (n.type === "combinator" && n.value === ">>>") {
    n.value = " ";
    n.spaces.before = n.spaces.after = "";
    return false;
}
// /deep/ alias for >>>, since >>> doesn't work in SASS
if (n.type === "tag" && n.value === "/deep/") {
    var next = n.next();
    if (next.type === "combinator" && next.value === " ") {
        next.remove();
    }
    return false;
}
Gormartsen commented 6 years ago

Here is a changes to https://github.com/ellukesmith/vueify/commit/ac70a80b2a69b55813f28e711d9822606c75766d

if (n.type === "tag" && n.value === "/deep/") {
    n.spaces.before = n.spaces.after = "";
    var prev = n.prev();
    if (prev.type === "combinator" && prev.value === " ") {
      prev.value = '';
    }
    n.remove();
    return false;
}