Adding support for media query specificity bumps (#385)

README.md

@@ -45,6 +45,7 @@ Usage: atomizer [options] [path]
     --rtl                               swaps `start` and `end` keyword replacements with `right` and `left`.
     --ie                                adds old IE hacks to the output.
     --exclude=[pattern]                 pattern to exclude file to be scanned
+    --bump-mq                           increases specificity of media queries a small amount
     --verbose                           show additional log info (warnings).
 ```
 

bin/atomizer

@@ -41,6 +41,7 @@ program
   .option('-w, --watch [target]', 'rebuilds when changes are detected in the file, directory, or glob (argument may be passed multiple times and are parsed for Atomic CSS classes)', collect, [])
   .option('--exclude [pattern]', 'excluded file pattern', collect, [])
   .option('--rtl', 'swaps `start` and `end` keyword replacements with `right` and `left`')
+  .option('--bump-mq', 'increases specificity of media queries a small amount')
   .option('--ie', 'adds old IE hacks to the output')
   .option('--verbose', 'show additional log info (warnings)')
   .option('--quiet', 'hide processing info')
@@ -188,7 +189,8 @@ function triggerBuild(state) {
 }
 
 var options = {
-    rtl: program.rtl
+    rtl: program.rtl,
+    bumpMQ: program.bumpMq
 };
 
 // Options: Namespace

src/atomizer.js

@@ -463,6 +463,7 @@ Atomizer.prototype.getCss = function (config/*:AtomizerConfig*/, options/*:CSSOp
         // require: [],
         // morph: null,
         banner: '',
+        bumpMQ: false,
         namespace: null,
         rtl: false,
         ie: false
@@ -546,6 +547,11 @@ Atomizer.prototype.getCss = function (config/*:AtomizerConfig*/, options/*:CSSOp
                     }
                 }
 
+                // Add an extra attribute selector if the option to bump media query specificity is enabled
+                if (breakPoint && options.bumpMQ) {
+                    selector = selector + '[class]';
+                }
+
                 // rules are companion classes to the main atomic class
                 if (rule.rules) {
                     _.merge(jss, rule.rules);

tests/atomizer.js

@@ -601,6 +601,29 @@ describe('Atomizer()', function () {
             const result = atomizer.getCss(config);
             expect(result).to.equal(expected);
         });
+
+        it ('returns expected css if media query specificity bump option has been passed', function () {
+            var atomizer = new Atomizer();
+            var config = {
+                breakPoints: {
+                    sm: '@media(min-width:400px)'
+                },
+                classNames: ['C(red)', 'C(red)--sm']
+            };
+            var expected = [
+                '.C\\(red\\) {',
+                '  color: red;',
+                '}',
+                '@media(min-width:400px) {',
+                '  .C\\(red\\)--sm[class] {',
+                '    color: red;',
+                '  }',
+                '}\n'
+            ].join('\n');
+            var result = atomizer.getCss(config, {bumpMQ: true});
+            expect(result).to.equal(expected);
+        });
+
         it ('returns expected css if IE option has been passed', function () {
             // set rules here so if helper change, we don't fail the test
             const atomizer = new Atomizer();