Throw error when non-local isn't marked as :global

Author: markdalgleish

index.js

@@ -3,17 +3,25 @@ var postcss = require('postcss');
 var ESCAPED_DOT = ' ___LOCAL_SCOPE__ESCAPED_DOT___ ';
 
 module.exports = postcss.plugin('postcss-local-scope', function () {
-  return function(css) {
+  return function(css, result) {
     css.eachRule(function(rule) {
       rule.selector = rule.selector
         .split(',')
-        .map(transformSelector)
+        .map(transformSelector.bind(null, rule))
         .join(',');
     });
   };
 });
 
-function transformSelector(selector) {
+function transformSelector(rule, selector) {
+  // Syntax warnings
+  var trimmedSelector = selector.trim();
+  if (!/^\./.test(trimmedSelector)) {
+    if (!/^\:global/.test(trimmedSelector)) {
+      throw rule.error('Global selector detected in local context. Does this selector really need to be global? If so, you need to explicitly export it into the global scope with ":global", e.g. ":global '+trimmedSelector+'"', { plugin: 'postcss-local-scope' });
+    }
+  }
+
   return selector
     .replace(/\:global\((.*?)\)/g, escapeDots)
     .replace(/\:global (.*)/g, escapeDots)

test.js

@@ -104,6 +104,59 @@ test(name, function (t) {
     });
 });
 
+
+var errorTests = [
+  {
+    should: 'reject naked element selectors',
+    input: 'input {}',
+    reason: 'Global selector detected in local context. Does this selector really need to be global? If so, you need to explicitly export it into the global scope with ":global", e.g. ":global input"'
+  },
+  {
+    should: 'reject naked element selectors in a collection',
+    input: '.foo, input {}',
+    reason: 'Global selector detected in local context. Does this selector really need to be global? If so, you need to explicitly export it into the global scope with ":global", e.g. ":global input"'
+  },
+  {
+    should: 'reject naked psuedo classes',
+    input: ':focus {}',
+    reason: 'Global selector detected in local context. Does this selector really need to be global? If so, you need to explicitly export it into the global scope with ":global", e.g. ":global :focus"'
+  },
+  {
+    should: 'reject naked psuedo classes in a collection',
+    input: '.foo, :focus {}',
+    reason: 'Global selector detected in local context. Does this selector really need to be global? If so, you need to explicitly export it into the global scope with ":global", e.g. ":global :focus"'
+  },
+  {
+    should: 'reject naked attribute selectors',
+    input: '[data-foobar] {}',
+    reason: 'Global selector detected in local context. Does this selector really need to be global? If so, you need to explicitly export it into the global scope with ":global", e.g. ":global [data-foobar]"'
+  },
+  {
+    should: 'reject naked attribute selectors in a collection',
+    input: '.foo, [data-foobar] {}',
+    reason: 'Global selector detected in local context. Does this selector really need to be global? If so, you need to explicitly export it into the global scope with ":global", e.g. ":global [data-foobar]"'
+  }
+];
+
+function processError (css, options) {
+  try {
+    postcss(plugin(options)).process(css).css;
+  } catch (error) {
+    return error;
+  }
+}
+
+test(name, function (t) {
+  t.plan(errorTests.length);
+
+  errorTests.forEach(function (test) {
+    var options = test.options || {};
+    var error = processError(test.input, options);
+    t.equal(error.reason, test.reason, 'should ' + test.should);
+  });
+});
+
+
 test('should use the postcss plugin api', function (t) {
     t.plan(2);
     t.ok(plugin().postcssVersion, 'should be able to access version');