postcss-propro

PostCSS Propro

PostCSS plugin adds and extends some properties

Documentation

Click on the Documentation to learn more

Example

box

// input
.foo {
  box: 100%;
  min-box: 5rem 2rem;
  max-box: 10rem;
}

// output
.foo {
  with: 100%;
  height: auto;
  min-width: 5rem;
  min-height: 2rem;
  max-width: 10rem;
  max-height: none;
}

font-cc

// input
.foo {
  font-cc: 2rem;
}

// output
.foo {
  text-align: center;
  line-height: 2rem;
}

font-hidden

// input
.foo {
  font-hidden: 1;
}

// output
.foo {
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
}

position

// input
.foo {
  position: fixed 0;
}

// output
.foo {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

position-cc

// input
.foo {
  position-cc: 10rem 4rem;
}

// output
.foo {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -2rem 0 0 -5rem;
}

arrow

// input
:root {
  --c-line: #ccc;
}
.foo {
  arrow: top-left 20px var(--c-line);
}

btn

// input
:root {
  --c-blue: #0074d9;
}
.foo {
  btn: 10rem 4rem 0.5rem var(--c-blue);
}

spread

// input
:root {
  --c-line: #da3;
}
.foo {
  spread: top-bottom 100% 100% var(--c-line);
}

Options

  // default color
  backgroundColor: '#0074d9', // for btn
  lineColor: '#ccc' // for arrow and spread

Usage

postcss([ require('postcss-propro') ])

// or postcss.config.js
plugins: {
  'postcss-propro': {
    backgroundColor: '#0074d9',
    lineColor: '#ccc'
  },
  'autoprefixer': {}
}

See PostCSS docs for examples for your environment.