refactor: full refactoring

.eslintrc

@@ -7,6 +7,11 @@
     "jasmine": true
   },
   "rules": {
-    "import/no-extraneous-dependencies": 0
+    "arrow-body-style": 2,
+    "newline-before-return": 2,
+    "no-unused-vars": 0,
+    "no-param-reassign": 0,
+    "import/no-extraneous-dependencies": 0,
+    "no-use-before-define": 0
   }
 }

.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  trailingComma: 'all',
+  singleQuote: true,
+  arrowParens: 'always',
+};

README.md

@@ -1,6 +1,6 @@
 <h3><a href="https://maxinakenty.github.io/" target="_blank" title="Demo">Demo</a></h3>
 
-# typographist/postcss
+# Typographist
 
 ## Documentation
 
@@ -51,11 +51,11 @@ To install the stable version:
 Use yarn or npm
 
 ```
-yarn add postcss @typographist/postcss
+yarn add postcss typographist
 ```
 
 ```
-npm i postcss @typographist/postcss
+npm i postcss typographist
 ```
 
 ### Configuration
@@ -65,13 +65,13 @@ npm i postcss @typographist/postcss
 requireJs
 
 ```js
-const { typographist, ratios } = require('@typographist/postcss');
+const { typographist, ratios } = require('typographist');
 ```
 
 es6 modules
 
 ```js
-import { typographist, ratios } from '@typographist/postcss';
+import { typographist, ratios } from 'typographist';
 ```
 
 #### Base
@@ -200,7 +200,7 @@ I hope it was not difficult for you. The idea of such a simple configuration I b
 You need to create a postcss.config.js
 
 ```js
-const { typographist, ratios } = require('@typographist/postcss');
+const { typographist, ratios } = require('typographist');
 
 module.exports = () => ({
   plugins: [
@@ -238,7 +238,7 @@ const rename = require('gulp-rename');
 const cssnano = require('gulp-cssnano');
 const notify = require('gulp-notify');
 const combine = require('stream-combiner2').obj;
-const { typographist, ratios } = require('@typographist/postcss');
+const { typographist, ratios } = require('typographist');
 
 const processors = [
   typographist({
@@ -295,7 +295,7 @@ Set the root font-size.
 
 ```css
 :root {
-  @t-root;
+  @root;
 }
 ```
 
@@ -325,13 +325,13 @@ Output
 }
 ```
 
-Using the @ t-root directive, we calculated the size of the root font for each breakpoint. Also now we have the opportunity to link our css and javascript to native css variables. The value of each breakpoint is converted to em.
+Using the @ root directive, we calculated the size of the root font for each breakpoint. Also now we have the opportunity to link our css and javascript to native css variables. The value of each breakpoint is converted to em.
 
 Input
 
 ```css
 :root {
-  @t-root (fluid);
+  @root (fluid);
 }
 ```
 
@@ -370,7 +370,7 @@ Input
 
 ```css
 body {
-  @t-base;
+  @base;
 }
 ```
 
@@ -402,15 +402,15 @@ The @ t-base directive sets the size of the base font to rem for each breakpoint
 
 ### Breakpoints
 
-#### @t-above
+#### @up
 
-@t-above takes as parameters the names of breakpoints, values in pixels or ems.
+@up takes as parameters the names of breakpoints, values in pixels or ems.
 
 Input
 
 ```css
 .your-class {
-  @t-above (desktop) {
+  @up (desktop) {
     /* your code */
   }
 }
@@ -426,14 +426,14 @@ Output
 }
 ```
 
-#### @t-below
+#### @down
 
-@t-below takes as parameters the names of breakpoints, values in pixels or ems.
+@down takes as parameters the names of breakpoints, values in pixels or ems.
 Input
 
 ```css
 .your-class {
-  @t-below (desktop) {
+  @down (desktop) {
     /* your code */
   }
 }
@@ -449,15 +449,15 @@ Output
 }
 ```
 
-#### @t-only
+#### @only
 
-@t-only takes as parameters parameters only the names of breakpoints.
+@only takes as parameters parameters only the names of breakpoints.
 
 Input
 
 ```css
 .your-class {
-  @t-only (desktop) {
+  @only (desktop) {
     /* your code */
 }
 ```
@@ -472,14 +472,14 @@ Output
 }
 ```
 
-#### @t-between
+#### @between
 
-@t-between takes as parameters the names of breakpoints, values in pixels or ems.
+@between takes as parameters the names of breakpoints, values in pixels or ems.
 
 Input
 
 ```css
