scss-lint-bliss 1.0.0

data/lib/scss_lint/linter/bang_format.rb

@@ -0,0 +1,52 @@
+module SCSSLint
+  # Checks spacing of ! declarations, like !important and !default
+  class Linter::BangFormat < Linter
+    include LinterRegistry
+
+    STOPPING_CHARACTERS = ['!', "'", '"', nil]
+
+    def visit_prop(node)
+      return unless source_from_range(node.source_range).include?('!')
+      return unless check_spacing(node)
+
+      before_qualifier = config['space_before_bang'] ? '' : 'not '
+      after_qualifier = config['space_after_bang'] ? '' : 'not '
+
+      add_lint(node, "! should #{before_qualifier}be preceeded by a space, " \
+                     "and should #{after_qualifier}be followed by a space")
+    end
+
+  private
+
+    # Start from the back and move towards the front so that any !important or
+    # !default !'s will be found *before* quotation marks. Then we can
+    # stop at quotation marks to protect against linting !'s within strings
+    # (e.g. `content`)
+    def find_bang_offset(range)
+      offset = 0
+      offset -= 1 until STOPPING_CHARACTERS.include?(character_at(range.end_pos, offset))
+      offset
+    end
+
+    def is_before_wrong?(range, offset)
+      before_expected = config['space_before_bang'] ? / / : /[^ ]/
+      before_actual = character_at(range.end_pos, offset - 1)
+      (before_actual =~ before_expected).nil?
+    end
+
+    def is_after_wrong?(range, offset)
+      after_expected = config['space_after_bang'] ? / / : /[^ ]/
+      after_actual = character_at(range.end_pos, offset + 1)
+      (after_actual =~ after_expected).nil?
+    end
+
+    def check_spacing(node)
+      range = node.value_source_range
+      offset = find_bang_offset(range)
+
+      return if character_at(range.end_pos, offset) != '!'
+
+      is_before_wrong?(range, offset) || is_after_wrong?(range, offset)
+    end
+  end
+end

data/lib/scss_lint/linter/bliss.rb

@@ -0,0 +1,8 @@
+module SCSSLint
+  # Superclass for linters that apply to codebases using the Bliss framework.
+  # https://github.com/gilbox/css-bliss
+  #
+  # Any shared code/constants amongst Bliss linters should be stored here.
+  class Linter::Bliss < Linter
+  end
+end

data/lib/scss_lint/linter/bliss/module.rb

