[IMP] Separate Smooth Scrolling into Separate Import

.changeset/new-buttons-tap.md

@@ -0,0 +1,5 @@
+---
+'css-preflight': minor
+---
+
+Separate out smooth scrolling into its own import

README.md

@@ -50,14 +50,14 @@ import 'css-preflight'; // styles/preflight.css
 import 'css-preflight/preflight'; // ALIAS: styles/preflight.css
 
 import 'css-preflight/enhancements'; // styles/enhancements.css
-
+import 'css-preflight/smooth-scroll'; // styles/smooth-scroll.css
 import 'css-preflight/rem-same-px'; // styles/rem-same-px.css
 ```
 
 #### Typical Setup
 
 ```javascript
-import 'css-preflight/preflight';
+import 'css-preflight';
 import 'css-preflight/enhancements';
 ```
 
@@ -71,9 +71,12 @@ Both are exactly the same.
 
 These are small enhancements added to the main preflight:
 
-- Enables smooth scrolling to anchor points (e.g. #about). Disabled for `prefers-reduced-motion`.
 - Adds `text-wrap: balance` on h1-h6 and blockquote. Helps prevent hanging words on newlines.
 
+### Smooth Scroll
+
+Enables smooth scrolling to anchor points (e.g. #about). Disabled for `prefers-reduced-motion`.
+
 ### Rem Same Px
 
 Sets rem equal to 1px at the root for easier design-dev handoff. This calculation is done

package.json

@@ -34,6 +34,7 @@
     ".": "./styles/preflight.css",
     "./preflight": "./styles/preflight.css",
     "./enhancements": "./styles/enhancements.css",
+    "./smooth-scroll": "./styles/smooth-scroll.css",
     "./rem-same-px": "./styles/rem-same-px.css"
   },
   "files": [

styles/enhancements.css

@@ -1,18 +1,3 @@
-/*
-  Adds smooth scrolling when a user is navigated to an
-  anchor on a page.
-*/
-
-:root {
-  scroll-behavior: smooth;
-}
-
-@media (prefers-reduced-motion) {
-  :root {
-    scroll-behavior: auto;
-  }
-}
-
 /*
   Helps prevent single words on a newline,
   which can make a title seem unbalanced.

styles/smooth-scroll.css

@@ -0,0 +1,14 @@
+/*
+  Adds smooth scrolling when a user is navigated to an
+  anchor on a page.
+*/
+
+:root {
+  scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion) {
+  :root {
+    scroll-behavior: auto;
+  }
+}