style_cop

Style Cop helps you enforce markup structure for front-end patterns via Rspec and Capybara. You spent all that time making your CSS play nicely. If all developers use the markup correctly, then it will render beautifully!

Project Management

See the public Pivotal Tracker project to file bugs, feature requests, or to contribute.

Hypothesis

1. We believe developers / designers have a problem sticking with established DOM patterns, rather than page-overriding to tweak style.
2. We can fix it by creating momentum to "use or improve" front-end CSS patterns by breaking the build if a pattern is used incorrectly.
3. We know we are right if a team thinks this is a good idea and uses it on a project, and they tweet a link to the repo.

MVP

What's the least amount of work we can do to in/vadidate this hypothesis?

• A gem that targets Rails projects that use a styleguide (e.g. Hologram)
• It automagically "enforces" DOM and style as defined in the Hologram live style guide

Installation

Note: StyleCop depends on CapybaraWebkit so you will need to make sure that installs first: https://github.com/thoughtbot/capybara-webkit

Put into your gemfile

gem style_cop

Bundle

$ bundle

Getting Started

To test a selector on your page matches the same selector on your styleguide you will need to do two things:

1. Add the class style-cop-pattern to the selector in your styleguide

2. Add code like this somewhere in an integration test:

    context "some context", style_cop: true do
      it "tests something" do
        visit "/some/path"
        selector = page.find(".your-selector")
        expect(selector).to match_styleguide(styleguide_page("/your/styleguide/path"))
      end
    end

Developer Notes

If you find there are css elements that are giving you failures that you want to ignore you can open up selector.rb and add those css elements to the EXCLUDED_KEYS constant.

---