@@ -0,0 +1,101 @@
+module SCSSLint
+  # Checks that selectors in CSS Modules (https://github.com/gilbox/css-bliss#module) use a specified convention
+  class Linter::Bliss::Module < Linter::Bliss
+    include LinterRegistry
+
+    def visit_root(_node)
+      @ignored_utility_class_prefixes = Array(config['ignored_utility_class_prefixes']).to_set
+      yield
+    end
+
+    def visit_rule(node)
+      return if config['allow_utility_direct_styling']
+      return unless is_module
+
+      node.parsed_rules.members.each { |rule|
+        match = /(^|\s)\.([a-z]\S*)$/.match(rule.to_s)
+
+        if match
+          add_lint(node, "Class `#{match.captures[1]}` is used at the end of a descendant selector. Avoid styling utility or state classes directly from within a Module. https://github.com/gilbox/css-bliss/blob/master/solving-complexity.md#7-breaking-isolation")
+        end
+      }
+
+      yield
+    end
+
+    def visit_attribute(attribute)
+      return if config['allow_attribute_selector_in_module']
+      return unless is_module
+
+      add_lint(attribute, 'Avoid using attribute selectors. https://github.com/gilbox/css-bliss/blob/master/solving-complexity.md#7-breaking-isolation')
+    end
+
+    def visit_class(klass)
+      return unless is_module
+
+      unless config['allow_utility_classes_in_module']
+        if /^[a-z]/.match(klass.name)
+          unless @ignored_utility_class_prefixes.any? { |prefix| klass.name.start_with?(prefix) }
+            add_lint(klass, "Class `#{klass.name}` is not allowed in the #{@module_name} module (use a module-namespaced class)")
+          end
+        end
+      end
+
+      if /^[A-Z]/.match(klass.name) && ! klass.name.start_with?(@module_name)
+        add_lint(klass, "Class selector `#{klass.name}` is not allowed in the #{@module_name} module https://github.com/gilbox/css-bliss#encapsulation")
+      end
+    end
+
+    def visit_element(element)
+      return if config['allow_element_selector_in_module']
+      return unless is_module
+
+      add_lint(element, 'Avoid using element selectors. https://github.com/gilbox/css-bliss/blob/master/solving-complexity.md#7-breaking-isolation')
+    end
+
+    def visit_id(id)
+      return if config['allow_id_selector_in_module']
+      return unless is_module
+
+      add_lint(id, 'Don\'t use id selectors in CSS Modules.')
+    end
+
+    def visit_prop(node)
+      return unless is_module
+
+      if node.node_parent.rule.include?(".#{@module_name}")
+        name = node.name[0]
+        unless config['allow_module_margin']
+          if name.start_with?('margin')
+            add_lint(node, 'A module should not define it\'s own margin, instead the parent element should define padding. https://github.com/gilbox/css-bliss#module')
+          end
+        end
+
+        unless config['allow_module_width']
+          if name == 'width'
+            value = node.value
+            if value.is_a?(Sass::Script::Tree::Literal) && /\d/.match("#{value.value}") && ! ['100%', '100vw'].include?("#{value.value}")
+              add_lint(node, 'A module should not define it\'s own bespoke width, it should take up the full width of it\'s parent element. https://github.com/gilbox/css-bliss#module')
+            end
+          end
+        end
+      end
+    end
+
+  private
+    def is_module
+
+      # really just used for testing
+      if config['module_name']
+        @module_name = config['module_name']
+        return true
+      end
+
+      match_module_file = (config['module_file_pattern'] || /[\/\\]_?([A-Z][a-zA-Z0-9]+)\.scss/).match(@engine.filename)
+      return false unless match_module_file # not a module
+
+      @module_name = match_module_file.captures[0]
+      true
+    end
+  end
+end

data/lib/scss_lint/linter/border_zero.rb

@@ -0,0 +1,39 @@
+module SCSSLint
+  # Enforce a particular value for empty borders.
+  class Linter::BorderZero < Linter
+    include LinterRegistry
+
+    CONVENTION_TO_PREFERENCE = {
+      'zero' => %w[0 none],
+      'none' => %w[none 0],
+    }
+
+    BORDER_PROPERTIES = %w[
+      border
+      border-top
+      border-right
+      border-bottom
+      border-left
+    ]
+
+    def visit_root(_node)
+      @preference = CONVENTION_TO_PREFERENCE[config['convention']]
+      yield # Continue linting children
+    end
+
+    def visit_prop(node)
+      return unless BORDER_PROPERTIES.include?(node.name.first.to_s)
+      check_border(node, node.value.to_sass.strip)
+    end
+
+  private
+
+    def check_border(node, border)
+      return unless %w[0 none].include?(border)
+      return if @preference[0] == border
+
+      add_lint(node, "`border: #{@preference[0]} is preferred over " \
+                     "`border: #{@preference[1]}`")
+    end
+  end
+end

data/lib/scss_lint/linter/color_keyword.rb

