@unsass/selector 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.0](https://github.com/unsass/selector/compare/v1.2.0...v1.3.0) (2023-09-11)
+
+
+### Features
+
+* **create:** add list option for `$scope` parameter ([ebd78c1](https://github.com/unsass/selector/commit/ebd78c1705a2271b4d8bad8b2441936abc928284))
+
+
+### Build System
+
+* **deps:** bump to `sass` 1.66.1 ([b9ff3d5](https://github.com/unsass/selector/commit/b9ff3d5ccad6ab1a5fba427cfdc753a09f50418d))
+* **deps:** prevent dependencies vulnerabilities ([610177d](https://github.com/unsass/selector/commit/610177d035c8d255e836846fe4a5b7c9be932c08))
+
+## [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)
 
 

package/README.md

@@ -19,7 +19,7 @@ npm install @unsass/selector
 ```scss
 @use "@unsass/selector";
 
-@include selector.create("foo") {
+@include selector.create("foo", "md") {
     color: darkcyan;
 }
 ```
@@ -27,15 +27,117 @@ npm install @unsass/selector
 ### Result
 
 ```css
-.foo {
+.md\:foo {
     color: darkcyan;
 }
 ```
 
 ## API
 
-### Sass mixins
+| 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
 
-| Mixin                                                                            | Description                                                |
-|----------------------------------------------------------------------------------|------------------------------------------------------------|
-| `create($selector, $scope, $separator, $suffix, $pseudo-class, $pseudo-element)` | Sets new CSS selector with class scope and pseudo options. |
+```css
+.md\:foo .bar {
+    color: darkcyan;
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@unsass/selector",
-    "version": "1.1.0",
+    "version": "1.3.0",
     "description": "Sass functions and mixins to manage CSS selectors.",
     "scripts": {
         "lint:css": "stylelint --fix \"**/*.scss\"",
@@ -15,9 +15,9 @@
     },
     "sass": "index.scss",
     "devDependencies": {
-        "@commitlint/cli": "^17.4.4",
-        "@commitlint/config-conventional": "^17.4.4",
-        "@semantic-release/changelog": "^6.0.2",
+        "@commitlint/cli": "^17.7.1",
+        "@commitlint/config-conventional": "^17.7.0",
+        "@semantic-release/changelog": "^6.0.3",
         "@semantic-release/git": "^10.0.1",
         "glob": "^7.2.0",
         "husky": "^8.0.3",
@@ -26,14 +26,14 @@
         "jest-junit": "^15.0.0",
         "npm-run-all": "^4.1.5",
         "sass-true": "^7.0.0",
-        "semantic-release": "^20.1.3",
+        "semantic-release": "^21.1.1",
         "stylelint": "^15.3.0",
         "stylelint-config-unsass": "^1.0.1"
     },
     "dependencies": {
         "@unsass/string": "^1.4.2",
         "@unsass/types": "^1.0.2",
-        "sass": "^1.53.0"
+        "sass": "^1.66.1"
     },
     "keywords": [
         "sass",

package/src/_mixins.scss

@@ -2,7 +2,7 @@
 //                                            MIXINS                                             //
 // ============================================================================================= //
 
-@use "sass:meta";
+@use "sass:list";
 @use "sass:selector";
 @use "@unsass/string";
 @use "@unsass/types" as type;
@@ -50,7 +50,7 @@
 ///   }
 ///
 /// @param {string} $selector - Selector name.
-/// @param {string} $scope - Selector affix value.
+/// @param {string, list} $scope - Selector affix value.
 /// @param {string} $separator - Selector affix separator.
 /// @param {string} $pseudo-class - Selector pseudo-class.
 /// @param {string} $pseudo-element - Selector pseudo-element.
@@ -61,11 +61,14 @@
 ///
 /// @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 {
@@ -78,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);
     }
 
@@ -89,23 +90,55 @@
     ///
 
     @if $scope and not $suffix {
-        @if type.is-number(string.to-number(string.slice($scope, 1, $end-at: 1))) {
-            $scope: string.replace(\3 #{string.unquote($scope)}, " ");
+        $class: "";
+
+        @if type.is-list($scope) {
+            @each $key in $scope {
+                @if type.is-number(string.to-number(string.slice($key, 1, $end-at: 1))) {
+                    $key: string.replace(\3 #{string.unquote($key)}, " ");
+                }
+
+                $class: $class + "#{$key}\\#{$separator}";
+            }
+        } @else {
+            @if type.is-number(string.to-number(string.slice($scope, 1, $end-at: 1))) {
+                $scope: string.replace(\3 #{string.unquote($scope)}, " ");
+            }
+
+            $class: "#{$scope}\\#{$separator}";
         }
 
-        $selector: selector.append("#{$scope}\\#{$separator}", $selector);
+        $selector: selector.append($class, $selector);
     }
 
     @if $scope and $suffix {
-        $selector: selector.append($selector, "\\#{$separator}#{$scope}");
+        $class: "";
+
+        @if type.is-list($scope) {
+            @each $key in $scope {
+                $class: $class + "\\#{$separator}#{$key}";
+            }
+        } @else {
+            $class: "\\#{$separator}#{$scope}";
+        }
+
+        $selector: selector.append($selector, $class);
     }
 
     ///
     /// Set selector.
     ///
 
-    #{functions.to-class($selector)} {
-        @content;
+    $selector: functions.to-class($selector);
+
+    @if $root {
+        @at-root #{$selector} {
+            @content;
+        }
+    } @else {
+        #{$selector} {
+            @content;
+        }
     }
 }