@justeattakeaway/pie-css 0.29.0 → 0.31.0

package/README.md

@@ -207,7 +207,9 @@ The starting position of the slide animation can be customised by overriding the
 
 ## Typography Utility Classes
 
-`pie-css` includes a comprehensive set of typography utility classes that provide consistent typography styles across your application. These utility classes are built on top of PIE design tokens and automatically apply the correct font family, weight, size, line height, and spacing.
+`pie-css` includes a comprehensive set of typography utility classes that provide consistent typography styles across your application. These utility classes are built on top of PIE design tokens and automatically apply the correct font family, weight, size, and line height.
+
+Paragraph spacing is now opt-in via the `.u-typographySpacing` utility class, used alongside a typography class on the same element (for example, `<p class="u-font-body-l u-typographySpacing">...</p>`).
 
 The utility classes follow a simple naming convention: `u-font-{token-name}`, where the token name matches the design token used in Figma. For example, the `body-l-link` token becomes the `.u-font-body-l-link` utility class.
 

package/dist/helpers/typography.css

@@ -10,7 +10,6 @@
     line-height: calc(var(--dt-font-heading-xs-line-height--wide) * 1px);
   }
 }
-
 .u-font-heading-s {
   font-family: var(--dt-font-heading-s-family);
   font-weight: var(--dt-font-heading-s-weight);
@@ -23,7 +22,6 @@
     line-height: calc(var(--dt-font-heading-s-line-height--wide) * 1px);
   }
 }
-
 .u-font-heading-m {
   font-family: var(--dt-font-heading-m-family);
   font-weight: var(--dt-font-heading-m-weight);
@@ -36,7 +34,6 @@
     line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);
   }
 }
-
 .u-font-heading-l {
   font-family: var(--dt-font-heading-l-family);
   font-weight: var(--dt-font-heading-l-weight);
@@ -49,7 +46,6 @@
     line-height: calc(var(--dt-font-heading-l-line-height--wide) * 1px);
   }
 }
-
 .u-font-heading-xl {
   font-family: var(--dt-font-heading-xl-family);
   font-weight: var(--dt-font-heading-xl-weight);
@@ -62,7 +58,6 @@
     line-height: calc(var(--dt-font-heading-xl-line-height--wide) * 1px);
   }
 }
-
 .u-font-heading-xxl {
   font-family: var(--dt-font-heading-xxl-family);
   font-weight: var(--dt-font-heading-xxl-weight);
@@ -75,7 +70,6 @@
     line-height: calc(var(--dt-font-heading-xxl-line-height--wide) * 1px);
   }
 }
-
 .u-font-heading-xs-italic {
   font-family: var(--dt-font-heading-xs-italic-family);
   font-weight: var(--dt-font-heading-xs-italic-weight);
@@ -90,7 +84,6 @@
     line-height: calc(var(--dt-font-heading-xs-italic-line-height--wide) * 1px);
   }
 }
-
 .u-font-heading-s-italic {
   font-family: var(--dt-font-heading-s-italic-family);
   font-weight: var(--dt-font-heading-s-italic-weight);
@@ -105,7 +98,6 @@
     line-height: calc(var(--dt-font-heading-s-italic-line-height--wide) * 1px);
   }
 }
-
 .u-font-heading-m-italic {
   font-family: var(--dt-font-heading-m-italic-family);
   font-weight: var(--dt-font-heading-m-italic-weight);
@@ -120,7 +112,6 @@
     line-height: calc(var(--dt-font-heading-m-italic-line-height--wide) * 1px);
   }
 }
-
 .u-font-heading-l-italic {
   font-family: var(--dt-font-heading-l-italic-family);
   font-weight: var(--dt-font-heading-l-italic-weight);
@@ -135,7 +126,6 @@
     line-height: calc(var(--dt-font-heading-l-italic-line-height--wide) * 1px);
   }
 }
-
 .u-font-heading-xl-italic {
   font-family: var(--dt-font-heading-xl-italic-family);
   font-weight: var(--dt-font-heading-xl-italic-weight);
@@ -150,7 +140,6 @@
     line-height: calc(var(--dt-font-heading-xl-italic-line-height--wide) * 1px);
   }
 }
-
 .u-font-heading-xxl-italic {
   font-family: var(--dt-font-heading-xxl-italic-family);
   font-weight: var(--dt-font-heading-xxl-italic-weight);
@@ -165,7 +154,6 @@
     line-height: calc(var(--dt-font-heading-xxl-italic-line-height--wide) * 1px);
   }
 }