@@ -0,0 +1,32 @@
+module SCSSLint
+  # Checks for uses of a color keyword instead of the preferred hexadecimal
+  # form.
+  class Linter::ColorKeyword < Linter
+    include LinterRegistry
+
+    def visit_script_color(node)
+      word = source_from_range(node.source_range)[/([a-z]+)/i, 1]
+      add_color_lint(node, word) if color_keyword?(word)
+    end
+
+    def visit_script_string(node)
+      return unless node.type == :identifier
+
+      remove_quoted_strings(node.value).scan(/(^|\s)([a-z]+)(?=\s|$)/i) do |_, word|
+        add_color_lint(node, word) if color_keyword?(word)
+      end
+    end
+
+  private
+
+    def add_color_lint(node, original)
+      hex_form = Sass::Script::Value::Color.new(color_keyword_to_code(original)).tap do |color|
+        color.options = {} # `inspect` requires options to be set
+      end.inspect
+
+      add_lint(node,
+               "Color `#{original}` should be written in hexadecimal form " \
+               "as `#{hex_form}`")
+    end
+  end
+end

data/lib/scss_lint/linter/color_variable.rb

@@ -0,0 +1,49 @@
+module SCSSLint
+  # Ensures color literals are used only in variable declarations.
+  class Linter::ColorVariable < Linter
+    include LinterRegistry
+
+    def visit_script_color(node)
+      return if in_variable_declaration?(node) ||
+                in_map_declaration?(node) ||
+                in_rgba_function_call?(node)
+
+      # Source range sometimes includes closing parenthesis, so extract it
+      color = source_from_range(node.source_range)[/(#?[a-z0-9]+)/i, 1]
+
+      record_lint(node, color) if color?(color)
+    end
+
+    def visit_script_string(node)
+      remove_quoted_strings(node.value)
+        .scan(/(^|\s)(#[a-f0-9]+|[a-z]+)(?=\s|$)/i)
+        .select { |_, word| color?(word) }
+        .each   { |_, color| record_lint(node, color) }
+    end
+
+  private
+
+    def record_lint(node, color)
+      add_lint node, "Color literals like `#{color}` should only be used in " \
+                     'variable declarations; they should be referred to via ' \
+                     'variable everywhere else.'
+    end
+
+    def in_variable_declaration?(node)
+      parent = node.node_parent
+      parent.is_a?(Sass::Script::Tree::Literal) &&
+        parent.node_parent.is_a?(Sass::Tree::VariableNode)
+    end
+
+    def in_rgba_function_call?(node)
+      grandparent = node_ancestor(node, 2)
+
+      grandparent.is_a?(Sass::Script::Tree::Funcall) &&
+        grandparent.name == 'rgba'
+    end
+
+    def in_map_declaration?(node)
+      node_ancestor(node, 2).is_a?(Sass::Script::Tree::MapLiteral)
+    end
+  end
+end

data/lib/scss_lint/linter/comment.rb

@@ -0,0 +1,21 @@
+module SCSSLint
+  # Checks for uses of renderable comments (/* ... */)
+  class Linter::Comment < Linter
+    include LinterRegistry
+
+    def visit_comment(node)
+      add_lint(node, 'Use `//` comments everywhere') unless node.invisible? || allowed?(node)
+    end
+
+  private
+
+    # @param node [CommentNode]
+    # @return [Boolean]
+    def allowed?(node)
+      return false unless config['allowed']
+      re = Regexp.new(config['allowed'])
+
+      node.value.join.match(re)
+    end
+  end
+end

data/lib/scss_lint/linter/compass.rb

@@ -0,0 +1,7 @@
+module SCSSLint
+  # Superclass for linters that apply to codebases using the Compass framework.
+  #
+  # Any shared code/constants amongst Compass linters should be stored here.
+  class Linter::Compass < Linter
+  end
+end

data/lib/scss_lint/linter/compass/property_with_mixin.rb

@@ -0,0 +1,47 @@
+module SCSSLint
+  # Checks for uses of properties where a Compass mixin would be preferred.
+  class Linter::Compass::PropertyWithMixin < Linter::Compass
+    include LinterRegistry
+
+    def visit_prop(node)
+      check_for_properties_with_mixins(node)
+      check_for_inline_block(node)
+    end
+
+  private
+
+    # Set of properties where the Compass mixin version is preferred
+    PROPERTIES_WITH_MIXINS = %w[
+      background-clip
+      background-origin
+      border-radius
+      box-shadow
+      box-sizing
+      opacity
+      text-shadow
+      transform
+    ].to_set
+
+    def check_for_properties_with_mixins(node)
+      prop_name = node.name.join
+      return unless PROPERTIES_WITH_MIXINS.include?(prop_name) &&
+                    !ignore_compass_mixin?(prop_name)
+
+      add_lint node, "Use the Compass `#{prop_name}` mixin instead of the property"
+    end
+
+    def check_for_inline_block(node)
+      prop_name = node.name.join
+      return unless prop_name == 'display' &&
+                    node.value.to_sass == 'inline-block' &&
+                    !ignore_compass_mixin?('inline-block')
+
+      add_lint node,
+               'Use the Compass `inline-block` mixin instead of `display: inline-block`'
+    end
+
+    def ignore_compass_mixin?(prop_name)
+      config.fetch('ignore', []).include?(prop_name)
+    end
+  end
+end

data/lib/scss_lint/linter/debug_statement.rb

@@ -0,0 +1,10 @@
+module SCSSLint
+  # Checks for leftover `@debug` statements.
+  class Linter::DebugStatement < Linter
+    include LinterRegistry
+
+    def visit_debug(node)
+      add_lint(node, 'Remove @debug line')
+    end
+  end
+end

data/lib/scss_lint/linter/declaration_order.rb

@@ -0,0 +1,71 @@
+module SCSSLint
+  # Checks the order of nested items within a rule set.
+  class Linter::DeclarationOrder < Linter
+    include LinterRegistry
+
+    def check_order(node)
+      check_node(node)
+      yield # Continue linting children
+    end
+
+    alias_method :visit_rule, :check_order
+    alias_method :visit_mixin, :check_order
+    alias_method :visit_media, :check_order
+
+  private
+
+    MESSAGE =
+      'Rule sets should be ordered as follows: '\
+      '`@extends`, `@includes` without `@content`, ' \
+      'properties, `@includes` with `@content`, ' \
+      'nested rule sets'
+
+    MIXIN_WITH_CONTENT = 'mixin_with_content'
+
+    DECLARATION_ORDER = [
+      Sass::Tree::ExtendNode,
+      Sass::Tree::MixinNode,
+      Sass::Tree::PropNode,
+      MIXIN_WITH_CONTENT,
+      Sass::Tree::RuleNode,
+    ]
+
+    def important_node?(node)
+      DECLARATION_ORDER.include?(node.class)
+    end
+
+    def check_node(node)
+      children = node.children.each_with_index
+                              .select { |n, _| important_node?(n) }
+                              .map { |n, i| [n, node_declaration_type(n), i] }
+
+      sorted_children = children.sort do |(_, a_type, i), (_, b_type, j)|
+        [DECLARATION_ORDER.index(a_type), i] <=> [DECLARATION_ORDER.index(b_type), j]
+      end
+
+      check_children_order(sorted_children, children)
+    end
+
+    # Find the child that is out of place
+    def check_children_order(sorted_children, children)
+      sorted_children.each_with_index do |sorted_item, index|
+        next if sorted_item == children[index]
+
+        add_lint(sorted_item.first.line,
+                 "Expected item on line #{sorted_item.first.line} to appear " \
+                 "before line #{children[index].first.line}. #{MESSAGE}")
+        break
+      end
+    end
+
+    def node_declaration_type(node)
+      # If the node has no children, return the class.
+      return node.class unless node.has_children
+
+      # If the node is a mixin with children, indicate that;
+      # otherwise, just return the class.
+      return node.class unless node.is_a?(Sass::Tree::MixinNode)
+      MIXIN_WITH_CONTENT
+    end
+  end
+end