Rules to expand "html /deep/" and "::shadow" classes for Polymer/WebComponents

rules.less

// Rules

.shadow(@parent, @sel, @ruleset) {
  @rule: ~"@{parent}::shadow @{sel}";
  @{rule} {
    @ruleset();
  }
}

.deep(@parent, @sel, @ruleset) {
  @rule: ~"@{parent} /deep/ @{sel}, @{parent} @{sel}";
  @{rule} {
    @ruleset();
  }
}

.deep(@sel, @ruleset) {
  @rule: ~"html /deep/ @{sel}, @{sel}";
  @{rule} {
    @ruleset();
  }
}

// Samples

.deep(p, {
  margin: 0;
  & a {
    text-decoration: none;
  }
});

.deep('#ink', {
  color: white;
});

.deep(paper-input, '#ink', {
  color: black;
});

.shadow(paper-input, '#ink', {
  color: white;
});

.shadow('#my_button', '#ripple', {
  color: blue;
});