Microverse Ruby Capstone | CSS Linter

A simple CSS Linter built with Ruby.

A CSS linter that checks for the following errors

• Checks for trailing semi-colon after setting a CSS property.
• Checks for missing end-of-source newline.
• Checks if double indentation is followed by a valid CSS rule.
• Checks for newline and no leading or trailing spaces surrounding closing curly bracket.
• Checks for newline after single line declaration.
• Checks if single line declaration has only 1 declaration.
• Checks for too many spaces at end or at start.

Good vs. Bad Code Examples

Trailing semi-colon after setting a CSS property

# Good example

There's a semi-colon after the css property is set.

.container {
  color: blue; 
}

# Bad example

Missing semi-colon.

.container {
  color: blue 
}

Missing EOS newline

# Good example

section {
  color: blue; 
} 
/* file ends here with final empty line */

# Bad example

section {
  color: blue; 
} /* file ends here without final empty line */

Closing Brackets should be on their own

# Good example

The closing bracket has no leading or trailing spaces.

div {
  font-size: 12px; # double indent 
}

# Bad example

The closing bracket has leading and trailing spaces.

section {
  color: blue; 
   }   

Missing newline after single line declaration

# Good example

The closing bracket no leading spaces.

div { font-size: 12px; }

.new-rule {
  color: #fff;
  font-size: 11px;
}

# Bad example

The closing bracket has empty spaces after the closing bracket.

div { font-size: 12px; }   |

.new-rule {
  color: #fff;
  font-size: 11px;
}

Too many spaces at start or end

# Good example

Maximum of 2 spaces at start of line.

div { font-size: 12px; }

.new-rule {
  color: #fff;
  font-size: 11px;
}

# Bad examples

The code has too many spaces at the start of the lines.

  div { font-size: 12px; }   

.new-rule {
    color: #fff;
  font-size: 11px;
}

Built With

• Ruby
• CSS
• Rainbow

Video Introduction

Click on the link below to watch a video introduction of this project

Video Introduction

Running the linter locally

To get a local copy up and running follow these simple example steps.

1. You need to have Ruby installed on your computer to run this project.
2. You should be able to run terminal, command prompt, bash or Powershell to open your command line.
3. Run git clone https://github.com/m15e/ruby-capstone-linter to clone this repository to your local machine.
4. Run cd ruby-capstone-linter to go to the project folder.
5. Drag the css file(s) you would like the linter to inspect into the projects folder, the linter will scan and check all files ending with .css.
6. Run bin/main.rb to start the linter and the flaws in your code will be revealed.
7. (Optional) If you don't want the linter to ignore specific files run bin/main.rb ignore <filename.css>. If you would like more than 1 file to be ignored add more filenames (separated by spaces) to the end of the command.

Prerequisites

• Ruby
• Commandline, Terminal, Prompt, Bash or Powershell
• Rspec for testing
• Rainbow Gem

Setup

1. Installing Rainbow

Run the command below in your project's root folder to install the rainbow gem, this gem is used to print the linter output in color.

$ gem install rainbow

Click here for additional resources and information for installing Ruby gems

Run Tests using Rspec

Installing Rspec

1. Installing Rspec

$ gem install rspec

2. Running tests with Rspec

To run tests run the following code in the command line from the root directory.

$ rspec

Authors

👤 Mark Rode

• Github: @m15e

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

• Microverse
• Stylelint

📝 License

This project is MIT licensed.