bundle recommended CSS

README.md

@@ -70,7 +70,7 @@ function raf(time) {
 requestAnimationFrame(raf)
 ```
 
-Add the following CSS to your project:
+#### Recommended CSS:
 
 ```css
 html.lenis, html.lenis body {
@@ -94,6 +94,18 @@ html.lenis, html.lenis body {
 }
 ```
 
+or link the CSS file:
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/lenis@1.1.5/dist/lenis.css">
+```
+
+or import it:
+
+```js
+import 'lenis/dist/lenis.css'
+```
+
 ### GSAP ScrollTrigger:
 ```js
 const lenis = new Lenis()

dist/style.css

@@ -0,0 +1,20 @@
+html.lenis,
+html.lenis body {
+  height: auto;
+}
+
+.lenis.lenis-smooth {
+  scroll-behavior: auto !important;
+}
+
+.lenis.lenis-smooth [data-lenis-prevent] {
+  overscroll-behavior: contain;
+}
+
+.lenis.lenis-stopped {
+  overflow: hidden;
+}
+
+.lenis.lenis-smooth iframe {
+  pointer-events: none;
+}

packages/core/package.json

@@ -2,7 +2,7 @@
   "name": "lenis",
   "scripts": {
     "build": "rollup --bundleConfigAsCjs -c",
-    "postbuild": "shx rm -rf ./dist/types/ && shx cp -r ./dist/* ../../dist",
+    "postbuild": "shx rm -rf ./dist/types/ && shx cp -r ./src/style.css ./dist && shx cp -r ./dist/* ../../dist",
     "dev": "npm-run-all --parallel watch playground",
     "watch": "rollup --bundleConfigAsCjs -c -w",
     "playground": "npm run dev --prefix ./playground"

packages/core/src/style.css

@@ -0,0 +1,20 @@
+html.lenis,
+html.lenis body {
+  height: auto;
+}
+
+.lenis.lenis-smooth {
+  scroll-behavior: auto !important;
+}
+
+.lenis.lenis-smooth [data-lenis-prevent] {
+  overscroll-behavior: contain;
+}
+
+.lenis.lenis-stopped {
+  overflow: hidden;
+}
+
+.lenis.lenis-smooth iframe {
+  pointer-events: none;
+}