Permalink
Browse files

prefix-selectors: add support for :root pseudo-class

In our modular component CSS, we've been having trouble referencing the root
element of our CSS when used in conjunction with the `prefixSelectors()`
plugin.

A clever solution for this is to re-purpose the `:root` pseudo-class from
CSS3 to mean "the prefixed selector" when encountered, which would give us
a nice way to reference that root element with a clean semantic syntax.
  • Loading branch information...
1 parent 33e2c11 commit 6b62f2fa0d97cfd345a87cc9c85acaefdbc5ef6a @TooTallNate TooTallNate committed Jan 2, 2014
@@ -19,9 +19,11 @@ module.exports = function(str) {
style.rules = style.rules.map(function(rule){
if (!rule.selectors) return rule;
rule.selectors = rule.selectors.map(function(selector){
+ if (':root' == selector) return str;
+ selector = selector.replace(/^\:root\s?/, '');
return str + ' ' + selector;
});
return rule;
});
}
-};
+};
@@ -0,0 +1,11 @@
+:root {
+ bar: 'baz';
+}
+
+:root foo {
+ color: #f00;
+}
+
+bar {
+ font-family: "Wingdings";
+}
@@ -0,0 +1,11 @@
+#dialog {
+ bar: 'baz';
+}
+
+#dialog foo {
+ color: #f00;
+}
+
+#dialog bar {
+ font-family: "Wingdings";
+}
View
@@ -219,6 +219,12 @@ describe('rework', function(){
.toString()
.should.equal(fixture('prefix-selectors.out'));
})
+ it('should use the prefix as the :root pseudo-class', function(){
+ rework(fixture('prefix-selectors-root'))
+ .use(rework.prefixSelectors('#dialog'))
+ .toString()
+ .should.equal(fixture('prefix-selectors-root.out'));
+ })
})
describe('.url(fn)', function(){

0 comments on commit 6b62f2f

Please sign in to comment.