eo-css-tools - npm Package Compare versions

Comparing version 0.5.1 to 0.6.0

lib/breakpoint.d.ts

 declare type TBreakpointValue = number | string | undefined;
 export declare function breakpoint(params: TBreakpointValue[]): string;
-export declare const brp: typeof breakpoint;
+export declare const brk: typeof breakpoint;
 export {};

lib/index.es.js

@@ -1,1 +0,1 @@
-var n=function(n){if(null!=n){var o=parseFloat(n);return isNaN(o)?void 0:0===o||o===-1/0?"0":isFinite(o)?o+"px":void 0}};function o(o){var e=n(o[0]),a=n(o[1]);switch(!0){case Boolean(e&&a)||Boolean("0"===e)&&Boolean("0"===a)||Boolean("0"===e)&&Boolean(a)||Boolean("0"===a)&&Boolean(e):return"@media only screen and (min-width: "+e+") and (max-width: "+a+")";case Boolean(e||"0"===e):return"@media only screen and (min-width: "+e+")";case Boolean(a||"0"===a):return"@media only screen and (max-width: "+a+")";default:return""}}var e=o,a={MOBILE:[void 0,479],MOBILE_LANDSCAPE:[void 0,767],TABLET:[void 0,991],TABLET_LANDSCAPE:[void 0,1199],DESKTOP:[1200,1/0]};function r(){return o(a.MOBILE)}function i(){return o(a.MOBILE_LANDSCAPE)}function t(){return o(a.TABLET)}function u(){return o(a.TABLET_LANDSCAPE)}function d(){return o(a.DESKTOP)}export{a as PREDEFINED,o as breakpoint,e as brp,d as desktop,r as mobile,i as mobileLandscape,t as tablet,u as tabletLandscape};
+var n=function(n){if(null!=n){var o=parseFloat(n);return isNaN(o)?void 0:0===o||o===-1/0?"0":isFinite(o)?o+"px":void 0}};function o(o){var e=n(o[0]),a=n(o[1]);switch(!0){case Boolean(e&&a)||Boolean("0"===e)&&Boolean("0"===a)||Boolean("0"===e)&&Boolean(a)||Boolean("0"===a)&&Boolean(e):return"@media only screen and (min-width: "+e+") and (max-width: "+a+")";case Boolean(e||"0"===e):return"@media only screen and (min-width: "+e+")";case Boolean(a||"0"===a):return"@media only screen and (max-width: "+a+")";default:return""}}var e=o,a={MOBILE:[void 0,479],MOBILE_LANDSCAPE:[void 0,767],TABLET:[void 0,991],TABLET_LANDSCAPE:[void 0,1199],DESKTOP:[1200,1/0]};function r(){return o(a.MOBILE)}function i(){return o(a.MOBILE_LANDSCAPE)}function t(){return o(a.TABLET)}function u(){return o(a.TABLET_LANDSCAPE)}function d(){return o(a.DESKTOP)}export{a as PREDEFINED,o as breakpoint,e as brk,d as desktop,r as mobile,i as mobileLandscape,t as tablet,u as tabletLandscape};

