Merge branch 'develop'

api/breakpoints/checkIsBreakpointName/checkIsBreakpointName.spec.js

@@ -1,15 +1,15 @@
 const checkIsBreakpointName = require('./');
 
-const namesArr = ['tablet', 'desktop', 'lgDesktop', 'xlDesktop'];
+const names = ['tablet', 'desktop', 'lgDesktop', 'xlDesktop'];
 
 describe('Utils of breakpoints', () => {
  describe('checkIsBreakpointName', () => {
  it('should if breakpoints has breakpoint name', () => {
- expect(checkIsBreakpointName(namesArr, 'desktop')).toBe(true);
+ expect(checkIsBreakpointName(names, 'desktop')).toBe(true);
  });
 
  it('should if breakpoints not contains breakpoint name', () => {
- expect(checkIsBreakpointName(namesArr, 'funckYeahhh!')).toBe(false);
+ expect(checkIsBreakpointName(names, 'funckYeahhh!')).toBe(false);
  });
  });
 });

api/breakpoints/index.js

@@ -10,7 +10,6 @@ const getFirstBreakpoint = require('./getFirstBreakpoint');
 const getNameOfMinBreakpoint = require('./getNameOfMinBreakpoint');
 const getNameOfNextBreakpoint = require('./getNameOfNextBreakpoint');
 const getNamesOfBreakpoints = require('./getNamesOfBreakpoints');
-const removeRoundBrackets = require('./removeRoundBrackets');
 
 module.exports = {
  breakpointsToCebabCase,
@@ -25,5 +24,4 @@ module.exports = {
  getNameOfMinBreakpoint,
  getNameOfNextBreakpoint,
  getNamesOfBreakpoints,
- removeRoundBrackets,
 };

constants/regexes/allCharactersAfterColon.spec.js

@@ -0,0 +1,11 @@
+const { ALL_CHARACTERS_AFTER_COLON } = require('./');
+
+describe('regexes', () => {
+ describe('ALL_CHARACTERS_AFTER_COLON', () => {
+ it('should return all characters after colon', () => {
+ expect(
+ '(tablet, desktop):portrait'.replace(ALL_CHARACTERS_AFTER_COLON, ''),
+ ).toBe('(tablet, desktop)');
+ });
+ });
+});

constants/regexes/allCharactersBeforeColon.spec.js

@@ -0,0 +1,11 @@
+const { ALL_CHARACTERS_BEFORE_COLON } = require('./');
+
+describe('regexes', () => {
+ describe('ALL_CHARACTERS_BEFORE_COLON', () => {
+ it('should return all characters after colon', () => {
+ expect(
+ '(tablet, desktop):portrait'.replace(ALL_CHARACTERS_BEFORE_COLON, ''),
+ ).toBe('portrait');
+ });
+ });
+});

constants/regexes/index.js

@@ -1,4 +1,7 @@
+const ALL_CHARACTERS_AFTER_COLON = /:.+\b/;
+const ALL_CHARACTERS_BEFORE_COLON = /^\(.+\):?/;
 const ALL_ROUND_BRACKETS = /[()]/g;
+const COMMA_AND_NEW_LINE = ',\n';
 const DASH_HYPHEN_WHITESPACE_ANY_CHARACTERS = /[-_\s]+(.)?/g;
 const AMPERSAND = /&/;
 const HAS_AT = /-?\b\d+(\.\d+)?(px|em) at -?\d+(\.\d+)??\b/;
@@ -20,7 +23,10 @@ const SEPARATE_STRING_INTO_WORDS_WITH_CAPITAL_LETTER = /(?=[A-Z])/;
 const T_STEP_WITH_BRACKET = /t-step\(/;
 
 module.exports = {
+ ALL_CHARACTERS_AFTER_COLON,
+ ALL_CHARACTERS_BEFORE_COLON,
  ALL_ROUND_BRACKETS,
+ COMMA_AND_NEW_LINE,
  DASH_HYPHEN_WHITESPACE_ANY_CHARACTERS,
  AMPERSAND,
  HAS_AT,

transformator/transformAtrules/transformTAbove/index.js

@@ -1,12 +1,18 @@
 const { toEm, camelize, decamelize } = require('../../../helpers');
-const { HAS_EM, HAS_PX } = require('../../../constants/regexes');
+const {
+ ALL_CHARACTERS_AFTER_COLON,
+ ALL_CHARACTERS_BEFORE_COLON,
+ ALL_ROUND_BRACKETS,
+ HAS_EM,
+ HAS_PX,
+} = require('../../../constants/regexes');
 const {
  breakpointsToCebabCase,
  calcBreakpointAbove,
  checkIsBreakpointName,
  getNamesOfBreakpoints,
- removeRoundBrackets,
 } = require('../../../api/breakpoints');
+const { getMediaQueriesParams } = require('../../utils');
 
 /**
  * !!! @t-above takes the names of breakpoints, values in pixels or em.
@@ -23,32 +29,53 @@ const {
 const calcParamsOfAtruleAbove = (atrule, config) => {
  const postcssAtrule = atrule;
  const namesOfBreakpoints = getNamesOfBreakpoints(config);
- const paramsWithoutBrackets = camelize(
- removeRoundBrackets(postcssAtrule.params),
+
+ const rawParams = camelize(
+ postcssAtrule.params
+ .replace(ALL_CHARACTERS_AFTER_COLON, '')
+ .replace(ALL_ROUND_BRACKETS, ''),
  );
- const isBreakpointName = checkIsBreakpointName(
- namesOfBreakpoints,
- paramsWithoutBrackets,
+
+ const orientation = postcssAtrule.params.replace(
+ ALL_CHARACTERS_BEFORE_COLON,
+ '',
  );
 
+ const isBreakpointName = checkIsBreakpointName(namesOfBreakpoints, rawParams);
+
  let result = null;
 
  try {
  if (isBreakpointName) {
- result = `(min-width: ${calcBreakpointAbove(
- paramsWithoutBrackets,
- config,
- )})`;
- } else if (HAS_PX.test(paramsWithoutBrackets)) {
- const breakpointValue = `${toEm(paramsWithoutBrackets)}em`;
- result = `(min-width: ${breakpointValue})`;
- } else if (HAS_EM.test(paramsWithoutBrackets)) {
- result = `(min-width: ${paramsWithoutBrackets})`;
+ result = getMediaQueriesParams({
+ orientation,
+ mediaQueriesParams: `(min-width: ${calcBreakpointAbove(
+ rawParams,
+ config,
+ )})`,
+ atrule: postcssAtrule,
+ });
+ } else if (HAS_PX.test(rawParams)) {
+ const breakpointValue = `${toEm(rawParams)}em`;
+ result = getMediaQueriesParams({
+ orientation,
+ mediaQueriesParams: `(min-width: ${breakpointValue})`,
+ atrule: postcssAtrule,
+ });
+ } else if (HAS_EM.test(rawParams)) {
+ result = getMediaQueriesParams({
+ orientation,
+ mediaQueriesParams: `(min-width: ${rawParams})`,
+ atrule: postcssAtrule,
+ });
  } else {
  result = '';
  postcssAtrule.remove();
  const breakpointLine = breakpointsToCebabCase(namesOfBreakpoints);
- const valueWithoutBrackets = removeRoundBrackets(postcssAtrule.params);
+ const valueWithoutBrackets = postcssAtrule.params.replace(
+ ALL_ROUND_BRACKETS,
+ '',
+ );
  const exampleBreak = decamelize(namesOfBreakpoints[2], {
  separator: '-',
  });

transformator/transformAtrules/transformTAbove/transformTAbove.spec.js

@@ -2,7 +2,7 @@ const run = require('../../../helpersForTests/run');
 const { userConfig } = require('../../../helpersForTests/mocks');
 
 describe('transformator', () => {
- describe('@t-above', () => {
+ describe('@t-above atrule', () => {
  it('should replace @t-above(desktop) with @media (min-width: 48em)', () => {
  const source = `
  .test {
@@ -54,4 +54,42 @@ describe('transformator', () => {
  return run(source, compiled, userConfig);
  });
  });
+
+ describe('@t-above atrule with orientation', () => {
+ it('should replace @t-above(40em):landscape with @media (min-with: 40em) and (orientation: landscape)', () => {
+ const source = `
+ .test {
+ @t-above(40em):landscape {
+ background-color: orange;
+ }
+ }`;
+
+ const compiled = `
+ @media (min-width: 40em) and (orientation: landscape) {
+ .test {
+ background-color: orange;
+ }
+}`;
+
+ return run(source, compiled, userConfig);
+ });
+
+ it('should replace @t-above(40em):portrait with @media (min-with: 40em) and (orientation: portrait)', () => {
+ const source = `
+ .test {
+ @t-above(40em):portrait {
+ background-color: orange;
+ }
+ }`;
+
+ const compiled = `
+ @media (min-width: 40em) and (orientation: portrait) {
+ .test {
+ background-color: orange;
+ }
+}`;
+
+ return run(source, compiled, userConfig);
+ });
+ });
 });

transformator/transformAtrules/transformTBelow/index.js

@@ -1,11 +1,17 @@
 const { toEm, camelize, decamelize } = require('../../../helpers');
-const { HAS_EM, HAS_PX } = require('../../../constants/regexes');
+const {
+ ALL_CHARACTERS_AFTER_COLON,
+ ALL_CHARACTERS_BEFORE_COLON,
+ ALL_ROUND_BRACKETS,
+ HAS_EM,
+ HAS_PX,
+} = require('../../../constants/regexes');
 const {
  calcBreakpointBelow,
  checkIsBreakpointName,
  getNamesOfBreakpoints,
- removeRoundBrackets,
 } = require('../../../api/breakpoints');
+const { getMediaQueriesParams } = require('../../utils');
 
 /**
  * !!! @t-below takes the names of breakpoints, values in pixels or em.
@@ -21,22 +27,33 @@ const {
 const calcParamsOfAtruleBelow = (atrule, config) => {
  const postcssAtrule = atrule;
  const namesOfBreakpoints = getNamesOfBreakpoints(config);
- const paramsWithoutBrackets = removeRoundBrackets(postcssAtrule.params);
+ const rawParams = postcssAtrule.params
+ .replace(ALL_CHARACTERS_AFTER_COLON, '')
+ .replace(ALL_ROUND_BRACKETS, '');
+
+ const orientation = postcssAtrule.params.replace(
+ ALL_CHARACTERS_BEFORE_COLON,
+ '',
+ );
  const isBreakpointName = checkIsBreakpointName(
  namesOfBreakpoints,
- camelize(paramsWithoutBrackets),
+ camelize(rawParams),
  );
 
  let result = null;
 
  try {
  if (isBreakpointName) {
  // Redo it! The function should only count the result.
- if (calcBreakpointBelow(paramsWithoutBrackets, config)) {
- result = `(max-width: ${calcBreakpointBelow(
- paramsWithoutBrackets,
- config,
- )})`;
+ if (calcBreakpointBelow(rawParams, config)) {
+ result = getMediaQueriesParams({
+ orientation,
+ mediaQueriesParams: `(max-width: ${calcBreakpointBelow(
+ rawParams,
+ config,
+ )})`,
+ atrule: postcssAtrule,
+ });
  } else {
  postcssAtrule.remove();
  const penultimateBreakName = namesOfBreakpoints
@@ -48,15 +65,24 @@ const calcParamsOfAtruleBelow = (atrule, config) => {
  .filter((item, i, arr) => item === arr[arr.length - 2]);
  throw new Error(
  `
- ${paramsWithoutBrackets} is incorrect parameter in @t-below. Use ${penultimateBreakName} as a maximum breakpoint.
+ ${rawParams} is incorrect parameter in @t-below. Use ${penultimateBreakName} as a maximum breakpoint.
  `,
  );
  }
- } else if (HAS_PX.test(paramsWithoutBrackets)) {
- const breakpointValue = `${toEm(paramsWithoutBrackets)}em`;
- result = `(max-width: ${breakpointValue})`;
- } else if (HAS_EM.test(paramsWithoutBrackets)) {
- result = `(max-width: ${paramsWithoutBrackets})`;
+ } else if (HAS_PX.test(rawParams)) {
+ const breakpointValue = `${toEm(rawParams)}em`;
+
+ result = getMediaQueriesParams({
+ orientation,
+ mediaQueriesParams: `(max-width: ${breakpointValue})`,
+ atrule: postcssAtrule,
+ });
+ } else if (HAS_EM.test(rawParams)) {
+ result = getMediaQueriesParams({
+ orientation,
+ mediaQueriesParams: `(max-width: ${rawParams})`,
+ atrule: postcssAtrule,
+ });
  } else {
  result = '';
  postcssAtrule.remove();
@@ -67,7 +93,10 @@ const calcParamsOfAtruleBelow = (atrule, config) => {
  .filter((item, i, arr) => item !== arr[arr.length - 1])
  .join(', ');
 
- const valueWithoutBrackets = removeRoundBrackets(postcssAtrule.params);
+ const valueWithoutBrackets = postcssAtrule.params.replace(
+ ALL_ROUND_BRACKETS,
+ '',
+ );
  const exampleBreak = decamelize(namesOfBreakpoints[2], {
  separator: '-',
  });

transformator/transformAtrules/transformTBelow/transformTBelow.spec.js

@@ -2,7 +2,7 @@ const run = require('../../../helpersForTests/run');
 const { userConfig } = require('../../../helpersForTests/mocks');
 
 describe('transformator', () => {
- describe('@t-below', () => {
+ describe('@t-below atrule', () => {
  it('should replace @t-below(desktop) with @media (min-width: 61.99875em)', () => {
  const source = `
  .test {
@@ -57,4 +57,42 @@ describe('transformator', () => {
  return run(source, compiled, userConfig);
  });
  });
+
+ describe('@t-below atrule with orientation', () => {
+ it('should replace @t-below(desktop):landscape with @media (min-width: 61.99875em) and (orientation: landscape)', () => {
+ const source = `
+ .test {
+ @t-below (desktop):landscape {
+ background-color: gold;
+ }
+ }`;
+
+ const compiled = `
+ @media (max-width: 61.99875em) and (orientation: landscape) {
+ .test {
+ background-color: gold;
+ }
+}`;
+
+ return run(source, compiled, userConfig);
+ });
+
+ it('should replace @t-below(desktop):portrait with @media (min-width: 61.99875em) and (orientation: portrait)', () => {
+ const source = `
+ .test {
+ @t-below (desktop):portrait {
+ background-color: gold;
+ }
+ }`;
+
+ const compiled = `
+ @media (max-width: 61.99875em) and (orientation: portrait) {
+ .test {
+ background-color: gold;
+ }
+}`;
+
+ return run(source, compiled, userConfig);
+ });
+ });
 });