@cycjimmy/sass-lib 3.0.1 → 5.0.0

package/README.md

@@ -1,6 +1,6 @@
 # sass-lib
 
-![][workflows-badge-image]
+![Test CI workflow status][workflows-badge-image]
 [![libraries dependency status][libraries-status-image]][libraries-status-url]
 [![libraries sourcerank][libraries-sourcerank-image]][libraries-sourcerank-url]
 [![Release date][release-date-image]][release-url]
@@ -21,11 +21,38 @@ $ npm install @cycjimmy/sass-lib --save
 $ yarn add @cycjimmy/sass-lib
 ```
 
+## Requirements
+
+- Dart Sass >= 1.80.0 (module system only, `@import` is not supported)
+
 ## Usage
+
 ```scss
-@use '~@cycjimmy/sass-lib' as sass-lib;
+// Native Dart Sass (enable the node package importer first:
+// `sass --pkg-importer=node` or `importers: [new sass.NodePackageImporter()]`)
+@use 'pkg:@cycjimmy/sass-lib' as *;
+
+// Vite and other bundlers that resolve bare specifiers
+@use '@cycjimmy/sass-lib' as *;
+
+// webpack sass-loader
+@use '~@cycjimmy/sass-lib' as *;
 ```
 
+Entry points (prefix with `pkg:` for the native Dart Sass importer):
+
+```scss
+@use '@cycjimmy/sass-lib/functions/index' as fn;
+@use '@cycjimmy/sass-lib/mixins/index' as mx;
+@use '@cycjimmy/sass-lib/placeholders/index' as *;
+@use '@cycjimmy/sass-lib/reset/h5';
+@use '@cycjimmy/sass-lib/reset/special';
+```
+
+## Development
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for the local toolchain, repository settings and bot configuration.
+
 <!-- Links: -->
 [npm-image]: https://img.shields.io/npm/v/@cycjimmy/sass-lib
 [npm-url]: https://npmjs.org/package/@cycjimmy/sass-lib

package/functions/index.scss

@@ -4,7 +4,7 @@
  * strip units
  */
 @function strip-units($number) {
-  @return $number / ($number * 0 + 1);
+  @return math.div($number, $number * 0 + 1);
 }
 
 
@@ -14,31 +14,27 @@
  * $designDrawingWidth
  *
  * Usage:
- * @function calc-vw($designDrawingLength:0) {
- *   @return call(get_function("design-px2vw"), $designDrawingLength, $designDrawingWidth);
+ * .selector {
+ *   width: design-px2vw(750);
  * }
  */
-@function design-px2vw($designDrawingLength:0, $designDrawingWidth:750) {
-  @return strip-units($designDrawingLength) / strip-units($designDrawingWidth) * 100vw;
+@function design-px2vw($designDrawingLength: 0, $designDrawingWidth: 750) {
+  @return math.div(strip-units($designDrawingLength), strip-units($designDrawingWidth)) * 100vw;
 }
 
 /**
  * design-px2px
  * $designDrawingLength
  * $designDrawingWidth
+ * $pcRootWidth
  *
  * Usage:
- * @function calc-px($designDrawingLength:0) {
- *   @return call(
- *     get_function("design-px2px"),
- *     $designDrawingLength,
- *     $designDrawingWidth,
- *     $pcRootWidth,
- *   );
+ * .selector {
+ *   width: design-px2px(750, 750, 500);
  * }
  */
-@function design-px2px($designDrawingLength:0, $designDrawingWidth:750, $pcRootWidth:500) {
-  @return math.round(strip-units($designDrawingLength)
-  / strip-units($designDrawingWidth)
-  * strip-units($pcRootWidth)) * 1px;
+@function design-px2px($designDrawingLength: 0, $designDrawingWidth: 750, $pcRootWidth: 500) {
+  @return math.round(
+    math.div(strip-units($designDrawingLength), strip-units($designDrawingWidth)) * strip-units($pcRootWidth)
+  ) * 1px;
 }

package/index.scss

@@ -1,6 +1,3 @@
-@charset "utf-8";
-
-@forward "functions/index";
-@forward "mixins/index";
-@forward "placeholders/index";
-
+@forward 'functions/index';
+@forward 'mixins/index';
+@forward 'placeholders/index';

package/mixins/index.scss

@@ -19,22 +19,26 @@
 ) {
   position: absolute;
   margin: auto;
-  @if ($overwrite == false) {
-    left: $offset;
+
+  @if $overwrite == false {
     top: $offset;
     right: $offset;
     bottom: $offset;
+    left: $offset;
   } @else {
-    @if ($top) {
+    @if $top {
       top: $top;
     }
-    @if ($right) {
+
+    @if $right {
       right: $right;
     }
-    @if ($bottom) {
+
+    @if $bottom {
       bottom: $bottom;
     }
-    @if ($left) {
+
+    @if $left {
       left: $left;
     }
   }
@@ -47,10 +51,11 @@
  * options: false, center, flex-end, ...
  */
 @mixin flex-box-align($mainAxis:false, $crossAxis:false) {
-  @if ($mainAxis != false) {
+  @if $mainAxis != false {
     justify-content: $mainAxis;
   }
-  @if ($crossAxis != false) {
+
+  @if $crossAxis != false {
     align-items: $crossAxis;
   }
 }
@@ -59,19 +64,19 @@
  * square container
  */
 @mixin square-wrap($width:100%) {
-  height: 0;
   width: $width;
+  height: 0;
   padding-bottom: $width;
 }
 
 @mixin square-wrap-vw($vw) {
-  $max: math.round($vw * 16 /9 * 100)/100;
-  $min: math.round($vw * 3 /2 * 100)/100;
+  $max: math.div(math.round(math.div($vw * 16, 9) * 100), 100);
+  $min: math.div(math.round(math.div($vw * 3, 2) * 100), 100);
 
   width: $vw + vw;
-  height: $vw + vw;
   min-width: $min + vh;
   max-width: $max + vh;
+  height: $vw + vw;
   min-height: $min + vh;
   max-height: $max + vh;
 }

package/package.json

@@ -1,21 +1,32 @@
 {
   "name": "@cycjimmy/sass-lib",
-  "version": "3.0.1",
-  "description": "Personal collection of sass.",
   "type": "module",
-  "main": "index.scss",
+  "version": "5.0.0",
+  "description": "Personal collection of sass.",
+  "sass": "index.scss",
+  "author": "cycjimmy <cycjimmy@gmail.com> (https://github.com/cycjimmy)",
+  "license": "MIT",
+  "homepage": "https://github.com/cycjimmy/sass-lib#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cycjimmy/sass-lib.git"
   },
+  "bugs": {
+    "url": "https://github.com/cycjimmy/sass-lib/issues"
+  },
   "keywords": [
     "collection",
     "sass"
   ],
-  "author": "cycjimmy <cycjimmy@gmail.com> (https://github.com/cycjimmy)",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/cycjimmy/sass-lib/issues"
+  "exports": {
+    ".": {
+      "sass": "./index.scss",
+      "default": "./index.scss"
+    },
+    "./*": "./*"
   },
-  "homepage": "https://github.com/cycjimmy/sass-lib#readme"
+  "main": "index.scss",
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/placeholders/_hiddenScrollbar.scss

@@ -8,15 +8,18 @@
 
 %hidden-scrollbar-x {
   @extend %common-hidden-scrollbar;
+
   overflow-x: auto;
 }
 
 %hidden-scrollbar-y {
   @extend %common-hidden-scrollbar;
+
   overflow-y: auto;
 }
 
 %hidden-scrollbar {
   @extend %common-hidden-scrollbar;
+
   overflow: auto;
 }

package/placeholders/_layout.scss

@@ -4,8 +4,9 @@
 // full-container
 %full-container {
   @extend %abs;
-  left: 0;
+
   top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
 }
@@ -13,6 +14,7 @@
 // flex-center
 %flex-center {
   display: flex;
+
   @include mixins.flex-box-align(center, center);
 }
 
@@ -20,8 +22,8 @@
 %clear-fix {
   &::before,
   &::after {
-    content: ' ';
     display: table;
+    content: ' ';
   }
 
   &::after {

package/reset/h5.scss

@@ -1,15 +1,14 @@
 * {
-  margin: 0;
   padding: 0;
+  margin: 0;
 }
 
 body {
   overflow: hidden;
-  user-select: none;
-  -webkit-touch-callout: none;
   -webkit-overflow-scrolling: touch;
-
   text-size-adjust: 100%;
+  -webkit-touch-callout: none;
+  user-select: none;
 }
 
 h1,
@@ -25,16 +24,16 @@ h6 {
 a,
 button,
 input {
-  -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
-  outline: none;
   border: 0;
-  touch-action: manipulation;
   cursor: pointer;
+  outline: none;
+  -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
+  touch-action: manipulation;
 }
 
 a {
-  text-decoration: none;
   color: inherit;
+  text-decoration: none;
 }
 
 a,

package/reset/special.scss

@@ -21,14 +21,14 @@ h3,
 h4,
 h5,
 h6 {
-  margin: 0;
   padding: 0;
+  margin: 0;
 }
 
 body {
-  -webkit-touch-callout: none;
-  text-size-adjust: 100%;
   -webkit-overflow-scrolling: touch;
+  text-size-adjust: 100%;
+  -webkit-touch-callout: none;
 }
 
 h1,
@@ -44,15 +44,15 @@ h6 {
 a,
 button,
 input {
-  -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
-  outline: none;
   border: 0;
+  outline: none;
+  -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
   touch-action: manipulation;
 }
 
 a {
-  text-decoration: none;
   color: inherit;
+  text-decoration: none;
 }
 
 a,
@@ -73,8 +73,8 @@ iframe,
 object,
 audio,
 video {
-  height: auto;
   max-width: 100%;
+  height: auto;
 }
 
 // Iframe