hibiscss - npm Package Compare versions

Comparing version 0.0.9 to 0.0.11

default.js

@@ -14,2 +14,3 @@ const r = require('ramda');
   colors: {},
+  borderWidths: {},
   borderRadius: {},
@@ -47,2 +48,4 @@ fontFamily: {
   },
+  widths: [],
+  heights: [],
   maxWidths: [],
@@ -94,7 +97,8 @@ sizes: {},
 
-    getRule('br', 'border-radius', config.borderRadius),
-
+    borders(),
     position(),
     flex(),
     sizes(config.sizes),
+    getRule('w', 'width', config.widths),
+    getRule('h', 'height', config.heights),
     getRule('mw', 'max-width', config.maxWidths),
@@ -148,2 +152,3 @@ spacing(config.spacing),
     const withResponsive = { responsive: true };
+    const flexAttributes = { start: 'flex-start', spaceAround: 'space-around', spaceBetween: 'space-between', center: 'center', end: 'flex-end' };
 
@@ -153,6 +158,7 @@ return [
       getRule('x', 'flex', { '1': '1', auto: 'auto', none: 'none' }, withResponsive),
-      getRule('xa', 'align-items', { center: 'center', baseline: 'baseline', stretch: 'stretch', start: 'flex-start', end: 'flex-end' }, withResponsive),
+      getRule('xa', 'align-items', flexAttributes, withResponsive),
+      getRule('xs', 'align-self', flexAttributes, withResponsive),
+      getRule('xj', 'justify-content', flexAttributes, withResponsive),
       getRule('xd', 'flex-direction', { row: 'row', rowReverse: 'row-reverse', column: 'column', columnReverse: 'column-reverse' }, withResponsive),
       getRule('xw', 'flex-wrap', { wrap: 'wrap', noWrap: 'no-wrap' }),
-      getRule('xj', 'justify-content', { start: 'flex-start', spaceAround: 'space-around', spaceBetween: 'space-between', center: 'center', end: 'flex-end' }, withResponsive),
       getRule('xo', 'order', [0, 1, 2, 3, 4], withResponsive),
@@ -164,3 +170,3 @@ ];
     return [
-      getRule('p', 'position', { absolute: 'absolute', relative: 'relative' }),
+      getRule('p', 'position', { absolute: 'absolute', relative: 'relative', fixed: 'fixed', sticky: 'sticky' }),
       getRule('top', 'top', [0]),
@@ -175,2 +181,23 @@ getRule('left', 'left', [0]),
 
+  function borders () {
+    const borderRadius = getRule('br', 'border-radius', config.borderRadius);
+
+    if (Object.keys(config.borderWidths).length < 1) {
+      return [borderRadius];
+    }
+
+    const withResponsive = { responsive: true };
+
+    return [
+      getRule('bc', 'border-color', config.colors),
+      getRule('bw', 'border-width', config.borderWidths, withResponsive),
+      getRule('ba', 'border-style', 'solid', withResponsive),
+      getRule('bt', 'border-top-style', 'solid', withResponsive),
+      getRule('bl', 'border-left-style', 'solid', withResponsive),
+      getRule('br', 'border-right-style', 'solid', withResponsive),
+      getRule('bb', 'border-bottom-style', 'solid', withResponsive),
+      borderRadius,
+    ];
+  }
+
   function typography () {
@@ -177,0 +204,0 @@ return [

package.json

 {
   "name": "hibiscss",
   "description": "Tool for making functional css stylesheets",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "main": "lib/index.js",
@@ -6,0 +6,0 @@ "scripts": {

readme.md

@@ -148,7 +148,7 @@ <h1 align="center">
 
-When `values` is an object (`{ yo: 'relative', dawg: 'absolute' }`), hibiscss returns a set of selectors like this:
+When `values` is an object (`{ r: 'relative', a: 'absolute' }`), hibiscss returns a set of selectors like this:
 
 ```css
-.name-yo { property: relative; }
-.name-dawg { property: absolute; }
+.name-r { property: relative; }
+.name-a { property: absolute; }
 ```
@@ -155,0 +155,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

58213

increased by1.55%

Lines of code

764

increased by3.24%

No dependency changes