@unsass/breakpoint 1.0.0

package/.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.yml]
+indent_size = 2

package/.gitattributes

@@ -0,0 +1 @@
+* text=auto

package/.github/dependabot.yml

@@ -0,0 +1,10 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    assignees:
+      - "borisdamevin"
+    reviewers:
+      - "borisdamevin"

package/.github/workflows/node.js.yml

@@ -0,0 +1,50 @@
+name: Node.js CI
+
+on:
+  push:
+    branches: [ main, develop ]
+  pull_request:
+    branches: [ main, develop ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [ 14.x, 16.x ]
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Install Dependencies
+        run: npm ci --ignore-scripts
+
+      - name: Test
+        run: npm run test
+
+  publish:
+    runs-on: ubuntu-latest
+    needs: test
+    if: ${{ github.ref == 'refs/heads/main' }}
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install Dependencies
+        run: npm ci --ignore-scripts
+
+      - name: Release
+        run: npm run release
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit 

package/.releaserc.json

@@ -0,0 +1,76 @@
+{
+    "branches": [
+        "main",
+        {
+            "name": "beta",
+            "prerelease": true
+        },
+        {
+            "name": "alpha",
+            "prerelease": true
+        }
+    ],
+    "plugins": [
+        "@semantic-release/commit-analyzer",
+        [
+            "@semantic-release/changelog",
+            {
+                "changelogTitle": "# Changelog\n\nAll notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines."
+            }
+        ],
+        "@semantic-release/npm",
+        [
+            "@semantic-release/release-notes-generator",
+            {
+                "preset": "conventionalcommits",
+                "presetConfig": {
+                    "types": [
+                        {
+                            "type": "feat",
+                            "section": "Features"
+                        },
+                        {
+                            "type": "fix",
+                            "section": "Bug Fixes"
+                        },
+                        {
+                            "type": "chore",
+                            "hidden": true
+                        },
+                        {
+                            "type": "build",
+                            "section": "Build System"
+                        },
+                        {
+                            "type": "docs",
+                            "hidden": true
+                        },
+                        {
+                            "type": "style",
+                            "hidden": true
+                        },
+                        {
+                            "type": "refactor",
+                            "section": "Code Refactoring"
+                        },
+                        {
+                            "type": "perf",
+                            "hidden": true
+                        },
+                        {
+                            "type": "test",
+                            "hidden": true
+                        }
+                    ]
+                }
+            }
+        ],
+        [
+            "@semantic-release/git",
+            {
+                "message": "chore(release): publish version ${nextRelease.version}"
+            }
+        ],
+        "@semantic-release/github"
+    ]
+}

package/.stylelintignore

@@ -0,0 +1,5 @@
+## Files
+*.spec.scss
+
+## Folders
+/tests

package/.stylelintrc

@@ -0,0 +1,8 @@
+{
+    "extends": [
+        "stylelint-config-unsass"
+    ],
+    "rules": {
+        "function-no-unknown": null
+    }
+}

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# 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 (2022-02-28)
+
+
+### Features
+
+* **config:** add mixin ([7816aeb](https://github.com/unsass/breakpoint/commit/7816aeb4f4dc16c10eec64f192ca4875aa0a3bd6))
+* **up, down, only, between:** add main mixins ([e005c32](https://github.com/unsass/breakpoint/commit/e005c32a300ecf8185335dc03d199bd4265a5b50))
+
+
+### Code Refactoring
+
+* clean variables ([d2b6579](https://github.com/unsass/breakpoint/commit/d2b6579d8c7482dceded8230cbc6d64f44dd2d41))
+* **config:** rename `$from-scratch` to `$reset` ([ff8628e](https://github.com/unsass/breakpoint/commit/ff8628ef5169f9a87cd73db199e919b7b81d3efc))

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,228 @@
+# Breakpoint
+
+[![Version](https://flat.badgen.net/npm/v/@unsass/breakpoint)](https://www.npmjs.com/package/@unsass/breakpoint)
+[![Downloads](https://flat.badgen.net/npm/dt/@unsass/breakpoint)](https://www.npmjs.com/package/@unsass/breakpoint)
+[![License](https://flat.badgen.net/github/license/@unsass/breakpoint)](https://flat.badgen.net/github/license/@unsass/breakpoint)
+
+## Introduction
+
+Easily manage your CSS breakpoint rules.
+
+## Installing
+
+```shell
+npm install @unsass/breakpoint
+```
+
+## Usage
+
+```scss
+@use "@unsass/breakpoint";
+
+.foo {
+    @include breakpoint.up(lg) {
+        // ...
+    }
+}
+```
+
+### Configuration
+
+```scss
+@use "@unsass/breakpoint" with (
+    $screens: (
+        "lg": 1024px
+    )
+);
+```
+
+### Options
+
+| Variable   | Default               | Description                                                                                       |
+|------------|-----------------------|---------------------------------------------------------------------------------------------------|
+| `$screens` | See `Tokens` section. | Sets a list of breakpoint tokens.                                                                 |
+| `$reset`   | `false`               | Erase the default `$screens` config for helping you on a fresh start with your own custom tokens. |
+
+### Tokens
+
+| Key   | Value    |
+|-------|----------|
+| `xs`  | `360px`  |
+| `sm`  | `480px`  |
+| `md`  | `768px`  |
+| `lg`  | `960px`  |
+| `xl`  | `1200px` |
+| `2xl` | `1400px` |
+
+You can also define new size:
+
+```scss
+@use "@unsass/breakpoint" with (
+    $screens: (
+        "3xl": 1920px
+    )
+);
+```
+
+The new token named `3xl` will be added to the default tokens list.
+
+### Top-level config override
+
+If variables are already configured on top-level using `@use ... with`, by another dependency for example, you can't use
+this solution anymore, because the module can only be setup once, this is a Sass restriction with **Module System**, but
+another solution exist for override the main configuration, with a mixin!
+
+See [official documentation](https://sass-lang.com/documentation/at-rules/use#with-mixins) about override configuration
+with mixins.
+
+| Mixin                      | Description                              |
+|----------------------------|:-----------------------------------------|
+| `config($screens, $reset)` | Override top-level `with` configuration. |
+
+#### Declare config with `breakpoint.config()`
+
+```scss
+// Extend the default list...
+@include breakpoint.config((
+    "3xl": 1980px
+));
+
+// ... or reset for fresh start...
+@include breakpoint.config((
+    "tablet": 768px,
+    "desktop": 960px
+), true);
+```
+
+## API
+
+### Sass mixins
+
+| Mixin                 | Description                                                                                                                    |
+|-----------------------|--------------------------------------------------------------------------------------------------------------------------------|
+| `up($token)`          | Sets media rule for minimum with only.                                                                                         |
+| `down($token)`        | Sets media rule for maximum with only.                                                                                         |
+| `only($token)`        | Sets media rule for between minimum and maximum widths, but the maximum will be automatically set with next value of `$token`. |
+| `between($min, $max)` | Sets media rule for between minimum and maximum widths.                                                                        |
+
+#### Up rule with `breakpoint.up()`
+
+The following Sass...
+
+```scss
+@use "@unsass/breakpoint";
+
+.foo {
+    @include breakpoint.up(lg) {
+        color: darkcyan;
+    }
+}
+```
+
+...will produce the following CSS...
+
+```css
+@media (min-width: 960px) {
+    .foo {
+        color: darkcyan;
+    }
+}
+```
+
+#### Down rule with `breakpoint.down()`
+
+The following Sass...
+
+```scss
+@use "@unsass/breakpoint";
+
+.foo {
+    @include breakpoint.down(lg) {
+        color: darkcyan;
+    }
+}
+```
+
+...will produce the following CSS...
+
+```css
+@media (max-width: 959px) {
+    .foo {
+        color: darkcyan;
+    }
+}
+```
+
+#### Only rule with `breakpoint.only()`
+
+The following Sass...
+
+```scss
+@use "@unsass/breakpoint";
+
+.foo {
+    @include breakpoint.only(lg) {
+        color: darkcyan;
+    }
+}
+```
+
+...will produce the following CSS...
+
+```css
+@media (min-width: 960px) and (max-width: 1199px) {
+    .foo {
+        color: darkcyan;
+    }
+}
+```
+
+#### Between rule with `breakpoint.between()`
+
+The following Sass...
+
+```scss
+@use "@unsass/breakpoint";
+
+.foo {
+    @include breakpoint.between(md, xl) {
+        color: darkcyan;
+    }
+}
+```
+
+...will produce the following CSS...
+
+```css
+@media (min-width: 768px) and (max-width: 1199px) {
+    .foo {
+        color: darkcyan;
+    }
+}
+```
+
+### Sass functions
+
+| Function            | Description                                 |
+|---------------------|---------------------------------------------|
+| `get-value($token)` | Get value from the configured tokens list.  |
+
+#### Get token value with `breakpoint.get-value()`
+
+The following Sass...
+
+```scss
+@use "@unsass/breakpoint";
+
+.foo {
+    width: breakpoint.get-value(lg);
+}
+```
+
+...will produce the following CSS...
+
+```css
+.foo {
+    width: 960px;
+}
+```

package/_functions.scss

@@ -0,0 +1,43 @@
+// ============================================================================================= //
+//                                           FUNCTIONS                                           //
+// ============================================================================================= //
+
+@use "sass:list";
+@use "sass:map";
+@use "@sass-collective/strip-unit";
+@use "./variables";
+
+///
+/// Get value.
+///
+@function get-value($token) {
+    @return map.get(variables.$extend, $token);
+}
+
+///
+/// Get next.
+///
+@function get-next($value) {
+    $keys: map.keys(variables.$extend);
+    $n: list.index($keys, $value);
+
+    @return if($n < length($keys), list.nth($keys, $n + 1), null);
+}
+
+///
+/// Set min.
+///
+@function set-min($token) {
+    $min: get-value($token);
+
+    @return if($min != 0, $min, null);
+}
+
+///
+/// Set max.
+///
+@function set-max($token) {
+    $max: get-value($token);
+
+    @return if($max and $max > 0, $max - 1, null);
+}

package/_mixins.scss

@@ -0,0 +1,168 @@
+// ============================================================================================= //
+//                                            MIXINS                                             //
+// ============================================================================================= //
+
+@use "sass:map";
+@use "sass:string";
+@use "./functions";
+@use "./variables";
+
+///
+/// @example - scss
+///   .foo {
+///     @include up(lg) {
+///       color: darkcyan;
+///     }
+///   }
+///
+/// @example - css
+///   @media (min-width: 960px) {
+///     .foo {
+///       color: darkcyan;
+///     }
+///   }
+///
+/// @see {function} functions.set-min
+///
+@mixin up($token) {
+    @if $token and not map.has-key(variables.$extend, $token) {
+        @error "Invalid token, `#{$token}` doesn't exist. Choose one of #{map.keys(variables.$extend)}.";
+    }
+
+    $min: functions.set-min($token);
+
+    @if $min {
+        @media (min-width: $min) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+///
+/// @example - scss
+///   .foo {
+///     @include down(lg) {
+///       color: darkcyan;
+///     }
+///   }
+///
+/// @example - css
+///   @media (max-width: 959px) {
+///     .foo {
+///       color: darkcyan;
+///     }
+///   }
+///
+/// @see {function} functions.set-max
+///
+@mixin down($token) {
+    @if $token and not map.has-key(variables.$extend, $token) {
+        @error "Invalid token, `#{$token}` doesn't exist. Choose one of #{map.keys(variables.$extend)}.";
+    }
+
+    $max: functions.set-max($token);
+
+    @if $max {
+        @media (max-width: $max) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+///
+/// @example - scss
+///   .foo {
+///     @include only(lg) {
+///       color: darkcyan;
+///     }
+///   }
+///
+/// @example - css
+///   @media (min-width: 960px) and (max-width: 1199px) {
+///     .foo {
+///       color: darkcyan;
+///     }
+///   }
+///
+/// @see {function} functions.set-min
+/// @see {function} functions.set-max
+/// @see {function} functions.get-next
+///
+@mixin only($token) {
+    @if $token and not map.has-key(variables.$extend, $token) {
+        @error "Invalid token, `#{$token}` doesn't exist. Choose one of #{map.keys(variables.$extend)}.";
+    }
+
+    $min: functions.set-min($token);
+    $next: functions.get-next($token);
+    $max: functions.set-max($next);
+
+    @if $min != null and $max != null {
+        @media (min-width: $min) and (max-width: $max) {
+            @content;
+        }
+    } @else if $max == null {
+        @include up($token) {
+            @content;
+        }
+    }
+}
+
+///
+/// @example - scss
+///   .foo {
+///     @include between(md, xl) {
+///       color: darkcyan;
+///     }
+///   }
+///
+/// @example - css
+///   @media (min-width: 768px) and (max-width: 1199px) {
+///     .foo {
+///       color: darkcyan;
+///     }
+///   }
+///
+/// @see {function} functions.set-min
+/// @see {function} functions.set-max
+///
+@mixin between($min, $max) {
+    @if $min and not map.has-key(variables.$extend, $min) {
+        @error "Invalid token, `#{$min}` doesn't exist. Choose one of #{map.keys(variables.$extend)}.";
+    } @else if $max and not map.has-key(variables.$extend, $max) {
+        @error "Invalid token, `#{$max}` doesn't exist. Choose one of #{map.keys(variables.$extend)}.";
+    }
+
+    $min: functions.set-min($min);
+    $max: functions.set-max($max);
+
+    @if $min != null and $max != null {
+        @media (min-width: $min) and (max-width: $max) {
+            @content;
+        }
+    }
+}
+
+///
+/// @example - scss
+///   @include config((
+///     "3xl": 1980px
+///   ));
+///
+/// @example - scss
+///   @include config((
+///     "tablet": 768px,
+//      "desktop": 960px
+///   ), true);
+///
+@mixin config($screens: (), $reset: false) {
+    @if $screens and not $reset {
+        variables.$extend: map.merge(variables.$extend, $screens);
+    } @else {
+        variables.$extend: $screens;
+    }
+}

package/_variables.scss

@@ -0,0 +1,24 @@
+// ============================================================================================= //
+//                                           VARIABLES                                           //
+// ============================================================================================= //
+
+@use "sass:map";
+
+$_defaults: (
+    "xs": 320px,
+    "sm": 480px,
+    "md": 768px,
+    "lg": 960px,
+    "xl": 1200px,
+    "2xl": 1400px
+);
+
+$extend: ();
+$screens: () !default;
+$reset: false !default;
+
+@if $reset {
+    $extend: $screens;
+} @else {
+    $extend: map.merge($_defaults, $screens);
+}

package/commitlint.config.js

@@ -0,0 +1,9 @@
+// ============================================================================================= //
+//                                          COMMITLINT                                           //
+// ============================================================================================= //
+
+module.exports = {
+    extends: [
+        '@commitlint/config-conventional'
+    ]
+};

package/index.scss

@@ -0,0 +1,7 @@
+// ============================================================================================= //
+//                                             INDEX                                             //
+// ============================================================================================= //
+
+@forward "./variables";
+@forward "./mixins";
+@forward "./functions" hide get-next, set-min, set-max;

package/package.json

@@ -0,0 +1,53 @@
+{
+    "name": "@unsass/breakpoint",
+    "version": "1.0.0",
+    "description": "Easily manage your CSS breakpoint rules.",
+    "scripts": {
+        "lint:css": "stylelint --fix \"**/*.scss\"",
+        "lint": "npm-run-all --parallel lint:*",
+        "test": "jest",
+        "prepare": "husky install",
+        "release": "semantic-release --branches main"
+    },
+    "engines": {
+        "node": ">=14.0.0",
+        "npm": ">=8.0.0"
+    },
+    "devDependencies": {
+        "@commitlint/cli": "^16.2.1",
+        "@commitlint/config-conventional": "^16.2.1",
+        "@semantic-release/changelog": "^6.0.1",
+        "@semantic-release/git": "^10.0.1",
+        "@types/node": "^17.0.21",
+        "glob": "^7.2.0",
+        "husky": "^7.0.4",
+        "jest": "^27.5.1",
+        "npm-run-all": "^4.1.5",
+        "sass-true": "^6.1.0-beta.1",
+        "semantic-release": "^19.0.2",
+        "stylelint": "^14.5.3",
+        "stylelint-config-unsass": "^1.0.0"
+    },
+    "dependencies": {
+        "@sass-collective/strip-unit": "^3.1.2",
+        "sass": "^1.49.9"
+    },
+    "keywords": [
+        "breakpoint",
+        "unsass",
+        "sass",
+        "css"
+    ],
+    "license": "MIT",
+    "homepage": "https://github.com/unsass/breakpoint#readme",
+    "bugs": {
+        "url": "https://github.com/unsass/breakpoint/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/unsass/breakpoint.git"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}

package/tests/functions.spec.scss

@@ -0,0 +1,24 @@
+// ============================================================================================= //
+//                                             TEST                                              //
+// ============================================================================================= //
+
+@use "true" as *;
+@use "../index" as breakpoint;
+
+@include describe("breakpoint.get-value()") {
+    @include it("Should return value from token.") {
+        @include assert {
+            @include output(false) {
+                .foo {
+                    width: breakpoint.get-value(lg);
+                }
+            }
+
+            @include expect(false) {
+                .foo {
+                    width: 960px;
+                }
+            }
+        }
+    }
+}

package/tests/mixins.spec.scss

@@ -0,0 +1,144 @@
+// ============================================================================================= //
+//                                             TEST                                              //
+// ============================================================================================= //
+
+@use "true" as *;
+@use "../index" as breakpoint;
+
+@include describe("breakpoint.up()") {
+    @include it("Should return breakpoint 'up' rules.") {
+        @include assert {
+            @include output(false) {
+                .foo {
+                    @include breakpoint.up(lg) {
+                        color: darkcyan;
+                    }
+                }
+            }
+
+            @include expect(false) {
+                @media (min-width: 960px) {
+                    .foo {
+                        color: darkcyan;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@include describe("breakpoint.down()") {
+    @include it("Should return breakpoint 'down' rules.") {
+        @include assert {
+            @include output(false) {
+                .foo {
+                    @include breakpoint.down(lg) {
+                        color: darkcyan;
+                    }
+                }
+            }
+
+            @include expect(false) {
+                @media (max-width: 959px) {
+                    .foo {
+                        color: darkcyan;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@include describe("breakpoint.only()") {
+    @include it("Should return breakpoint 'only' rules.") {
+        @include assert {
+            @include output(false) {
+                .foo {
+                    @include breakpoint.only(lg) {
+                        color: darkcyan;
+                    }
+                }
+            }
+
+            @include expect(false) {
+                @media (min-width: 960px) and (max-width: 1199px) {
+                    .foo {
+                        color: darkcyan;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@include describe("breakpoint.between()") {
+    @include it("Should return breakpoint 'between' rules.") {
+        @include assert {
+            @include output(false) {
+                .foo {
+                    @include breakpoint.between(md, xl) {
+                        color: darkcyan;
+                    }
+                }
+            }
+
+            @include expect(false) {
+                @media (min-width: 768px) and (max-width: 1199px) {
+                    .foo {
+                        color: darkcyan;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@include describe("breakpoint.config()") {
+    @include it("Should return breakpoint 'config' rules.") {
+        @include assert {
+            @include output(false) {
+                @include breakpoint.config((
+                    "3xl": 1980px
+                ));
+
+                .foo {
+                    @include breakpoint.up("3xl") {
+                        color: darkcyan;
+                    }
+                }
+            }
+
+            @include expect(false) {
+                @media (min-width: 1980px) {
+                    .foo {
+                        color: darkcyan;
+                    }
+                }
+            }
+        }
+    }
+
+    @include it("Should return breakpoint 'config' rules with '$reset' option.") {
+        @include assert {
+            @include output(false) {
+                @include breakpoint.config((
+                    "tablet": 768px
+                ), true);
+
+                .foo {
+                    @include breakpoint.up("tablet") {
+                        color: darkcyan;
+                    }
+                }
+            }
+
+            @include expect(false) {
+                @media (min-width: 768px) {
+                    .foo {
+                        color: darkcyan;
+                    }
+                }
+            }
+        }
+    }
+}

package/tests/scss.spec.js

@@ -0,0 +1,44 @@
+// ============================================================================================= //
+//                                             TESTS                                             //
+// ============================================================================================= //
+
+const path = require('path');
+const sassTrue = require('sass-true');
+const glob = require('glob');
+
+/**
+ *
+ * @param url
+ * @param prev
+ * @param done
+ * @returns {{file: string}}
+ */
+function importer(url, prev, done) {
+    if (url[0] === '~') {
+        url = path.resolve('node_modules', url.substr(1));
+    }
+
+    return {
+        file: url
+    };
+}
+
+describe('Sass', () => {
+    // Find all the Sass files that end in `*.spec.scss` in any directory of this project.
+    // I use path.resolve because True requires absolute paths to compile test files.
+    const sassTestFiles = glob.sync(path.resolve(process.cwd(), '**/*.spec.scss'));
+
+    // Run True on every file found with to describe and its methods provided
+    sassTestFiles.forEach((file) =>
+        sassTrue.runSass({
+            importer,
+            file,
+            includePaths: [
+                './node_modules'
+            ]
+        }, {
+            describe,
+            it
+        })
+    );
+});