lib/index.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=function(e){if(null!=e){var n=parseFloat(e);return isNaN(n)?void 0:0===n||n===-1/0?"0":isFinite(n)?n+"px":void 0}};function n(n){var o=e(n[0]),t=e(n[1]);switch(!0){case Boolean(o&&t)||Boolean("0"===o)&&Boolean("0"===t)||Boolean("0"===o)&&Boolean(t)||Boolean("0"===t)&&Boolean(o):return"@media only screen and (min-width: "+o+") and (max-width: "+t+")";case Boolean(o||"0"===o):return"@media only screen and (min-width: "+o+")";case Boolean(t||"0"===t):return"@media only screen and (max-width: "+t+")";default:return""}}var o=n,t={MOBILE:[void 0,479],MOBILE_LANDSCAPE:[void 0,767],TABLET:[void 0,991],TABLET_LANDSCAPE:[void 0,1199],DESKTOP:[1200,1/0]};exports.PREDEFINED=t,exports.breakpoint=n,exports.brp=o,exports.desktop=function(){return n(t.DESKTOP)},exports.mobile=function(){return n(t.MOBILE)},exports.mobileLandscape=function(){return n(t.MOBILE_LANDSCAPE)},exports.tablet=function(){return n(t.TABLET)},exports.tabletLandscape=function(){return n(t.TABLET_LANDSCAPE)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=function(e){if(null!=e){var n=parseFloat(e);return isNaN(n)?void 0:0===n||n===-1/0?"0":isFinite(n)?n+"px":void 0}};function n(n){var o=e(n[0]),t=e(n[1]);switch(!0){case Boolean(o&&t)||Boolean("0"===o)&&Boolean("0"===t)||Boolean("0"===o)&&Boolean(t)||Boolean("0"===t)&&Boolean(o):return"@media only screen and (min-width: "+o+") and (max-width: "+t+")";case Boolean(o||"0"===o):return"@media only screen and (min-width: "+o+")";case Boolean(t||"0"===t):return"@media only screen and (max-width: "+t+")";default:return""}}var o=n,t={MOBILE:[void 0,479],MOBILE_LANDSCAPE:[void 0,767],TABLET:[void 0,991],TABLET_LANDSCAPE:[void 0,1199],DESKTOP:[1200,1/0]};exports.PREDEFINED=t,exports.breakpoint=n,exports.brk=o,exports.desktop=function(){return n(t.DESKTOP)},exports.mobile=function(){return n(t.MOBILE)},exports.mobileLandscape=function(){return n(t.MOBILE_LANDSCAPE)},exports.tablet=function(){return n(t.TABLET)},exports.tabletLandscape=function(){return n(t.TABLET_LANDSCAPE)};

package.json

 {
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "CSS tools that built to simplify CSS-in-JS styling",
@@ -4,0 +4,0 @@ "license": "MIT",

README.md

@@ -9,5 +9,5 @@ # eo-css-tools
 
-## Utils
+## Tools
 
-- [breakpoint](#breakpoint)
+- [Breakpoints](#Breakpoints)
 
@@ -24,3 +24,3 @@ ## Install
 
-# Compatibility
+## Compatibility
 
@@ -33,24 +33,23 @@ 💅 [Styled Components](https://styled-components.com)
 
-# Usage
+## Usage
 
-## Breakpoints
+### Breakpoints
 
 Generates media query with min/max-width conditions.
 
-| Method name            | Breakpoint type                         | Media query   |
-|------------------------|-----------------------------------------|---------------|
-| `breakpoint([min, max])` | Custom                                  |               |
-| `brp([min, max])`        | Alias of breakpoint (just shorthand)    |               |
-| `mobile()`               | Mobile devices in portrait orientation  | 0–479px       |
-| `mobileLandscape()`      | Mobile devices in landscape orientation | 0–767px       |
-| `tablet()`             | Tablet devices in portrait orientation  | 0–991px       |
-| `tabletLandscape()`    | Tablet devices in landscape orientation | 0–1199px      |
-| `desktop()`        | Laptops and larger                      | 1200–Infinity |
+| Method name               | Breakpoint type                         | Media query   |
+|---------------------------|-----------------------------------------|---------------|
+| `breakpoint([min, max])`  | Custom                                  |               |
+| `mobile()`                | Mobile devices in portrait orientation  | 0–479px       |
+| `mobileLandscape()`       | Mobile devices in landscape orientation | 0–767px       |
+| `tablet()`                | Tablet devices in portrait orientation  | 0–991px       |
+| `tabletLandscape()`       | Tablet devices in landscape orientation | 0–1199px      |
+| `desktop()`               | Laptops and larger                      | 1200–Infinity |
 
 
-### Example
+#### Example
 
 ```typescript
 import { css } from 'YOUR_BELOWED_CSS_IN_JS_FRAMEWORK';
-import { breakpoint, brp, mobile } from 'eo-css-tools';
+import { breakpoint, brk, mobile } from 'eo-css-tools';
 
@@ -63,3 +62,3 @@ const LARGE_TO_INFINITY = ['2000px', Infinity];
 
-    // Mobile portrait breakpoint
+    /* Mobile portrait custom */
     ${breakpoint([undefined, 400])} {
@@ -69,8 +68,8 @@ height: 400px;
 
-    // Large screens
-    ${brp(LARGE_TO_INFINITY)} {
+    /* Large screens */
+    ${brk(LARGE_TO_INFINITY)} {
       height: 600px;
     }
     
-    // Large screens
+    /* Mobile portrait predefined */
     ${mobile()} {
@@ -83,3 +82,3 @@ height: 800px;
 
-### Result
+#### Result
 
@@ -86,0 +85,0 @@ ```css

No alert changes

Worsened metrics

Total package byte prevSize

29170

decreased by-0.47%

Number of lines in readme file

102

decreased by-0.97%

No dependency changes