oo-loop 1.0.0 → 1.0.3

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Loop changelog
 
+## 1.0.3: 2022-04-05
+
+### Feature
+- Set up function to return the alias information
+### Fixes
+- Return the reference value and send a warning if the alias function cannot be performed
+
+## 1.0.2: 2022-04-04
+
+### Fixes
+- Fix `pointbreak()` on rem unit
+- Fix generating double properties when merging custom map with camelCase `props`
+- Fix the lost of references when merging custom config on `init`
+- Bump dependencies
+
+## 1.0.1 : 2020-07-30
+
+- Add missing `states` properties in variants
+- Fix rule to add any pseudo elements, states and pseudo-selectors from `props`
+- Bump lodash from 4.17.15 to 4.17.19
+
 ## 1.0.0
 
 ### Changes

package/README.md

@@ -8,7 +8,7 @@
 
 **Flexible and Expressive CSS**
 
-[Loop](https://oo-loop.github.io/) is a fully customizable Sass framework aiming to create a more maintainable and readable CSS.
+[Loop](https://oo-loop.github.io/) is a fully customizable CSS framework built with Sass aiming to create a more maintainable and readable Code.
 It gives you complete control on your project to let you create and match your styles with your design needs.
 
 ## Installation

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "oo-loop",
-  "version": "1.0.0",
-  "description": "Loop framework, flexible and expressive CSS",
+  "version": "1.0.3",
+  "description": "Loop CSS framework, flexible and expressive CSS",
   "keywords": [
     "scss",
     "sass",
@@ -39,10 +39,10 @@
     "dev": "node-sass -r --output-style expanded --precision 6 src/index.scss dist/loop.css",
     "build": "node-sass --output-style compressed --precision 6 src/index.scss dist/loop.css",
     "watch": "npm run dev && npm run dev -- -w",
-    "example": "node-sass --output-style expanded --source-comments false --precision 6 -w example/ -o example/build"
+    "example": "node-sass --output-style expanded --precision 6 example/src -o example/build"
   },
   "devDependencies": {
-    "node-sass": "^4.13.1"
+    "node-sass": "^7.0.0"
   },
   "engines": {
     "node": ">= 6.0.0",

package/scss/_init.scss

@@ -15,11 +15,11 @@
 /// Init ooLoop configs
 
 @mixin ooInit($custom:null) {
-  $map: if(hasRef($ooLoop), ooParse($ooLoop), $ooLoop);
+  $map: $ooLoop;
   @if isMap($custom) and isNotEmpty($custom) {
     $map: mapMergeDeep($map, $custom);
-    $map: if(hasRef($map), ooParse($map), $map);
   }
+  $map: if(hasRef($map), ooParse($map), $map);
   $map: setMapValue($map, 'init', true);
   $ooLoop: $map !global;
 }

package/scss/functions/_map.scss

@@ -21,11 +21,11 @@
 /// @credit-to  https://gist.github.com/pentzzsolt
 /// @param map $parentMap Map of data to be merged into
 /// @param map $childMap The set of data
-/// @param map $refMap The base map to refer too,
-///   usually equivalent to the $ooLoop before going into nested merge
+/// @param map $refMap The base map to refer too, usually equivalent to the $ooLoop before going into nested merge
+/// @param bool $forceKebab force the use of kebab-case property
 /// @return map
 
-@function mapMergeDeep($parentMap, $childMap, $refMap:null) {
+@function mapMergeDeep($parentMap, $childMap, $refMap:null, $forceKebab: false) {
   $map: $parentMap;
   @if not isMap($map) {
     @return $map;
@@ -34,6 +34,7 @@
   $refMap: if($refMap == null, $ooLoop, $refMap);
 
   @each $key, $value in $childMap {
+    $key: if($forceKebab, toKebabCase($key), $key);
     @if isRef(map-get($map, $key)) {
       $mapValue: getRefValue(map-get($map, $key), $refMap);
       $map: map-merge($map, ($key: $mapValue));
@@ -41,7 +42,7 @@
     @if (not map-has-key($map, $key)) or (type-of(map-get($map, $key) ) != type-of($value)) or (not (isMap(map-get($map, $key)) and isMap($value))) {
       $map: map-merge($map, ($key: $value));
     } @else {
-      $map: map-merge($map, ($key: mapMergeDeep(map-get($map, $key), $value, $refMap)));
+      $map: map-merge($map, ($key: mapMergeDeep(map-get($map, $key), $value, $refMap, inList($key, ('props', 'states')))));
     }
   }
   @return $map;

package/scss/functions/_ooAlias.scss

@@ -2,12 +2,12 @@ $ooAlias: (
   (
     name: 'ooDarken',
     function: 'darken',
-    params: ('color', 'number'),
+    paramType: ('color', 'number'),
   ),
   (
     name: 'ooLighten',
     function: 'lighten',
-    params: ('color', 'number'),
+    paramType: ('color', 'number'),
   ),
 );
 
@@ -48,49 +48,79 @@ $ooAlias: (
   @return $isAlias;
 }
 
+/// getAliasInfo
+/// retrieve the alias information
+/// @param string $aliasFunction The complete alias function
+/// @return map|null
+
+@function getAliasInfo($aliasFunction) {
+  @each $alias in $ooAlias {
+    $aliasName: getMapValue($alias, 'name');
+    $aliasLength: str-length($aliasName);
+    $aliasFunctionName: stripSpaces(str-slice($aliasFunction, 1, $aliasLength));
+
+    @if $aliasFunctionName == $aliasName {
+      $currentAlias: $alias;
+      $functionName: getMapValue($alias, 'function');
+
+      @return (
+        name: $aliasName,
+        nameLength: $aliasLength,
+        function: if(function-exists('get-function'), get-function($functionName), $functionName),
+        functionName: $functionName,
+        paramType: getMapValue($alias, 'paramType'),
+      );
+    }
+  }
+
+  @return null;
+}
 
 /// getAliasValue
 /// retrieve the value of an alias function
-/// @param string $string The complete alias function
+/// @param string $aliasFunction The complete alias function
 /// @param string $value Value of the 1st parameter
 /// @return bool
 
-/// @todo review, simplify
-
-@function getAliasValue($string, $param:null) {
-  $currentAlias: null;
+@function getAliasValue($aliasFunction, $value:null) {
+  $name: null;
+  $paramType: null;
   $function: null;
-  $params: split(',', inspect($string));
-
+  $params: split(',', inspect($aliasFunction));
   $param1: nth($params, 1);
-  @each $alias in $ooAlias {
-    $aliasName: getMapValue($alias, 'name');
-    $aliasLength: str-length($aliasName);
-    @if str-slice($string, 1, $aliasLength) == $aliasName {
-      $currentAlias: $alias;
-      $function: getMapValue($alias, 'function');
-      $param1: stripSpaces(str-slice($param1, $aliasLength + 2, str-length($param1)));
-      @if function-exists('get-function') {
-        $function: get-function($function);
-      }
-    }
+
+  $aliasInfo: getAliasInfo($aliasFunction);
+
+  @if $aliasInfo != null {
+    $name: getMapValue($aliasInfo, 'name');
+    $function: getMapValue($aliasInfo, 'function');
+    $paramType: getMapValue($aliasInfo, 'paramType');
+    $param1: stripSpaces(str-slice($param1, getMapValue($aliasInfo, 'nameLength') + 2, str-length($param1)));
   }
 
-  $param1: if($param == null, $param1, $param);
+  $param1: if($value==null, $param1, $value);
 
   @if length($params) > 1 {
-    $paramLeft: removeInList($params, 1);
-    $param2: stripSpaces(str-slice(#{$paramLeft}, 1, -2));
+    $param2: stripSpaces(str-slice(#{nth($params, 2)}, 1, -2));
+
+    $param1Type: null;
+    $param2Type: null;
 
-    $currentAliasParams: getMapValue($currentAlias, 'params');
-    $param1: toType(nth($currentAliasParams, 1), $param1);
-    $param2: toType(nth($currentAliasParams, 2), $param2);
+    @if $paramType != null {
+      $param1Type: nth($paramType, 1);
+      $param2Type: nth($paramType, 2);
+    }
 
-    @if type-of($param1) != nth($currentAliasParams, 1) or type-of($param2) != nth($currentAliasParams, 2) {
-      @return $string;
+    $param1: toType($param1Type, $param1);
+    $param2: toType($param2Type, $param2);
+ 
+    @if type-of($param1) != $param1Type or type-of($param2) != $param2Type {
+      @warn('The alias `#{$aliasFunction}` is targetting `#{$value}` and therefore cannot be used with the sass function `#{getMapValue($aliasInfo, 'functionName')}`');
+      @return $value;
     }
 
     @return call($function, $param1, $param2);
   }
+
   @return call($function, $param1);
-}
+}

package/scss/mixins/_breakpoint.scss

@@ -15,7 +15,7 @@
   @if map-has-key(oo('breakpoints'), $key) {
     $minWidth: map-get(oo('breakpoints'), $key);
     $maxWidth: $minWidth - 1;
-    @if unit($minWidth) == 'em' or unit('rem') {
+    @if inList(unit($minWidth), ('em', 'rem')) {
       $maxWidth: $minWidth - 0.001;
     }
     @media (max-width: $maxWidth) {

package/scss/mixins/_component.scss

@@ -36,7 +36,13 @@
   @if isNotEmpty($variantsMap) {
     @each $name, $props in $variantsMap {
       @if isMap($props) {
+        $hasStates: if(map-has-key($props, 'states'), map-get($props, 'states'), null);
         [#{ooPrefix()}-#{$componentName}~="#{toKebabCase($name)}"] {
+          @if map-has-key($props, 'states') {
+            $states: map-get($props, 'states');
+            $props: map-remove($props, 'states');
+            @include generateStatesProperties($states);
+          }
           @include generateProperties($props);
         }
       }

package/scss/mixins/_props.scss

@@ -7,8 +7,8 @@
     @each $propertyName, $propertyValue in $propertiesMap {
       $propertyName: toKebabCase($propertyName);
 
-      @if inList($propertyName, ('before', 'after')) {
-        &::#{$propertyName} {
+      @if isString($propertyName) and str-slice($propertyName,1,1) == ':' {
+        &#{$propertyName} {
           @include generateProperties($propertyValue);
         }
       } @else if isMap($propertyValue) and areKeysBreakpoints($propertyValue) {