@unsass/selector 1.0.0 → 1.2.0

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.0](https://github.com/unsass/selector/compare/v1.1.0...v1.2.0) (2023-03-20)
+
+
+### Features
+
+* allow `&` nesting selector ([20d12a2](https://github.com/unsass/selector/commit/20d12a2302e8a8c31a60e19094bbeb2aa16af1b1))
+
+
+### Code Refactoring
+
+* add better error messages ([6ae5295](https://github.com/unsass/selector/commit/6ae529558dc230a0cdf7677b7fa226e2270e5436))
+* removed unneeded sass import ([b817859](https://github.com/unsass/selector/commit/b817859233c967a78f0fba7752cbaedda112abff))
+
+## [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)
 
 

package/README.md

@@ -13,3 +13,131 @@ Sass functions and mixins to manage CSS selectors.
 ```shell
 npm install @unsass/selector
 ```
+
+## Usage
+
+```scss
+@use "@unsass/selector";
+
+@include selector.create("foo", "md") {
+    color: darkcyan;
+}
+```
+
+### Result
+
+```css
+.md\:foo {
+    color: darkcyan;
+}
+```
+
+## API
+
+| Mixin                                                                                   | Description                                                |
+|-----------------------------------------------------------------------------------------|------------------------------------------------------------|
+| `create($selector, $scope, $separator, $suffix, $pseudo-class, $pseudo-element, $root)` | Sets new CSS selector with class scope and pseudo options. |
+
+### `$separator`
+
+Define your own scope separator character.
+
+```scss
+@use "@unsass/selector";
+
+@include selector.create("foo", "md", "@") {
+    color: darkcyan;
+}
+```
+
+### Result
+
+```css
+.md\@foo {
+    color: darkcyan;
+}
+```
+
+### `$suffix`
+
+Define the scope value has a prefix on selector.
+
+```scss
+@use "@unsass/selector";
+
+@include selector.create("foo", "md", $suffix: true) {
+    color: darkcyan;
+}
+```
+
+### Result
+
+```css
+.foo\:md {
+    color: darkcyan;
+}
+```
+
+### `$pseudo-class`
+
+Define the pseudo class suffix.
+
+```scss
+@use "@unsass/selector";
+
+@include selector.create("foo", "hover", $pseudo-class: "hover") {
+    color: darkcyan;
+}
+```
+
+### Result
+
+```css
+.hover\:foo:hover {
+    color: darkcyan;
+}
+```
+
+### `$pseudo-element`
+
+Define the pseudo element suffix.
+
+```scss
+@use "@unsass/selector";
+
+@include selector.create("foo", "before", $pseudo-element: "before") {
+    color: darkcyan;
+}
+```
+
+### Result
+
+```css
+.before\:foo::before {
+    color: darkcyan;
+}
+```
+
+### `$root`
+
+Wrap the selector with `@at-root` rule before code output.
+
+```scss
+@use "@unsass/selector";
+
+.foo {
+    .bar {
+        @include selector.create(&, "md", $root: true) {
+            color: darkcyan;
+        }
+    }
+}
+```
+
+### Result
+
+```css
+.md\:foo .bar {
+    color: darkcyan;
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@unsass/selector",
-    "version": "1.0.0",
+    "version": "1.2.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

@@ -59,29 +59,3 @@
 @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

@@ -2,15 +2,15 @@
 //                                            MIXINS                                             //
 // ============================================================================================= //
 
-@use "sass:meta";
+@use "sass:list";
 @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,16 +58,17 @@
 ///
 /// @see {function} functions.pseudo-class
 /// @see {function} functions.pseudo-element
-/// @see {function} functions.number
-/// @see {function} utilities.string-replace
 ///
 /// @access public
 ///
-@mixin create($selector, $scope: null, $separator: ":", $suffix: false, $pseudo-class: null, $pseudo-element: null) {
-    @if ($pseudo-class and $suffix) or ($pseudo-element and $suffix) {
-        @error "You cannot add a suffix with a selector that already has a pseudo-class or a pseudo-element."
+@mixin create($selector, $scope: null, $separator: ":", $suffix: false, $pseudo-class: null, $pseudo-element: null, $root: false) {
+    @if $pseudo-class and $suffix {
+        @error "You cannot add a suffix with a selector that already has a pseudo-class."
+    } @else if $pseudo-element and $suffix {
+        @error "You cannot add a suffix with a selector that already has a pseudo-element."
     }
 
+    $selector: if(type.is-list($selector), "#{list.nth($selector, 1)}", $selector);
     $class-selector: string.slice($selector, 1, 1)  == ".";
 
     @if $class-selector {
@@ -80,9 +81,7 @@
 
     @if $pseudo-class {
         $selector: functions.pseudo-class($selector, $pseudo-class);
-    }
-
-    @if $pseudo-element {
+    } @else if $pseudo-element {
         $selector: functions.pseudo-element($selector, $pseudo-element);
     }
 
@@ -91,8 +90,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);
@@ -106,8 +105,16 @@
     /// Set selector.
     ///
 
-    #{functions.to-class($selector)} {
-        @content;
+    $selector: functions.to-class($selector);
+
+    @if $root {
+        @at-root #{$selector} {
+            @content;
+        }
+    } @else {
+        #{$selector} {
+            @content;
+        }
     }
 }