Инструменты стилизации Javascript в Styler

Styler - это утилита с нулевой зависимостью стиля в javascript. Styler включает в себя несколько полезных и удобных для разработчиков инструментов. Этот инструмент позволяет как разрабатывать вложенные стилевые объекты, так и взламывать для создания новых стилевых инструментов.

Перед этим руководством вам необходимо прочитать о Styler: Styler - это новый способ стилизации Javascript!

Пример сложного styleObject:

{
  "#calendar":{
    "&_line2":{
      width:160,
      "alignSelf":"FLEX_END"
    }
  },
  ".calendar":{
    "&-self":{
      "backgroundColor":"#FFFFFF",
      "right":0,
      "left":0,
      "top":0,
      "bottom":0,
      "minHeight":300,
      "maxHeight":300,
      "paddingLeft":0,
      "paddingRight":0,
      "positionType":"ABSOLUTE"
    },
    "&_line":{
      "height":1,
      "width":NaN,
      "backgroundColor":"rgba(228,228,228,1)"
    },
    "&_calendarYear":{
      "&_yearLabel":{
        "textColor":"#FF001F"
      }
    },
    ".header":{
      "&_navbar":{
        "&_monthLabel":{
          "textColor":"#1775D0"
        },
        "&_arrow":{
          "flexGrow":1,
          "textColor":"#B1B1B4",

        },
        "&_label":{
          "textColor":"#000000",

        }
      },
      "&_dayNames":{
        "backgroundColor":"#EBEBEB",
        "minHeight":14,
        "maxHeight":NaN,
        "height":NaN,
        "flexGrow":0.2,
        "&_dayName":{
          "height":NaN,
          "font":{
            "size":10,
            "family":"Arial"
          },
          ".weekday":{
            "textColor":"#000000",

          },
          ".weekend":{
            "textColor":"#808080",

          }
        }
      }
    },
    ".body":{

    },
    ".weekRow":{
      "backgroundColor":"rgba(0,0,0,0)",
      "maxHeight":40,
      "minHeight":26,
      "&_line":{
        "backgroundColor":"#C0C0C0"
      }
    },
    ".day":{
      "font":{
        "size":14,
        "bold":false,
        "italic":false,
        "family":"Arial"
      },
      "borderWidth":0,
      "borderRadius":13,
      "maxWidth":26,
      "minWidth":26,
      "maxHeight":26,
      "minHeight":26,
      "textColor":"#000000",
      "backgroundColor":"rgba(0,0,0,0)",
      "&-inrange":{
        "textColor":"#000000",

      },
      "&-selected":{
        "borderWidth":0,
        "backgroundColor":"rgba(0,185,255,42)",
        "textColor":"#000000"
      },
      "&-deactiveDays":{
        "borderWidth":0,
        "textColor":"#D6D6D6",

      },
      "&-specialDays":{
        "borderWidth":0,
      },
      "&-weekend":{
        "borderWidth":0,
        "textColor":"#A3A3A3",
      }
    }
  }
};

Некоторые условные обозначения:

Стилер всегда возвращает оболочку стиля, а стиль всегда возвращает композитор стиля. Например:

const aStyleObject = {...};
// styler can be any styler implementation
var styling = styler(aStyleObject);
var styleComposer = styling(".someClassName #orWithHashtag");
var style = styleComposer();
// or
styleComposer(function(className, key, value){
  style[key] = value;
});
// or
styleComposer(function(className, key, value){
 if(className == ".button" && key == "x"){
  // any logic in here
  style[key] = value*2;
 }
});

Инструменты для укладки:

1. стилизатор (styleObject) (classNames) (mapFn)
2. flatStyler (styler1, styler2,…) (classNames) (mapFn)
3. combStyler (styler1, styler2,…) (classNames) (mapFn)
4. memoizeStyler (styler1, styler2,…) (classNames) (mapFn)

1. стилизатор (styleObject) (classNames) (mapFn)

Стилер - это главный инструмент в наборе инструментов. Стилер выравнивает объекты стиля и просто возвращает результаты как указанные имена классов. Давайте взглянем:

