Add extra_properties option to PropertySpelling

There are a lot of CSS properties, and the lack of a definitive list (as
well as the constant introduction of new experimental properties) makes
it impractical to ensure our list is up-to-date at any given time.

To address this, add an `extra_properties` config option to the
`PropertySpelling` linter so that developers can add additional
properties to the whitelist without needing to submit a pull request.

Change-Id: I60f250cb704f2245e66885caada8929c37485076
Reviewed-on: https://gerrit.causes.com/32423
Tested-by: jenkins <[email protected]>
Reviewed-by: Shane da Silva <[email protected]>

CHANGELOG.md

@@ -1,5 +1,10 @@
 # SCSS-Lint Changelog
 
+## master (unreleased)
+
+* Add `extra_properties` option to `PropertySpelling` linter so additional
+  CSS properties can be added to the whitelist
+
 ## 0.15.0
 
 * Fix bug where `SelectorDepth` could incorrectly report a lint for selectors

README.md

@@ -156,7 +156,7 @@ Any lint can be disabled by using the `--exclude_linter` flag.
     generated CSS, whereas `/* ... */` comments do.
 
     Furthermore, comments should be concise, and using `/* ... */`
-    encourages multi-line comments can tend to not be concise.
+    encourages multi-line comments which tend to not be concise.
 
 * Write `@extend` statements first in rule sets, followed by property
   declarations and then other nested rule sets.
@@ -465,9 +465,36 @@ Any lint can be disabled by using the `--exclude_linter` flag.
 ### Other Lints
 
 * Reports `@debug` statements (which you probably left behind accidentally)
+
 * Reports when you define the same property twice in a single rule set
+
 * Reports when you have an empty rule set
 
+* Reports when you use an unknown CSS property (ignoring vendor-prefixed
+  properties)
+
+    ```scss
+    diplay: none; // "display" is spelled incorrectly
+    ```
+
+    Since the list of available CSS properties is constantly changing, it's
+    possible that you might get some false positives here, especially if
+    you're using experimental CSS features. If that's the case, you can
+    add additional properties to the whitelist by adding the following
+    to your `.scss-lint.yml` configuration:
+
+    ```yaml
+    linters:
+      PropertySpelling:
+        extra_properties:
+          - some-experimental-property
+          - another-experimental-property
+    ```
+
+    If you're sure the property in question is valid,
+    [submit a request](https://github.com/causes/scss-lint/issues/new)
+    to add it to the default whitelist.
+
 ## Contributing
 
 We love getting feedback with or without pull requests. If you do add a new

config/default.yml

@@ -45,6 +45,7 @@ linters:
 
   PropertySpelling:
     enabled: true
+    extra_properties: []
 
   SelectorDepth:
     enabled: true

lib/scss_lint/linter/property_spelling.rb

@@ -3,6 +3,11 @@ module SCSSLint
   class Linter::PropertySpelling < Linter
     include LinterRegistry
 
+    def visit_root(node)
+      @extra_properties = config['extra_properties'].to_set
+      yield # Continue linting children
+    end
+
     def visit_prop(node)
       # Ignore properties with interpolation
       return if node.name.count > 1 || !node.name.first.is_a?(String)
@@ -12,7 +17,7 @@ def visit_prop(node)
       # Ignore vendor-prefixed properties
       return if name.start_with?('-')
 
-      unless KNOWN_PROPERTIES.include?(name)
+      unless KNOWN_PROPERTIES.include?(name) || @extra_properties.include?(name)
         add_lint(node, "Unknown property #{name}")
       end
     end

spec/scss_lint/linter/property_spelling_spec.rb

@@ -30,4 +30,28 @@
 
     it { should report_lint }
   end
+
+  context 'when extra properties are specified' do
+    let(:linter_config) { { 'extra_properties' => ['made-up-property'] } }
+
+    context 'with a non-existent property' do
+      let(:css) { <<-CSS }
+        p {
+          peanut-butter: jelly-time;
+        }
+      CSS
+
+      it { should report_lint }
+    end
+
+    context 'with a property listed as an extra property' do
+      let(:css) { <<-CSS }
+        p {
+          made-up-property: value;
+        }
+      CSS
+
+      it { should_not report_lint }
+    end
+  end
 end