postcss-autoextend

Auto-generated hashed CSS placeholders

Usage no npm install needed!

<script type="module">
  import postcssAutoextend from 'https://cdn.skypack.dev/postcss-autoextend';
</script>

README

PostCSS Autoextend

Use @autoextend to automatically extend styles.

/* Input example */
.first-test {
  @autoextend {
    float: left;
    width: 50%;
    margin-right: 20px;
  }
}

.first-test-again {
  @autoextend {
    float: left;
    width: 50%;
    margin-right: 20px;
  }
}

.second-test {
  @autoextend {
    color: red;
    font-size: 1em;
  }
}

.second-test-again {
  @autoextend {
    color: red;
    font-size: 1em;
  }
}

.mixed-test {
  @autoextend {
    float: left;
    width: 50%;
    margin-right: 20px;
  }
  @autoextend {
    color: red;
    font-size: 1em;
  }
}
/* Output example */
.second-test, .second-test-again, .mixed-test {
  color: red;
  font-size: 1em;
}

.first-test, .first-test-again, .mixed-test {
  float: left;
  margin-right: 20px;
  width: 50%;
}