Merge pull request #21 from 21TORR/on-n-siblings

Add on-n-siblings and type checks

.github/workflows/ci.yml

@@ -10,16 +10,16 @@ jobs:
             -   name: Checkout Code
                 uses: actions/checkout@v2
 
-            -   uses: actions/setup-node@v2-beta
+            -   uses: actions/setup-node@v2
                 with:
                     node-version: '14'
 
-            -   uses: pnpm/action-setup@v1.2.1
+            -   uses: pnpm/action-setup@v2
                 with:
-                    version: '^5.8.0'
+                    version: '^6.7'
                     run_install: true
 
             -   run: pnpm test
 
             -   name: Prettify package.json
-                run: pnpx prettier-package-json --use-tabs --list-different
+                run: ./node_modules/.bin/prettier-package-json --use-tabs --list-different

CHANGELOG.md

@@ -1,3 +1,10 @@
+0.7.0
+=====
+
+*   (feature) Add `on-n-siblings()` mixin.
+*   (feature) Add `is-number()` and `is-integer()` function.
+
+
 0.6.0
 =====
 

mixins/children.scss

@@ -0,0 +1,22 @@
+@use "types";
+
+///
+/// Applies the rule if the element is one of exact
+///
+@mixin on-n-siblings ($number-of-siblings) {
+	@if (not types.is-integer($number-of-siblings) or $number-of-siblings <= 0) {
+		@error "Number of siblings must be an integer >= 1, but #{$number-of-siblings} given.";
+	}
+
+	@if (1 == $number-of-siblings) {
+		&:first-child:last-child {
+			@content;
+		}
+	}
+	@else {
+		&:first-child:nth-last-child(#{$number-of-siblings}),
+		&:first-child:nth-last-child(#{$number-of-siblings}) ~ * {
+			@content;
+		}
+	}
+}

mixins/index.scss

@@ -1,3 +1,4 @@
+@forward "./children";
 @forward "./container";
 @forward "./font";
 @forward "./interaction";
@@ -7,4 +8,5 @@
 @forward "./size";
 @forward "./svg" hide str-replace, url-encode;
 @forward "./transition";
+@forward "./types";
 @forward "./visibility";

mixins/types.scss

@@ -0,0 +1,13 @@
+///
+/// Returns whether the given value is a number (int or float)
+///
+@function is-number($value) {
+	@return type-of($value) == 'number';
+}
+
+///
+/// Returns whether the given value is an integer
+///
+@function is-integer($value) {
+	@return is-number($value) and round($value) == $value;
+}

package.json

@@ -1,13 +1,13 @@
 {
 	"name": "@21torr/atlantis",
+	"version": "0.6.0",
 	"description": "SCSS library, providing different mixins and helpers.",
 	"license": "MIT",
 	"homepage": "https://github.com/21TORR/atlantis",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/21TORR/atlantis.git"
 	},
-	"version": "0.6.0",
 	"scripts": {
 		"test": "ava -v"
 	},
@@ -16,6 +16,7 @@
 		"@types/sass": "^1.16.0",
 		"ava": "^3.15.0",
 		"esm": "^3.2.25",
+		"prettier-package-json": "^2.6.0",
 		"sass": "^1.28.0"
 	},
 	"publishConfig": {

tests/functions-exported.test.js

@@ -5,6 +5,9 @@ test("All functions are properly exported", t => {
 	const expectedFunctions = [
 		// SVG
 		"inline-svg('<svg..>')",
+		// Types
+		"is-number(1)",
+		"is-integer(2)",
 	];
 
 	expectedFunctions.forEach(mixin => {

tests/mixins-exported.test.js

@@ -4,6 +4,9 @@ import {compileScss} from "./helpers/scss";
 
 test("All mixins are properly exported", t => {
 	const expectedMixins = [
+		// Children
+		"on-n-siblings(3) { color: red; }",
+
 		// Container
 		"centered-container(110rem, 1.1rem)",