-
 .u-font-subheading-s {
   font-family: var(--dt-font-subheading-s-family);
   font-weight: var(--dt-font-subheading-s-weight);
@@ -178,7 +166,6 @@
     line-height: calc(var(--dt-font-subheading-s-line-height--wide) * 1px);
   }
 }
-
 .u-font-subheading-l {
   font-family: var(--dt-font-subheading-l-family);
   font-weight: var(--dt-font-subheading-l-weight);
@@ -191,136 +178,158 @@
     line-height: calc(var(--dt-font-subheading-l-line-height--wide) * 1px);
   }
 }
-
 .u-font-interactive-xs {
   font-family: var(--dt-font-interactive-xs-family);
   font-weight: var(--dt-font-interactive-xs-weight);
   font-size: calc(var(--dt-font-interactive-xs-size) * 1px);
   line-height: calc(var(--dt-font-interactive-xs-line-height) * 1px);
 }
-
 .u-font-interactive-s {
   font-family: var(--dt-font-interactive-s-family);
   font-weight: var(--dt-font-interactive-s-weight);
   font-size: calc(var(--dt-font-interactive-s-size) * 1px);
   line-height: calc(var(--dt-font-interactive-s-line-height) * 1px);
 }
-
 .u-font-interactive-l {
   font-family: var(--dt-font-interactive-l-family);
   font-weight: var(--dt-font-interactive-l-weight);
   font-size: calc(var(--dt-font-interactive-l-size) * 1px);
   line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);
 }
-
 .u-font-body-s {
   font-family: var(--dt-font-body-s-family);
   font-weight: var(--dt-font-body-s-weight);
-  margin-block-end: calc(var(--dt-font-body-s-paragraph) * 1px);
   font-size: calc(var(--dt-font-body-s-size) * 1px);
   line-height: calc(var(--dt-font-body-s-line-height) * 1px);
 }
+.u-font-body-s.u-typographySpacing {
+  margin-block-end: calc(var(--dt-font-body-s-paragraph) * 1px);
+}
 
 .u-font-body-s-link {
   font-family: var(--dt-font-body-s-link-family);
   font-weight: var(--dt-font-body-s-link-weight);
   text-decoration: var(--dt-font-body-s-link-text-decoration);
-  margin-block-end: calc(var(--dt-font-body-s-link-paragraph) * 1px);
   font-size: calc(var(--dt-font-body-s-link-size) * 1px);
   line-height: calc(var(--dt-font-body-s-link-line-height) * 1px);
 }
+.u-font-body-s-link.u-typographySpacing {
+  margin-block-end: calc(var(--dt-font-body-s-link-paragraph) * 1px);
+}
 
 .u-font-body-l {
   font-family: var(--dt-font-body-l-family);
   font-weight: var(--dt-font-body-l-weight);
-  margin-block-end: calc(var(--dt-font-body-l-paragraph) * 1px);
   font-size: calc(var(--dt-font-body-l-size) * 1px);
   line-height: calc(var(--dt-font-body-l-line-height) * 1px);
 }
+.u-font-body-l.u-typographySpacing {
+  margin-block-end: calc(var(--dt-font-body-l-paragraph) * 1px);
+}
 
 .u-font-body-l-link {
   font-family: var(--dt-font-body-l-link-family);
   font-weight: var(--dt-font-body-l-link-weight);
   text-decoration: var(--dt-font-body-l-link-text-decoration);
-  margin-block-end: calc(var(--dt-font-body-l-link-paragraph) * 1px);
   font-size: calc(var(--dt-font-body-l-link-size) * 1px);
   line-height: calc(var(--dt-font-body-l-link-line-height) * 1px);
 }
+.u-font-body-l-link.u-typographySpacing {
+  margin-block-end: calc(var(--dt-font-body-l-link-paragraph) * 1px);
+}
 
 .u-font-body-strong-s {
   font-family: var(--dt-font-body-strong-s-family);
   font-weight: var(--dt-font-body-strong-s-weight);
-  margin-block-end: calc(var(--dt-font-body-strong-s-paragraph) * 1px);
   font-size: calc(var(--dt-font-body-strong-s-size) * 1px);
   line-height: calc(var(--dt-font-body-strong-s-line-height) * 1px);
 }
