@simplybusiness/theme-core 7.14.6 → 7.14.8

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 7.14.8
+
+### Patch Changes
+
+- e160de4: Add lint-css executable for CSS linting with stylelint
+  - Added stylelint and stylelint-config-recommended dependencies
+  - Created lint-css executable that runs stylelint on src/\*_/_.css
+  - Configured selector-nested-pattern rule to enforce native CSS nesting (require & in nested selectors)
+  - Added lint:css scripts to theme-core as initial rollout
+  - Fixed 3 stylelint violations in theme-core icons.css
+  - Updated Turbo with lint:css task configuration
+  - @simplybusiness/mobius@6.9.5
+
+## 7.14.7
+
+### Patch Changes
+
+- 56c673f: Migrate CSS from SASS-style nesting to native CSS nesting syntax
+  - Update 62 CSS source files to use native CSS nesting with `&` prefix
+  - Switch PostCSS plugin from `postcss-nested` to `postcss-nesting`
+  - No functional changes to compiled CSS output (still Safari 14 compatible)
+
+- Updated dependencies [56c673f]
+- Updated dependencies [c54e331]
+  - @simplybusiness/mobius@6.9.5
+
 ## 7.14.6
 
 ### Patch Changes

package/dist/index.css

@@ -317,7 +317,7 @@ h6.mobius-accordion__link-text,
     color:transparent;
   }
 
-.mobius-button:where(.--is-success)  > :not(.mobius-button__icon-wrapper){
+.mobius-button:where(.--is-success) > :not(.mobius-button__icon-wrapper){
       opacity:0;
       visibility:hidden;
     }
@@ -350,7 +350,7 @@ h6.mobius-accordion__link-text,
     color:transparent;
   }
 
-.mobius-button:where(.--is-loading)  > :not(.mobius-button__icon-wrapper){
+.mobius-button:where(.--is-loading) > :not(.mobius-button__icon-wrapper){
       opacity:0;
       visibility:hidden;
     }
@@ -722,7 +722,7 @@ h6.mobius-accordion__link-text,
     transition:opacity var(--drawer-transition-duration) ease-in-out;
   }
 
