-
Notifications
You must be signed in to change notification settings - Fork 3.1k
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
CSS: Add package.json for linting and compiling #1159
Conversation
I think we should limit the scope to just CSS and JS for this PR but this will allow us to have a standard way of generating RTL styles (see #1154) and the POT file (see #884 (comment)).
If we run CSS Lint on the current
Current result fro eslint
Before this is merged I would like to see but only if it is decided that we want to do in this direction.
|
A couple of the current lint errors that would need manually fixed are questionable whether or not we can and/or should even "fix" them.
The alternatives to fixing these would be to:
or
I'm happy to submit a pull for correctly formatted SCSS files. Just wanted to get thoughts on the above fixes. |
If we add an exception it should be added to the config file and not cluter the |
f13f515
to
0795d6c
Compare
I've updated the I also discovered this https://github.com/stylelint/stylelint/tree/master/lib/rules/max-line-length#ignorepattern-regex which I've added to solve the So after running
Once |
package.json
Outdated
"extends": "stylelint-config-wordpress", | ||
"rules": { | ||
"max-line-length": [ 80, { | ||
"ignorePattern": ["/\b(Description:).*\n/", "/https?:\/\/[0-9,a-z]*.*/"] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It isn't working on the description though. Not sure I've got the regex right if anybody has any suggestions.
Just had a quick look at the regex and it looks fine to me, though the ()
around Description
should not be needed.
Also, as we know that the Description
should always be at the start of the line with - if anything - only whitespace before it, you could consider changing the \b
to the slightly more specific: ^\s*
.
All the same, the regex should work as is as well.
I'm wondering whether ignorePattern
can actually take an array of patterns or whether the regexes should be merged into one ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This ['/(https?://[0-9,a-z]*.*)|(^description\\:.+)|(^tags\\:.+)/i']
should do the trick. Though we may not need it if we you the latest WordPress config.
WordPress-Coding-Standards/stylelint-config-wordpress#151
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Indeed, this shipped with stylelint-config-wordpress
version 12.0.0
, no need for it here.
@jrfnl just tried the
So it appears that the |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
See inline comments on requested changes
package.json
Outdated
"postcss-cli": "^4.1.0", | ||
"stylefmt": "^6.0.0", | ||
"stylelint": "^7.12.0", | ||
"stylelint-config-wordpress": "^11.0.0" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should be updated to the latest 12.0.0
release.
package.json
Outdated
"node-sass": "^4.5.3", | ||
"postcss-cli": "^4.1.0", | ||
"stylefmt": "^6.0.0", | ||
"stylelint": "^7.12.0", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should be updated to the latest 8.0.0
release.
package.json
Outdated
"autoprefixer": "^7.1.2", | ||
"browserslist": "^2.1.5", | ||
"eslint": "^4.1.1", | ||
"eslint-config-wordpress": "^2.0.0", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A new release of this is coming in the next couple of days, I'd suggest waiting until 3.0.0
is released as there are significant changes in this next release
package.json
Outdated
"extends": "stylelint-config-wordpress", | ||
"rules": { | ||
"max-line-length": [ 80, { | ||
"ignorePattern": ["/\b(Description:).*\n/", "/https?:\/\/[0-9,a-z]*.*/"] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Indeed, this shipped with stylelint-config-wordpress
version 12.0.0
, no need for it here.
package.json
Outdated
"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", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You need to specify that you are using the SCSS syntax here by adding --syntax scss
to this command
It should also use the stylelint-config-wordpress/scss
shared config for SCSS syntax per WPCS for SCSS
package.json
Outdated
"> 1%", | ||
"last 2 versions", | ||
"IE 11" | ||
] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The browserlist matrix should match that of WordPress' https://make.wordpress.org/design/handbook/design-guide/browser-support/
You can see the above in code form [https://core.trac.wordpress.org/changeset/41062/trunk/Gruntfile.js here]
|
Lastly, per @davidakennedy comment here #1149 (comment)
The two rules you were considering overriding |
@grappler No problem! The JS stuff definitely shouldn't be held up by the CSS/Sass can of worms. @ntwb Thanks for reviewing! I'll clean up this PR once the path for CSS clears up a bit. |
Hmm,you'll need to look at some of the I'm guessing this is occurring because the compiled files are then being committed back to the repo, maybe these files should be excluded from the lint checks if they are only ever machine generated. I'm not that familiar with what file is what in this repo so I'm not sure what the ideal solution here should be, with that said, see the follow up below for a future solution
Eventually, the plan is to basically deprecate stylefmt and have everything moved into stylelint The v8 release we just released was ~8 months in the making and a few people are taking some time off so things are a little slow at the moment, but now that v8 is out we've a couple of focuses: One is to add more -fix's to stylelint, the other is to create some pretty printers to support Prettier's CSS support, so with a combination of both more --fix's and Prettier coming to stylelint I'm sure a solution can be found that will work well for the above scenarios |
@m-e-h Do you think you will have time to update the PR? |
@grappler I've updated the PR to get us a little closer. Do we want a command for linting the SCSS folder? I add the Let me know what else I can change. Don't know that I'm completely clear on what all we want to do here. |
Thanks @m-e-h I was playing around with it yesterday. This is how we could extend both configs. "extends": [
"stylelint-config-wordpress",
"stylelint-config-wordpress/scss"
], I think the first step is to make all of the SCSS pass the linter. All of this does not need to be done in this PR. |
package.json
Outdated
"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" |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated. Thanks @ntwb !
@ntwb Thank you for your feedback. The main discussion of this was in #1149. You will be able to read up why we are moving to travis generating the
We have some solve this is smaller steps. I am not planning of making a PR for committing the |
What's the status of this PR? |
@samikeijonen I'd like to get this thing moving. It would be nice to have this in place before any total restructure like what's discussed here #1215 I'm game for whatever. Just let me know what we still need to do to get it merged. |
I would be Ok with this going in before anything else. I think this the most ready PR. Though I did realize today that the generation of the layouts CSS is not supported but we may change a few things with the new structure. We can improve the code style for the CSS/Sass and add it to travis later. |
+1 for merging this first. Even if it's not perfect we need to start somewhere for merging all these moving parts. Then we can make this better. |
What other changes do we want to see? Any scripts I should remove? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It looks good other than the one typo.
package.json
Outdated
"compile:css": "node-sass sass/style.scss style.css --output-style expanded --indent-type tab --indent-width 1", | ||
"prefix:css": "postcss style.css -u autoprefixer -o style.css --no-map", | ||
"lint:css": "stylelint style.css", | ||
"lint:css": "stylelint 'sass/**/*.scss' --syntax scss --config node_modules/stylelint-config-wordpress/scss.js", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this should be lint:scss
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah the latter one.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When I run npm install
the line "lint:css": "stylelint style.css",
was removed automatically. Probably because there can't be two same names.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@samikeijonen I've updated this. I had also forgotten to update the names when used within the build command. Should be working correctly now.
"stylelint-config-wordpress": "^12.0.0" | ||
}, | ||
"stylelint": { | ||
"defaultSeverity": "warning", |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
Thanks for typo fixes! When I run z-index: 100000;
/* Above WP toolbar. */ Not a big deal and we should probably use comment before the style in |
Yep, the way single line comments are currently being used doesn't do well. I don't know how best to handle that. Using |
We should leave the comments but I was thinking something like this in the original /* Above WP toolbar. */
z-index: 100000; Edit: Hmm with that it leaves one empty line above: width: auto;
/* Above WP toolbar. */
z-index: 100000; |
Is it |
This removes the empty line added above the comment:
but changes the rule entirely and we probably want it enforced elsewhere. |
Just want to clarify what the plan is for moving forward with the Is the plan to merge this first and then use this build process to discuss and clean up the sass folder? I don't think this file necessarily needs to compile or produce anything in this repo right away but the linting alone will be a good step towards keeping contributors on the same page as the sass gets cleaned up. |
That is how I see it. It is better to have smaller PR's then one big one. |
We can safely merge this because at first state we're not building I think there is roadmap somewhere in which order we should continue. If not, let's create one. |
Any roadmap for merging this? I'll ping @davidakennedy just in case :) |
Hey! I was researching bare themes to start from, and this seems really one of the best to me. I would love to have a build process build in, this looks like a good start. |
This is obviously a first pass since it hasn't really been discussed or tested beyond my Linux desktop. But I think it could help to guide and keep uniform some of the SCSS/CSS and JS commits.
A
package.json
would give us an agnostic build process. #1149It's just
node
, which is what our CSS/JS development tools are built for.https://github.com/WordPress-Coding-Standards/stylelint-config-wordpress
https://github.com/WordPress-Coding-Standards/eslint-config-wordpress
According to the NPM docs it serves 3 main purposes:
This file could also, I think, take the place of and hopefully allow removal of the
.jscsrc
and.jshintignore
files in the repo. Might be time to switch to ESLint anyway. JSCS was merged into ESLint over a year ago https://core.trac.wordpress.org/ticket/31823Here's how it works for anybody wanting to submit a CSS pull-request:
From the _s/ root directory in the command line:
first
npm install
oryarn
then
npm run build:css
oryarn build:css
And that's it. They've linted the
style.css
for errors, compiled the SCSS, added prefixes according to the specified browser support, and automatically fixed some errors with the remaining errors printed in the terminal for manual fixing.You can replace
build:css
with any of the other "scripts" commands listed in the file.