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)