Drupal theme linting
Closed this issue · 10 comments
Hello, I typically work on Drupal theming, and to avoid conflicts with Drupal's core linting I place node_modules and stylelintrc config in a subtheme directory per project environment. Is there a way to let Stylelint know through this plugin where I have those placed? Thanks
Hmm, I'm not familiar with Drupal or its project structure but if you have a .stylelintrc config in a subdirectory, Stylelint should automatically know to use that config for files in that directory since it's the "nearest" one.
Does it not seem to work that way when editing stylesheets in your subdirectory, or are you otherwise running into error messages for specific files?
If being able to set workspace-specific extension preferences would be useful here, I've been meaning to add that option anyways and could put in the next update.
Hey @nlydv ,
I'm getting an error for both CSS and Sass files.
ERROR (uncaught)
undefined
Fyi - here is my typical Drupal site structure.
└── htdocs
└── ...
└── theme
└── CUSTOM_THEME
├── css
│ └── *.css
├── js
│ └── *.js
├── scss
│ └── *.scss
├── .eslintrc.json
├── .stylelintignore
├── .stylelintrc.json
├── gulpfile.js
├── package.json
Agree. I think adding a workspace-specific setting would be helpful. But of course I have no idea how difficult that would be.
Thanks for creating this extension for Nova. No Stylelint functionality has been tough when you're used to having it.
@frankyonnetti I actually pushed an update for the extension yesterday that works out a lot of the kinks and gives proper feedback related to config issues.
More than likely that it'll fix, or at least let you know what the actual problem is, after updating. The (uncaught) undefined notice came up frequently for me in testing when a plugin or extends rule was unresolvable. If that was the case for you, then the new version should actually say so with the name of the missing package. In any case, let me know if this issue (or any others) still shows up for you after updating.
And yeah the lack of Stylelint while editing was very noticeable when I first tried Nova, which is what drove me to make the extension. Happy that it also helps others out as well! IThe workspace settings should be a pretty simple addition so I'll probably add that in the next version.
Thanks @nlydv that's helpful! I'm getting the error No available stylelintrc config file found. So I tried a few things to see if I could get it to work.
Not sure if this matters, but I am using "extends": "stylelint-config-sass-guidelines" instead of stylelint-config-standard in my stylelintrc config.
Also, I don't have Stylelint installed globally, but per project environment.
- Initial try, edit Scss file a few folders down from my stylelintrc config, but got the above error.
└── CUSTOM_THEME
├── node_modules
├── scss
│ └── layout
│ └── _main.scss
├── .stylelintrc.json
- Moved
_main.scssto the same directory as.stylelintrc.json(CUSTOM_THEME), but got the above error.
└── CUSTOM_THEME
├── node_modules
├── _main.scss
├── .stylelintrc.json
- In the Nova extension preferences for Stylelint > Exactable, I added the absolute path to my project ...
/node_modules/stylelint/bin/stylelint.js.
Item 1 above produced the same error, but item 2 produced expected behavior!
Hope that helps.
Huh, that's weird.
Thanks for this info though, I'll try and reproduce your setup and see what I can find.
Do you have any other plugins, extends, or customSyntaxes set in your .stylelintrc.json or just that one? Oh and I assume since your stylelint executable is installed at the project level that the plugins, etc. are as well?
Just stylelint-config-sass-guidelines, but I included the file contents as well so you can take a look.
.stylelintrc.json
{
"extends": "stylelint-config-sass-guidelines",
"rules": {
"color-hex-length": null,
"declaration-block-no-duplicate-properties": true,
"declaration-colon-space-after": "always-single-line",
"function-max-empty-lines": 1,
"indentation": 2,
"max-nesting-depth": 8,
"number-leading-zero": "always",
"number-no-trailing-zeros": null,
"property-no-vendor-prefix": null,
"rule-empty-line-before": [
"always-multi-line",
{
"ignore": ["after-comment"]
}
],
"selector-class-pattern": null,
"selector-max-compound-selectors": null,
"selector-max-id": null,
"selector-no-qualifying-type": null,
"shorthand-property-no-redundant-values": true,
"string-quotes": "double",
"value-list-comma-space-after": "always-single-line",
"scss/dollar-variable-pattern": null,
"order/properties-alphabetical-order": null,
"order/order": [
"custom-properties",
{
"type": "at-rule",
"name": "include"
},
{
"type": "at-rule",
"name": "extend"
},
"declarations",
{
"type": "at-rule",
"name": "media"
},
"rules",
{
"type": "at-rule",
"name": "include",
"parameter": "keyframes"
}
],
"order/properties-order": [
"flex",
"flex-grow",
"flex-shrink",
"flex-basis",
"content",
"color",
"font",
"font-size",
"line-height",
"font-weight",
"font-style",
"font-family",
"letter-spacing",
"text-align",
"text-indent",
"text-justify",
"text-transform",
"text-decoration",
"text-shadow",
"white-space",
"word-wrap",
"word-break",
"hyphens",
"border",
"border-width",
"border-style",
"border-color",
"border-top",
"border-top-width",
"border-top-style",
"border-top-color",
"border-right",
"border-right-width",
"border-right-style",
"border-right-color",
"border-bottom",
"border-bottom-width",
"border-bottom-style",
"border-bottom-color",
"border-left",
"border-left-width",
"border-left-style",
"border-left-color",
"border-radius",
"background",
"background-color",
"background-image",
"background-repeat",
"background-attachment",
"background-position",
"background-size",
"box-shadow",
"order",
"align-self",
"display",
"flex-direction",
"flex-wrap",
"flex-flow",
"justify-content",
"align-items",
"align-content",
"float",
"clear",
"visibility",
"opacity",
"overflow",
"position",
"top",
"right",
"bottom",
"left",
"z-index",
"clip",
"vertical-align",
"list-style",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"width",
"min-width",
"max-width",
"height",
"min-height",
"max-height"
]
}
}
When you say plugins, you mean node modules? Just want to make sure I'm providing what you need... Yes, all installed at the same level.
"devDependencies": {
"autoprefixer": "^10.4.4",
"browser-sync": "^2.27.9",
"gulp": "^4.0.2",
"gulp-postcss": "^9.0.1",
"gulp-sass": "^5.1.0",
"gulp-sourcemaps": "^3.0.0",
"gulp-uglify": "^3.0.2",
"postcss": "^8.4.12",
"sass": "^1.50.0",
"standard": "^16.0.4",
"stylelint": "^14.6.1",
"stylelint-config-sass-guidelines": "^9.0.1",
"stylelint-config-standard": "^25.0.0",
"yarn-upgrade-all": "^0.7.1"
}
Yeah by "plugins" I just meant those node_modules that your .stylelintrc will try to look for due to it being set in the config under plugins, extends, customSyntaxes, and the like, so just the actual node package for stylelint-config-sass-guidelines in your case.
Just wanted to make sure they were in the same place as stylelint and not installed globally or somewhere else.
Thanks for sharing the deps and your config, will definitely be useful.
Hey @frankyonnetti, sorry for the delay, but I've pushed a big update to the extension just now.
I was able to reproduce your setup/issue, and after reworking most of the extension's internal logic, I'm pretty sure that the update will fix this issue for you, but let me know either way.
Hey Neel, I did some initial testing and it works as expected!!! Thank you so much for your hard work on this Nova extension.
Great to hear, thanks!
And you're very welcome, happy to help :)