Code Monkey home page Code Monkey logo

rework-pseudo-classes's Introduction

Build Status

rework-pseudo-classes

Automatically add in companion classes where psuedo-selectors are used. This allows you to add the class name to force the styling of a pseudo-selector, which can be really helpful for testing or being able to concretely reach all style states.

Installation

$ npm install rework-pseudo-classes

Example

rework(css)
  .use(pseudoclasses({
    blacklist: [], // default contains ‘:root’.
    allCombinations: true // default is false. If true, will output CSS with all combinations of pseudo styles/pseudo classes.
  }))
  .toString();

style.css

.some-selector:active {
  text-decoration: underline;
}

yields

.some-selector:active,
.some-selector.psuedo-active {
  text-decoration: underline;
}

Edge cases

  • This plugin turns parenthesis into two hyphens -- so nth-child would look like .class.pseudo-nth-child--5--.
  • Pseudo-selectors with two colons are ignored entirely since they're a slightly different thing.
  • Chained psuedo-selectors just become chained classes: :focus:hover becomes .pseudo-focus.pseudo-hover.

Tests

$ npm test

License

(MIT)

rework-pseudo-classes's People

Contributors

slexaxton avatar davidlbatey avatar marcelrobitaille avatar michelle-stripe avatar

Watchers

 avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.