postcss-propro - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

CHANGELOG.md

 # Change Log
 
+## 1.0.2
+- Better CSS Variables support
+
 ## 1.0.1
 - up Readme
-- add [Documentation](https://ououe.com/postcss-propro)
+- add [Documentation](https://ououe.com/postcss-propro/)
 
 This project adheres to [Semantic Versioning](http://semver.org/).

lib/position-cc.js

 const postcss = require('postcss');
-const { declClone, splitNumber } = require('./Public');
+const { declClone } = require('./Public');
 const list = [
@@ -22,6 +22,4 @@ 'position',
     if (width) {
-        const w = splitNumber(width);
-        const h = splitNumber(height);
         const listValue = [
-            `${-h.value / 2}${h.unit} 0 0 ${-w.value / 2}${w.unit}`,
+            `calc(-${height} / 2) 0 0 calc(-${width} / 2)`,
             width,
@@ -28,0 +26,0 @@ height

lib/spread.js

 const postcss = require('postcss');
-const {
-    declClone,
+const { declClone,
     beforeAppend,
     afterAppend,
     hoverBeforeAppend,
-    hoverAfterAppend,
-    isColor } = require('./Public');
+    hoverAfterAppend } = require('./Public');
 const list1 = [
@@ -19,7 +17,3 @@ 'content',
 ];
-const hoverList1 = [
-    'margin-left',
-    'transform',
-    'transition'
-];
+const hoverList1 = ['margin-left', 'transform', 'transition'];
 const list2 = [
@@ -34,11 +28,4 @@ 'content',
 ];
-const hoverList2 = [
-    'transform',
-    'transition'
-];
-const list3 = [
-    'position',
-    'overflow',
-    'transition'
-];
+const hoverList2 = ['transform', 'transition'];
+const list3 = ['position', 'overflow', 'transition'];
 const beforeList3 = [
@@ -60,32 +47,8 @@ 'content',
 function makeValue(values, opts) {
-    let width,
-        height,
-        color,
-        time,
-        value1,
-        hoverValue1,
-        value2,
-        hoverValue2,
-        value3,
-        beforeValue3,
-        hoverValue3;
+    let width, height, color, time, value1, hoverValue1, value2, hoverValue2, value3, beforeValue3, hoverValue3;
 
-    if (isColor(values[1])) {
-        color = values[1];
-        time = values[2] || '1s';
-    } else {
-        width = values[1];
-        if (isColor(values[2])) {
-            color = values[2];
-            time = values[3] || '1s';
-        } else {
-            height = values[2];
-            if (isColor(values[3])) {
-                color = values[3];
-                time = values[4] || '1s';
-            } else {
-                color = opts.lineColor;
-            }
-        }
-    }
+    width = values[1] || '';
+    height = values[2] || '';
+    color = values[3] || opts.lineColor;
+    time = values[4] || '1s';
 
@@ -95,59 +58,15 @@ if (values[0] === 'top' || values[0] === 'bottom') {
         height = height || '1px';
-        value1 = [
-            '\'\'',
-            'block',
-            `calc((100% - ${width}) / 2)`,
-            width,
-            height,
-            color,
-            'scaleX(0)',
-            `transform ${time}`
-        ];
-        hoverValue1 = [
-            `calc((100% - ${width}) / 2)`,
-            'scaleX(1)',
-            `transform ${time}`
-        ];
+        value1 = ['\'\'', 'block', `calc((100% - ${width}) / 2)`, width, height, color, 'scaleX(0)', `transform ${time}`];
+        hoverValue1 = [`calc((100% - ${width}) / 2)`, 'scaleX(1)', `transform ${time}`];
     } else if (values[0] === 'left' || values[0] === 'right') {
         width = width || '1px';
         height = height || '100%';
-        value2 = [
-            '\'\'',
-            values[0],
-            width,
-            height,
-            color,
-            'scaleY(0)',
-            `transform ${time}`
-        ];
-        hoverValue2 = [
-            'scaleY(1)',
-            `transform ${time}`
-        ];
+        value2 = ['\'\'', values[0], width, height, color, 'scaleY(0)', `transform ${time}`];
+        hoverValue2 = ['scaleY(1)', `transform ${time}`];
     } else {
         width = width || '100%';
         height = height || '100%';
-        value3 = [
-            'relative',
-            'hidden',
-            `transform ${time}`
-        ];
-        beforeValue3 = [
-            '\'\'',
-            'absolute',
-            '0',
-            '0',
-            '0',
-            '0',
-            '1',
-            width,
-            height,
-            color,
-            '',
-            `transform ${time}`
-        ];
-        hoverValue3 = [
-            'translate(0, 0)',
-            `transform ${time}`
-        ];
+        value3 = ['relative', 'hidden', `transform ${time}`];
+        beforeValue3 = ['\'\'', 'absolute', '0', '0', '0', '0', '1', width, height, color, '', `transform ${time}`];
+        hoverValue3 = ['translate(0, 0)', `transform ${time}`];
         if (values[0] === 'top-bottom') {
@@ -154,0 +73,0 @@ beforeValue3[10] = 'translate(0, -100%)';

package.json

 {
   "name": "postcss-propro",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "PostCSS plugin adds and extends some properties",
   "keywords": [
     "postcss",
-    "css",
-    "postcss-plugin",
-    "postcss-propro"
+    "postcss-propro",
+    "postcss-plugin"
   ],
@@ -18,3 +17,3 @@ "author": "tolking <[e-mail]>",
   "homepage": "https://github.com/tolking/postcss-propro",
-  "doc": "https://ououe.com/postcss-propro",
+  "doc": "https://ououe.com/postcss-propro/",
   "dependencies": {
@@ -21,0 +20,0 @@ "postcss": "^6.0.16"

README.md

@@ -108,4 +108,7 @@ # PostCSS Propro [![Build Status][ci-img]][ci]
 // input
+:root {
+  --c-line: #ccc;
+}
 .foo {
-  arrow: top-left 20px #f0f;
+  arrow: top-left 20px var(--c-line);
 }
@@ -117,4 +120,7 @@ ```
 // input
+:root {
+  --c-blue: #0074d9;
+}
 .foo {
-  btn: 10rem 4rem 0.5rem #00e;
+  btn: 10rem 4rem 0.5rem var(--c-blue);
 }
@@ -126,4 +132,7 @@ ```
 // input
+:root {
+  --c-line: #da3;
+}
 .foo {
-  spread: top-bottom 100% 100% #da3;
+  spread: top-bottom 100% 100% var(--c-line);
 }
@@ -130,0 +139,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

Number of lines in readme file

160

increased by5.96%

Worsened metrics

Total package byte prevSize

21269

decreased by-4.32%

Lines of code

618

decreased by-11.84%

No dependency changes