@unsass/selector 1.0.0-beta.2 → 1.1.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.0](https://github.com/unsass/selector/compare/v1.0.0...v1.1.0) (2023-03-20)
+
+
+### Features
+
+* use `@unsass/string` instead of specific function ([af2dd21](https://github.com/unsass/selector/commit/af2dd217a4acea2e2734037749b010f2d73f02ff))
+
+## 1.0.0 (2022-08-31)
+
+
+### Features
+
+* add `media` mixin ([2ce8316](https://github.com/unsass/selector/commit/2ce8316b44004a38f3c77c663b536510bf435983))
+* add mixins and functions ([729e708](https://github.com/unsass/selector/commit/729e70868e8688656b89ec2ff9bf3b5fe598510b))
+
 ## [1.0.0-beta.2](https://github.com/unsass/selector/compare/v1.0.0-beta.1...v1.0.0-beta.2) (2022-08-27)
 
 

package/README.md

@@ -13,3 +13,29 @@ Sass functions and mixins to manage CSS selectors.
 ```shell
 npm install @unsass/selector
 ```
+
+## Usage
+
+```scss
+@use "@unsass/selector";
+
+@include selector.create("foo") {
+    color: darkcyan;
+}
+```
+
+### Result
+
+```css
+.foo {
+    color: darkcyan;
+}
+```
+
+## API
+
+### Sass mixins
+
+| Mixin                                                                            | Description                                                |
+|----------------------------------------------------------------------------------|------------------------------------------------------------|
+| `create($selector, $scope, $separator, $suffix, $pseudo-class, $pseudo-element)` | Sets new CSS selector with class scope and pseudo options. |

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@unsass/selector",
-    "version": "1.0.0-beta.2",
+    "version": "1.1.0",
     "description": "Sass functions and mixins to manage CSS selectors.",
     "scripts": {
         "lint:css": "stylelint --fix \"**/*.scss\"",
@@ -10,26 +10,29 @@
         "release": "semantic-release"
     },
     "engines": {
-        "node": ">=14.0.0",
+        "node": ">=16.0.0",
         "npm": ">=8.0.0"
     },
     "sass": "index.scss",
     "devDependencies": {
-        "@commitlint/cli": "^17.0.3",
-        "@commitlint/config-conventional": "^17.0.3",
-        "@semantic-release/changelog": "^6.0.1",
+        "@commitlint/cli": "^17.4.4",
+        "@commitlint/config-conventional": "^17.4.4",
+        "@semantic-release/changelog": "^6.0.2",
         "@semantic-release/git": "^10.0.1",
         "glob": "^7.2.0",
-        "husky": "^8.0.1",
-        "jest": "^28.1.3",
+        "husky": "^8.0.3",
+        "jest": "^29.5.0",
+        "jest-environment-node-single-context": "^29.0.0",
+        "jest-junit": "^15.0.0",
         "npm-run-all": "^4.1.5",
-        "sass-true": "^6.1.0",
-        "semantic-release": "^19.0.3",
-        "stylelint": "^14.10.0",
-        "stylelint-config-unsass": "^1.0.0"
+        "sass-true": "^7.0.0",
+        "semantic-release": "^20.1.3",
+        "stylelint": "^15.3.0",
+        "stylelint-config-unsass": "^1.0.1"
     },
     "dependencies": {
-        "@unsass/utilities": "^1.3.1",
+        "@unsass/string": "^1.4.2",
+        "@unsass/types": "^1.0.2",
         "sass": "^1.53.0"
     },
     "keywords": [

package/src/_functions.scss

@@ -16,44 +16,46 @@
 // Public functions
 // ------------------------------------------------------------------------- //
 
+///
+/// @example - scss
+///   $selector: pseudo-class(".foo", "hover");
+///   // ".foo:hover"
+///
+/// @access public
+///
 @function pseudo-class($selector, $pseudo-class) {
     @return selector.append($selector, ":#{$pseudo-class}");
 }
 
+///
+/// @example - scss
+///   $selector: pseudo-class(".foo", "before");
+///   // ".foo::before"
+//
+/// @access public
+///
 @function pseudo-element($selector, $pseudo-element) {
     @return selector.append($selector, "::#{$pseudo-element}");
 }
 
+///
+/// @example - scss
+///   $selector: to-id("foo");
+///   // "#foo"
+//
+/// @access public
+///
 @function to-id($selector) {
     @return "##{$selector}";
 }
 
+///
+/// @example - scss
+///   $selector: to-class("foo");
+///   // ".foo"
+///
+/// @access public
+///
 @function to-class($selector) {
     @return ".#{$selector}";
 }
-
-///
-/// Number.
-///
-@function number($value) {
-    @if meta.type-of($value) == "number" {
-        @return $value;
-    } @else if meta.type-of($value) != "string" {
-        @error "Invalid string type for `#{$value}` value. Use string type instead.";
-    }
-
-    $numbers: (
-        "0": 0,
-        "1": 1,
-        "2": 2,
-        "3": 3,
-        "4": 4,
-        "5": 5,
-        "6": 6,
-        "7": 7,
-        "8": 8,
-        "9": 9
-    );
-
-    @return map.get($numbers, $value);
-}

package/src/_mixins.scss

@@ -4,13 +4,13 @@
 
 @use "sass:meta";
 @use "sass:selector";
-@use "sass:string";
-@use "@unsass/utilities";
+@use "@unsass/string";
+@use "@unsass/types" as type;
 @use "./functions";
 
 ///
 /// @example - scss
-///   @include create("foo") {
+///   @include selector.create("foo") {
 ///     color: darkcyan;
 ///   }
 ///
@@ -20,7 +20,7 @@
 ///   }
 ///
 /// @example - scss
-///   @include create("foo", "md") {
+///   @include selector.create("foo", "md") {
 ///     color: darkcyan;
 ///   }
 ///
@@ -30,7 +30,7 @@
 ///   }
 ///
 /// @example - scss
-///   @include create("foo", $pseudo-class: "hover") {
+///   @include selector.create("foo", $pseudo-class: "hover") {
 ///     color: darkcyan;
 ///   }
 ///
@@ -40,7 +40,7 @@
 ///   }
 ///
 /// @example - scss
-///   @include create("foo", $pseudo-element: "before") {
+///   @include selector.create("foo", $pseudo-element: "before") {
 ///     color: darkcyan;
 ///   }
 ///
@@ -58,8 +58,6 @@
 ///
 /// @see {function} functions.pseudo-class
 /// @see {function} functions.pseudo-element
-/// @see {function} functions.number
-/// @see {function} utilities.string-replace
 ///
 /// @access public
 ///
@@ -91,8 +89,8 @@
     ///
 
     @if $scope and not $suffix {
-        @if meta.type-of(functions.number(string.slice($scope, 1, $end-at: 1))) == "number" {
-            $scope: utilities.string-replace(\3 #{string.unquote($scope)}, " ");
+        @if type.is-number(string.to-number(string.slice($scope, 1, $end-at: 1))) {
+            $scope: string.replace(\3 #{string.unquote($scope)}, " ");
         }
 
         $selector: selector.append("#{$scope}\\#{$separator}", $selector);