feat: Adding $custom-prop-prefix to resolve naming conflicts

Author: castastrophe

CHANGELOG-1.x.md

@@ -1,3 +1,7 @@
+# 1.3.0 (2021-02-16)
+
+- [](https://github.com/patternfly/patternfly-elements/commit/) feat: adding a $custom-prop-prefix variable to relieve naming conflict risk ($repo is too generic).
+
 ## 1.2.0 ( 2021-02-12 )
 
 ### Features

elements/pfe-accordion/src/_shared-assets.scss

@@ -1,4 +1,3 @@
-// NOTE: pfe-accordion uses shared styles that can be found in `pfe-sass/mixins/_components.scss`
 @import "../../pfe-sass/pfe-sass";
 
 $LOCAL: accordion;

elements/pfe-sass/functions/_custom-properties.scss

@@ -10,9 +10,9 @@
 /// @param {Map} $map  - Sass map of variables
 /// @param {String} $fallback [null]  - Optional fallback override
 /// @param {Boolean} $use-fallback [true]  - Optional hook to return a stack with no fallback value
-/// @requires $repo
+/// @requires $custom-prop-prefix
 /// @return {String} theme stack with fallback value from a sass map
-@function pfe-get-from-map($category, $key, $map, $fallback: null, $prefix: to-string($repo"-theme"), $use-fallback: true) {
+@function pfe-get-from-map($category, $key, $map, $fallback: null, $prefix: "#{$custom-prop-prefix}-theme", $use-fallback: true) {
     // Start building the variable declaration
     $var-declaration: "--#{$prefix}--";
     @if $prefix == "pf-c" {
@@ -43,7 +43,7 @@
 /// Returns CSS Var for the local component-scoped variable
 /// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'
 /// @param {String} $region - Identifies the region or slot to which this is assigned
-/// @see $repo
+/// @see $custom-prop-prefix
 /// @see $LOCAL
 /// @example
 ///   :host {
@@ -70,7 +70,7 @@
     }
 
     // Start building the variable declaration
-    $var-declaration: "--#{$repo}-#{$LOCAL}#{$region}--#{to-string($cssvar, '--')}";
+    $var-declaration: "--#{$custom-prop-prefix}-#{$LOCAL}#{$region}--#{to-string($cssvar, '--')}";
 
     @if $fallback != null {
         $var-declaration: "#{$var-declaration}, #{$fallback}";
@@ -83,7 +83,7 @@
 /// Fetches a CSS variable stack for broadcasted variables, providing a hook for context
 /// to influence the styles of children elements such as p tags or links.
 /// @param {String} $broadcast - name of the broadcast variable to apply
-/// @requires {String} $repo - Name of repo, which is "pfe"
+/// @requires {String} $custom-prop-prefix - Name of repo, which is "pfe"
 /// @example - scss
 ///   :host {
 ///     color: pfe-broadcasted(link);
@@ -98,10 +98,10 @@
         $fallback: ", #{map-get($pfe-broadcasted, #{to-string($broadcast,'--')})}";	
     }
     @if not index($BROADCAST-VARS, first(str-split($broadcast, '--'))) {
-      @error "--#{$repo}-broadcasted--#{$broadcast} variable is not currently supported.";
+      @error "--#{$custom-prop-prefix}-broadcasted--#{$broadcast} variable is not currently supported.";
     }
     @else {
-      @return var(--#{$repo}-broadcasted--#{to-string($broadcast,'--')}#{unquote($fallback)});
+      @return var(--#{$custom-prop-prefix}-broadcasted--#{to-string($broadcast,'--')}#{unquote($fallback)});
     }
 }
 

elements/pfe-sass/mixins/_custom-properties.scss

@@ -7,7 +7,7 @@
 /// This will print all the broadcast variables, and set the value to the context of your choosing, like on-dark or on-saturated.
 /// @param {String} $context - Look up values from contexts, i.e. "light" or "saturated"
 /// @param {List | String} $broadcast [$BROADCAST-VARS] -  Optionally specify only one broadcast variable instead of the whole set, i.e. "text"
-/// @see $repo
+/// @see $custom-prop-prefix
 /// @see $BROADCAST-VARS
 /// @example - scss - Usage in a container component, i.e. pfe-card
 ///    :host {
@@ -58,12 +58,12 @@
 
     @each $item in $list {
       @if not index($BROADCAST-VARS, $type) {
-        @warn "--#{$repo}-broadcasted--#{$item} variable is not in the $BROADCAST-VARS list.";
+        @warn "--#{$custom-prop-prefix}-broadcasted--#{$item} variable is not in the $BROADCAST-VARS list.";
       } @else if not pfe-broadcasted(#{$item}#{$context_string}) {
         @warn "#{$item}#{$context_string} value does not currently exist.";
       } @else {
         @if index($CONTEXTS, $context) != null {
-          --#{$repo}-broadcasted--#{$item}: #{pfe-var(#{$item}#{$context_string})};
+          --#{$custom-prop-prefix}-broadcasted--#{$item}: #{pfe-var(#{$item}#{$context_string})};
         } @else {
           @error "The #{$context} context does not appear to be part of a supported context.";
         }
@@ -76,7 +76,7 @@
 /// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'
 /// @param {String} $value - The value of the css variable being defined
 /// @param {String} $region - Identifies the region or slot to which this is assigned
-/// @see $repo
+/// @see $custom-prop-prefix
 /// @see $LOCAL
 /// @example - scss
 ///   :host {
@@ -94,11 +94,11 @@
         $styles: $v;
 
         // Print the variable definition
-        --#{$repo}-#{$LOCAL}#{$name}: #{$styles};
+        --#{$custom-prop-prefix}-#{$LOCAL}#{$name}: #{$styles};
       }
     } @else {
       // Print the variable definition
-      --#{$repo}-#{$LOCAL}#{$name}: #{$styles};
+      --#{$custom-prop-prefix}-#{$LOCAL}#{$name}: #{$styles};
     }
   }
 }

elements/pfe-sass/variables/_1-definitions.scss

@@ -5,6 +5,9 @@
 /// Repository prefix
 $repo: pfe !default;
 
+/// Variable used for prefixing custom properties
+$custom-prop-prefix: $repo;
+
 /// Default font size
 $pfe-global--font-size-root: 16 !default;