Giter VIP home page Giter VIP logo

postcss-preref's Introduction

postcss-preref

npm version Build Status Code Climate Coverage Status

PostCSS plugin that to refer previous selector by &

## Install 
npm i -D postcss-preref

Usage

Add a new rule to css. This is possible to write so as &:hover. instead of previous selector. (e.g. input.css)

.item {}
&:hover {}
&:hover span {}
&:visited {}
& + & {}

img {}
&:hover {}

.selector-1 .child,
.selector-2 .child {}
&:hover {}

Use postcss-preref plugin in PostCSS (e.g.)

const fs = require('fs');
const postcss = require('postcss');
const preref = require('..');

const css = fs.readFileSync('./sample.css', 'utf-8');

postcss([preref])
  .process(css)
  .then(result => console.log(result.css));

output like this

.item {}
.item:hover {}
.item:hover span {}
.item:visited {}
.item + .item {}

img {}
img:hover {}

.selector-1 .child,
.selector-2 .child {}
.selector-1 .child:hover,
.selector-2 .child:hover {}

Change log

version log
1.0.1 Fix & + &
1.0.0 Rewrite with es2015

postcss-preref's People

Contributors

stanback avatar totora0155 avatar

Stargazers

avatar

Watchers

avatar avatar

Forkers

stanback

postcss-preref's Issues

Allow referencing parent selector for a list of elements

Example:

input, select, textarea {
  border-color: #fff;
}
&:focus {
  border-color: #f00;
}

Currently it results in:

input, select, textarea {
  border-color: #fff;
}
input, select, textarea:focus {
  border-color: #f00;
}

Ideally we would see:

input, select, textarea {
  border-color: #fff;
}
input:focus, select:focus, textarea:focus {
  border-color: #f00;
}

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.