@razerspine/pug-ui-kit 1.2.2 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## [1.3.1] - 2026-02-11
+
+### Fixed
+- Fixed broken SCSS imports caused by incorrect "exports" configuration in v1.3.0.
+- Restored compatibility with sass-loader and webpack.
+
+## [1.3.0] - 2026-02-11
+
+### Added
+- **Production CSS build pipeline**
+  - Compiles SCSS into `style/style.css`
+  - Generates minified version `style/style.min.css`
+  - Adds vendor prefixes via PostCSS + Autoprefixer
+- **New build scripts**
+  - `clean`
+  - `build:css`
+  - `build:postcss`
+  - `build` (full pipeline)
+- **Distributable CSS output**
+  - Users can now import compiled CSS directly:
+    ```scss
+    @import "@razerspine/pug-ui-kit/style/style.min.css";
+    ```
+
+### Changed
+- Migrated SCSS utilities to modern Dart Sass syntax
+  - Replaced deprecated global built-in functions
+  - Removed deprecated `if()` Sass function usage
+  - Updated `map-get` → `map.get`
+- Improved forward-compatibility with Dart Sass 3.0+
+
+### Notes
+- No breaking changes.
+- Existing SCSS/LESS usage remains fully supported.
+- CSS build output is optional — advanced users can still consume SCSS/LESS sources directly.
+
+
 ## [1.2.2] - 2026-02-08
 
 ### Added

package/README.md

@@ -11,11 +11,57 @@ This package is automatically included in templates generated via the CLI. To in
 npm install @razerspine/pug-ui-kit
 ```
 
-## 🛠 Webpack Configuration
+## 🎨 Styling Options
 
-### 1. Webpack (Pug Mixins)
+You now have **three ways** to use the styles:
 
-To avoid complex relative paths, use the includePaths provided by the package:
+### 1. Use compiled production CSS (Recommended for simple setups)
+
+Fully prefixed and minified:
+```scss
+@import "@razerspine/pug-ui-kit/style/style.min.css";
+```
+
+Non-minified version:
+```scss
+@import "@razerspine/pug-ui-kit/style/style.css";
+```
+- ✔ Includes vendor prefixes
+- ✔ Cross-browser ready
+- ✔ No Sass setup required
+
+### 2. Use SCSS (Advanced / Customizable)
+
+```scss
+@use "@razerspine/pug-ui-kit/scss/ui-kit" as *;
+```
+
+If overriding settings:
+
+```scss
+@use "@razerspine/pug-ui-kit/scss/settings" with (
+  $font-path: "/my-custom-path/fonts"
+);
+
+@use "@razerspine/pug-ui-kit/scss/ui-kit" as *;
+```
+
+### 3. Use LESS
+
+```less
+@import "@razerspine/pug-ui-kit/less/ui-kit";
+```
+
+Override font path:
+
+```less
+@font-path: "/my-custom-path/fonts";
+@import "@razerspine/pug-ui-kit/less/ui-kit";
+```
+
+## 🛠 Webpack Configuration (Pug Mixins)
+
+To avoid complex relative paths:
 
 ```js
 const uiKit = require('@razerspine/pug-ui-kit');
@@ -31,27 +77,12 @@ module.exports = {
 };
 ```
 
-### 2. Styles (SCSS/LESS)
-The package provides full styling for all components.
-If you only need specific parts (e.g., just variables and the table), you can import them individually.
-
-Note: Always import settings first, as other components depend on them.
-
-#### For SCSS:
-
-```scss
-// In your main.scss
-@use "@razerspine/pug-ui-kit/scss/ui-kit" as *;
-```
-
-#### For LESS:
-
-```less
-// In your main.less
-@import "@razerspine/pug-ui-kit/less/ui-kit";
+Then:
+```pug
+include ~pug-ui-kit/btn.pug
 ```
 
-## 🚀 Usage
+## 🚀 Usage Examples
 
 #### Button
 
@@ -389,7 +420,9 @@ include ~pug-ui-kit/single-select.pug
 
 * mixins/ - reusable Pug components. 
 * scss/ - complete SCSS kit (Settings, Components, Themes, Layout). 
