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.

Sign up for GitHub

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

CSS: Add package.json for linting and compiling #1159

Closed
wants to merge 7 commits into from
+44 −0
Closed

CSS: Add package.json for linting and compiling #1159

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3b576e6
Add package.json
m-e-h Jul 3, 2017
9d783c0
Merge remote-tracking branch 'upstream/master' into add-packagejson
m-e-h Sep 17, 2017
aaf2c8b
Remove JS stuff, update deps and browser versions
m-e-h Sep 17, 2017
561302f
load scss config for stylelint
m-e-h Sep 18, 2017
fd9efee
Merge remote-tracking branch 'upstream/master' into add-packagejson
m-e-h Nov 14, 2017
275dcbb
update
m-e-h Nov 14, 2017
baf9ec0
fix typos
m-e-h Nov 15, 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 .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Dependency directories
node_modules/
yarn.lock
Copy link
Collaborator

Choose a reason for hiding this comment

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

When does yarn.lock get created? On my system I am only getting package-lock.json generate which we should ignore too.

Copy link

Choose a reason for hiding this comment

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

A yarn.lockfile is only generated if someone runsyarn install`

Likewise, a package-lock.json is only generated if you run npm install

Copy link

Choose a reason for hiding this comment

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

Stumbled upon this while having my first contact with wordpress after long not touching it. Generally, the lock files are meant to be comitted. Is there any special reason you want to exclude them?

https://stackoverflow.com/questions/44206782/do-i-commit-the-package-lock-json-file-created-by-npm-5

38 changes: 38 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{
"name": "_s",
"version": "1.0.0",
Copy link
Collaborator

Choose a reason for hiding this comment

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

We should add a licence and repository field too.

"scripts": {
"css-build": "npm run css-lint && npm run css-compile && npm run css-prefix && npm run css-format && npm run css-fix",
Copy link
Collaborator

Choose a reason for hiding this comment

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

I don't think we need to run css-lint at the start of the build process. If we were to run a lint it should be scss-lint

"css-lint": "stylelint style.css",
"css-compile": "node-sass sass/style.scss style.css --output-style expanded --indent-type tab --indent-width 1",
"css-prefix": "postcss style.css -u autoprefixer -o style.css --no-map",
"css-format": "stylefmt style.css",
"css-fix": "stylelint style.css --fix",
"scss-lint": "stylelint sass/**/*.scss --syntax scss"
Copy link

Choose a reason for hiding this comment

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

Change this to stylelint '**/*.scss' --syntax scss --config node_modules/stylelint-config-wordpress/scss.js

The glob needs to be quoted and loads the SCSS config from stylelint-config-wordpress

Copy link
Author

Choose a reason for hiding this comment

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

Updated. Thanks @ntwb !

},
"devDependencies": {
"autoprefixer": "^7.1.4",
"browserslist": "^2.4.0",
"node-sass": "^4.5.3",
"postcss-cli": "^4.1.1",
"stylefmt": "^6.0.0",
"stylelint": "^8.1.1",
"stylelint-config-wordpress": "^12.0.0"
},
"stylelint": {
"defaultSeverity": "warning",
Copy link
Author

Choose a reason for hiding this comment

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

@grappler Not sure if this is wanted here?
I added it to get rid of errors printed in the terminal when linting didn't return 0 errors.

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] fix:css: `stylelint style.css --fix`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] fix:css script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/marty/.npm/_logs/2017-11-15T15_48_26_137Z-debug.log
error Command failed with exit code 2.

Copy link
Collaborator

Choose a reason for hiding this comment

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

I am fine with leaving like this. We can look in the future to change the command to something like "stylelint '**/*.scss'; exit 0" if need be.

https://medium.com/@bjankord/how-to-lint-scss-with-stylelint-dc87809a9878

"extends": "stylelint-config-wordpress"
},
"browserslist": [
"> 1%",
"ie >= 11",
"last 1 Android versions",
"last 1 ChromeAndroid versions",
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Safari versions",
"last 2 iOS versions",
"last 2 Edge versions",
"last 2 Opera versions"
]
}