Skip to content
This repository was archived by the owner on Nov 10, 2022. It is now read-only.

Add stylelint integration #239

Open
westonruter wants to merge 10 commits into
base: master
Choose a base branch
from
Open

Add stylelint integration #239

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a3bd485
Add WIP for stylelint integration
westonruter May 17, 2017
3933f30
Support all stylelint config file formats
westonruter May 17, 2017
bcdb366
Omit SCSS from CSS manifest
westonruter May 17, 2017
2b06eed
Fix references to stylelint from eslint
westonruter May 17, 2017
73fdbd2
Fix passing of custom-formatter
westonruter May 17, 2017
b0eff2f
Update .editorconfig with latest from core with also linter configs
westonruter May 17, 2017
a23b89b
Include *.yaml in .editorconfig
westonruter May 17, 2017
580e388
Fix comment
westonruter May 18, 2017
2259c48
Merge branch 'master' of https://github.com/xwp/wp-dev-lib into add/s…
westonruter Jul 24, 2017
c2d14a0
Revert "Update .editorconfig with latest from core with also linter c…
westonruter Jul 24, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .stylelintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": "stylelint-config-wordpress"
}
50 changes: 48 additions & 2 deletions check-diff.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,13 @@ function set_environment_variables {
ESLINT_IGNORE="$( upsearch .eslintignore )"
fi

if [ -z "$STYLELINT_CONFIG" ]; then
STYLELINT_CONFIG="$( upsearch .stylelintrc )"
fi
if [ -z "$STYLELINT_CONFIG" ]; then
STYLELINT_CONFIG="$( upsearch stylelint.config.js )"
fi

@ntwb ntwb May 17, 2017

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

stylelint supports a few more config files, not sure if you want to include all possible combinations here

Via https://stylelint.io/user-guide/configuration/
The .stylelintrc file (without extension) can be in JSON or YAML format. Alternately, you can add a filename extension to designate JSON, YAML, or JS format: .stylelintrc.json, .stylelintrc.yaml, .stylelintrc.yml, .stylelintrc.js. You may want to use an extension so that your text editor can better interpret the file, and help with syntax checking and highlighting.

# Load any environment variable overrides from config files
ENV_FILE=$( upsearch .ci-env.sh )
if [ ! -z "$ENV_FILE" ]; then
Expand Down Expand Up @@ -245,7 +252,7 @@ function set_environment_variables {

cat "$TEMP_DIRECTORY/paths-scope" | grep -E '\.php(:|$)' | cat - > "$TEMP_DIRECTORY/paths-scope-php"
cat "$TEMP_DIRECTORY/paths-scope" | grep -E '\.jsx?(:|$)' | cat - > "$TEMP_DIRECTORY/paths-scope-js"
cat "$TEMP_DIRECTORY/paths-scope" | grep -E '\.(css|scss)(:|$)' | cat - > "$TEMP_DIRECTORY/paths-scope-scss"
cat "$TEMP_DIRECTORY/paths-scope" | grep -E '\.(css|scss)(:|$)' | cat - > "$TEMP_DIRECTORY/paths-scope-css"

@ntwb ntwb May 17, 2017

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's drop scss from the above and only go with css initially.

The stylelint-config-wordpress configuration includes two stylelint shared configs, one for CSS and one for SCSS, so let's get CSS up and running and follow up with with SCSS in another PR

cat "$TEMP_DIRECTORY/paths-scope" | grep -E '\.(xml|svg|xml.dist)(:|$)' | cat - > "$TEMP_DIRECTORY/paths-scope-xml"

# Gather the proper states of files to run through linting (this won't apply to phpunit)
Expand Down Expand Up @@ -283,7 +290,7 @@ function set_environment_variables {
done

# Make sure linter configs get copied linting directory since upsearch is relative.
for linter_file in .jshintrc .jshintignore .jscsrc .jscs.json .eslintignore .eslintrc phpcs.ruleset.xml ruleset.xml; do
for linter_file in .jshintrc .jshintignore .jscsrc .jscs.json .eslintignore .eslintrc .stylelintrc stylelint.config.js phpcs.ruleset.xml ruleset.xml; do

@ntwb ntwb May 17, 2017

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See also above comment on adding all possibilities of valid stylelint configuration file names.

if git ls-files "$linter_file" --error-unmatch > /dev/null 2>&1; then
if [ -L $linter_file ]; then
ln -fs $(git show :"$linter_file") "$LINTING_DIRECTORY/$linter_file"
Expand Down Expand Up @@ -463,6 +470,15 @@ function install_tools {
fi
fi

# Install stylelint
if [ -n "$STYLELINT_CONFIG" ] && [ -e "$STYLELINT_CONFIG" ] && [ ! -e "$(npm bin)/stylelint" ] && check_should_execute 'stylelint'; then
echo "Installing ESLint"

@ntwb ntwb May 17, 2017

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be echo "Installing stylelint"

if ! npm install -g eslint 2>/dev/null; then

@ntwb ntwb May 17, 2017

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be if ! npm install -g stylelint 2>/dev/null; then

echo "Failed to install stylelint (try manually doing: sudo npm install -g stylelint), so skipping stylelint"
DEV_LIB_SKIP="$DEV_LIB_SKIP,stylelint"
fi
fi

# YUI Compressor
if [ "$YUI_COMPRESSOR_CHECK" == 1 ] && command -v java >/dev/null 2>&1 && check_should_execute 'yuicompressor'; then
if [ ! -e "$YUI_COMPRESSOR_PATH" ]; then
Expand Down Expand Up @@ -776,6 +792,36 @@ function lint_js_files {
fi
}


function lint_css_files {
if [ ! -s "$TEMP_DIRECTORY/paths-scope-css" ]; then
return
fi

set -e

# Run ESLint.
if [ -n "$STYLELINT_CONFIG" ] && [ -e "$STYLELINT_CONFIG" ] && [ -e "$(npm bin)/stylelint" ] && check_should_execute 'stylelint'; then
(
echo "## stylelint"
cd "$LINTING_DIRECTORY"
# TODO: --format=compact is not right.
if ! cat "$TEMP_DIRECTORY/paths-scope-css" | remove_diff_range | xargs "$(npm bin)/stylelint" --format=compact --config="$STYLELINT_CONFIG" > "$TEMP_DIRECTORY/stylelint-report"; then

@ntwb ntwb May 17, 2017

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather than --format=compact, it should be --custom-formatter stylelint-formatter-compact

@westonruter westonruter May 17, 2017

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems that it actually needs to be --custom-formatter node_modules/stylelint-formatter-compact

if [ "$CHECK_SCOPE" == 'patches' ]; then
cat "$TEMP_DIRECTORY/stylelint-report" | php "$DEV_LIB_PATH/diff-tools/filter-report-for-patch-ranges.php" "$TEMP_DIRECTORY/paths-scope-css" | cut -c$( expr ${#LINTING_DIRECTORY} + 2 )-
exit_code="${PIPESTATUS[1]}"
if [[ $exit_code != 0 ]]; then
return $exit_code
fi
elif [ -s "$TEMP_DIRECTORY/stylelint-report" ]; then
cat "$TEMP_DIRECTORY/stylelint-report" | cut -c$( expr ${#LINTING_DIRECTORY} + 2 )-
exit 1
fi
fi
)
fi
}

# @todo: This is wrong, as we should be doing `npm test` instead of calling `grunt qunit` directly.
function run_qunit {
if [ ! -s "$TEMP_DIRECTORY/paths-scope-js" ] || ! check_should_execute 'grunt'; then
Expand Down
1 change: 1 addition & 0 deletions pre-commit
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ echo "## Checking files, scope $CHECK_SCOPE:"
cat "$TEMP_DIRECTORY/paths-scope"

check_execute_bit
lint_css_files

@ntwb ntwb May 17, 2017

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As noted above, in a follow up PR we can add lint_scss_files

lint_js_files
lint_php_files
lint_xml_files
Expand Down
8 changes: 5 additions & 3 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,23 +27,25 @@ To install the pre-commit hook, symlink to [`pre-commit`](pre-commit) from your
./dev-lib/install-pre-commit-hook.sh
```

Also symlink (or copy) the [`.jshintrc`](.jshint), [`.jshintignore`](.jshintignore), [`.jscsrc`](.jscsrc), [`phpcs.ruleset.xml`](phpcs.ruleset.xml), and [`phpunit-plugin.xml`](phpunit-plugin.xml) (note the PHPUnit config will need its paths modified if it is copied instead of symlinked):
Also symlink (or copy) the desired linting configs and [`phpunit-plugin.xml`](phpunit-plugin.xml) (note the PHPUnit config will need its paths modified if it is copied instead of symlinked):

```bash
ln -s dev-lib/phpunit-plugin.xml phpunit.xml.dist && git add phpunit.xml.dist # (if working with a plugin)
ln -s dev-lib/.jshintrc . && git add .jshintrc
ln -s dev-lib/.jscsrc . && git add .jscsrc
ln -s dev-lib/.eslintrc . && git add .eslintrc
ln -s dev-lib/.eslintignore . && git add .eslintignore
ln -s dev-lib/.stylelintrc . && git add .stylelintrc
ln -s dev-lib/.editorconfig . && git add .editorconfig
cp dev-lib/.jshintignore . && git add .jshintignore # don't use symlink for this
```

For ESLint, you'll also likely want to make `eslint` as a dev dependency for your NPM package:
For ESLint and stylelint, you'll also likely want to make then dev dependencies for your NPM package:

@ntwb ntwb May 17, 2017

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

them, not then


```bash
npm init # if you don't have a package.json already
npm install --save-dev eslint
npm install --save-dev stylelint stylelint-formatter-compact
git add package.json
echo 'node_modules' >> .gitignore
git add .gitignore
Expand All @@ -62,7 +64,7 @@ git clone https://github.com/xwp/wp-dev-lib.git ~/Projects/wp-dev-lib

For the Travis CI checks, the `.travis.yml` copied and committed to the repo (see below) will clone the repo into the `dev-lib` directory if it doesn't exist (or whatever your `DEV_LIB_PATH` environment variable is set to).

To install the [`.jshintrc`](.jshint), [`.jshintignore`](.jshintignore), [`.jscsrc`](.jscsrc), and (especially optionally) [`phpcs.ruleset.xml`](phpcs.ruleset.xml), copy the files into the repo root (as opposed to creating symlinks, as when installing via submodule).
To install the [`.jshintrc`](.jshint), [`.jshintignore`](.jshintignore), [`.jscsrc`](.jscsrc), [`.eslintrc`](.eslintrc), [`.stylelintrc`](.stylelintrc), and (especially optionally) [`phpcs.ruleset.xml`](phpcs.ruleset.xml), copy the files into the repo root (as opposed to creating symlinks, as when installing via submodule).

To install dev-lib for all themes and plugins that don't already have a `pre-commit` hook installed, and to upgrade the dev-lib for any submodule installations, you can run the bundled script [`install-upgrade-pre-commit-hook.sh`](install-upgrade-pre-commit-hook.sh) which will look for any repos in the current directory tree and attempt to auto-install. For example:

Expand Down
1 change: 1 addition & 0 deletions travis.script.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ fi
echo

check_execute_bit
lint_css_files
lint_js_files
lint_php_files
lint_xml_files
Expand Down