-.your-class @t-between(tablet, desktop) {
+.your-class @between(tablet, desktop) {
   /* your code */
 }
 ```
@@ -498,25 +498,25 @@ Output
 
 Set the font size from the position in the modular scale.
 
-  <img src="/docs/images/msunit.jpg" alt="position in modular scale">
+  <img src="/img/msunit.jpg" alt="position in modular scale">
 
-To convert step to rem, use directives @t-above, @t-below, or @t-only.
+To convert step to rem, use directives @up, @down, or @only.
 
 input
 
 ```css
 h1 {
   font-size: 6step;
 
-  @t-above (tablet) {
+  @-above (tablet) {
     font-size: 6step;
   }
 
-  @t-above (desktop) {
+  @up (desktop) {
     font-size: 6step;
   }
 
-  @t-above (lg-desktop) {
+  @up (lg-desktop) {
     font-size: 6step;
   }
 }

breakpoints/calculators.js

@@ -0,0 +1,37 @@
+const { pipe } = require('@typographist/core');
+
+const { toEm, toPx, toEmOrNot, hasEm, camelize } = require('../utils');
+const { getNextBreakpointValue } = require('./helpers');
+
+// normalizeBreakParams :: [String] -> String
+const normalizeBreakParams = (x) => camelize(String(x));
+
+// calcMaxBreakValue :: (String | Number) -> Number
+const calcMaxBreakValue = (x) => toEm(parseFloat(x) - 0.02);
+
+// calcMinWidth :: Object -> [String] -> String
+exports.calcMinWidth = (breakpoints) => (breakpoint) => {
+  const breakParams = normalizeBreakParams(breakpoint);
+
+  return breakpoints[breakParams]
+    ? toEm(breakpoints[breakParams].value)
+    : toEmOrNot(breakParams);
+};
+
+// calcMaxWidth :: Object -> String -> String
+exports.calcMaxWidth = (breakpoints) => (breakpoint) => {
+  const breakParams = normalizeBreakParams(breakpoint);
+
+  if (breakpoints[breakParams]) {
+    return pipe(
+      getNextBreakpointValue(breakParams),
+      calcMaxBreakValue,
+    )(breakpoints);
+  }
+
+  if (hasEm(breakParams)) {
+    return calcMaxBreakValue(toPx(breakParams));
+  }
+
+  return calcMaxBreakValue(breakParams);
+};

breakpoints/helpers.js

@@ -0,0 +1,68 @@
+const { toKebabCase } = require('../utils');
+
+// const NOT_BREAKPOINT_NAME = /^\((\w+)\).*$/g;
+const NOT_BREAKPOINT_NAMES = /^\((\w+(,?\w+)?)\).*$/g;
+const ALL_CHARACTERS_BEFORE_COLON = /^\(.+\):?/;
+const SPACES = /\s/g;
+
+// getOrientation :: String -> String
+const getOrientation = (x) => x.replace(ALL_CHARACTERS_BEFORE_COLON, '');
+
+// getBreakpointValues :: String -> String
+const getBreakpointValues = (params) =>
+  params
+    .replace(SPACES, '')
+    .replace(NOT_BREAKPOINT_NAMES, '$1')
+    .split(',');
+
+// makeBreakpointList :: Object -> [String]
+const makeBreakpointList = (x) =>
+  Object.keys(x)
+    .map(toKebabCase)
+    .join(', ');
+
+// withMinWidth :: String -> String
+const withMinWidth = (x) => `(min-width: ${x})`;
+
+// withMaxMedia :: String -> String
+const withMaxWidth = (x) => `(max-width: ${x})`;
+
+// withMinAndMaxWidth :: (String, String) -> String
+const withMinAndMaxWidth = (min, max) =>
+  `(min-width: ${min}) and (max-width: ${max})`;
+
+// withOrientationOrNot :: String -> String -> String
+const withOrientationOrNot = (orientation) => (params) =>
+  orientation ? `${params} and (orientation: ${orientation})` : params;
+
+// antecedentBreakName :: Object -> String
+const antecedentBreakName = (x) => Object.keys(x)[Object.keys(x).length - 2];
+
+// getlastBreakIndex :: Object -> Number
+const getlastBreakIndex = (x) => Object.keys(x).length - 1;
+
+// getCurrentIndex :: (String, Object) -> Number
+const getCurrentIndex = (name, breakpoints) =>
+  Object.keys(breakpoints).indexOf(name);
+
+// getNextBreakpointValue :: String  -> Object -> String
+const getNextBreakpointValue = (name) => (breakpoints) => {
+  const currentIndex = getCurrentIndex(name, breakpoints);
+  const nextBreakpointName = Object.keys(breakpoints)[currentIndex + 1];
+
+  return breakpoints[nextBreakpointName].value;
+};
+
+module.exports = {
+  getOrientation,
+  getBreakpointValues,
+  makeBreakpointList,
+  withMinWidth,
+  withMaxWidth,
+  withMinAndMaxWidth,
+  withOrientationOrNot,
+  antecedentBreakName,
+  getlastBreakIndex,
+  getCurrentIndex,
+  getNextBreakpointValue,
+};