react-responsive-tools 2.1.1 → 2.1.3

package/package.json

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

package/src/breakpoints.config.mjs

@@ -1,5 +1,5 @@
 
-// breakpoints.config.js
+// breakpoints.config.mjs
 const HORIZONTAL_BREAKPOINTS = {
   "xs": "320px",
   "sm": "576px",

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";
 

package/src/scss/_horizontal-breakpoints.scss

@@ -1,102 +1,142 @@
 
 @import "horizontal";
 
+
+// xs - 320px
 @mixin for-xs(){
   @include mob-first(xs){
     @content;
   }
 }
+
+// sm - 576px
 @mixin for-sm(){
   @include mob-first(sm){
     @content;
   }
 }
+
+// md - 768px
 @mixin for-md(){
   @include mob-first(md){
     @content;
   }
 }
+
+// lg - 992px
 @mixin for-lg(){
   @include mob-first(lg){
     @content;
   }
 }
+
+// lt - 1024px
 @mixin for-lt(){
   @include mob-first(lt){
     @content;
   }
 }
+
+// ltm - 1200px
 @mixin for-ltm(){
   @include mob-first(ltm){
     @content;
   }
 }
+
+// ltl - 1440px
 @mixin for-ltl(){
   @include mob-first(ltl){
     @content;
   }
 }
+
+// xl - 1920px
 @mixin for-xl(){
   @include mob-first(xl){
     @content;
   }
 }
+
+// xxl - 2560px
 @mixin for-xxl(){
   @include mob-first(xxl){
     @content;
   }
 }
+
+// qxl - 3840px
 @mixin for-qxl(){
   @include mob-first(qxl){
     @content;
   }
 }
 
+
+// xs - 320px
 @mixin before-xs(){
   @include desk-first(xs){
     @content;
   }
 }
+
+// sm - 576px
 @mixin before-sm(){
   @include desk-first(sm){
     @content;
   }
 }
+
+// md - 768px
 @mixin before-md(){
   @include desk-first(md){
     @content;
   }
 }
+
+// lg - 992px
 @mixin before-lg(){
   @include desk-first(lg){
     @content;
   }
 }
+
+// lt - 1024px
 @mixin before-lt(){
   @include desk-first(lt){
     @content;
   }
 }
+
+// ltm - 1200px
 @mixin before-ltm(){
   @include desk-first(ltm){
     @content;
   }
 }
+
+// ltl - 1440px
 @mixin before-ltl(){
   @include desk-first(ltl){
     @content;
   }
 }
+
+// xl - 1920px
 @mixin before-xl(){
   @include desk-first(xl){
     @content;
   }
 }
+
+// xxl - 2560px
 @mixin before-xxl(){
   @include desk-first(xxl){
     @content;
   }
 }
+
+// qxl - 3840px
 @mixin before-qxl(){
   @include desk-first(qxl){
     @content;

package/src/scss/_vertical-breakpoints.scss

@@ -1,62 +1,86 @@
 
 @import "vertical";
 
+
+// xs - 600px
 @mixin v-for-xs(){
   @include v-mob-first(xs){
     @content;
   }
 }
+
+// sm - 800px
 @mixin v-for-sm(){
   @include v-mob-first(sm){
     @content;
   }
 }
+
+// md - 1000px
 @mixin v-for-md(){
   @include v-mob-first(md){
     @content;
   }
 }
+
+// lg - 1200px
 @mixin v-for-lg(){
   @include v-mob-first(lg){
     @content;
   }
 }
+
+// xl - 1600px
 @mixin v-for-xl(){
   @include v-mob-first(xl){
     @content;
   }
 }
+
+// xxl - 1601px
 @mixin v-for-xxl(){
   @include v-mob-first(xxl){
     @content;
   }
 }
 
+
+// xs - 600px
 @mixin v-before-xs(){
   @include v-desk-first(xs){
     @content;
   }
 }
+
+// sm - 800px
 @mixin v-before-sm(){
   @include v-desk-first(sm){
     @content;
   }
 }
+
+// md - 1000px
 @mixin v-before-md(){
   @include v-desk-first(md){
     @content;
   }
 }
+
+// lg - 1200px
 @mixin v-before-lg(){
   @include v-desk-first(lg){
     @content;
   }
 }
+
+// xl - 1600px
 @mixin v-before-xl(){
   @include v-desk-first(xl){
     @content;
   }
 }
+
+// xxl - 1601px
 @mixin v-before-xxl(){
   @include v-desk-first(xxl){
     @content;