-* less/ - complete LESS version for alternative workflows. 
+* less/ - complete LESS version for alternative workflows.
+* style/    → Compiled CSS output (since v1.3.0)
+* fonts/    → Roboto font family
 * index.js - path resolution helper.
 
 ## 🧱 Components Included
@@ -402,5 +435,17 @@ include ~pug-ui-kit/single-select.pug
 * input-radio.pug
 * single-select.pug
 
+## ⚙ Build (for contributors)
+
+```bash
+npm run build
+```
+
+**This will:**
+
+- Compile SCSS
+- Run PostCSS + Autoprefixer
+- Generate minified CSS
+
 ## 📄 License
 This project is licensed under the ISC License.

package/index.js

@@ -5,6 +5,7 @@ module.exports = {
     fonts: path.join(__dirname, 'fonts'),
     scss: path.join(__dirname, 'scss'),
     less: path.join(__dirname, 'less'),
+    style: path.join(__dirname, 'style'),
     mixins: path.join(__dirname, 'mixins')
   },
   // helper

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@razerspine/pug-ui-kit",
-  "version": "1.2.2",
+  "version": "1.3.1",
   "description": "Shared Pug mixins for Webpack Starter templates",
   "keywords": [
     "pug",
@@ -8,21 +8,25 @@
     "mixins"
   ],
   "main": "index.js",
+  "style": "style/style.min.css",
   "files": [
     "mixins",
     "fonts",
     "scss",
     "less",
+    "style",
     "index.js",
     "README.md",
     "LICENSE",
     "CHANGELOG.md"
   ],
   "scripts": {
-    "build": "echo \"pug-ui-kit: nothing to build\""
+    "build:css": "sass scss/ui-kit.scss style/style.css",
+    "build:postcss": "postcss style/style.css --config postcss.config.js --output style/style.min.css",
+    "build": "npm run clean && npm run build:css && npm run build:postcss",
+    "clean": "rm -rf style",
+    "prepublishOnly": "npm run build"
   },
-  "style": "scss/ui-kit.scss",
-  "less": "less/ui-kit.less",
   "author": "Razerspine",
   "repository": {
     "type": "git",
@@ -36,5 +40,17 @@
   "license": "ISC",
   "publishConfig": {
     "access": "public"
+  },
+  "browserslist": [
+    ">0.5%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "devDependencies": {
+    "sass": "^1.77.0",
+    "postcss": "^8.4.38",
+    "postcss-cli": "^11.0.0",
+    "autoprefixer": "^10.4.19",
+    "cssnano": "^6.1.2"
   }
 }

