Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support config file for arguments #9

Merged
merged 58 commits into from
Jan 21, 2021
Merged
Show file tree
Hide file tree
Changes from 55 commits
Commits
Show all changes
58 commits
Select commit Hold shift + click to select a range
f665a5d
feat: add demo config file
laras126 Oct 15, 2020
5cd1145
feat: kinda working with simplified config
laras126 Oct 15, 2020
9d22899
refact: abstracting so we can test
laras126 Oct 15, 2020
d006d3d
refact: move cli code to index
laras126 Oct 15, 2020
49f2424
test: add okay test for running audits
laras126 Oct 29, 2020
2093185
fix: add audit key
laras126 Oct 29, 2020
77abd7c
Merge branch 'master' into feature/config
laras126 Nov 12, 2020
9b63b85
feat: support property values
laras126 Nov 12, 2020
8f9447c
chore: format js
laras126 Nov 12, 2020
92a1cd3
fix: linter fixes
laras126 Nov 12, 2020
1ea0384
chore: nvmrc and package lock
laras126 Nov 12, 2020
72f9aaf
Merge branch 'master' of github.com:ryelle/css-audit
laras126 Nov 12, 2020
486b6e3
Merge branch 'master' into feature/config
laras126 Nov 12, 2020
4560344
Merge branch 'master' of github.com:ryelle/css-audit
laras126 Nov 19, 2020
f6a6a18
Merge branch 'master' into feature/config
laras126 Nov 19, 2020
de02b3a
test: cli test for get arg
laras126 Nov 24, 2020
0ec24cf
feat: working through cases for get arg
laras126 Nov 24, 2020
3304463
feat: working fns in test!
laras126 Dec 2, 2020
ccbe828
test: passing for config fallback
laras126 Dec 2, 2020
3369fa1
feat: move fns out of test
laras126 Dec 4, 2020
8629201
feat: try adding github workflow for tests
laras126 Dec 4, 2020
a2cf2c2
fix: node version
laras126 Dec 4, 2020
7709820
test: skip failing and ignore fixtures
laras126 Dec 4, 2020
c5c8561
fix: format js
laras126 Dec 4, 2020
99c1920
fix: add additional prettier paths
laras126 Dec 4, 2020
b78fad8
feat: update getArg calls, better names
laras126 Dec 4, 2020
973db0e
fix: option for cliOnly in getArg
laras126 Dec 4, 2020
cf9a85d
chore: incl root js in prettier
laras126 Dec 4, 2020
296c20a
fix: typo
laras126 Dec 4, 2020
d69b01b
fix: return new arr
laras126 Dec 9, 2020
475867c
fix: consolidate run audits, but confused
laras126 Dec 9, 2020
997efb6
refact: clean up tests, some passing
laras126 Dec 10, 2020
3532544
reafct: use array methods and fix bugs
laras126 Dec 10, 2020
71c696e
fix: update test, support for multiple property values
laras126 Dec 10, 2020
0086dda
fix: use all in config
laras126 Dec 10, 2020
d9131df
fix: update config
laras126 Dec 10, 2020
dbec2a2
Merge branch 'master' of github.com:ryelle/css-audit
laras126 Dec 10, 2020
7297326
Merge branch 'master' into feature/config
laras126 Dec 10, 2020
72d224e
feat: hook up template
laras126 Dec 10, 2020
6677eab
fix: format js
laras126 Dec 10, 2020
b611af1
fix: rm erroneous autofill
laras126 Dec 10, 2020
754c9e8
fix: rm github workflows and test skip
laras126 Dec 10, 2020
d139cce
Merge branch 'master' into feature/config
laras126 Dec 17, 2020
ce26910
fix: return full object in json format for test
laras126 Dec 17, 2020
3dcba21
feat: add cosmiconfig
laras126 Dec 17, 2020
af0dea2
Merge branch 'master' of github.com:ryelle/css-audit
laras126 Jan 6, 2021
a75cc3b
Merge branch 'master' into feature/config
laras126 Jan 6, 2021
0529d79
fix: issue with test config location
laras126 Jan 6, 2021
22bcaf5
fix: linter and format
laras126 Jan 6, 2021
f57cfeb
feat: add more property value audits
laras126 Jan 6, 2021
14726f1
fix: rename file
laras126 Jan 6, 2021
cb9737f
fix: bugs
laras126 Jan 6, 2021
f5baae4
fix: format
laras126 Jan 6, 2021
56cec52
doc: update readme
laras126 Jan 6, 2021
accfad6
fix: name change, build html
laras126 Jan 6, 2021
7f97c69
fix: PR feedback
laras126 Jan 13, 2021
3940bca
fix: format
laras126 Jan 13, 2021
c10f2ed
Merge branch 'master' into feature/config
ryelle Jan 21, 2021
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions .nvmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
14
28 changes: 25 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@ To run this yourself, download or clone this repo, then install the dependencies
$ git clone git@github.com:ryelle/css-audit.git
$ cd css-audit
$ npm install
$ npm run css-audit
```
$ npm run css-audit -- <files...>
``
laras126 marked this conversation as resolved.
Show resolved Hide resolved

If you want to work on the audits yourself, [fork this repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) to your account first. You can submit issues or PRs.

## Running Audits

To run the audits, you need a list of CSS files, and to indicate which audits you want to run. `yarn` and `npm` both automatically expand globs (`folder/*`), so you can use that, or pass in a list of CSS files. The audits are described below.
To run the audits, you need a list of CSS files, and to indicate which audits you want to run. `yarn` and `npm` both automatically expand globs (`folder/*`), so you can use that, or pass in a list of CSS files. The audits are described below, and can be run via the following CLI args, or via configuration file (described in the next section).

```
$ npm run css-audit -- <files ...> [options]
Expand All @@ -35,6 +35,26 @@ Usage: css-audit -- <files...> [options]
--help Show this message.
```


### Configuration File

The program will prioritize configuration from CLI arguments, and will fallback to configuration stored in a file called `css-audit.config.js`.

```
module.exports = {
format: 'json',
audits: [
'colors',
'important',
'display-none',
'selectors',
'media-queries',
[ 'property-values', 'font-size' ],
[ 'property-values', 'padding-top,padding-bottom' ],
],
};
```

## Generating HTML Reports

To generate an HTML report, use the `--format=html` option and specify a name for the file with the `--filename=name` option. This will output a `{name}.html` file in public/ that is viewable on Github Pages.
Expand All @@ -45,6 +65,8 @@ For example, generating a report for wp-admin using the below strategy for pulli
npm run css-audit -- v5.5/**/* --format=html --all --filename=wp-admin
```

In the configuration file, the argument `filename` can be added as a simple property: value combination, the same as `format` in the example.

## Getting core CSS files

You can download the source files of CSS (not minified or RTL'd) from the svn repository. The following code will create a new directory, `v5.5`, and download just the files from each `css` folder.
Expand Down
29 changes: 29 additions & 0 deletions css-audit.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
module.exports = {
format: 'html',
filename: 'wp-admin',
all: true,
audits: [
[ 'property-values', 'font-size,font-family,font-weight' ],
[
'property-values',
'padding-top,padding-bottom,padding-left,padding-right',
],
[
'property-values',
'margin,margin-top,margin-bottom,margin-left,margin-right',
],
[ 'property-values', 'width,min-width,max-width' ],
[ 'property-values', 'height,max-height,min-height' ],
[ 'property-values', 'top', 'bottom', 'right', 'left' ][
( 'property-values', 'z-index' )
],
[
'property-values',
'font-size,font,line-height,font-family,letter-spacing',
],
[
'property-values',
'background-position,background-size,border,border-radius,bottom,box-shadow,clip,font,font-size,height,left,line-height,letter-spacing,margin,max-height,max-width,min-height,min-width,outline,outline-offset,padding,right,text-indent,text-shadow,top,transform,width',
],
],
};
38 changes: 38 additions & 0 deletions index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
/**
* Node dependencies
*/
const fs = require( 'fs' );
const path = require( 'path' );

/**
* Internal dependencies
*/
const { runAudits } = require( './src/run' );
const { getArg, getFileArgsFromCLI, getHelp } = require( './src/utils/cli' );

const input = getFileArgsFromCLI();

if ( getArg( '--help', true ) || ! input.length ) {
console.log( getHelp() ); // eslint-disable-line no-console
process.exit( 0 );
}

const cssFiles = [];
input.forEach( ( file ) => {
const filePath = path.resolve( process.env.INIT_CWD, file );
const stats = fs.statSync( filePath );
if ( stats.isDirectory() ) {
return;
}
if ( file.match( /min\.css$/ ) ) {
return;
}
cssFiles.push( {
name: file,
content: String( fs.readFileSync( filePath ) ),
} );
} );

const result = runAudits( cssFiles );

console.log( result );