@unsass/selector 1.0.0-beta.1

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 1.0.0-beta.1 (2022-08-26)
+
+
+### Features
+
+* add mixins and functions ([729e708](https://github.com/unsass/selector/commit/729e70868e8688656b89ec2ff9bf3b5fe598510b))

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 unsass
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,15 @@
+# Selector
+
+[![Version](https://flat.badgen.net/npm/v/@unsass/selector)](https://www.npmjs.com/package/@unsass/selector)
+[![Downloads](https://flat.badgen.net/npm/dt/@unsass/selector)](https://www.npmjs.com/package/@unsass/selector)
+[![License](https://flat.badgen.net/npm/license/@unsass/selector)](https://www.npmjs.com/package/@unsass/selector)
+
+## Introduction
+
+Sass functions and mixins to manage CSS selectors.
+
+## Installing
+
+```shell
+npm install @unsass/selector
+```

package/index.scss

@@ -0,0 +1,6 @@
+// ============================================================================================= //
+//                                            SELECTOR                                           //
+// ============================================================================================= //
+
+@forward "./src/mixins";
+@forward "./src/functions";

package/package.json

@@ -0,0 +1,59 @@
+{
+    "name": "@unsass/selector",
+    "version": "1.0.0-beta.1",
+    "description": "Sass functions and mixins to manage CSS selectors.",
+    "scripts": {
+        "lint:css": "stylelint --fix \"**/*.scss\"",
+        "lint": "npm-run-all --parallel lint:*",
+        "test": "jest",
+        "prepare": "husky install",
+        "release": "semantic-release"
+    },
+    "engines": {
+        "node": ">=14.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",
+        "@semantic-release/git": "^10.0.1",
+        "glob": "^7.2.0",
+        "husky": "^8.0.1",
+        "jest": "^28.1.3",
+        "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"
+    },
+    "dependencies": {
+        "@unsass/utilities": "^1.3.1",
+        "sass": "^1.53.0"
+    },
+    "keywords": [
+        "sass",
+        "selector",
+        "class",
+        "unsass",
+        "front-end"
+    ],
+    "license": "MIT",
+    "homepage": "https://github.com/unsass/selector#readme",
+    "bugs": {
+        "url": "https://github.com/unsass/selector/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/unsass/selector.git"
+    },
+    "files": [
+        "src/**/*",
+        "*.scss",
+        "CHANGELOG.md"
+    ],
+    "publishConfig": {
+        "access": "public"
+    }
+}

package/src/_functions.scss

@@ -0,0 +1,59 @@
+// ============================================================================================= //
+//                                            MIXINS                                             //
+// ============================================================================================= //
+
+@use "sass:map";
+@use "sass:meta";
+@use "sass:selector";
+
+// ------------------------------------------------------------------------- //
+// Privates functions
+// ------------------------------------------------------------------------- //
+
+// ...
+
+// ------------------------------------------------------------------------- //
+// Public functions
+// ------------------------------------------------------------------------- //
+
+@function pseudo-class($selector, $pseudo-class) {
+    @return selector.append($selector, ":#{$pseudo-class}");
+}
+
+@function pseudo-element($selector, $pseudo-element) {
+    @return selector.append($selector, "::#{$pseudo-element}");
+}
+
+@function to-id($selector) {
+    @return "##{$selector}";
+}
+
+@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

@@ -0,0 +1,113 @@
+// ============================================================================================= //
+//                                            MIXINS                                             //
+// ============================================================================================= //
+
+@use "sass:meta";
+@use "sass:selector";
+@use "sass:string";
+@use "@unsass/utilities";
+@use "./functions";
+
+///
+/// @example - scss
+///   @include create("foo") {
+///     color: darkcyan;
+///   }
+///
+/// @example - css
+///   .foo {
+///     color: darkcyan;
+///   }
+///
+/// @example - scss
+///   @include create("foo", "md") {
+///     color: darkcyan;
+///   }
+///
+/// @example - css
+///   .md:foo {
+///     color: darkcyan;
+///   }
+///
+/// @example - scss
+///   @include create("foo", $pseudo-class: "hover") {
+///     color: darkcyan;
+///   }
+///
+/// @example - css
+///   .foo:hover {
+///     color: darkcyan;
+///   }
+///
+/// @example - scss
+///   @include create("foo", $pseudo-element: "before") {
+///     color: darkcyan;
+///   }
+///
+/// @example - css
+///   .foo::before {
+///     color: darkcyan;
+///   }
+///
+/// @param {string} $selector - Selector name.
+/// @param {string} $scope - Selector affix value.
+/// @param {string} $separator - Selector affix separator.
+/// @param {string} $pseudo-class - Selector pseudo-class.
+/// @param {string} $pseudo-element - Selector pseudo-element.
+/// @param {boolean} $suffix - Use suffix instead of prefix.
+///
+/// @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."
+    }
+
+    $class-selector: string.slice($selector, 1, 1)  == ".";
+
+    @if $class-selector {
+        $selector: string.slice($selector, 2);
+    }
+
+    ///
+    /// Set pseudo-{classes, elements}.
+    ///
+
+    @if $pseudo-class {
+        $selector: functions.pseudo-class($selector, $pseudo-class);
+    }
+
+    @if $pseudo-element {
+        $selector: functions.pseudo-element($selector, $pseudo-element);
+    }
+
+    ///
+    /// Set scope.
+    ///
+
+    @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)}, " ");
+        }
+
+        $selector: selector.append("#{$scope}\\#{$separator}", $selector);
+    }
+
+    @if $scope and $suffix {
+        $selector: selector.append($selector, "\\#{$separator}#{$scope}");
+    }
+
+    ///
+    /// Set selector.
+    ///
+
+    #{functions.to-class($selector)} {
+        @content;
+    }
+}
+