@unsass/selector 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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)
 
 

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.2.0",
     "description": "Sass functions and mixins to manage CSS selectors.",
     "scripts": {
         "lint:css": "stylelint --fix \"**/*.scss\"",

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;
@@ -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);
     }
 
@@ -104,8 +105,16 @@
     /// Set selector.
     ///
 
-    #{functions.to-class($selector)} {
-        @content;
+    $selector: functions.to-class($selector);
+
+    @if $root {
+        @at-root #{$selector} {
+            @content;
+        }
+    } @else {
+        #{$selector} {
+            @content;
+        }
     }
 }