postcss-pseudo-class-enter
Advanced tools
Comparing version 0.2.1 to 0.3.0
@@ -0,1 +1,7 @@ | ||
## 0.3.0 (2015-06-16) | ||
- Added: Support for complex uses | ||
- Added: Code documentation | ||
- Changed: Coding conventions | ||
## 0.2.1 (2015-06-16) | ||
@@ -2,0 +8,0 @@ |
62
index.js
@@ -5,32 +5,48 @@ var postcss = require('postcss'); | ||
module.exports = postcss.plugin('postcss-pseudo-class-enter', function (opts) { | ||
var pseudoValue = ':' + (opts && opts.prefix ? '-' + opts.prefix + '-' : '') + 'enter'; | ||
var pseudoFallbackValues = [':focus', ':hover']; | ||
// cache the enter value | ||
var valueEnter = ':' + (opts && opts.prefix ? '-' + opts.prefix + '-' : '') + 'enter'; | ||
function eachRule(rule) { | ||
rule.selector = postcssSelectorParser(function (selectors) { | ||
selectors.each(function (selector, index) { | ||
var originalIndex = index; | ||
return function (css) { | ||
// for each rule | ||
css.eachRule(function (rule) { | ||
// update the selector | ||
rule.selector = postcssSelectorParser(function (selectors) { | ||
// cache variables | ||
var node; | ||
var nodeIndex; | ||
var selector; | ||
var selectorFocus; | ||
var selectorHover; | ||
pseudoFallbackValues.forEach(function (pseudoFallbackValue) { | ||
var clone = selector.clone(); | ||
// cache the selector index | ||
var selectorIndex = -1; | ||
clone.eachPseudo(function (pseudo) { | ||
if (pseudo.value === pseudoValue) { | ||
pseudo.value = pseudoFallbackValue; | ||
// for each selector | ||
while ((selector = selectors.nodes[++selectorIndex])) { | ||
// reset the node index | ||
nodeIndex = -1; | ||
selectors.nodes.splice(++index, 0, clone); | ||
// for each node | ||
while ((node = selector.nodes[++nodeIndex])) { | ||
// if the node value matches the enter value | ||
if (node.value === valueEnter) { | ||
// clone the selector | ||
selectorFocus = selector.clone(); | ||
selectorHover = selector.clone(); | ||
// update the matching clone values | ||
selectorFocus.nodes[nodeIndex].value = ':focus'; | ||
selectorHover.nodes[nodeIndex].value = ':hover'; | ||
// replace the selector with the clones and roll back the selector index | ||
selectors.nodes.splice(selectorIndex--, 1, selectorFocus, selectorHover); | ||
// stop updating the selector | ||
break; | ||
} | ||
}); | ||
}); | ||
if (originalIndex !== index) { | ||
selector.removeSelf(); | ||
} | ||
} | ||
}); | ||
}).process(rule.selector).result; | ||
} | ||
return function (css) { | ||
css.eachRule(eachRule); | ||
}).process(rule.selector).result; | ||
}); | ||
}; | ||
}); |
{ | ||
"name": "postcss-pseudo-class-enter", | ||
"version": "0.2.1", | ||
"version": "0.3.0", | ||
"description": "Use the proposed :enter pseudo-class in CSS", | ||
@@ -5,0 +5,0 @@ "keywords": ["postcss", "css", "postcss-plugin", "hover", "focus", "pseudo", "keyboard", "mouse", "touch", "pointer"], |
Sorry, the diff of this file is not supported yet
7546
43