Output just the new rules

[dphochman]

How to output just the new rules, and not the rules that did not change, and not the selectors that were already present in the source CSS?

For example, I want

.yellow {color: yellow;}
.gray {color: gray;}
.black {color: black;}
.button {@inherit: .gray, .black;}

to yield:

.button {color: gray;}
.button {color: black;}

postcss-inherit is helping me leverage an unruly stylesheet collection that I inherited, and the option to separate and apply the changes makes it easier to integrate and makes the result much cleaner and easier to understand. Thank you!

[GarthDB]

@dphochman I'm glad it's been useful.

You could use placeholder classes:

%yellow {color: yellow;}
%gray {color: gray;}
%black {color: black;}
.button {@inherit: %gray, %black;}

That should give you the result you're looking for.

[dphochman]

Hi @GarthDB, inserting the % and inheriting from placeholders is definitely helping.

Doing this uncovered some undesirable behavior in postcss-inherit:

1. @inherit: selector does not inherit selector inside a @media query block, and may throw Could not find rule that matched selector in the same atRule.. Is there an option or a technique to inherit an atRule container if there's a matching selector inside?
2. @inherit: selector inherits selector and selector:pseudoclass and selector[attr="value"], but does not inherit selector.classname. Is there an option or a pattern or a technique to inherit all the selector.classname variations?

I can probably code my way out of these issues for the project in front of me, but if there's a general solution or approach, perhaps that could be documented or folded back into postcss-inherit.

[GarthDB]

These are both intended behaviors.

1. In the README it says there is a limitation with media queries:

When in a media query, you can only inherit rules from root, or rules contained in a media query with the same parameters.

This is because media queries mess with cascading, and inheriting across them causes issues. The README explains how you can use this with media queries.

2. This will get variations of a selector but not descendant or sibling selectors, you'll have to inherit those individually.

[JavoByte]

Is there anyway to get a set of rules of another file and just yield the ones defined in my file? For example

@import "tachyons";

html {
  @inherit: .sans-serif; 
}

To output just

html {
  font-family: /* all the stuff defined in tachyons */
}

Or any suggestion to achieve this behaviour?