package/scss/components/_aside.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use '../settings/index' as *;
 
 .aside {
@@ -5,7 +6,7 @@
   display: flex;
   justify-content: flex-start;
   padding: 0 $gutter;
-  @media screen and (min-width: map-get($breakpoints, lg)) {
+  @media screen and (min-width: map.get($breakpoints, lg)) {
     padding: 0;
   }
 }
@@ -16,7 +17,7 @@
   border-radius: $border-radius;
   padding: $gutter;
   width: 100%;
-  @media screen and (min-width: map-get($breakpoints, lg)) {
+  @media screen and (min-width: map.get($breakpoints, lg)) {
     padding: calc($gutter * 2);
   }
 }

package/scss/components/_forms.scss

@@ -1,8 +1,9 @@
+@use "sass:map";
 @use '../settings/index' as *;
 
 .form-group {
   margin-bottom: .75rem;
-  @media screen and (min-width: map-get($breakpoints, lg)) {
+  @media screen and (min-width: map.get($breakpoints, lg)) {
     margin-bottom: 1rem;
   }
 

package/scss/components/_main.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use '../settings/index' as *;
 
 .main {
@@ -6,7 +7,7 @@
   justify-content: flex-start;
   padding: 0 $gutter;
   overflow: hidden;
-  @media screen and (min-width: map-get($breakpoints, lg)) {
+  @media screen and (min-width: map.get($breakpoints, lg)) {
     padding: 0;
   }
 
@@ -17,7 +18,7 @@
     width: 100%;
     min-height: 100%;
     padding: $gutter;
-    @media screen and (min-width: map-get($breakpoints, lg)) {
+    @media screen and (min-width: map.get($breakpoints, lg)) {
       padding: calc($gutter * 2);
     }
   }

package/scss/layout/_layout.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use '../settings/index' as *;
 
 .layout {
@@ -14,7 +15,7 @@
   font-size: $base-font-size;
   font-weight: 400;
   line-height: 1.5;
-  @media screen and (min-width: map-get($breakpoints, lg)) {
+  @media screen and (min-width: map.get($breakpoints, lg)) {
     grid-template-areas:
       'header header header header'
       'gutter-left aside main gutter-right'

package/scss/utils/_helpers.scss

@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "sass:meta";
+
 $space-scale: (
         0: 0,
         1: 4px,
@@ -10,9 +13,9 @@ $space-scale: (
 );
 
 @function space($key) {
-  @return map-get($space-scale, $key);
+  @return map.get($space-scale, $key);
 }
 
 @function suf($k) {
-  @return if(type-of($k) == 'number', $k, $k);
+  @return $k;
 }

package/scss/utils/_mixins.scss

@@ -1,7 +1,8 @@
+@use "sass:map";
 @use '../settings/index' as *;
 
 @function breakpoint($key) {
-  @return map-get($breakpoints, $key);
+  @return map.get($breakpoints, $key);
 }
 
 @mixin respond-to($key) {

package/scss/utils/_utilities.scss

@@ -1,5 +1,7 @@
 @use 'sass:math';
 @use 'helpers';
+@use "sass:map";
+@use "sass:meta";
 
 // SPACING utilities: m- p- (margin/padding) with directions
 $space-map: (0: 0rem, 1: 0.5rem, 2: 1rem, 3: 1.5rem, 4: 2rem);
@@ -7,8 +9,8 @@ $directions: ("" : "", t: "-top", r: "-right", b: "-bottom", l: "-left", x: ("-l
 $scales: 0 1 2 3 4;
 
 @function helpers-space($key) {
-  @if map-has-key($space-map, $key) {
-    @return map-get($space-map, $key);
+  @if map.has-key($space-map, $key) {
+    @return map.get($space-map, $key);
   } @else {
     @warn "Unknown spacing key `#{$key}`. Returning 0rem.";
     @return 0rem;
@@ -17,33 +19,45 @@ $scales: 0 1 2 3 4;
 
 @each $d, $prop in $directions {
   @each $s in $scales {
-    // Margin class
-    $m-class: if($d == "", ".m-#{$s}", ".m-#{$d}-#{$s}");
-    #{$m-class} {
-      @if $d == "" {
+
+    // =====================
+    // Margin
+    // =====================
+    @if $d == "" {
+      .m-#{$s} {
         margin: helpers-space($s);
-      } @else if type-of($prop) == 'list' {
-        @each $p in $prop {
-          margin#{$p}: helpers-space($s);
+      }
+    } @else {
+      .m-#{$d}-#{$s} {
+        @if meta.type-of($prop) == 'list' {
+          @each $p in $prop {
+            margin#{$p}: helpers-space($s);
+          }
+        } @else {
+          margin#{$prop}: helpers-space($s);
         }
-      } @else {
-        margin#{$prop}: helpers-space($s);
       }
     }
 
-    // Padding class
-    $p-class: if($d == "", ".p-#{$s}", ".p-#{$d}-#{$s}");
-    #{$p-class} {
-      @if $d == "" {
+    // =====================
+    // Padding
+    // =====================
+    @if $d == "" {
+      .p-#{$s} {
         padding: helpers-space($s);
-      } @else if type-of($prop) == 'list' {
-        @each $p in $prop {
-          padding#{$p}: helpers-space($s);
+      }
+    } @else {
+      .p-#{$d}-#{$s} {
+        @if meta.type-of($prop) == 'list' {
+          @each $p in $prop {
+            padding#{$p}: helpers-space($s);
+          }
+        } @else {
+          padding#{$prop}: helpers-space($s);
         }
-      } @else {
-        padding#{$prop}: helpers-space($s);
       }
     }
+
   }
 }