@brady_h/styles 1.0.16 → 1.0.18

package/README.md

@@ -17,33 +17,36 @@ The package provides two ways to use its styling resources:
 - **Sass APIs:** Variables, maps, functions, breakpoints, and mixins.
 - **Utility classes:** Predefined global CSS classes for common styling needs.
 
-### Sass Variables, Functions & Mixins
+### Important: Importing Sass Modules
 
-Import the package into any SCSS file:
+For compatibility with Next.js Turbopack, import each Sass module individually instead of importing the main package entry point.
 
 ```scss
-@use "@brady_h/styles" as *;
-
-.container {
-  @include flex-center;
-
-  @include mobile-query {
-    flex-direction: column;
-  }
-}
+@use "@brady_h/styles/src/variables" as vars;
+@use "@brady_h/styles/src/breakpoints" as bp;
+@use "@brady_h/styles/src/functions" as fn;
+@use "@brady_h/styles/src/mixins" as mixins;
 ```
 
-Using a namespace is also supported:
+You can import only the modules you need.
+
+### Example
 
 ```scss
-@use "@brady_h/styles" as styles;
+@use "sass:map";
+@use "@brady_h/styles/src/variables" as vars;
+@use "@brady_h/styles/src/mixins" as mixins;
+@use "@brady_h/styles/src/functions" as fn;
 
 .container {
-  @include styles.flex-center;
-  padding: styles.to-rem(24px);
+  @include mixins.flex-center;
+  padding: map.get(vars.$spacing, 4);
+  font-size: fn.to-rem(16px);
 }
 ```
 
+Using namespaces helps avoid naming conflicts between your application's Sass resources and the package.
+
 ## Available Features
 
 ### Variables
@@ -70,12 +73,12 @@ Example:
 
 ```scss
 @use "sass:map";
-@use "@brady_h/styles" as *;
+@use "@brady_h/styles/src/variables" as vars;
 
 .card {
-  padding: map.get($spacing, 4);
-  border-radius: map.get($border-radius, md);
-  box-shadow: map.get($box-shadow, md);
+  padding: map.get(vars.$spacing, 4);
+  border-radius: map.get(vars.$border-radius, md);
+  box-shadow: map.get(vars.$box-shadow, md);
 }
 ```
 
@@ -83,6 +86,12 @@ Example:
 
 Responsive breakpoint values and helper functions.
 
+Import:
+
+```scss
+@use "@brady_h/styles/src/breakpoints" as bp;
+```
+
 Default breakpoints:
 
 | Name  |  Width |
@@ -97,12 +106,12 @@ Default breakpoints:
 Example:
 
 ```scss
-@use "@brady_h/styles" as *;
+@use "@brady_h/styles/src/breakpoints" as bp;
 
 .container {
   width: 100%;
 
-  @include respond-up(md) {
+  @include bp.respond-up(md) {
     width: 80%;
   }
 }
@@ -112,6 +121,12 @@ Example:
 
 Reusable styling patterns for common layouts and responsive behavior.
 
+Import:
+
+```scss
+@use "@brady_h/styles/src/mixins" as mixins;
+```
+
 Examples include:
 
 - `flex-center`
@@ -138,11 +153,11 @@ Examples include:
 Example:
 
 ```scss
-@use "@brady_h/styles" as *;
+@use "@brady_h/styles/src/mixins" as mixins;
 
 .card {
-  @include flex-column;
-  @include focus-ring;
+  @include mixins.flex-column;
+  @include mixins.focus-ring;
 }
 ```
 
@@ -150,6 +165,12 @@ Example:
 
 Reusable Sass functions for working with design tokens, units, colors, sizing, and calculations.
 
+Import:
+
+```scss
+@use "@brady_h/styles/src/functions" as fn;
+```
+
 Examples include:
 
 - `to-rem()`
@@ -173,10 +194,10 @@ Examples include:
 Example:
 
 ```scss
-@use "@brady_h/styles" as *;
+@use "@brady_h/styles/src/functions" as fn;
 
 .heading {
-  font-size: to-rem(32px);
+  font-size: fn.to-rem(32px);
 }
 ```
 
@@ -360,7 +381,9 @@ styles/
 
 ## Notes
 
-- Sass variables, functions, breakpoints, and mixins are imported through the main package entry point.
+- Import Sass modules individually using their package paths.
+- Variables, functions, breakpoints, and mixins can be imported independently.
+- Some modules internally depend on other modules.
 - Utility classes must be imported separately into a global stylesheet.
 - Utility classes are globally scoped, not CSS-module scoped.
 - Projects can customize their own colors, fonts, and application-specific design tokens.

package/package.json

@@ -1,21 +1,22 @@
 {
   "name": "@brady_h/styles",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "Shared SCSS styling foundation for projects",
   "license": "MIT",
   "files": [
     "src"
   ],
   "exports": {
-    ".": "./src/_index.scss",
+    ".": "./src/index.scss",
     "./variables": "./src/_variables.scss",
     "./breakpoints": "./src/_breakpoints.scss",
     "./functions": "./src/_functions.scss",
     "./mixins": "./src/_mixins.scss",
     "./classes": "./src/_classes.scss"
   },
-  "sass": "./src/_index.scss",
-  "style": "./src/_index.scss",
+  "main": "./src/index.scss",
+  "sass": "./src/index.scss",
+  "style": "./src/index.scss",
   "scripts": {
     "release:patch": "npm version patch && npm publish --access public",
     "release:minor": "npm version minor && npm publish --access public",

package/src/_functions.scss

@@ -2,8 +2,8 @@
 @use "sass:math";
 @use "sass:map";
 @use "sass:meta";
-@use "./_variables" as vars;
-@use "./_breakpoints" as bp;
+@use "variables" as vars;
+@use "breakpoints" as bp;
 
 @function map-value($collection, $key, $fallback: null) {
   @if not map.has-key($collection, $key) {

package/src/_mixins.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@use "./_breakpoints" as bp;
+@use "breakpoints" as bp;
 
 @mixin respond-down($breakpoint: md) {
   @media (max-width: bp.breakpoint($breakpoint)) {

package/src/index.scss

@@ -0,0 +1,4 @@
+@forward "variables.scss";
+@forward "breakpoints.scss";
+@forward "functions.scss";
+@forward "mixins.scss";

package/src/_index.scss

@@ -1,4 +0,0 @@
-@forward "./variables";
-@forward "./breakpoints";
-@forward "./functions";
-@forward "./mixins";