@cycjimmy/sass-lib 3.0.0 → 4.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,9 +21,32 @@ $ 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
+// 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' as sass-lib;
+@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';
 ```
 
 <!-- Links: -->

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,28 @@
  * $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

@@ -65,8 +65,8 @@
 }
 
 @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;

package/package.json

@@ -1,21 +1,29 @@
 {
   "name": "@cycjimmy/sass-lib",
-  "version": "3.0.0",
-  "description": "Personal collection of sass.",
   "type": "module",
-  "main": "index.scss",
+  "version": "4.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"
 }

package/placeholders/{layout.scss → _layout.scss}

@@ -1,5 +1,5 @@
-@import '../mixins/index';
-@import 'position';
+@use '../mixins/index' as mixins;
+@use 'position' as *;
 
 // full-container
 %full-container {
@@ -13,7 +13,7 @@
 // flex-center
 %flex-center {
   display: flex;
-  @include flex-box-align(center, center);
+  @include mixins.flex-box-align(center, center);
 }
 
 // clear-fix

package/placeholders/index.scss

@@ -1,7 +1,7 @@
 @forward 'position';
 @forward 'layout';
-@forward 'text-overflow';
-@forward 'hidden-scrollbar';
+@forward 'textOverflow';
+@forward 'hiddenScrollbar';
 
 // gpu-speed-up
 %gpu-speed-up {