fix(deps): update dependencies

.storybook/main.ts

@@ -10,12 +10,6 @@ const storybookConfig: StorybookConfig = {
     options: {},
   },
   webpackFinal: (config) => {
-    config.module?.rules?.push({
-      test: /\.scss$/,
-      use: ['style-loader', 'css-loader', 'sass-loader'],
-      include: path.resolve(__dirname, '../'),
-    });
-
     // Resolve absolute imports
     config.resolve?.modules?.push(path.resolve(process.cwd(), 'src'));
 

package.json

@@ -91,8 +91,6 @@
     "react-joystick-component": "6.2.1",
     "rollup": "4.9.6",
     "rollup-plugin-dts": "6.1.0",
-    "sass": "1.70.0",
-    "sass-loader": "14.0.0",
     "semantic-release": "23.0.0",
     "storybook": "7.6.10",
     "ts-jest": "29.1.2",

stories/EventParams/EventParams.demozap.scss → stories/EventParams/EventParams.demozap.css

@@ -1,4 +1,4 @@
-@import '../ReactParallaxTilt.scss';
+@import '../ReactParallaxTilt.css';
 
 .event-params {
   display: flex;
@@ -7,7 +7,6 @@
   align-items: center;
 
   .react-parallax-tilt {
-    @include background;
     display: flex;
     flex-direction: column;
     justify-content: center;

stories/EventParams/EventParams.demozap.tsx

@@ -2,7 +2,7 @@ import React, { useState, ChangeEvent } from 'react';
 
 import Tilt, { OnMoveParams } from 'index';
 
-import './EventParams.demozap.scss';
+import './EventParams.demozap.css';
 
 type SelectedEvents = {
   trackOnMove: boolean;
@@ -62,7 +62,7 @@ const EventParams = () => {
   };
 
   return (
-    <div className="event-params">
+    <div className="background-stripes event-params">
       <Tilt
         onMove={onMove}
         onEnter={onEnter}

stories/EventTiltAngle/EventTiltAngle.demozap.scss → stories/EventTiltAngle/EventTiltAngle.demozap.css

@@ -1,5 +1,3 @@
-@import '../ReactParallaxTilt.scss';
-
 .event-tilt-angle {
   display: flex;
   flex-direction: column;

stories/EventTiltAngle/EventTiltAngle.demozap.tsx

@@ -3,7 +3,7 @@ import React, { PureComponent } from 'react';
 import Tilt, { OnMoveParams } from 'index';
 
 import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
-import './EventTiltAngle.demozap.scss';
+import './EventTiltAngle.demozap.css';
 
 class EventTiltAngle extends PureComponent {
   state = {

stories/FlipPage/FlipPage.demozap.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import Tilt from 'index';
 
-import './FlipPage.demozap.scss';
+import './FlipPage.demozap.css';
 import { Page } from './Page/Page';
 
 const FlipPage = () => {

stories/FlipPage/Page/Page.scss → stories/FlipPage/Page/Page.css

@@ -40,7 +40,6 @@
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      margin-bottom: 10px;
       border: 2px solid black;
       border-radius: 10px;
       padding: 10px;

stories/FlipPage/Page/Page.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import './Page.scss';
+import './Page.css';
 import sampleImg from './lorem-picsum.png';
 
 type PageProps = {

stories/FlipVH/FlipVH.demozap.scss → stories/FlipVH/FlipVH.demozap.css

@@ -1,7 +1,6 @@
-@import '../ReactParallaxTilt.scss';
+@import '../ReactParallaxTilt.css';
 
 .flip-vh {
-  @include background;
   display: flex;
   flex-direction: column;
   justify-content: center;

stories/FlipVH/FlipVH.demozap.tsx

@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
 
 import Tilt from 'index';
-import './FlipVH.demozap.scss';
+import './FlipVH.demozap.css';
 
 const FlipVH = () => {
   const [[flipVertically, flipHorizontally], toggleFlip] = useState([false, false]);
 
   return (
     <Tilt flipVertically={flipVertically} flipHorizontally={flipHorizontally}>
-      <div className="flip-vh">
+      <div className="background-stripes flip-vh">
         <div className="header">
           <div>Toggle Axis</div>
           <hr />

stories/MultipleTilt/MultipleTilt.demozap.scss → stories/MultipleTilt/MultipleTilt.demozap.css

@@ -3,11 +3,10 @@
   flex-direction: row;
 
   .col {
-    $spacing: 20px;
-    margin-right: $spacing;
+    margin-right: 20px;
 
     :first-child {
-      margin-bottom: $spacing;
+      margin-bottom: 20px;
     }
   }
 }

stories/MultipleTilt/MultipleTilt.demozap.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Tilt from 'index';
 
-import './MultipleTilt.demozap.scss';
+import './MultipleTilt.demozap.css';
 import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 
 const MultipleTilt = () => (

stories/MultipleTiltScroll/MultipleTiltScroll.demozap.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Tilt from 'index';
 
-import './MultipleTiltScroll.demozap.scss';
+import './MultipleTiltScroll.demozap.css';
 import { DefaultComponent } from '../_DefaultComponent/DefaultComponent';
 
 const MultipleTiltScroll = () => (

stories/ParallaxEffect/ParallaxEffect.demozap.scss → stories/ParallaxEffect/ParallaxEffect.demozap.css

@@ -1,7 +1,6 @@
-@import '../ReactParallaxTilt.scss';
+@import '../ReactParallaxTilt.css';
 
 .parallax-effect {
-  @include background;
   display: flex;
   flex-direction: column;
   justify-content: center;

stories/ParallaxEffect/ParallaxEffect.demozap.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
 import Tilt from 'index';
-import './ParallaxEffect.demozap.scss';
+import './ParallaxEffect.demozap.css';
 
 const ParallaxEffect = () => (
-  <Tilt className="parallax-effect" perspective={500}>
+  <Tilt className="background-stripes parallax-effect" perspective={500}>
     <div className="inner-element">
       <div>React</div>
       <div>Parallax Tilt</div>

stories/ParallaxEffectGlareScale/ParallaxEffectGlareScale.demozap.scss → stories/ParallaxEffectGlareScale/ParallaxEffectGlareScale.demozap.css

@@ -1,7 +1,6 @@
-@import '../ReactParallaxTilt.scss';
+@import '../ReactParallaxTilt.css';
 
 .parallax-effect-glare-scale {
-  @include background;
   display: flex;
   flex-direction: column;
   justify-content: center;

stories/ParallaxEffectGlareScale/ParallaxEffectGlareScale.demozap.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
 import Tilt from 'index';
-import './ParallaxEffectGlareScale.demozap.scss';
+import './ParallaxEffectGlareScale.demozap.css';
 
 const ParallaxEffectGlareScale = () => (
   <Tilt
-    className="parallax-effect-glare-scale"
+    className="background-stripes parallax-effect-glare-scale"
     perspective={500}
     glareEnable={true}
     glareMaxOpacity={0.45}

stories/ParallaxEffectImg/ParallaxEffectImg.demozap.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Tilt from 'index';
 
-import './ParallaxEffectImg.demozap.scss';
+import './ParallaxEffectImg.demozap.css';
 import imgTree from './img/tree.png';
 
 const ParallaxEffectImg = () => (

stories/ReactParallaxTilt.scss → stories/ReactParallaxTilt.css

@@ -10,15 +10,17 @@
   }
 }
 
-$default-stripe-bg-color: #077407;
-$default-stripe-color: #015f01;
+:root {
+  --default-stripe-bg-color: #077407;
+  --default-stripe-color: #015f01;
+}
 
-@mixin background {
+.background-stripes {
   background: repeating-linear-gradient(
     45deg,
-    $default-stripe-color,
-    $default-stripe-color 35px,
-    $default-stripe-bg-color 35px,
-    $default-stripe-bg-color 70px
+    var(--default-stripe-color),
+    var(--default-stripe-color) 35px,
+    var(--default-stripe-bg-color) 35px,
+    var(--default-stripe-bg-color) 70px
   );
 }

stories/ReactParallaxTilt.stories.tsx

@@ -25,7 +25,7 @@ import { _TiltManualInput } from './TiltManualInput/_TiltManualInput';
 import { _TiltScale } from './TiltScale/_TiltScale';
 import { _TrackOnWindow } from './TrackOnWindow/_TrackOnWindow';
 
-import './ReactParallaxTilt.scss';
+import './ReactParallaxTilt.css';
 
 export default {
   title: 'React Parallax Tilt',

stories/ScaleNoTilt/ScaleNoTilt.demozap.scss → stories/ScaleNoTilt/ScaleNoTilt.demozap.css

@@ -1,7 +1,6 @@
-@import '../ReactParallaxTilt.scss';
+@import '../ReactParallaxTilt.css';
 
 .scale-no-tilt {
-  @include background;
   display: flex;
   flex-direction: column;
   justify-content: center;

stories/ScaleNoTilt/ScaleNoTilt.demozap.tsx

@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
 
 import Tilt from 'index';
-import './ScaleNoTilt.demozap.scss';
+import './ScaleNoTilt.demozap.css';
 
 const ScaleNoTilt = () => {
   const [scale, setScale] = useState(1.3);
 
   return (
     <Tilt tiltEnable={false} scale={scale} transitionSpeed={2500}>
-      <div className="scale-no-tilt">
+      <div className="background-stripes scale-no-tilt">
         <div className="header">
           <div>Scale x{scale}</div>
           <hr />

stories/TiltDisableAxis/TiltDisableAxis.demozap.scss → stories/TiltDisableAxis/TiltDisableAxis.demozap.css

@@ -1,7 +1,6 @@
-@import '../ReactParallaxTilt.scss';
+@import '../ReactParallaxTilt.css';
 
 .tilt-disable-axis {
-  @include background;
   display: flex;
   flex-direction: column;
   justify-content: center;