Skip to content
Snippets Groups Projects
Commit b224dae3 authored by Ivica Puljic's avatar Ivica Puljic Committed by Ivica Puljic
Browse files

Issue #3347496 by pivica: Fix npm audit report, remove gulp-plumber,...

Issue #3347496 by pivica: Fix npm audit report, remove gulp-plumber, gulp-sass-lint and stylelint packages
parent 55667f14
No related branches found
No related tags found
No related merge requests found
# Base taken from https://github.com/material-components/material-components-web/blob/master/.stylelintrc.yaml
#
# For more information about Drupal standards that this configuration is trying
# to follow please check
#
# - https://www.drupal.org/docs/develop/standards/css/css-formatting-guidelines
# - https://www.drupal.org/docs/develop/standards/css/csscomb-settings-for-drupal-css-formatting-and-sort-tool
# We are using https://github.com/stylelint/stylelint-config-standard/blob/master/index.js
# as a base for our rules.
extends: stylelint-config-standard
ignoreFiles:
- node_modules/**/*
- packages/**/node_modules/**/*
- build/**/*
plugins:
- stylelint-selector-bem-pattern
- stylelint-scss
- stylelint-order
rules:
# Follow best practices
font-family-name-quotes: always-where-recommended
# http://stackoverflow.com/questions/2168855/is-quoting-the-value-of-url-really-necessary
function-url-quotes: never
# https://www.w3.org/TR/selectors/#attribute-selectors
# http://stackoverflow.com/q/3851091
selector-attribute-quotes: always
# Double-quotes are our convention throughout our codebase within (S)CSS. They also reflect how
# attribute strings are normally quoted within the DOM.
string-quotes: double
order/order:
-
-
type: at-rule
hasBlock: false
- custom-properties
- declarations
-
unspecified: ignore
disableFix: true
# https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/smacss.yml
order/properties-order:
- display
- position
- top
- right
- bottom
- left
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- align-content
- align-items
- align-self
- justify-content
- order
- box-sizing
- width
- min-width
- max-width
- height
- min-height
- max-height
- margin
- margin-top
- margin-right
- margin-bottom
- margin-left
- padding
- padding-top
- padding-right
- padding-bottom
- padding-left
- float
- clear
- resize
- columns
- column-gap
- column-fill
- column-rule
- column-span
- column-count
- column-width
- grid-gap
- grid-template-columns
- animation
- animation-name
- animation-timing-function
- transform
- transform-box
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
# Border
- border
- border-top
- border-right
- border-bottom
- border-left
- border-width
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
- border-style
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
- border-radius
- border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
- border-color
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
# Background
- background
- background-attachment
- background-clip
- background-color
- background-image
- background-repeat
- background-position
- background-size
- fill
- opacity
# Text
- color
- font
- font-family
- font-size
- font-smoothing
- font-style
- font-variant
- font-weight
- letter-spacing
- line-height
- list-style
- text-align
- text-decoration
- text-indent
- text-overflow
- text-rendering
- text-shadow
- text-transform
- text-wrap
- white-space
- word-spacing
# Cursor
- cursor
- pointer-events
- user-select
# Other
- appearance
- border-collapse
- border-spacing
- box-shadow
- caption-side
- content
- empty-cells
- overflow
- overflow-x
- overflow-y
- quotes
- speak
- table-layout
- vertical-align
- visibility
- will-change
- z-index
declaration-property-unit-whitelist:
font-size:
- "rem"
- "px"
# The following prefix rules are enabled since we use autoprefixer
at-rule-no-vendor-prefix: true
media-feature-name-no-vendor-prefix: true
selector-no-vendor-prefix: true
value-no-vendor-prefix: true
# Usually if you're nesting past 3 levels deep there's a problem
max-nesting-depth: 3
# Because we adhere to BEM we can limit the amount of necessary compound selectors. Most should
# just be 1 level selector. However, modifiers can introduce an additional compound selector.
# Futhermore, generic qualifying selectors (e.g. `[dir="rtl"]`) can introduce yet another level.
selector-max-compound-selectors: 4
# For specificity: disallow IDs (0). Allow for complex combinations of classes, pseudo-classes,
# attribute modifiers based on selector-max-compound-selectors, plus an addition for
# pseudo-classes (4). Allow for pseudo-elements (1).
selector-max-specificity: 0,4,1
at-rule-no-unknown:
- true
- ignoreAtRules:
- at-root
- content
- each
- else
- error
- for
- function
- include
- if
- mixin
- return
- warn
# Disallow "@extend" in scss.
# http://csswizardry.com/2016/02/mixins-better-for-performance/
# http://vanseodesign.com/css/sass-mixin-or-extend/
# Besides performance, @extend actually *changes* the selector precedence by creating a compound
# selector, which can lead to ambiguous results.
at-rule-blacklist:
- extend
# Extremely useful for typos, and anything emergent can be ignored by this rule
property-no-unknown:
- true
- ignoreProperties:
- contain
# There is no reason that a specific ID would be needed for UI components
selector-max-id: 0
# Qualifying types are not needed when using a naming system like BEM
selector-no-qualifying-type: true
# In general, we should not be modifying elements within our components, since we can't
# predict the use cases in which users would add a certain type of element into a component.
selector-max-type:
- 0
- ignoreTypes:
- /fieldset/
# Styles for components should never need the universal selector.
selector-max-universal: 0
# Ensure any defined symbols are prefixed with "mdc-"
# TODO: Remove "md-" pattern.
custom-media-pattern: ^mdc?-.+
custom-property-pattern: ^mdc?-.+
selector-class-pattern:
- ^mdc?-.+
- resolveNestedSelectors: true
selector-id-pattern: ^mdc?-.+
# Names are more semantic than numbers
font-weight-notation: named-where-possible
# http://www.paulirish.com/2010/the-protocol-relative-url/
function-url-no-scheme-relative: true
# TODO: and FIXME: warnings are super useful because they remind us that we should address these
# within our codebase
comment-word-blacklist:
-
- /^TODO:/
- /^FIXME:/
- severity: warning
# Part of google's style guide
number-leading-zero: never
at-rule-empty-line-before:
- always
-
except:
- blockless-after-blockless
- first-nested
ignore:
- after-comment
ignoreAtRules:
- else
block-closing-brace-newline-after:
- always
- ignoreAtRules:
- if
- else
# We use Harry Roberts' BEM dialect as our preferred way to format classes.
# See: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
# See: https://github.com/postcss/postcss-bem-linter/blob/c59db3f/lib/preset-patterns.js#L39
plugin/selector-bem-pattern:
componentName: ^[a-z]+(?:-[a-z]+)*$
# <namespace>-<block>__<element>*--<modifier>*[<attribute>]*
componentSelectors: ^\.mdc?-{componentName}(?:__[a-z]+(?:-[a-z]+)*)*(?:--[a-z]+(?:-[a-z]+)*)*(?:\[.+\])*$
ignoreSelectors:
- ^fieldset
- ^\[aria\-disabled=(?:.+)\]
# SCSS naming patterns, just like our CSS conventions above.
# (note for $-vars we use a leading underscore for "private" variables)
scss/dollar-variable-pattern:
- ^_?mdc-.+
-
ignore: local
scss/at-function-pattern: ^mdc-.+
scss/at-mixin-pattern: ^mdc-.+
# Prevents unneeded nesting selectors
scss/selector-no-redundant-nesting-selector: true
# Since leading underscores are not needed, they can be omitted
scss/at-import-no-partial-leading-underscore: true
# Since mixins are explicit (`@include`) and parens are unnecessary for argumentless mixins, they
# can be omitted.
scss/at-else-closing-brace-newline-after: always-last-in-chain
scss/at-else-closing-brace-space-after: always-intermediate
scss/at-else-empty-line-before: never
......@@ -261,3 +261,36 @@ function bs_base_bs_update_8011($target_theme_name) {
]);
}
}
/**
* Remove gulp-plumber, styleint and gulp-sass-lint, update other node libs.
*/
function bs_base_bs_update_8012($target_theme_name) {
$themes_info = _bs_base_drupal_theme_list_info();
if (isset($themes_info[$target_theme_name])) {
// Dependency updates.
_bs_base_regexp_file($themes_info[$target_theme_name]->subpath . '/package.json', [
// Packages updates.
'"autoprefixer": ".*"' => '"autoprefixer": "^10.4.14"',
'"deepmerge": ".*"' => '"deepmerge": "^4.3.0"',
'"del": ".*"' => '"del": "^6.1.1"',
// Packages removal.
'^\s*"gulp-plumber": ".*",\n' => '',
'^\s*"gulp-sass-lint": ".*",\n' => '',
'^\s*"stylelint": ".*",\n' => '',
'^\s*"stylelint-config-standard": ".*",\n' => '',
'^\s*"stylelint-order": ".*",\n' => '',
'^\s*"stylelint-scss": ".*",\n' => '',
'^\s*"stylelint-selector-bem-pattern": ".*",\n' => '',
]);
// Remove stylelint configuration.
_bs_base_regexp_file($themes_info[$target_theme_name]->subpath . '/gulp-options.yml', [
'# Stylelint config.*\n.*\n.*\.stylelintrc\.yml\'' => '',
]);
// Update other node dependencies in a package-lock.json or pnpm-lock.yaml.
$target_path = _bs_base_drupal_get_theme_path($target_theme_name);
exec('cd ' . $target_path . ' && ((type pnpm && pnpm update) || npm update)');
}
}
......@@ -1292,8 +1292,6 @@ EOD;
$content .= "\n -\n name: '$parent_theme'\n path: '$relative_path'";
}
// Stylintrc file we always reuse from root parent theme.
$content .= "\n\n# Stylelint config we will reuse from $parent_theme parent theme.\nstylelint:\n configFile: '$relative_path.stylelintrc.yml'\n";
break;
case "config/schema/{$options['child_machine_name']}.schema.yml":
......
......@@ -12,8 +12,6 @@ gulpPlugins:
- "@hail2u/css-mqpacker"
- "del"
- "postcss-*"
- "stylelint"
- "stylelint-*"
- "through2"
# Rename mapping to values that we will use in JS code.
rename:
......
......@@ -5,10 +5,8 @@ module.exports = function (gulp, sass, plugins, options) {
const fs = require('fs');
// Processor for linting is assigned to options, so it can be reused later.
// Processor options.
options.processors = [
// Options are defined in .stylelintrc.yaml file.
plugins.stylelint(options.stylelint),
plugins.reporter(options.processors.reporter)
];
......@@ -71,11 +69,6 @@ module.exports = function (gulp, sass, plugins, options) {
return task;
});
gulp.task('sass:lint', function () {
return gulp.src(options.sass.src + '/**/*.scss')
.pipe(plugins.postcss(options.processors, {syntax: plugins.syntax_scss}));
});
gulp.task('clean:css', function () {
return plugins.del([
'css/**/*'
......@@ -84,7 +77,7 @@ module.exports = function (gulp, sass, plugins, options) {
// Gulp run all tasks.
gulp.task('default', gulp.series('clean:css', 'sass:lint', 'sass'));
gulp.task('default', gulp.series('clean:css', 'sass'));
gulp.task('prod', gulp.series('default'));
gulp.task('dev', gulp.series('sass:dev'));
gulp.task('clean', gulp.series('clean:css'));
......
......@@ -3,34 +3,27 @@
"description": "BS Base theme",
"private": true,
"license": "GPL",
"engines" : {
"node" : "18"
"engines": {
"node": "18"
},
"devDependencies": {
"@hail2u/css-mqpacker": "github:hail2u/node-css-mqpacker#v9.0.1",
"autoprefixer": "^10.4.5",
"deepmerge": "^4.2.2",
"del": "^6.0.0",
"autoprefixer": "^10.4.14",
"deepmerge": "^4.3.0",
"del": "^6.1.1",
"font-awesome": "^4.7.0",
"gulp": "^4.0.2",
"gulp-concat": "^2.6.1",
"gulp-debug": "^4.0.0",
"gulp-load-plugins": "^2.0.7",
"gulp-plumber": "^1.2.1",
"gulp-load-plugins": "^2.0.8",
"gulp-postcss": "^9.0.1",
"gulp-sass": "^5.1.0",
"gulp-sass-inject": "^1.1.1",
"gulp-sass-lint": "^1.4.0",
"gulp-strip-css-comments": "^2.0.0",
"js-yaml": "^4.1.0",
"node-sass": "^8.0.0",
"postcss": "^8.4.13",
"postcss": "^8.4.21",
"postcss-reporter": "^7.0.5",
"stylelint": "^14.16.1",
"stylelint-config-standard": "^29.0.0",
"stylelint-order": "^6.0.1",
"stylelint-scss": "^4.3.0",
"stylelint-selector-bem-pattern": "^2.1.1",
"through2": "^4.0.2"
},
"scripts": {
......
This diff is collapsed.
......@@ -5,7 +5,7 @@ base theme: bs_base
core_version_requirement: ^9.3 || ^10
bs_versions:
bs_base: 8011
bs_base: 8012
# @todo - Core does not allow for now themes to declare dependencies on modules.
# @see https://www.drupal.org/project/drupal/issues/474684
......
......@@ -8,7 +8,3 @@ parentTheme:
name: 'bs_base'
# Relative or abs path to parent theme folder.
path: '../../'
# Stylelint config we will reuse from parent theme.
stylelint:
configFile: '../../.stylelintrc.yml'
......@@ -8,30 +8,23 @@
},
"devDependencies": {
"@hail2u/css-mqpacker": "github:hail2u/node-css-mqpacker#v9.0.1",
"autoprefixer": "^10.4.13",
"autoprefixer": "^10.4.14",
"bootstrap": "~4.6.2",
"deepmerge": "^4.2.2",
"del": "^6.0.0",
"deepmerge": "^4.3.0",
"del": "^6.1.1",
"font-awesome": "^4.7.0",
"gulp": "^4.0.2",
"gulp-concat": "^2.6.1",
"gulp-debug": "^4.0.0",
"gulp-load-plugins": "^2.0.8",
"gulp-plumber": "^1.2.1",
"gulp-postcss": "^9.0.1",
"gulp-sass": "^5.1.0",
"gulp-sass-inject": "^1.1.1",
"gulp-sass-lint": "^1.4.0",
"gulp-strip-css-comments": "^2.0.0",
"js-yaml": "^4.1.0",
"node-sass": "^8.0.0",
"postcss": "^8.4.21",
"postcss-reporter": "^7.0.5",
"stylelint": "^14.16.1",
"stylelint-config-standard": "^29.0.0",
"stylelint-order": "^6.0.1",
"stylelint-scss": "^4.3.0",
"stylelint-selector-bem-pattern": "^2.1.1",
"through2": "^4.0.2"
},
"scripts": {
......
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment