react-responsive-tools 2.1.0 → 2.1.2

package/index.scss

@@ -1,2 +1,4 @@
 @import "src/scss/vertical";
 @import "src/scss/horizontal";
+@import "src/scss/vertical-breakpoints";
+@import "src/scss/horizontal-breakpoints";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-responsive-tools",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "",
   "main": "index.js",
   "module": "index.js",

package/src/scripts/generateSCSS.mjs

@@ -10,8 +10,20 @@ const __dirname = path.dirname(__filename);
 
 // Функция генерации SCSS содержимого для горизонтальных брейкпоинтов
 const generateHorizontalSCSS = (breakpoints) => {
-  const beforeMixins = Object.keys(breakpoints).map(bp => `@mixin for-${bp}(){\n  @include mob-first(${bp}){\n    @content;\n  }\n}`).join('\n');
-  const afterMixins = Object.keys(breakpoints).map(bp => `@mixin before-${bp}(){\n  @include desk-first(${bp}){\n    @content;\n  }\n}`).join('\n');
+  const beforeMixins = Object.keys(breakpoints).map(bp => `
+// ${bp} - ${breakpoints[bp]}
+@mixin for-${bp}(){
+  @include mob-first(${bp}){
+    @content;
+  }
+}`).join('\n');
+  const afterMixins = Object.keys(breakpoints).map(bp => `
+// ${bp} - ${breakpoints[bp]}
+@mixin before-${bp}(){
+  @include desk-first(${bp}){
+    @content;
+  }
+}`).join('\n');
   return `
 @import "horizontal";
 
@@ -23,8 +35,20 @@ ${afterMixins}
 
 // Функция генерации SCSS содержимого для вертикальных брейкпоинтов
 const generateVerticalSCSS = (breakpoints) => {
-  const beforeMixins = Object.keys(breakpoints).map(bp => `@mixin v-for-${bp}(){\n  @include v-mob-first(${bp}){\n    @content;\n  }\n}`).join('\n');
-  const afterMixins = Object.keys(breakpoints).map(bp => `@mixin v-before-${bp}(){\n  @include v-desk-first(${bp}){\n    @content;\n  }\n}`).join('\n');
+  const beforeMixins = Object.keys(breakpoints).map(bp => `
+// ${bp} - ${breakpoints[bp]}
+@mixin v-for-${bp}(){
+  @include v-mob-first(${bp}){
+    @content;
+  }
+}`).join('\n');
+  const afterMixins = Object.keys(breakpoints).map(bp => `
+// ${bp} - ${breakpoints[bp]}
+@mixin v-before-${bp}(){
+  @include v-desk-first(${bp}){
+    @content;
+  }
+}`).join('\n');
   return `
 @import "vertical";