const styler = require("@smartface/styler").styler 
// or require("@smartface/styler/lib/styler");
// sample styling-object
const styleObject = {
     ".button"{
       widht: "100px",
       height: "30px",
       ".blue": {
         color: "blue"
       },
       ".red": {
         color: "red"
       }
   }
 }
// composes styling wrapper
const styling = styler(styleObject);
const blueButtonStyle = {};
const redButtonStyle = {};
// gets style
styling(".button.blue")(function(className, key, value){
  blueButtonStyle[key] = value;
}); 
// or
// blueButtonStyle = styling(".button.blue")();
// blueButtonStyle equals to {width: "100px", height: "20px", color: "blue"}
 
styling(".button.red")(function(className, key, value){
  redButtonStyle[key] = value;
});
//or
// redButtonStyle = styling(".button.red")();

2. flatStyler (стиль,…) (classNames) (mapFn)

Рекурсивно выравнивает указанные функции стилизатора и создает единый набор стилей. Все инструменты стилизатора работают как функция стилизатора, поэтому каждый инструмент стилизации может быть сглажен.

const flatStyler = require("@smartface/styler").flatStyler
const styler = require("@smartface/styler").styler
const styleObj1 = { ... }
const styleObj2 = { ... }
const styleObj3 = { ... }
const styling1 = styler(styleObj1)
const styling2 = styler(styleObj2)
const flattenStyling = flatStyler(styling1, styling2);
const styleComposer = flattenStyling(".button .button-red");
const style = styleComposer();
const newStyling = styler(styleObj3);
const moreFlattenStyling = flatStyler(newStyling, flattenStyling);
const flattenStyleComp = moreFlattenStyling(".button .button-red .button-big");

3.commonStyler (стиль,…) (classNames) (mapFn)

Комбинирует указанные стилизаторы без выравнивания. Запускает все стилизаторы с заданными classNames и возвращает объединенные результаты из комбинации стилизаторов.

const combineStyler = require("@smartface/styler").combineStyler
const styler = require("@smartface/styler").styler
const styleObj1 = { ... }
const styleObj2 = { ... }
const styleObj3 = { ... }
const Device = {os: "ios"};
const styling1 = styler(styleObj1)
const styling2 = styler(styleObj2)
const combined = combineStyler(styling1, styling2);
const combinedStyling = combined(".button .button-red");
const style = combinedStyling();
//high-order styler. Automatically adds new className by os.
const newStylerHOS = function(styling){
  return function(className){
    //adds .ios or .android className by Device OS
    return styling(className+"."+Device.os);
  }
}
Device.os = "android";
const moreCombinationStyling = combineStyler(
  combined, 
  newStylerHOS(styler(styleObj3))
);
const styleComposer = moreCombinationStyling(".button .button-red .button-big");
// assigns a style object by classNames
const style = styleComposer();

4. memoizeStyler (styler,…) (classNames) (mapFn)

Кеширует результаты указанных стилизаторов и возвращает результаты из кеша. Это особенно полезно для комбайнаStyler.

const combineStyler = require("@smartface/styler").combineStyler
const memoizeStyler = require("@smartface/styler").memoizeStyler
const styler = require("@smartface/styler").styler
const styleObj1 = { ... };
const styleObj2 = { ... };
const styleObj3 = { ... };
const Device = {os: "ios"};
const styling1 = styler(styleObj1)
const styling2 = styler(styleObj2)
const combined = combineStyler(styling1, styling2);
const combinedStyling = combined(".button .button-red");
const style = combinedStyling();
//high-order styler. Automatically adds new className by os.
const newStylerHOS = function(styling){
  return function(className){
    //adds .ios or .android className by Device OS
    return styler(className+"."+Device.os);
  }
}
Device.os = "android";
const moreCombinationStyling = combineStyler(
  combined, 
  newStylerHOS(styler(styleObj3))
);
const cacheStyling = memoizeStyler(moreCombinationStyling);
const styleComposer = cacheStyling(".button .button-red .button-big");
// assigns a style object by classNames
const style = styleComposer();

скоро: моделирование узоров с помощью Styler