18f / css-linter

A tool provided by the front end guild to help your CSS/Sass conform to the 18F styleguide

PostCSS as a styleguide linter

Just playing around with postcss as a styleguide linter per frontend/#19.

Installation

0. git clone [email protected]:jeremiak/postcss-style-linter.git && cd postcss-style-linter
1. npm install
2. npm start

This should run through all of the very lightweight plugins in ./plugins.js and run them against ugly.css to generate pretty.css

The only dependency is postcss and the plugin architecture of the tool would provide a really extensible framework for the CSS build toolchain.

Plus, it has sourcemaps!

Open Source Policy

18F Team Guidance

For 18F team members, we have guidance on how 18F puts this policy into practice, and how we handle the narrow situations where we may delay or withhold the release of source code.

18F's open source team practices.

Credits

This policy was originally forked from the Consumer Financial Protection Bureau's policy. Thanks also to @benbalter for his insights regarding CFPB's initial policy.

Public domain

This project is in the worldwide public domain. As stated in CONTRIBUTING:

This project is in the public domain within the United States, and copyright and related rights in the work worldwide are waived through the CC0 1.0 Universal public domain dedication.

All contributions to this project will be released under the CC0 dedication. By submitting a pull request, you are agreeing to comply with this waiver of copyright interest.

css-linter's Issues

V1 warnings to issue

• Put spaces before { in rule declarations
• Put a blank line between each selector block.
• To close a selector block, put an unindented closing curly brace on a separate line.
• Multiple selectors should each be on a single line

Properties

• Put each pair on its own line.
• Single-quote URLs and string values.
• Within properties, you may use alphabetical order or type order — just pick one and keep the whole project consistent.
• Do not use a unit with 0.
• When denoting color using hexadecimal notation, use all lowercase letters.

Make linter a CLI

The CLI should be a tool that is easily installed with npm install -g 18f-css-linter. It should install a tool (@msecret what should this cli be called?) that can be pointed at a CSS file or directory of files:

$ cli-tool-name sass/styles.scss which would generate the errors/report