+.u-font-body-strong-s.u-typographySpacing {
+  margin-block-end: calc(var(--dt-font-body-strong-s-paragraph) * 1px);
+}
 
 .u-font-body-strong-s-link {
   font-family: var(--dt-font-body-strong-s-link-family);
   font-weight: var(--dt-font-body-strong-s-link-weight);
   text-decoration: var(--dt-font-body-strong-s-link-text-decoration);
-  margin-block-end: calc(var(--dt-font-body-strong-s-link-paragraph) * 1px);
   font-size: calc(var(--dt-font-body-strong-s-link-size) * 1px);
   line-height: calc(var(--dt-font-body-strong-s-link-line-height) * 1px);
 }
+.u-font-body-strong-s-link.u-typographySpacing {
+  margin-block-end: calc(var(--dt-font-body-strong-s-link-paragraph) * 1px);
+}
 
 .u-font-body-strong-l {
   font-family: var(--dt-font-body-strong-l-family);
   font-weight: var(--dt-font-body-strong-l-weight);
-  margin-block-end: calc(var(--dt-font-body-strong-l-paragraph) * 1px);
   font-size: calc(var(--dt-font-body-strong-l-size) * 1px);
   line-height: calc(var(--dt-font-body-strong-l-line-height) * 1px);
 }
+.u-font-body-strong-l.u-typographySpacing {
+  margin-block-end: calc(var(--dt-font-body-strong-l-paragraph) * 1px);
+}
 
 .u-font-body-strong-l-link {
   font-family: var(--dt-font-body-strong-l-link-family);
   font-weight: var(--dt-font-body-strong-l-link-weight);
   text-decoration: var(--dt-font-body-strong-l-link-text-decoration);
-  margin-block-end: calc(var(--dt-font-body-strong-l-link-paragraph) * 1px);
   font-size: calc(var(--dt-font-body-strong-l-link-size) * 1px);
   line-height: calc(var(--dt-font-body-strong-l-link-line-height) * 1px);
 }
+.u-font-body-strong-l-link.u-typographySpacing {
+  margin-block-end: calc(var(--dt-font-body-strong-l-link-paragraph) * 1px);
+}
 
 .u-font-caption {
   font-family: var(--dt-font-caption-family);
   font-weight: var(--dt-font-caption-weight);
-  margin-block-end: calc(var(--dt-font-caption-paragraph) * 1px);
   font-size: calc(var(--dt-font-caption-size) * 1px);
   line-height: calc(var(--dt-font-caption-line-height) * 1px);
 }
+.u-font-caption.u-typographySpacing {
+  margin-block-end: calc(var(--dt-font-caption-paragraph) * 1px);
+}
 
 .u-font-caption-link {
   font-family: var(--dt-font-caption-link-family);
   font-weight: var(--dt-font-caption-link-weight);
   text-decoration: var(--dt-font-caption-link-text-decoration);
-  margin-block-end: calc(var(--dt-font-caption-link-paragraph) * 1px);
   font-size: calc(var(--dt-font-caption-link-size) * 1px);
   line-height: calc(var(--dt-font-caption-link-line-height) * 1px);
 }
+.u-font-caption-link.u-typographySpacing {
+  margin-block-end: calc(var(--dt-font-caption-link-paragraph) * 1px);
+}
 
 .u-font-caption-strong {
   font-family: var(--dt-font-caption-strong-family);
   font-weight: var(--dt-font-caption-strong-weight);
-  margin-block-end: calc(var(--dt-font-caption-strong-paragraph) * 1px);
   font-size: calc(var(--dt-font-caption-strong-size) * 1px);
   line-height: calc(var(--dt-font-caption-strong-line-height) * 1px);
 }
+.u-font-caption-strong.u-typographySpacing {
+  margin-block-end: calc(var(--dt-font-caption-strong-paragraph) * 1px);
+}
 
 .u-font-caption-strong-italic {
   font-family: var(--dt-font-caption-strong-italic-family);
   font-weight: var(--dt-font-caption-strong-italic-weight);
-  margin-block-end: calc(var(--dt-font-caption-strong-italic-paragraph) * 1px);
   font-style: var(--dt-font-caption-strong-italic-font-style);
   font-variation-settings: "slnt" -20;
   font-size: calc(var(--dt-font-caption-strong-italic-size) * 1px);
   line-height: calc(var(--dt-font-caption-strong-italic-line-height) * 1px);
 }
