@exah/prop-styles-system - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

CHANGELOG.md

@@ -9,2 +9,13 @@ # Changelog
 
+## [1.0.2](https://github.com/exah/pss/compare/1.0.1...1.0.2) - 2018-07-18
+
+
+
+### Fixed
+- 🚑 Fix converting negative numbers to pixels [`c44104c`](https://github.com/exah/pss/commit/c44104cf3228a696e118d5aa0ed752600de5061a)
+
+
+### Docs & Tests
+- 📝 Update README [`62ae95b`](https://github.com/exah/pss/commit/62ae95be2424ccff1ad773fde5642d757eea0052)
+
 ## [1.0.1](https://github.com/exah/pss/compare/1.0.0...1.0.1) - 2018-07-17
@@ -11,0 +22,0 @@

cjs/utils/helpers.js

@@ -53,3 +53,3 @@ 'use strict';
     return val != null ? toObj(cssProps, function (name) {
-      var valWithUnit = toPx === true && val > 0 ? val + 'px' : val;
+      var valWithUnit = toPx === true && (val > 0 || val < 0) ? val + 'px' : val;
       return (0, _defineProperty3.default)({}, name, valWithUnit);
@@ -56,0 +56,0 @@ }) : null;

esm/utils/helpers.js

@@ -37,3 +37,3 @@ import _defineProperty from 'babel-runtime/helpers/defineProperty';
     return val != null ? toObj(cssProps, function (name) {
-      var valWithUnit = toPx === true && val > 0 ? val + 'px' : val;
+      var valWithUnit = toPx === true && (val > 0 || val < 0) ? val + 'px' : val;
       return _defineProperty({}, name, valWithUnit);
@@ -40,0 +40,0 @@ }) : null;

package.json

 {
   "name": "@exah/prop-styles-system",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Prop styles system for styled components",
@@ -5,0 +5,0 @@ "author": "John Grishin <[e-mail]>",

README.md

@@ -1,2 +0,2 @@
-# 💔 prop-styles-system
+# prop-styles-system
 
@@ -78,2 +78,4 @@ > Design system utils for CSS-in-JS libraries
 
+[![Edit prop-styles-system-demo-1](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/zlrwm3ymzx)
+
 Add ready to use
@@ -124,2 +126,12 @@
     site: '1300px'
+  },
+  palette: {
+    default: {
+      bg: '#ffffff',
+      fg: '#000000'
+    },
+    inverted: {
+      bg: '#000000',
+      fg: '#ffffff'
+    }
   }
@@ -129,18 +141,29 @@ })
 <ThemeProvider theme={theme}>
-  <Box tm maxWd='site' mgx='auto' pdx> // .css-1
-    <Box minWd='card' wd={(1 / 4)}> // .css-2
-      <figure>
-        <img src="/pic.png" alt="" />
-        <figcaption>
-          <Box mgb> // .css-3
-            <h3>Title</h3>
-          </Box>
-          <Box mgt> // .css-4
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu libero libero, sit amet commodo sem. Proin a quam vulputate enim consequat sollicitudin.</p>
-          </Box>
-        </figcaption>
-      </figure>
+  <Box bg="inverted" ht> // css-0
+    <Box maxWd="site" mgx="auto" pdx> // css-1
+      <Box tm wd={1 / 4} minWd="card" minWdM> // css-2
+        <figure>
+          <img src="/pic.jpg" alt="" />
+          <figcaption>
+            <Box pdx pdy={2}> // css-3
+              <Box mgb> // css-4
+                <h3>
+                  Title
+                </h3>
+              </Box>
+              <Box mgt> // css-5
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                  Etiam eu libero libero, sit amet commodo sem. Proin a quam
+                  vulputate enim consequat sollicitudin.
+                </p>
+              </Box>
+            </Box>
+          </figcaption>
+        </figure>
+      </Box>
     </Box>
   </Box>
 </ThemeProvider>
+
 ```
@@ -151,5 +174,8 @@
 ```css
+
+.css-0 {
+  background-color: #000000;
+}
+
 .css-1 {
-  background-color: #ffffff;
-  color: #000000;
   max-width: 1300px; 
@@ -168,7 +194,27 @@ margin-left: auto;
 .css-2 {
-  min-width: 300px; 
+  background-color: #ffffff;
+  color: #000000;
   width: 25%;
+  min-width: 300px;
+  
+  @media (max-width: 600px) { 
+    min-width: 100%;
+  }
 }
 
 .css-3 {
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 32px;
+  padding-bottom: 32px;
+  
+  @media (max-width: 600px) {
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-top: 32px;
+    padding-bottom: 32px;
+  }
+}
+
+.css-4 {
   margin-bottom: 16px;
@@ -181,3 +227,3 @@
 
-.css-4 {
+.css-5 {
   margin-top: 16px;
@@ -191,4 +237,20 @@
 
+## 🔗 Links
+
+### Sites
+
+- [strelkamag.com](http://strelkamag.com) — 🌍 Real-world usage
+- [goremykina](https://github.com/exah/goremykina) — 👀 Code (WIP)
+
+
+### Packages
+
+- [`defaults.css`](https://github.com/exah/defaults.css) — CSS reset
+- [`styled-system`](https://github.com/jxnblk/styled-system) — "Design system utilities for styled-components and other css-in-js libraries." Similiar project and probably better.
+- [`prop-styles`](https://github.com/peterschussheim/prop-styles) — "Utility to create flexible React components which accept props to enable/disable certain styles."
+- [`polished`](https://github.com/styled-components/polished) — "A lightweight toolset for writing styles in JavaScript"
+
+
 ---
 
 MIT © [John Grishin](http://johngrish.in)

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

130661

increased by1.53%

Number of lines in readme file

250

increased by32.98%

No dependency changes