Ruby Capstone CSS_Linter

In this project, I have created a css linter with 4 rules.

• You can see the video presentation of the project here: CSS_Linter

no-duplicate-selectors (Rule 1)

Disallow duplicate selectors within a stylesheet.

.foo {} .bar {} .foo {}

This rule checks for two types of duplication:

Duplication of a single selector with a rule's selector list, e.g. a, b, a {}. Duplication of a selector list within a stylesheet, e.g. a, b {} a, b {}. Duplicates are found even if the selectors come in different orders or have different spacing, e.g. a d, b > c {} b>c, a d {}.

length-zero-no-unit (Rule 2)

Disallow units for zero lengths.

a { top: 0px; }

Lengths refer to distance measurements. A length is a dimension, which is a number immediately followed by a unit identifier. However, for zero lengths the unit identifier is optional.

selector-type-case (Rule 3)

This rule works if selector typecase is in uppercase

A {}

It will throw an error if any selector in the stylesheet is in uppercase.

valid_units (Rule 4)

Throws an error if invalid units used in the stylesheet

a { top: 23pixel; }

It will provide suggestion for correct way of use for units eg. instead of 23pixel use 23px.

Accessing The Linter

• To download the contents of this repository and run the linter locally, follow the steps in the 'Local Installation' section.

Built With

• Ruby
• VSCode
• Rubocop
• simplecov (gem for test coverage report)
• crass (gem)

Local Installation

Prerequisites

If you intend to download the project, you will need to have Ruby already installed on your machine. For more information on how to install Ruby, follow this link.

Installation Instructions

To get your own copy of our project simply clone the repository to your local machine.

Step 1: Using the Command Line, navigate into the location where you would like to have the repository. Then enter the following line of code:

git@github.com:Amita-Roy/Ruby_Capstone_CSS_Linter.git

Step 2: Once the repo has been cloned, navigate inside it by entering the following command:

cd ruby_capstone_css_linter

I am using crass gem,which is a CSS parser gem

Step 3: before running the linter, please install all the required gem with the following command

bundle install

Step 4: Once in the root directory of the repository, simply enter the following line of code to run the linter on css file.

bin/main.rb css/no-duplicate-selector/case2.css bin/main.rb css/length-zero-no-unit/case1.css

For your own css file, linter running instruction eg.

after the bin/main.rb you can mention the path of your css file.

bin/main.rb css-directory/css-file bin/main.rb styles/style.css

it will return the errors from the file if any error found in the stylesheet.

Repository Contents

In rules directory

• length_zero_no_unit, class for rule length_zero_no_unit is defined.
• no_duplicate_selector, class for rule no_duplicate_selector is defined.
• selector_typecase, class for rule selector_typecase is defined.
• valid_units, class for rule valid_units is defined.

In utils directory

• utils.rb, this file has helper method for all the classes.
• verify_rules, this file has all the methods which are required in main.rb.

In css directory

• length-zero-no-unit, directory with css files with each case type.
• no_duplicate_selector, directory with css files with each case type.
• selector_typecase, directory with css files with each case type.
• valid_units, directory with css files with each case type.

In addition to the above, the repo also contains .rubocop.yml for linting.

To Test

Step 1:

After cloning the repository, open the terminal and Install RSpec on your local system by running:

gem install rspec or if you have run the command bundle install all required gems will be downloaded itself.

Step 2:

Run the tests with the command:

rspec

Tests screenshots

Test Coverage

Step 1:

gem install simplecov

Step 2:

Add the below code on the top of the spec_helper.rb

require 'simplecov'

SimpleCov.start do add_filter '/spec/' end

Step 3:

After running the rspec command in the terminal, a coverage directory will be generated copy the path of index.html and open it in browser to check the test coverage

Test Coverage Screenshot

Author

👤 Amita Roy

• Github: @Amita-Roy
• Twitter: @AmitaRoy14
• Linkedin: Amita Roy

🤝 Contributing

Our favourite contributions are those that help us improve the project, whether with a contribution, an issue, or a feature request!

Feel free to check the issues page to either create an issue or help us out by fixing an existing one.

Show your support

If you've read this far....give us a ⭐️!

📝 License

This project is licensed by Microverse and the Odin Project