+.u-font-caption-strong-italic.u-typographySpacing {
+  margin-block-end: calc(var(--dt-font-caption-strong-italic-paragraph) * 1px);
+}
 
 .u-font-caption-strong-link {
   font-family: var(--dt-font-caption-strong-link-family);
   font-weight: var(--dt-font-caption-strong-link-weight);
   text-decoration: var(--dt-font-caption-strong-link-text-decoration);
-  margin-block-end: calc(var(--dt-font-caption-strong-link-paragraph) * 1px);
   font-size: calc(var(--dt-font-caption-strong-link-size) * 1px);
   line-height: calc(var(--dt-font-caption-strong-link-line-height) * 1px);
 }
+.u-font-caption-strong-link.u-typographySpacing {
+  margin-block-end: calc(var(--dt-font-caption-strong-link-paragraph) * 1px);
+}

package/docs/typography-utility-classes.md

@@ -15,6 +15,7 @@ The PIE CSS Typography Utilities provide a comprehensive set of utility classes
     - [If You Have Designs](#if-you-have-designs)
     - [If You Don't Have Designs](#if-you-dont-have-designs)
 - [Available Classes](#available-classes)
+- [Typography Spacing Utility](#typography-spacing-utility)
 - [the `font-theme` mixin](#the-font-theme-mixin)
 - [Usage Examples](#usage-examples)
 - [What Each Utility Class Applies](#what-each-utility-class-applies)
@@ -162,9 +163,17 @@ Interactive text utilities are optimized for buttons, links, and other interacti
 | `.u-font-interactive-s` | Small interactive text |
 | `.u-font-interactive-xs` | Extra small interactive text |
 
+### Typography Spacing Utility
+
+Use `.u-typographySpacing` alongside a typography utility class on the same element to apply paragraph spacing for typography tokens that define a `paragraph` token.
+
+| Class | Use Case |
+| --- | --- |
+| `.u-typographySpacing` | Opt-in paragraph spacing for typography classes that support paragraph tokens |
+
 ### Body Text
 
-Body text utilities are for paragraphs and general content. These utilities include automatic paragraph spacing via `margin-block-end`.
+Body text utilities are for paragraphs and general content.
 
 | Class | Use Case |
 | --- | --- |
@@ -240,6 +249,7 @@ Simply add the utility class to your HTML element:
 ```html
 <h1 class="u-font-heading-xl">Page Title</h1>
 <p class="u-font-body-l">This is a paragraph of body text.</p>
+<p class="u-font-body-l u-typographySpacing">This is body text with opt-in paragraph spacing.</p>
 ```
 
 ### React Example
@@ -253,6 +263,9 @@ function MyComponent() {
       <p className="u-font-body-l">
         This is a paragraph using the body large utility class.
       </p>
+      <p className="u-font-body-l u-typographySpacing">
+        This paragraph uses the same typography class with opt-in spacing.
+      </p>
       <a href="#" className="u-font-body-l-link">Learn more</a>
     </div>
   );
@@ -269,6 +282,9 @@ function MyComponent() {
     <p class="u-font-body-l">
       This is a paragraph using the body large utility class.
     </p>
+    <p class="u-font-body-l u-typographySpacing">
+      This paragraph uses the same typography class with opt-in spacing.
+    </p>
     <a href="#" class="u-font-body-l-link">Learn more</a>
   </div>
 </template>
@@ -306,7 +322,8 @@ Each typography utility class applies a complete set of typography properties:
 - **`line-height`**: Applies the appropriate line height for readability ([MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height))
 - **`font-style`**: Applied for italic variants ([MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style))
 - **`text-decoration`**: Applied for link variants ([MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration))
-- **`margin-block-end`**: Applied for body and caption variants to provide paragraph spacing ([MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end))
+
+Use `.u-typographySpacing` for opt-in paragraph spacing via `margin-block-end` on supported typography tokens ([MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end)).
 
 ## Troubleshooting
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-css",
-  "version": "0.29.0",
+  "version": "0.31.0",
   "description": "A styling library that provides both a shared collection of ready to use CSS styles to be used across JET web front-ends, and SCSS-based style helpers for our PIE Web Component library.",
   "repository": {
     "type": "git",

package/scss/_internal/typography.scss

@@ -12,5 +12,9 @@ $typography-names:  font-heading-xs font-heading-s font-heading-m font-heading-l
 @each $name in $typography-names {
     .u-#{$name} {
         @include font-theme($name);
+
+        &.u-typographySpacing {
+            @include typography-spacing($name);
+        }
     }
 }

package/scss/mixins/_font-theme.scss

@@ -24,22 +24,19 @@
         'family': 'font-family',
         'weight': 'font-weight',
         'text-decoration': 'text-decoration',
-        'paragraph': 'margin-block-end',
         'font-style': 'font-style',
     );
 
     // --- Mobile-First (Narrow) and Static Properties ---
 
-    // Apply Static Properties (font-family, font-weight, text-decoration, paragraph and font-style)
+    // Apply Static Properties (font-family, font-weight, text-decoration and font-style)
     @each $suffix, $css-prop in $static-properties {
         // Example variable structure (assuming $token-name is 'font-heading-l'): --dt-font-heading-l-family
         $scss-name: '#{$token-name}-#{$suffix}';
         $var-name: '--dt-#{$token-name}-#{$suffix}';
 
         @if meta.variable-exists($scss-name) {
-            @if $suffix == 'paragraph' {
-                #{$css-prop}: calc(var(#{$var-name}) * 1px);
-            } @else if $suffix == 'font-style' {
+            @if $suffix == 'font-style' {
                 // if we're setting font-style: italic, we need to add the font-variation-settings for slant
                 #{$css-prop}: var(#{$var-name});
                 font-variation-settings: 'slnt' -20;
@@ -84,3 +81,12 @@
         }
     }
 }
+
+@mixin typography-spacing($token-name) {
+    $paragraph-scss-name: '#{$token-name}-paragraph';
+    $paragraph-var-name: '--dt-#{$token-name}-paragraph';
+
+    @if meta.variable-exists($paragraph-scss-name) {
+        margin-block-end: calc(var(#{$paragraph-var-name}) * 1px);
+    }
+}

package/scss/settings/_include-media.scss

@@ -1,7 +1,6 @@
 //
 //  !IMPORTANT: This file is a copy of the original include-media SCSS library
 //  !DO NOT directly edit this file/
-//
 //     _            _           _                           _ _
 //    (_)          | |         | |                         | (_)
 //     _ _ __   ___| |_   _  __| | ___   _ __ ___   ___  __| |_  __ _
@@ -178,50 +177,10 @@ $im-no-media-breakpoint: 'desktop' !default;
 $im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
 
 ////
-/// Cross-engine logging engine
-/// @author Kitty Giraudel
+/// Determines whether a list of conditions is intercepted by the static breakpoint.
 /// @access private
 ////
 
-///
-/// Log a message either with `@error` if supported
-/// else with `@warn`, using `feature-exists('at-error')`
-/// to detect support.
-///
-/// @param {String} $message - Message to log
-///
-@function im-log($message) {
-  @if meta.feature-exists('at-error') {
-    @error $message;
-  } @else {
-    @warn $message;
-
-    $_: noop();
-  }
-
-  @return $message;
-}
-
-///
-/// Wrapper mixin for the log function so it can be used with a more friendly
-/// API than `@if im-log('..') {}` or `$_: im-log('..')`. Basically, use the function
-/// within functions because it is not possible to include a mixin in a function
-/// and use the mixin everywhere else because it's much more elegant.
-///
-/// @param {String} $message - Message to log
-///
-@mixin log($message) {
-  @if im-log($message) {
-  }
-}
-
-///
-/// Function with no `@return` called next to `@warn` in Sass 3.3
-/// to trigger a compiling error and stop the process.
-///
-@function noop() {
-}
-
 ///
 /// Determines whether a list of conditions is intercepted by the static breakpoint.
 ///
@@ -233,8 +192,7 @@ $im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
   $no-media-breakpoint-value: map.get($breakpoints, $im-no-media-breakpoint);
 
   @if not $no-media-breakpoint-value {
-    @if im-log('`#{$im-no-media-breakpoint}` is not a valid breakpoint.') {
-    }
+    @error '#{$im-no-media-breakpoint}` is not a valid breakpoint.';
   }
 
   @each $condition in $conditions {
@@ -276,12 +234,7 @@ $im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
     }
   }
 
-  // It is not possible to include a mixin inside a function, so we have to
-  // rely on the `im-log(..)` function rather than the `log(..)` mixin. Because
-  // functions cannot be called anywhere in Sass, we need to hack the call in
-  // a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
-  // Sass 3.3, change this line in `@if im-log(..) {}` instead.
-  $_: im-log('No operator found in `#{$expression}`.');
+  @error 'No operator found in `#{$expression}`.';
 }
 
 ///
@@ -295,6 +248,7 @@ $im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
 @function get-expression-dimension($expression, $operator) {
   $operator-index: string.index($expression, $operator);
   $parsed-dimension: string.slice($expression, 0, $operator-index - 1);
+  $parsed-dimension: str-trim($parsed-dimension);
   $dimension: 'width';
 
   @if string.length($parsed-dimension) > 0 {
@@ -312,7 +266,11 @@ $im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
 /// @return {String} - `min` or `max`
 ///
 @function get-expression-prefix($operator) {
-  @return if(list.index(('<', '<=', '≤'), $operator), 'max', 'min');
+  @if list.index(('<', '<=', '≤'), $operator) {
+    @return 'max';
+  } @else {
+    @return 'min';
+  }
 }
 
 ///
@@ -326,22 +284,18 @@ $im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
 @function get-expression-value($expression, $operator) {
   $operator-index: string.index($expression, $operator);
   $value: string.slice($expression, $operator-index + string.length($operator));
+  $trimmedValue: str-trim($value);
 
-  @if map.has-key($breakpoints, $value) {
-    $value: map.get($breakpoints, $value);
+  @if map.has-key($breakpoints, $trimmedValue) {
+    $value: map.get($breakpoints, $trimmedValue);
   } @else {
-    $value: to-number($value);
+    $value: to-number($trimmedValue);
   }
 
   $interval: map.get($unit-intervals, math.unit($value));
 
   @if not $interval {
-    // It is not possible to include a mixin inside a function, so we have to
-    // rely on the `im-log(..)` function rather than the `log(..)` mixin. Because
-    // functions cannot be called anywhere in Sass, we need to hack the call in
-    // a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
-    // Sass 3.3, change this line in `@if im-log(..) {}` instead.
-    $_: im-log('Unknown unit `#{math.unit($value)}`.');
+    @error 'Unknown unit `#{math.unit($value)}`.';
   }
 
   @if $operator == '>' {
@@ -418,7 +372,7 @@ $im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
   @if meta.type-of($value) == 'number' {
     @return $value;
   } @else if meta.type-of($value) != 'string' {
-    $_: im-log('Value for `to-number` should be a number or a string.');
+    @error 'Value for `to-number` should be a number or a string.';
   }
 
   $first-character: string.slice($value, 1, 1);
@@ -439,15 +393,20 @@ $im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
   );
 
   // Remove +/- sign if present at first character
-  @if $first-character == '+' or $first-character == '-' {
+  @if ($first-character == '+' or $first-character == '-') {
     $value: string.slice($value, 2);
   }
 
+  $sign: 1;
+  @if $minus {
+    $sign: -1;
+  }
+
   @for $i from 1 through string.length($value) {
     $character: string.slice($value, $i, $i);
 
     @if not(list.index(map.keys($numbers), $character) or $character == '.') {
-      @return to-length(if($minus, -$result, $result), string.slice($value, $i));
+      @return to-length($sign * $result, string.slice($value, $i));
     }
 
     @if $character == '.' {
@@ -460,7 +419,7 @@ $im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
     }
   }
 
-  @return if($minus, -$result, $result);
+  @return $sign * $result;
 }
 
 ///
@@ -491,12 +450,36 @@ $im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
   );
 
   @if not list.index(map.keys($units), $unit) {
-    $_: im-log('Invalid unit `#{$unit}`.');
+    @error 'Invalid unit `#{$unit}`.';
   }
 
   @return $value * map.get($units, $unit);
 }
 
+////
+/// String trim
+/// @author Jack McNicol
+/// @access private
+////
+
+///
+/// Trims a string of leading and trailing spaces
+///
+/// @param {String} $string - Value to be trimmed
+///
+/// @return {String}
+///
+
+@function str-trim($string) {
+  @if (string.slice($string, 1, 1) == ' ') {
+    @return str-trim(string.slice($string, 2));
+  } @else if (string.slice($string, string.length($string), -1) == ' ') {
+    @return str-trim(string.slice($string, 1, -2));
+  } @else {
+    @return $string;
+  }
+}
+
 ///
 /// This mixin aims at redefining the configuration just for the scope of
 /// the call. It is helpful when having a component needing an extended
@@ -585,10 +568,11 @@ $im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
     (not $im-media-support and im-intercepts-static-breakpoint($conditions...))
   {
     @content;
-  } @else if $im-media-support and list.length($conditions) > 0 {
+  } @else if ($im-media-support and list.length($conditions) > 0) {
     @media #{string.unquote(parse-expression(list.nth($conditions, 1)))} {
       // Recursive call
-      @include media(slice($conditions, 2)...) {
+      $sliced-conditions: slice($conditions, 2);
+      @include media($sliced-conditions...) {
         @content;
       }
     }