react-responsive-tools 2.3.21 → 2.4.0

package/README.MD

@@ -29,7 +29,7 @@ npm install react-responsive-tools
 To use the generated SCSS files, import the main SCSS file from the library:
 
 ```scss
-@import 'react-responsive-tools';
+@use 'react-responsive-tools' as *;
 ```
 
 ### Import JavaScript
@@ -306,7 +306,7 @@ After re-generating the files, the following SCSS mixins will be available:
 #### Horizontal Breakpoints
 
 ```scss
-@import "_custom-breakpoints";
+@use "_custom-breakpoints" as *;
 
 @mixin mob-first($breakpoint) {
   @media (min-width: map-get($horizontal-breakpoints, $breakpoint)) {
@@ -445,7 +445,7 @@ After re-generating the files, the following SCSS mixins will be available:
 #### Vertical Breakpoints
 
 ```scss
-@import "_custom-breakpoints";
+@use "_custom-breakpoints" as *;
 
 @mixin v-mob-first($breakpoint) {
   @media (min-height: map-get($vertical-breakpoints, $breakpoint)) {

package/dist/components/horizontal.d.ts

@@ -9,6 +9,6 @@ interface Props {
 interface ForComponentProps extends Props {
     p: TBreakpoint | number;
 }
-export declare function For({ children, p }: ForComponentProps): React.ReactNode;
-export declare function Before({ children, p }: ForComponentProps): React.ReactNode;
+export declare function For({ children, p }: ForComponentProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Before({ children, p }: ForComponentProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/horizontal.js

@@ -1,16 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Created by westp on 15.05.2023
  */
+import { Fragment } from "react";
 import { useBreakpointDF, useBreakpointMF } from '../hooks/useBreakpoint.js';
 export function For({ children, p }) {
     const is = useBreakpointMF(p);
     if (is)
-        return children;
+        return _jsx(Fragment, { children: children });
     return null;
 }
 export function Before({ children, p }) {
     const is = useBreakpointDF(p);
     if (is)
-        return children;
+        return _jsx(Fragment, { children: children });
     return null;
 }

package/dist/index.scss

@@ -1,4 +1,4 @@
-@import "./scss/vertical";
-@import "./scss/horizontal";
-@import "./scss/horizontal-breakpoints";
-@import "./scss/vertical-breakpoints";
+@use "./scss/vertical" as *;
+@use "./scss/horizontal" as *;
+@use "./scss/horizontal-breakpoints" as *;
+@use "./scss/vertical-breakpoints" as *;

package/dist/scripts/generateSCSS.mjs

@@ -1 +1 @@
-import n from"fs";import e from"path";import{fileURLToPath as i}from"url";import{HORIZONTAL_BREAKPOINTS as r,VERTICAL_BREAKPOINTS as o}from"../breakpoints.config.js";const s=i(import.meta.url),t=e.dirname(s),l=(c=r,`\n@import "horizontal";\n\n${Object.keys(c).map((n=>`\n/**\n * @mixin for-${n}\n * @description Mixin for applying styles for screens greater than or equal to ${c[n]}px.\n * @example\n *  @include for-${n} {\n *    // your styles here\n *  }\n */\n@mixin for-${n}() {\n  @include mob-first(${n}) {\n    @content;\n  }\n}`)).join("\n")}\n\n${Object.keys(c).map((n=>`\n/**\n * @mixin before-${n}\n * @description Mixin for applying styles for screens less than ${c[n]}px.\n * @example\n *  @include before-${n} {\n *    // your styles here\n *  }\n */\n@mixin before-${n}() {\n  @include desk-first(${n}) {\n    @content;\n  }\n}`)).join("\n")}\n`);var c;const p=(n=>`\n@import "vertical";\n\n${Object.keys(n).map((e=>`\n/**\n * @mixin v-for-${e}\n * @description Mixin for applying styles for screens with height greater than or equal to ${n[e]}px.\n * @example\n *  @include v-for-${e} {\n *    // your styles here\n *  }\n */\n@mixin v-for-${e}() {\n  @include v-mob-first(${e}) {\n    @content;\n  }\n}`)).join("\n")}\n\n${Object.keys(n).map((e=>`\n/**\n * @mixin v-before-${e}\n * @description Mixin for applying styles for screens with height less than ${n[e]}px.\n * @example\n *  @include v-before-${e} {\n *    // your styles here\n *  }\n */\n@mixin v-before-${e}() {\n  @include v-desk-first(${e}) {\n    @content;\n  }\n}`)).join("\n")}\n`)(o);n.writeFileSync(e.resolve(t,"../scss/_horizontal-breakpoints.scss"),l),n.writeFileSync(e.resolve(t,"../scss/_vertical-breakpoints.scss"),p),console.log("SCSS files have been generated successfully.");
+import n from"fs";import e from"path";import{fileURLToPath as i}from"url";import{HORIZONTAL_BREAKPOINTS as s,VERTICAL_BREAKPOINTS as r}from"../breakpoints.config.js";const o=i(import.meta.url),t=e.dirname(o),l=(c=s,`\n@use "horizontal" as *;\n\n${Object.keys(c).map((n=>`\n/**\n * @mixin for-${n}\n * @description Mixin for applying styles for screens greater than or equal to ${c[n]}px.\n * @example\n *  @include for-${n} {\n *    // your styles here\n *  }\n */\n@mixin for-${n}() {\n  @include mob-first(${n}) {\n    @content;\n  }\n}`)).join("\n")}\n\n${Object.keys(c).map((n=>`\n/**\n * @mixin before-${n}\n * @description Mixin for applying styles for screens less than ${c[n]}px.\n * @example\n *  @include before-${n} {\n *    // your styles here\n *  }\n */\n@mixin before-${n}() {\n  @include desk-first(${n}) {\n    @content;\n  }\n}`)).join("\n")}\n`);var c;const a=(n=>`\n@use "vertical" as *;\n\n${Object.keys(n).map((e=>`\n/**\n * @mixin v-for-${e}\n * @description Mixin for applying styles for screens with height greater than or equal to ${n[e]}px.\n * @example\n *  @include v-for-${e} {\n *    // your styles here\n *  }\n */\n@mixin v-for-${e}() {\n  @include v-mob-first(${e}) {\n    @content;\n  }\n}`)).join("\n")}\n\n${Object.keys(n).map((e=>`\n/**\n * @mixin v-before-${e}\n * @description Mixin for applying styles for screens with height less than ${n[e]}px.\n * @example\n *  @include v-before-${e} {\n *    // your styles here\n *  }\n */\n@mixin v-before-${e}() {\n  @include v-desk-first(${e}) {\n    @content;\n  }\n}`)).join("\n")}\n`)(r);n.writeFileSync(e.resolve(t,"../scss/_horizontal-breakpoints.scss"),l),n.writeFileSync(e.resolve(t,"../scss/_vertical-breakpoints.scss"),a),console.log("SCSS files have been generated successfully.");

package/dist/scss/_horizontal-breakpoints.scss

@@ -1,5 +1,5 @@
 
-@import "horizontal";
+@use "horizontal" as *;
 
 
 /**

package/dist/scss/_horizontal.scss

@@ -1,4 +1,4 @@
-@import "_custom-breakpoints";
+@use "_custom-breakpoints" as *;
 
 @mixin mob-first($breakpoint){
   @media (min-width: map-get($horizontal-breakpoints, $breakpoint)) {

package/dist/scss/_vertical-breakpoints.scss

@@ -1,5 +1,5 @@
 
-@import "vertical";
+@use "vertical" as *;
 
 
 /**

package/dist/scss/_vertical.scss

@@ -1,4 +1,4 @@
-@import "_custom-breakpoints";
+@use "_custom-breakpoints" as *;
 
 @mixin v-mob-first($breakpoint){
   @media (min-height: map-get($vertical-breakpoints, $breakpoint)) {

package/index.scss

@@ -1,4 +1,4 @@
-@import "./dist/scss/vertical";
-@import "./dist/scss/horizontal";
-@import "./dist/scss/horizontal-breakpoints";
-@import "./dist/scss/vertical-breakpoints";
+@use "./dist/scss/vertical" as *;
+@use "./dist/scss/horizontal" as *;
+@use "./dist/scss/horizontal-breakpoints" as *;
+@use "./dist/scss/vertical-breakpoints" as *;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-responsive-tools",
-  "version": "2.3.21",
+  "version": "2.4.0",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.js",