Latest build

Author: philwareham

.stylelintrc.yml

@@ -3,6 +3,8 @@ ignoreFiles:
 
 defaultSeverity: warning
 
+customSyntax: postcss-scss
+
 plugins:
   - stylelint-scss
   - stylelint-order
@@ -12,6 +14,9 @@ rules:
   # Specify percentage or number notation for alpha-values.
   alpha-value-notation: number
 
+  # Disallow unknown annotations.
+  #annotation-no-unknown: true
+
   # Specify a list of disallowed at-rules.
   at-rule-disallowed-list:
     - debug
@@ -89,10 +94,10 @@ rules:
   # Disallow empty blocks.
   block-no-empty: true
 
-  # equire a newline after the opening brace of blocks.
+  # Require a newline after the opening brace of blocks.
   block-opening-brace-newline-after: always-multi-line
 
-  #Require a newline or disallow whitespace before the opening brace of blocks.
+  # Require a newline or disallow whitespace before the opening brace of blocks.
   #block-opening-brace-newline-before:
 
   # Require a single space or disallow whitespace after the opening brace of blocks.
@@ -104,6 +109,9 @@ rules:
   # Specify modern or legacy notation for applicable color-functions.
   color-function-notation: modern
 
+  # Require or disallow alpha channel for hex colors.
+  #color-hex-alpha: never
+
   # Specify lowercase or uppercase for hexadecimal color values.
   color-hex-case: lower
 
@@ -125,9 +133,6 @@ rules:
   # Disallow empty comments.
   comment-no-empty: true
 
-  # Specify a pattern for comments.
-  #comment-pattern:
-
   # Require or disallow whitespace on the inside of comment markers.
   comment-whitespace-inside: always
 
@@ -140,6 +145,9 @@ rules:
   # Require or disallow an empty line before custom properties (Autofixable).
   custom-property-empty-line-before: never
 
+  # Disallow missing `var` function for custom properties.
+  #custom-property-no-missing-var-function: true
+
   # Specify a pattern for custom properties.
   #custom-property-pattern:
 
@@ -194,6 +202,9 @@ rules:
   # Disallow `!important` within declarations.
   #declaration-no-important:
 
+  # Limit the number of values for a list of properties within declarations.
+  #declaration-property-max-values:
+
   # Specify a blacklist of disallowed property and unit pairs within declarations.
   #declaration-property-unit-blacklist:
 
@@ -224,9 +235,6 @@ rules:
   # Specify a blacklist of disallowed functions.
   #function-blacklist:
 
-  # Disallow an invalid expression within `calc` functions.
-  function-calc-no-invalid: true
-
   # Disallow an unspaced operator within `calc` functions.
   function-calc-no-unspaced-operator: true
 
@@ -251,6 +259,9 @@ rules:
   # Specify lowercase or uppercase for function names.
   function-name-case: lower
 
+  # Disallow unknown functions.
+  #function-no-unknown: true
+
   # Require a newline or disallow whitespace on the inside of the parentheses of functions.
   function-parentheses-newline-inside: always-multi-line
 
@@ -278,12 +289,21 @@ rules:
   # Specify number or angle notation for degree hues.
   hue-degree-notation: number
 
+  # Specify string or URL notation for `@import` rules.
+  #import-notation: url
+
   # Specify indentation.
   indentation: 4
 
+  # Disallow duplicate selectors within keyframe blocks.
+  keyframe-block-no-duplicate-selectors: true
+
   # Disallow `!important` within keyframe declarations.
   keyframe-declaration-no-important: true
 
+  # Specify keyword or percentage notation for keyframe selectors.
+  keyframe-selector-notation: percentage-unless-within-keyword-only-block
+
   # Specify a pattern for keyframe names.
   #keyframes-name-pattern:
 
@@ -372,10 +392,10 @@ rules:
   no-extra-semicolons: true
 
   # Disallow double-slash comments (`//`) which are not supported by CSS.
-  no-invalid-double-slash-comments: true
+  #no-invalid-double-slash-comments: true
 
   # Disallow invalid position `@import` rules within a stylesheet.
-  #no-invalid-position-at-import-rule:
+  #no-invalid-position-at-import-rule: true
 
   # Disallow irregular whitespaces.
   no-irregular-whitespace: true
@@ -421,12 +441,12 @@ rules:
       except:
         - first-nested
 
+  # Specify a list of disallowed properties for selectors within rules.
+  #rule-selector-property-disallowed-list:
+
   # Require a single space or disallow whitespace on the inside of the brackets within attribute selectors.
   selector-attribute-brackets-space-inside: never
 
-  # Specify a list of disallowed attribute names.
-  #selector-attribute-name-disallowed-list:
-
   # Specify a blacklist of disallowed attribute operators.
   #selector-attribute-operator-blacklist:
 
@@ -517,6 +537,9 @@ rules:
   # Disallow vendor prefixes for selectors.
   selector-no-vendor-prefix: true
 
+  # Specify simple or complex notation for `:not()` pseudo-class selectors.
+  selector-not-notation: complex
+
   # Specify a blacklist of disallowed pseudo-class selectors.
   #selector-pseudo-class-blacklist:
 
@@ -1076,6 +1099,9 @@ rules:
   # Require a single space or disallow whitespace before the colon in `$`-variable declarations.
   scss/dollar-variable-colon-space-before: never
 
+  # Require `!default` flag for `$`-variable declarations.
+  scss/dollar-variable-default: true
+
   # Disallow Sass variables that are used without interpolation with CSS features that use custom identifiers.
   scss/dollar-variable-no-missing-interpolation: true
 
