Code Monkey home page Code Monkey logo

postcss-pseudoelements's Introduction

postcss-pseudoelements

postcss helper for pseudo element colons, it handles double -> single and single -> double.

Usage

Double to Single (default)

var pe = require('postcss-pseudoelements');
var postcss = require('postcss');
var options = {
	single: true, // default
	selectors: ['before','after','first-letter','first-line'], // default
};

var processor = postcss(pe(options));

console.log(processor.process('a:before {}').css) // outputs: a:before {}
console.log(processor.process('a::before {}').css) // outputs: a:before {}

Single to Double

var pe = require('postcss-pseudoelements');
var postcss = require('postcss');
var options = {
	single: false,
	selectors: ['before','after','first-letter','first-line'], // default
};

var processor = postcss(pe(options));

console.log(processor.process('a:before {}').css) // outputs: a::before {}
console.log(processor.process('a::before {}').css) // outputs: a::before {}

Options

single: Boolean

  • true (default) if you want to move from double colon to colon for backwards compatibility
  • false if you need double colons

selectors: Array of pseudo-element selectors to rewrite with single and double colons. Note that these values will be used in a regexp without escaping. Defaults to ['before','after','first-letter','first-line']

example selectors:

var options = {
  selectors: [
    'hover',
    'focus',
    'active',
    'after',
    'ms-expand',
    'not',
    'first-child',
    'last-child'
  ],
};

Defaults

var options = {
  single: true,
  [
    'before',
    'after',
    'first-letter',
    'first-line'
  ]
};

postcss-pseudoelements's People

Contributors

ben-eb avatar davidtheclark avatar jonathantneal avatar mrpollo avatar sventschui avatar

Stargazers

Adrian Perez avatar Stefano Arlandini avatar  avatar Jack Hu avatar Jose Padilla avatar David Knezić avatar Tatsuya Nakano avatar Stephen Edgar avatar Dmitriy avatar Sebastian Werner avatar Henry Ruhs avatar Joe Lencioni avatar Phoenix C. Enero avatar Angus H. avatar Zendy Wongso avatar Tyler Buck avatar  avatar Eugene Datsky avatar Andrey Sitnik avatar

Watchers

David Knezić avatar  avatar James Cloos avatar Dmitry Semigradsky avatar

postcss-pseudoelements's Issues

Send PR to PostCSS README.md

  1. Please add ChangeLog.md. Every PostCSS plgin should have it.
  2. Please add yor plugin to PostCSS README.md in v4.1 branch.

Support PostCSS 5.x API

This will require a major version bump, as it will break anyone's builds if they are using other PostCSS 4.x plugins.

License?

I don't see any no license file. Can one be decided on and added to the repository? Would a PR help?

The technical requirements of the license require you to include a full copy of the license in the git repository, and in any downloads like npm or yarn.

PostCSS 6 compat

Any plan to bump postcss deps?
Should be easy as there is not a lot of breaking changes :)

Use PostCSS 4.1 API

PostCSS Plugin Guidelines are mandatory right now. Because all of rules are about ecosystem health.

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.