-.mobius-drawer  + .backdrop{
+.mobius-drawer + .backdrop{
     position:fixed;
     top:0;
     right:0;
@@ -732,7 +732,7 @@ h6.mobius-accordion__link-text,
     opacity:0.3;
   }
 
-:is(.mobius-drawer + .backdrop)  + ._dialog_overlay{
+:is(.mobius-drawer + .backdrop) + ._dialog_overlay{
       position:fixed;
       top:0;
       right:0;
@@ -1190,7 +1190,7 @@ h6.mobius-accordion__link-text,
     transition:opacity var(--modal-transition-duration) ease-in-out;
   }
 
-.mobius-modal  + .backdrop{
+.mobius-modal + .backdrop{
     position:fixed;
     top:0;
     right:0;
@@ -1200,7 +1200,7 @@ h6.mobius-accordion__link-text,
     opacity:0.3;
   }
 
-:is(.mobius-modal + .backdrop)  + ._dialog_overlay{
+:is(.mobius-modal + .backdrop) + ._dialog_overlay{
       position:fixed;
       top:0;
       right:0;
@@ -1840,7 +1840,7 @@ h6.mobius-accordion__link-text,
   width:100%;
 }
 
-.mobius-select__outer  > :where(.mobius-label.--is-optional)::after{
+.mobius-select__outer > :where(.mobius-label.--is-optional)::after{
     content:" (optional)";
   }
 
@@ -2085,7 +2085,7 @@ h6.mobius-accordion__link-text,
     height:0;
   }
 
-:is(.mobius-switch input):focus-visible  + .mobius-switch__slider{
+:is(.mobius-switch input):focus-visible + .mobius-switch__slider{
         box-shadow:var(--box-shadow-default);
       }
 
@@ -2368,7 +2368,7 @@ h6.mobius-accordion__link-text,
     border-bottom-right-radius:0;
   }
 
-.mobius-text-field__prefix-outside.mobius-button  + .mobius-text-field__input-wrapper{
+.mobius-text-field__prefix-outside.mobius-button + .mobius-text-field__input-wrapper{
       border-top-left-radius:0;
       border-bottom-left-radius:0;
     }
@@ -2601,6 +2601,7 @@ svg:not(:host).svg-inline--mobius-icon{
   position:absolute;
   right:0;
   top:0;
+  transform-origin:center center;
 }
 
 .mobius-icon-layers-counter,
@@ -2619,10 +2620,6 @@ svg:not(:host).svg-inline--mobius-icon{
   width:1em;
 }
 
-.mobius-icon-layers svg.svg-inline--mobius-icon{
-  transform-origin:center center;
-}
-
 .mobius-icon-layers-text{
   left:50%;
   top:50%;
@@ -2929,6 +2926,11 @@ svg:not(:host).svg-inline--mobius-icon{
   opacity:var(--mobius-icon-secondary-opacity, 0.4);
 }
 
+.svg-inline--mobius-icon mask .mobius-icon-primary,
+.svg-inline--mobius-icon mask .mobius-icon-secondary{
+  fill:black;
+}
+
 .svg-inline--mobius-icon.mobius-icon-swap-opacity .mobius-icon-primary{
   opacity:var(--mobius-icon-secondary-opacity, 0.4);
 }
@@ -2937,11 +2939,6 @@ svg:not(:host).svg-inline--mobius-icon{
   opacity:var(--mobius-icon-primary-opacity, 1);
 }
 
-.svg-inline--mobius-icon mask .mobius-icon-primary,
-.svg-inline--mobius-icon mask .mobius-icon-secondary{
-  fill:black;
-}
-
 .fad.mobius-icon-inverse,
 .mobius-icon-duotone.mobius-icon-inverse{
   color:var(--mobius-icon-inverse, #fff);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplybusiness/theme-core",
-  "version": "7.14.6",
+  "version": "7.14.8",
   "main": "dist/index.css",
   "simplyBusiness": {
     "publishToPublicNpm": true
@@ -10,7 +10,9 @@
     "clean": "rm -rf dist",
     "build": "yarn run -T turbo run turbo:build",
     "prepack": "yarn run build",
-    "turbo:build": "build-theme"
+    "turbo:build": "build-theme",
+    "lint:css": "lint-css",
+    "lint:css:fix": "lint-css --fix"
   },
   "files": [
     "dist/**/*",
@@ -26,9 +28,9 @@
     "./fonts": "./dist/fonts.css"
   },
   "dependencies": {
-    "@simplybusiness/mobius": "^6.9.4"
+    "@simplybusiness/mobius": "^6.9.5"
   },
   "devDependencies": {
-    "build-scripts": "^1.0.2"
+    "build-scripts": "^1.1.0"
   }
 }

package/src/icons.css

@@ -62,6 +62,7 @@ svg:not(:host).svg-inline--mobius-icon {
   position: absolute;
   right: 0;
   top: 0;
+  transform-origin: center center;
 }
 
 .mobius-icon-layers-counter,
@@ -80,10 +81,6 @@ svg:not(:host).svg-inline--mobius-icon {
   width: 1em;
 }
 
-.mobius-icon-layers svg.svg-inline--mobius-icon {
-  transform-origin: center center;
-}
-
 .mobius-icon-layers-text {
   left: 50%;
   top: 50%;
@@ -389,6 +386,11 @@ svg:not(:host).svg-inline--mobius-icon {
   opacity: var(--mobius-icon-secondary-opacity, 0.4);
 }
 
+.svg-inline--mobius-icon mask .mobius-icon-primary,
+.svg-inline--mobius-icon mask .mobius-icon-secondary {
+  fill: black;
+}
+
 .svg-inline--mobius-icon.mobius-icon-swap-opacity .mobius-icon-primary {
   opacity: var(--mobius-icon-secondary-opacity, 0.4);
 }
@@ -397,11 +399,6 @@ svg:not(:host).svg-inline--mobius-icon {
   opacity: var(--mobius-icon-primary-opacity, 1);
 }
 
-.svg-inline--mobius-icon mask .mobius-icon-primary,
-.svg-inline--mobius-icon mask .mobius-icon-secondary {
-  fill: black;
-}
-
 .fad.mobius-icon-inverse,
 .mobius-icon-duotone.mobius-icon-inverse {
   color: var(--mobius-icon-inverse, #fff);

package/src/index.css

@@ -45,9 +45,9 @@
 .mobius {
   font-family: var(--font-family);
 
-  *,
-  *::before,
-  *::after {
+  & *,
+  & *::before,
+  & *::after {
     box-sizing: border-box;
   }
 }