Commit 8e10e9a5 authored by Florent Torregrosa's avatar Florent Torregrosa 🤘
Browse files

Issue #75: Improved assets management. Use Stylelint for SASS linting.

parent 96ad894b
......@@ -169,6 +169,17 @@ variables:
--allow-empty-input
"./app/**/custom/**/*.css"
'SASS Lint':
extends: .code_quality_default
script:
- ./app/core/node_modules/.bin/stylelint
--config ./scripts/quality/sasslint/.stylelintrc.json
--config-basedir ./app/core/
--formatter verbose
--ignore-path ./scripts/quality/sasslint/.stylelintignore
--allow-empty-input
"./app/**/custom/**/*.{scss,sass}"
'JS Lint':
extends: .code_quality_default
script:
......
......@@ -83,16 +83,14 @@ docker-compile-assets: ## Compile assets.
@echo "$(COLOR_LIGHT_RED)If you are adding/compiling new files, remember to execute 'make docker-drupal-paranoia'.$(COLOR_NC)"
@docker-compose exec node /bin/sh -c 'cd $(PROJECT_PATH) && \
yarn --cwd ${PROJECT_PATH}/scripts/assets install && \
cd ${PROJECT_PATH}/scripts/assets && \
./node_modules/.bin/gulp'
yarn --cwd ${PROJECT_PATH}/scripts/assets run gulp-dev'
.PHONY: docker-compile-assets-production
docker-compile-assets-production: ## Compile assets for production.
@echo "$(COLOR_LIGHT_RED)If you are adding/compiling new files, remember to execute 'make docker-drupal-paranoia'.$(COLOR_NC)"
@docker-compose exec node /bin/sh -c 'cd $(PROJECT_PATH) && \
yarn --cwd ${PROJECT_PATH}/scripts/assets install && \
cd ${PROJECT_PATH}/scripts/assets && \
./node_modules/.bin/gulp --production'
yarn --cwd ${PROJECT_PATH}/scripts/assets run gulp-prod'
.PHONY: docker-drupal-paranoia
docker-drupal-paranoia: ## Execute composer drupal:paranoia.
......@@ -206,6 +204,18 @@ quality-css: ## Launch Stylelint.
--allow-empty-input \
"${APP_PATH}/**/custom/**/*.css"'
.PHONY: quality-sass
quality-sass: ## Launch Stylelint on sass/scss code.
@docker-compose exec node /bin/sh -c 'cd $(PROJECT_PATH) && \
yarn --cwd ${APP_PATH}/core install && \
${APP_PATH}/core/node_modules/.bin/stylelint \
--config ${PROJECT_PATH}/scripts/quality/sasslint/.stylelintrc.json \
--config-basedir ${APP_PATH}/core/ \
--formatter verbose \
--ignore-path ./scripts/quality/sasslint/.stylelintignore \
--allow-empty-input \
"${APP_PATH}/**/custom/**/*.{scss,sass}"'
.PHONY: quality-js
quality-js: ## Launch eslint.
@docker-compose exec node /bin/sh -c 'cd $(PROJECT_PATH) && \
......@@ -254,6 +264,7 @@ quality-all: ## Launch all code quality tools of the project.
${MAKE} quality-composer-normalize-custom || true
${MAKE} quality-config-inspector || true
${MAKE} quality-css || true
${MAKE} quality-sass || true
${MAKE} quality-js || true
${MAKE} quality-rector || true
${MAKE} quality-spellcheck || true
......@@ -313,6 +324,19 @@ quality-fix-css: ## Launch Stylelint fixer.
--allow-empty-input \
"${APP_PATH}/**/custom/**/*.css"'
.PHONY: quality-fix-sass
quality-fix-sass: ## Launch Stylelint fixer on sass/scss code.
@docker-compose exec node /bin/sh -c 'cd $(PROJECT_PATH) && \
yarn --cwd ${APP_PATH}/core install && \
${APP_PATH}/core/node_modules/.bin/stylelint \
--config ${PROJECT_PATH}/scripts/quality/sasslint/.stylelintrc.json \
--config-basedir ${APP_PATH}/core/ \
--formatter verbose \
--ignore-path ./scripts/quality/sasslint/.stylelintignore \
--fix \
--allow-empty-input \
"${APP_PATH}/**/custom/**/*.{scss,sass}"'
.PHONY: quality-fix-js
quality-fix-js: ## Launch eslint.
@docker-compose exec node /bin/sh -c 'cd $(PROJECT_PATH) && \
......@@ -333,7 +357,8 @@ quality-fix-all: ## Launch all code quality fix of the project.
${MAKE} quality-fix-rector || true
${MAKE} quality-fix-php-cs || true
${MAKE} quality-fix-js || true
${MAKE} quality-fix-css
${MAKE} quality-fix-css || true
${MAKE} quality-fix-sass
################################################################################
## Tests.
......
......@@ -26,7 +26,7 @@ there configuration may needs adjustment. Its can be boggy.
* [GrumPHP](https://github.com/phpro/grumphp): add Git hooks to run some tools before committing. See the [configuration file](../scripts/quality/grumphp/grumphp.yml).
* [Cspell](https://github.com/streetsidesoftware/cspell/tree/master/packages/cspell): validate sentences with Drupal standards.
* [ESLint](https://eslint.org/): lint JS files with Drupal standards. The .eslintignore file is located in the `app` folder, generated with Drupal scaffold.
* [Stylelint](https://stylelint.io/): lint CSS files with Drupal standards.
* [Stylelint](https://stylelint.io/): lint CSS files with Drupal standards. Also used to lint SASS files with the following [configuration](../scripts/quality/sasslint/.stylelintrc.json).
* [YAML Lint](https://github.com/grasmash/yaml-cli): ensure your YAML files are valid and a custom script to run it.
## Code quality fixers
......@@ -36,7 +36,7 @@ there configuration may needs adjustment. Its can be boggy.
* [PHP Coding Standards Fixer](https://github.com/FriendsOfPHP/PHP-CS-Fixer): with the [PHP-Cs-Fixer Drupal Configurations](https://github.com/drupol/phpcsfixer-configs-drupal), see the [configuration file](../scripts/quality/phpcs_fixer/.php_cs.dist).
* [Psalm](https://psalm.dev/): see the [configuration file](../scripts/quality/psalm/psalm.xml).
* [ESLint](https://eslint.org/): a command is available in the Makefile.
* [Stylelint](https://stylelint.io/): a command is available in the Makefile.
* [Stylelint](https://stylelint.io/): a command is available in the Makefile. another command is also available for SASS files.
## Testing
......
......@@ -13,17 +13,16 @@ const sourcemaps = require('gulp-sourcemaps');
const spritesmith = require('gulp.spritesmith');
const merge = require('merge-stream');
const themesPath = '../../app/themes/custom';
const webThemesPath = '/themes/custom';
const projectThemePath = themesPath + '/myproject_theme';
const webProjectThemePath = webThemesPath + '/myproject_theme';
////////////////////////////////////////////////////////////////////////////////
// Options and variables.
////////////////////////////////////////////////////////////////////////////////
const sassOptions = {
outputStyle: (mode.production() ? 'compressed' : 'compact')
};
const srcCleanOptions = {
read: false
};
const sassOptions = {
outputStyle: (mode.production() ? 'compressed' : 'compact')
};
const cleanOptions = {
force: true
};
......@@ -35,6 +34,11 @@ const imageMinSvgoOptions = {
]
};
const themesPath = '../../app/themes/custom';
const webThemesPath = '/themes/custom';
const projectThemePath = themesPath + '/myproject_theme';
const webProjectThemePath = webThemesPath + '/myproject_theme';
const paths = {
myproject_theme: {
styles: {
......@@ -60,6 +64,10 @@ const paths = {
}
};
////////////////////////////////////////////////////////////////////////////////
// Task definitions.
////////////////////////////////////////////////////////////////////////////////
gulp.task('styles_myproject_theme', function() {
return themeStyles('myproject_theme');
});
......@@ -82,7 +90,11 @@ gulp.task('images', gulp.series(
));
// Watch.
gulp.task('watch', function () {
gulp.task('watch', function (done) {
if (mode.production()) {
return done();
}
gulp.watch(paths['myproject_theme'].styles.src, gulp.series('styles_myproject_theme'));
gulp.watch(paths['myproject_theme'].patternsStyles.src, gulp.series('pattern_styles_myproject_theme'));
gulp.watch(paths['myproject_theme'].images.src, gulp.series(
......@@ -92,7 +104,7 @@ gulp.task('watch', function () {
));
});
// Default task
// Default task.
gulp.task('default', gulp.series(
'images',
'styles_myproject_theme',
......@@ -100,6 +112,10 @@ gulp.task('default', gulp.series(
'watch'
));
////////////////////////////////////////////////////////////////////////////////
// Functions.
////////////////////////////////////////////////////////////////////////////////
// Sass.
function themeStyles(themePathKey) {
return gulp.src(paths[themePathKey].styles.src)
......@@ -110,7 +126,6 @@ function themeStyles(themePathKey) {
.pipe((mode.development(sourcemaps.write('.'))))
.pipe(gulp.dest(paths[themePathKey].styles.dest));
}
function themePatternStyles(themePathKey) {
return gulp.src(paths[themePathKey].patternsStyles.src)
.pipe((mode.development(sourcemaps.init())))
......
{
"name": "project",
"name": "project_assets",
"license": "MIT",
"dependencies": {
"gulp": "4.*",
......@@ -13,9 +13,9 @@
"gulp.spritesmith": "6.*",
"merge-stream": "2.*"
},
"main": "gulpfile.js",
"scripts": {
"gulp": "node_modules/.bin/gulp"
"gulp-dev": "gulp",
"gulp-prod": "gulp --production"
},
"browserslist": [
"last 2 versions"
......
{
"extends": "./.stylelintrc.json",
"rules": {
"at-rule-no-unknown": null,
"plugin/no-browser-hacks": null
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment