Awesome

rework-pseudos

rework pseudo elements support

Installation

$ npm install rework-pseudos

Example

rework(css)
  .use(pseudos())
  .toString();

style.css

/**
 * Comment.
 */

::selection {
  background: #ddd;
}

::progress {
  background: #ddd;
}

.text::selection {
  background: #eee;
}

input::placeholder,
textarea::placeholder {
  font: 200 14px/1.6 'Helvetica Neue';
}

@media print {
  ::placeholder,
  .text {
    font-weight: bold;
  }
}

yields

/**
 * Comment.
 */

::-moz-selection {
  background: #ddd;
}

::selection {
  background: #ddd;
}

::-ms-fill {
  background: #ddd;
}

::-moz-progress-bar {
  background: #ddd;
}

::-webkit-progress-bar {
  background: #ddd;
}

.text::-moz-selection {
  background: #eee;
}

.text::selection {
  background: #eee;
}

input::-moz-placeholder {
  font: 200 14px/1.6 'Helvetica Neue';
}

input:-ms-input-placeholder {
  font: 200 14px/1.6 'Helvetica Neue';
}

input::-webkit-input-placeholder {
  font: 200 14px/1.6 'Helvetica Neue';
}

textarea::-moz-placeholder {
  font: 200 14px/1.6 'Helvetica Neue';
}

textarea:-ms-input-placeholder {
  font: 200 14px/1.6 'Helvetica Neue';
}

textarea::-webkit-input-placeholder {
  font: 200 14px/1.6 'Helvetica Neue';
}

::selection

::selection {
  color: yellow;
}

yields

::selection {
  color: yellow;
}

::-moz-selection {
  color: yellow;
}

::placeholder

::placeholder {
  color: yellow
}

yields

::-webkit-input-placeholder {
  color: yellow;
}

:-ms-input-placeholder {
  color: yellow;
}

::-moz-placeholder {
  color: yellow;
}

::progress

::progress {
  background: yellow;
}

yields

::-webkit-progress-bar {
  background: yellow;
}

::-moz-progress-bar {
  background: yellow;
}

::-ms-fill {
  background: yellow
}

See all pseudo elements

References

• firefox pseudo elements
• webkit pseudo elements
• trident pseudo elements

Tests

$ make test

License

(MIT)