@unsass/breakpoint 2.0.0 → 2.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/README.md +13 -16
  3. package/package.json +10 -11
  4. package/src/_functions.scss +7 -1
  5. package/src/_mixins.scss +4 -4
package/CHANGELOG.md CHANGED
@@ -2,6 +2,27 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
4
4
 
5
+ ## [2.1.2](https://github.com/unsass/breakpoint/compare/v2.1.1...v2.1.2) (2022-08-19)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * packages vulnerabilities ([0c9ccef](https://github.com/unsass/breakpoint/commit/0c9ccef96576a31d57ea9af0ac4365a2e886c854))
11
+
12
+ ## [2.1.1](https://github.com/unsass/breakpoint/compare/v2.1.0...v2.1.1) (2022-07-22)
13
+
14
+
15
+ ### Bug Fixes
16
+
17
+ * remove unneeded dependencies ([09ae79f](https://github.com/unsass/breakpoint/commit/09ae79f3d8c59544e3d67fb27f2a3b37b90525ee))
18
+
19
+ ## [2.1.0](https://github.com/unsass/breakpoint/compare/v2.0.0...v2.1.0) (2022-06-14)
20
+
21
+
22
+ ### Features
23
+
24
+ * **functions:** add `get-screens` ([2ee5651](https://github.com/unsass/breakpoint/commit/2ee565137a31c5c25df2bf342434b498156df712))
25
+
5
26
  ## [2.0.0](https://github.com/unsass/breakpoint/compare/v1.0.0...v2.0.0) (2022-06-10)
6
27
 
7
28
 
package/README.md CHANGED
@@ -6,11 +6,7 @@
6
6
 
7
7
  ## Introduction
8
8
 
9
- Easily manage your CSS breakpoint rules.
10
-
11
- > **Note:** this is new code moved
12
- > from [`@sass-collective/breakpoint`](https://github.com/sass-collective/sass-collective/tree/master/packages/breakpoint)
13
- > repository.
9
+ Sass functions and mixins to use media queries rules.
14
10
 
15
11
  ## Installing
16
12
 
@@ -24,7 +20,7 @@ npm install @unsass/breakpoint
24
20
  @use "@unsass/breakpoint";
25
21
 
26
22
  .foo {
27
- @include breakpoint.up(lg) {
23
+ @include breakpoint.up("lg") {
28
24
  // ...
29
25
  }
30
26
  }
@@ -106,8 +102,8 @@ with mixins.
106
102
 
107
103
  | Mixin | Description |
108
104
  |-----------------------|--------------------------------------------------------------------------------------------------------------------------------|
109
- | `up($token)` | Sets media rule for minimum with only. |
110
- | `down($token)` | Sets media rule for maximum with only. |
105
+ | `up($token)` | Sets media rule for minimum width only. |
106
+ | `down($token)` | Sets media rule for maximum width only. |
111
107
  | `only($token)` | Sets media rule for between minimum and maximum widths, but the maximum will be automatically set with next value of `$token`. |
112
108
  | `between($min, $max)` | Sets media rule for between minimum and maximum widths. |
113
109
 
@@ -119,7 +115,7 @@ The following Sass...
119
115
  @use "@unsass/breakpoint";
120
116
 
121
117
  .foo {
122
- @include breakpoint.up(lg) {
118
+ @include breakpoint.up("lg") {
123
119
  color: darkcyan;
124
120
  }
125
121
  }
@@ -143,7 +139,7 @@ The following Sass...
143
139
  @use "@unsass/breakpoint";
144
140
 
145
141
  .foo {
146
- @include breakpoint.down(lg) {
142
+ @include breakpoint.down("lg") {
147
143
  color: darkcyan;
148
144
  }
149
145
  }
@@ -167,7 +163,7 @@ The following Sass...
167
163
  @use "@unsass/breakpoint";
168
164
 
169
165
  .foo {
170
- @include breakpoint.only(lg) {
166
+ @include breakpoint.only("lg") {
171
167
  color: darkcyan;
172
168
  }
173
169
  }
@@ -191,7 +187,7 @@ The following Sass...
191
187
  @use "@unsass/breakpoint";
192
188
 
193
189
  .foo {
194
- @include breakpoint.between(md, xl) {
190
+ @include breakpoint.between("md", "xl") {
195
191
  color: darkcyan;
196
192
  }
197
193
  }
@@ -209,9 +205,10 @@ The following Sass...
209
205
 
210
206
  ### Sass functions
211
207
 
212
- | Function | Description |
213
- |---------------------|---------------------------------------------|
214
- | `get-value($token)` | Get value from the configured tokens list. |
208
+ | Function | Description |
209
+ |---------------------|--------------------------------------------|
210
+ | `get-value($token)` | Get value from the configured tokens list. |
211
+ | `get-screens()` | Get list of screens tokens. |
215
212
 
216
213
  #### Get token value with `breakpoint.get-value()`
217
214
 
@@ -221,7 +218,7 @@ The following Sass...
221
218
  @use "@unsass/breakpoint";
222
219
 
223
220
  .foo {
224
- width: breakpoint.get-value(lg);
221
+ width: breakpoint.get-value("lg");
225
222
  }
226
223
  ```
227
224
 
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@unsass/breakpoint",
3
- "version": "2.0.0",
4
- "description": "Easily manage your CSS breakpoint rules.",
3
+ "version": "2.1.2",
4
+ "description": "Sass functions and mixins to use media queries rules.",
5
5
  "scripts": {
6
6
  "lint:css": "stylelint --fix \"**/*.scss\"",
7
7
  "lint": "npm-run-all --parallel lint:*",
8
8
  "test": "jest",
9
9
  "prepare": "husky install",
10
- "release": "semantic-release --branches main"
10
+ "release": "semantic-release"
11
11
  },
12
12
  "engines": {
13
13
  "node": ">=14.0.0",
@@ -15,29 +15,28 @@
15
15
  },
16
16
  "sass": "index.scss",
17
17
  "devDependencies": {
18
- "@commitlint/cli": "^17.0.2",
19
- "@commitlint/config-conventional": "^17.0.2",
18
+ "@commitlint/cli": "^17.0.3",
19
+ "@commitlint/config-conventional": "^17.0.3",
20
20
  "@semantic-release/changelog": "^6.0.1",
21
21
  "@semantic-release/git": "^10.0.1",
22
- "@types/node": "^17.0.41",
23
22
  "glob": "^7.2.0",
24
23
  "husky": "^8.0.1",
25
- "jest": "^28.1.1",
24
+ "jest": "^28.1.3",
26
25
  "npm-run-all": "^4.1.5",
27
26
  "sass-true": "^6.1.0",
28
27
  "semantic-release": "^19.0.3",
29
- "stylelint": "^14.9.0",
28
+ "stylelint": "^14.10.0",
30
29
  "stylelint-config-unsass": "^1.0.0"
31
30
  },
32
31
  "dependencies": {
33
- "@sass-collective/strip-unit": "^3.1.2",
34
32
  "sass": "^1.52.3"
35
33
  },
36
34
  "keywords": [
35
+ "sass",
37
36
  "breakpoint",
37
+ "media queries",
38
+ "media query",
38
39
  "unsass",
39
- "sass",
40
- "css",
41
40
  "front-end"
42
41
  ],
43
42
  "license": "MIT",
package/src/_functions.scss CHANGED
@@ -4,7 +4,6 @@
4
4
 
5
5
  @use "sass:list";
6
6
  @use "sass:map";
7
- @use "@sass-collective/strip-unit";
8
7
  @use "./variables";
9
8
 
10
9
  ///
@@ -24,6 +23,13 @@
24
23
  @return if($n < length($keys), list.nth($keys, $n + 1), null);
25
24
  }
26
25
 
26
+ ///
27
+ /// Get screens list.
28
+ ///
29
+ @function get-screens() {
30
+ @return variables.$extend;
31
+ }
32
+
27
33
  ///
28
34
  /// Set min.
29
35
  ///
package/src/_mixins.scss CHANGED
@@ -10,7 +10,7 @@
10
10
  ///
11
11
  /// @example - scss
12
12
  /// .foo {
13
- /// @include up(lg) {
13
+ /// @include up("lg") {
14
14
  /// color: darkcyan;
15
15
  /// }
16
16
  /// }
@@ -43,7 +43,7 @@
43
43
  ///
44
44
  /// @example - scss
45
45
  /// .foo {
46
- /// @include down(lg) {
46
+ /// @include down("lg") {
47
47
  /// color: darkcyan;
48
48
  /// }
49
49
  /// }
@@ -76,7 +76,7 @@
76
76
  ///
77
77
  /// @example - scss
78
78
  /// .foo {
79
- /// @include only(lg) {
79
+ /// @include only("lg") {
80
80
  /// color: darkcyan;
81
81
  /// }
82
82
  /// }
@@ -115,7 +115,7 @@
115
115
  ///
116
116
  /// @example - scss
117
117
  /// .foo {
118
- /// @include between(md, xl) {
118
+ /// @include between("md", "xl") {
119
119
  /// color: darkcyan;
120
120
  /// }
121
121
  /// }