@@ -1088,6 +1114,9 @@ rules:
   # Disallow duplicate mixins within a stylesheet.
   scss/no-duplicate-mixins: true
 
+  # Disallows the use of global function names, as these global functions are now located inside built-in Sass modules.
+  scss/no-global-function-names: true
+
   # Disallow linebreaks after Sass operators.
   scss/operator-no-newline-after: true
 
@@ -1097,5 +1126,8 @@ rules:
   # Disallow unspaced operators in Sass operations.
   scss/operator-no-unspaced: true
 
+  # Disallow non-CSS `@import`s in partial files.
+  scss/partial-no-import: true
+
   # Prevents unneeded nesting selectors.
   scss/selector-no-redundant-nesting-selector: true

dist/textpattern/jquery-ui.css

@@ -250,7 +250,7 @@ body.darkmode .ui-state-disabled:not(.ui-button) {
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.66);
+  background: hsla(0deg, 0%, 0%, 0.66);
 }
 
 /* Shadows
@@ -1564,23 +1564,18 @@ input[type=button] .ui-icon,
   box-sizing: border-box;
   margin: 0;
   padding: 0.3076923077em 0.6153846154em;
-  overflow: visible;
-  /* 1 */
+  overflow: visible; /* 1 */
   border: 1px solid var(--clr-btn-brdr);
   background-clip: padding-box;
   color: var(--clr-text-btn);
   font-family: inherit;
-  font-size: 1rem;
-  /* 2 */
+  font-size: 1rem; /* 2 */
   line-height: 1.5384615385;
   vertical-align: baseline;
   text-align: center;
   -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  /* 3 */
-  cursor: pointer;
-  /* 4 */
+          appearance: none; /* 3 */
+  cursor: pointer; /* 4 */
   -webkit-user-select: none;
           user-select: none;
 }
@@ -1616,8 +1611,7 @@ a.ui-button {
  * 1. `!important` required to override specificity.
  */
 .ui-button.ui-state-focus {
-  border-color: var(--clr-focus) !important;
-  /* 1 */
+  border-color: var(--clr-focus) !important; /* 1 */
 }
 
 /**
@@ -2298,8 +2292,7 @@ body.darkmode .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-i
   border-color: var(--clr-brdr-lite);
   outline: 0;
   list-style: none;
-  font-size: 1rem;
-  /* 1 */
+  font-size: 1rem; /* 1 */
   line-height: 1.5384615385;
   box-shadow: var(--standard-shadow);
 }
@@ -2412,7 +2405,7 @@ body.darkmode .ui-progressbar {
   height: 6px;
   animation: progressbar-stripes linear 4s infinite;
   background-color: var(--clr-accent-grad-to);
-  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.33) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.33) 50%, rgba(255, 255, 255, 0.33) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(135deg, hsla(0deg, 0%, 100%, 0.33) 25%, transparent 25%, transparent 50%, hsla(0deg, 0%, 100%, 0.33) 50%, hsla(0deg, 0%, 100%, 0.33) 75%, transparent 75%, transparent);
   background-size: 24px 24px;
 }
 
@@ -2429,14 +2422,14 @@ body.darkmode .ui-progressbar {
  */
 .ui-progressbar-indeterminate .ui-progressbar-value {
   background-color: var(--clr-brdr);
-  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(135deg, hsla(0deg, 0%, 100%, 0.25) 25%, transparent 25%, transparent 50%, hsla(0deg, 0%, 100%, 0.25) 50%, hsla(0deg, 0%, 100%, 0.25) 75%, transparent 75%, transparent);
 }
 
 body.darkmode .ui-progressbar-value {
-  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.33) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.33) 50%, rgba(255, 255, 255, 0.33) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(135deg, hsla(0deg, 0%, 100%, 0.33) 25%, transparent 25%, transparent 50%, hsla(0deg, 0%, 100%, 0.33) 50%, hsla(0deg, 0%, 100%, 0.33) 75%, transparent 75%, transparent);
 }
 body.darkmode .ui-progressbar-indeterminate .ui-progressbar-value {
-  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(135deg, hsla(0deg, 0%, 100%, 0.25) 25%, transparent 25%, transparent 50%, hsla(0deg, 0%, 100%, 0.25) 50%, hsla(0deg, 0%, 100%, 0.25) 75%, transparent 75%, transparent);
 }
 
 /**
@@ -2846,7 +2839,7 @@ body.darkmode .ui-tabs .ui-tabs-nav li:hover {
   border-bottom-width: 0;
   list-style: none;
   white-space: nowrap;
-  box-shadow: inset 0 -0.25em 0.5em rgba(102, 102, 102, 0.15);
+  box-shadow: inset 0 -0.25em 0.5em hsla(0deg, 0%, 40%, 0.15);
 }
 .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li.ui-tabs-active {
   margin-bottom: -1px;
@@ -2855,7 +2848,7 @@ body.darkmode .ui-tabs .ui-tabs-nav li:hover {
 }
 
 body.darkmode .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li {
-  box-shadow: inset 0 -0.25em 0.5em rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0 -0.25em 0.5em hsla(0deg, 0%, 0%, 0.3);
 }
 body.darkmode .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li.ui-tabs-active {
   box-shadow: none;

webpack.config.js

@@ -52,8 +52,6 @@ module.exports = {
         new CleanWebpackPlugin(),
         new StyleLintPlugin({
             configFile: '.stylelintrc.yml',
-            syntax: 'scss',
-            context: 'scss',
             files: '**/*.scss',
             failOnError: false,
             quiet: false