@unsass/breakpoint 1.0.0 → 2.1.1

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 (19) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/README.md +19 -12
  3. package/index.scss +4 -4
  4. package/package.json +18 -13
  5. package/{_functions.scss → src/_functions.scss} +7 -1
  6. package/{_mixins.scss → src/_mixins.scss} +4 -4
  7. package/{_variables.scss → src/_variables.scss} +0 -0
  8. package/.editorconfig +0 -15
  9. package/.gitattributes +0 -1
  10. package/.github/dependabot.yml +0 -10
  11. package/.github/workflows/node.js.yml +0 -50
  12. package/.husky/commit-msg +0 -4
  13. package/.releaserc.json +0 -76
  14. package/.stylelintignore +0 -5
  15. package/.stylelintrc +0 -8
  16. package/commitlint.config.js +0 -9
  17. package/tests/functions.spec.scss +0 -24
  18. package/tests/mixins.spec.scss +0 -144
  19. package/tests/scss.spec.js +0 -44
package/CHANGELOG.md CHANGED
@@ -2,6 +2,31 @@
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.1](https://github.com/unsass/breakpoint/compare/v2.1.0...v2.1.1) (2022-07-22)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * remove unneeded dependencies ([09ae79f](https://github.com/unsass/breakpoint/commit/09ae79f3d8c59544e3d67fb27f2a3b37b90525ee))
11
+
12
+ ## [2.1.0](https://github.com/unsass/breakpoint/compare/v2.0.0...v2.1.0) (2022-06-14)
13
+
14
+
15
+ ### Features
16
+
17
+ * **functions:** add `get-screens` ([2ee5651](https://github.com/unsass/breakpoint/commit/2ee565137a31c5c25df2bf342434b498156df712))
18
+
19
+ ## [2.0.0](https://github.com/unsass/breakpoint/compare/v1.0.0...v2.0.0) (2022-06-10)
20
+
21
+
22
+ ### ⚠ BREAKING CHANGES
23
+
24
+ * move main files on `src` folder
25
+
26
+ ### Code Refactoring
27
+
28
+ * move main files on `src` folder ([3307439](https://github.com/unsass/breakpoint/commit/3307439cb7fb7b6d4a67b32eabcbff19c604ccb6))
29
+
5
30
  ## 1.0.0 (2022-02-28)
6
31
 
7
32
 
package/README.md CHANGED
@@ -2,12 +2,16 @@
2
2
 
3
3
  [![Version](https://flat.badgen.net/npm/v/@unsass/breakpoint)](https://www.npmjs.com/package/@unsass/breakpoint)
4
4
  [![Downloads](https://flat.badgen.net/npm/dt/@unsass/breakpoint)](https://www.npmjs.com/package/@unsass/breakpoint)
5
- [![License](https://flat.badgen.net/github/license/@unsass/breakpoint)](https://flat.badgen.net/github/license/@unsass/breakpoint)
5
+ [![License](https://flat.badgen.net/npm/license/@unsass/breakpoint)](https://www.npmjs.com/package/@unsass/breakpoint)
6
6
 
7
7
  ## Introduction
8
8
 
9
9
  Easily manage your CSS breakpoint rules.
10
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.
14
+
11
15
  ## Installing
12
16
 
13
17
  ```shell
@@ -20,7 +24,7 @@ npm install @unsass/breakpoint
20
24
  @use "@unsass/breakpoint";
21
25
 
22
26
  .foo {
23
- @include breakpoint.up(lg) {
27
+ @include breakpoint.up("lg") {
24
28
  // ...
25
29
  }
26
30
  }
@@ -82,6 +86,8 @@ with mixins.
82
86
  #### Declare config with `breakpoint.config()`
83
87
 
84
88
  ```scss
89
+ @use "@unsass/breakpoint";
90
+
85
91
  // Extend the default list...
86
92
  @include breakpoint.config((
87
93
  "3xl": 1980px
@@ -100,8 +106,8 @@ with mixins.
100
106
 
101
107
  | Mixin | Description |
102
108
  |-----------------------|--------------------------------------------------------------------------------------------------------------------------------|
103
- | `up($token)` | Sets media rule for minimum with only. |
104
- | `down($token)` | Sets media rule for maximum with only. |
109
+ | `up($token)` | Sets media rule for minimum width only. |
110
+ | `down($token)` | Sets media rule for maximum width only. |
105
111
  | `only($token)` | Sets media rule for between minimum and maximum widths, but the maximum will be automatically set with next value of `$token`. |
106
112
  | `between($min, $max)` | Sets media rule for between minimum and maximum widths. |
107
113
 
@@ -113,7 +119,7 @@ The following Sass...
113
119
  @use "@unsass/breakpoint";
114
120
 
115
121
  .foo {
116
- @include breakpoint.up(lg) {
122
+ @include breakpoint.up("lg") {
117
123
  color: darkcyan;
118
124
  }
119
125
  }
@@ -137,7 +143,7 @@ The following Sass...
137
143
  @use "@unsass/breakpoint";
138
144
 
139
145
  .foo {
140
- @include breakpoint.down(lg) {
146
+ @include breakpoint.down("lg") {
141
147
  color: darkcyan;
142
148
  }
143
149
  }
@@ -161,7 +167,7 @@ The following Sass...
161
167
  @use "@unsass/breakpoint";
162
168
 
163
169
  .foo {
164
- @include breakpoint.only(lg) {
170
+ @include breakpoint.only("lg") {
165
171
  color: darkcyan;
166
172
  }
167
173
  }
@@ -185,7 +191,7 @@ The following Sass...
185
191
  @use "@unsass/breakpoint";
186
192
 
187
193
  .foo {
188
- @include breakpoint.between(md, xl) {
194
+ @include breakpoint.between("md", "xl") {
189
195
  color: darkcyan;
190
196
  }
191
197
  }
@@ -203,9 +209,10 @@ The following Sass...
203
209
 
204
210
  ### Sass functions
205
211
 
206
- | Function | Description |
207
- |---------------------|---------------------------------------------|
208
- | `get-value($token)` | Get value from the configured tokens list. |
212
+ | Function | Description |
213
+ |---------------------|--------------------------------------------|
214
+ | `get-value($token)` | Get value from the configured tokens list. |
215
+ | `get-screens()` | Get list of screens tokens. |
209
216
 
210
217
  #### Get token value with `breakpoint.get-value()`
211
218
 
@@ -215,7 +222,7 @@ The following Sass...
215
222
  @use "@unsass/breakpoint";
216
223
 
217
224
  .foo {
218
- width: breakpoint.get-value(lg);
225
+ width: breakpoint.get-value("lg");
219
226
  }
220
227
  ```
221
228
 
package/index.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  // ============================================================================================= //
2
- // INDEX //
2
+ // BREAKPOINT //
3
3
  // ============================================================================================= //
4
4
 
5
- @forward "./variables";
6
- @forward "./mixins";
7
- @forward "./functions" hide get-next, set-min, set-max;
5
+ @forward "./src/variables";
6
+ @forward "./src/mixins";
7
+ @forward "./src/functions" hide get-next, set-min, set-max;
package/package.json CHANGED
@@ -1,42 +1,42 @@
1
1
  {
2
2
  "name": "@unsass/breakpoint",
3
- "version": "1.0.0",
3
+ "version": "2.1.1",
4
4
  "description": "Easily manage your CSS breakpoint 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",
14
14
  "npm": ">=8.0.0"
15
15
  },
16
+ "sass": "index.scss",
16
17
  "devDependencies": {
17
- "@commitlint/cli": "^16.2.1",
18
- "@commitlint/config-conventional": "^16.2.1",
18
+ "@commitlint/cli": "^17.0.3",
19
+ "@commitlint/config-conventional": "^17.0.3",
19
20
  "@semantic-release/changelog": "^6.0.1",
20
21
  "@semantic-release/git": "^10.0.1",
21
- "@types/node": "^17.0.21",
22
22
  "glob": "^7.2.0",
23
- "husky": "^7.0.4",
24
- "jest": "^27.5.1",
23
+ "husky": "^8.0.1",
24
+ "jest": "^28.1.3",
25
25
  "npm-run-all": "^4.1.5",
26
- "sass-true": "^6.1.0-beta.1",
27
- "semantic-release": "^19.0.2",
28
- "stylelint": "^14.5.3",
26
+ "sass-true": "^6.1.0",
27
+ "semantic-release": "^19.0.3",
28
+ "stylelint": "^14.9.1",
29
29
  "stylelint-config-unsass": "^1.0.0"
30
30
  },
31
31
  "dependencies": {
32
- "@sass-collective/strip-unit": "^3.1.2",
33
- "sass": "^1.49.9"
32
+ "sass": "^1.52.3"
34
33
  },
35
34
  "keywords": [
36
35
  "breakpoint",
37
36
  "unsass",
38
37
  "sass",
39
- "css"
38
+ "css",
39
+ "front-end"
40
40
  ],
41
41
  "license": "MIT",
42
42
  "homepage": "https://github.com/unsass/breakpoint#readme",
@@ -47,6 +47,11 @@
47
47
  "type": "git",
48
48
  "url": "git+https://github.com/unsass/breakpoint.git"
49
49
  },
50
+ "files": [
51
+ "src/**/*",
52
+ "*.scss",
53
+ "CHANGELOG.md"
54
+ ],
50
55
  "publishConfig": {
51
56
  "access": "public"
52
57
  }
package/{_functions.scss → src/_functions.scss} RENAMED
@@ -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/{_mixins.scss → src/_mixins.scss} RENAMED
@@ -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
  /// }
package/{_variables.scss → src/_variables.scss} RENAMED
File without changes
package/.editorconfig DELETED
@@ -1,15 +0,0 @@
1
- root = true
2
-
3
- [*]
4
- charset = utf-8
5
- end_of_line = lf
6
- insert_final_newline = true
7
- indent_style = space
8
- indent_size = 4
9
- trim_trailing_whitespace = true
10
-
11
- [*.md]
12
- trim_trailing_whitespace = false
13
-
14
- [*.yml]
15
- indent_size = 2
package/.gitattributes DELETED
@@ -1 +0,0 @@
1
- * text=auto
package/.github/dependabot.yml DELETED
@@ -1,10 +0,0 @@
1
- version: 2
2
- updates:
3
- - package-ecosystem: "npm"
4
- directory: "/"
5
- schedule:
6
- interval: "weekly"
7
- assignees:
8
- - "borisdamevin"
9
- reviewers:
10
- - "borisdamevin"
package/.github/workflows/node.js.yml DELETED
@@ -1,50 +0,0 @@
1
- name: Node.js CI
2
-
3
- on:
4
- push:
5
- branches: [ main, develop ]
6
- pull_request:
7
- branches: [ main, develop ]
8
-
9
- jobs:
10
- test:
11
- runs-on: ubuntu-latest
12
-
13
- strategy:
14
- matrix:
15
- node-version: [ 14.x, 16.x ]
16
-
17
- steps:
18
- - uses: actions/checkout@v2
19
-
20
- - name: Use Node.js ${{ matrix.node-version }}
21
- uses: actions/setup-node@v2
22
- with:
23
- node-version: ${{ matrix.node-version }}
24
- cache: 'npm'
25
-
26
- - name: Install Dependencies
27
- run: npm ci --ignore-scripts
28
-
29
- - name: Test
30
- run: npm run test
31
-
32
- publish:
33
- runs-on: ubuntu-latest
34
- needs: test
35
- if: ${{ github.ref == 'refs/heads/main' }}
36
-
37
- steps:
38
- - uses: actions/checkout@v2
39
- - uses: actions/setup-node@v2
40
- with:
41
- node-version: ${{ matrix.node-version }}
42
-
43
- - name: Install Dependencies
44
- run: npm ci --ignore-scripts
45
-
46
- - name: Release
47
- run: npm run release
48
- env:
49
- NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
50
- GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
package/.husky/commit-msg DELETED
@@ -1,4 +0,0 @@
1
- #!/bin/sh
2
- . "$(dirname "$0")/_/husky.sh"
3
-
4
- npx --no-install commitlint --edit
package/.releaserc.json DELETED
@@ -1,76 +0,0 @@
1
- {
2
- "branches": [
3
- "main",
4
- {
5
- "name": "beta",
6
- "prerelease": true
7
- },
8
- {
9
- "name": "alpha",
10
- "prerelease": true
11
- }
12
- ],
13
- "plugins": [
14
- "@semantic-release/commit-analyzer",
15
- [
16
- "@semantic-release/changelog",
17
- {
18
- "changelogTitle": "# Changelog\n\nAll notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines."
19
- }
20
- ],
21
- "@semantic-release/npm",
22
- [
23
- "@semantic-release/release-notes-generator",
24
- {
25
- "preset": "conventionalcommits",
26
- "presetConfig": {
27
- "types": [
28
- {
29
- "type": "feat",
30
- "section": "Features"
31
- },
32
- {
33
- "type": "fix",
34
- "section": "Bug Fixes"
35
- },
36
- {
37
- "type": "chore",
38
- "hidden": true
39
- },
40
- {
41
- "type": "build",
42
- "section": "Build System"
43
- },
44
- {
45
- "type": "docs",
46
- "hidden": true
47
- },
48
- {
49
- "type": "style",
50
- "hidden": true
51
- },
52
- {
53
- "type": "refactor",
54
- "section": "Code Refactoring"
55
- },
56
- {
57
- "type": "perf",
58
- "hidden": true
59
- },
60
- {
61
- "type": "test",
62
- "hidden": true
63
- }
64
- ]
65
- }
66
- }
67
- ],
68
- [
69
- "@semantic-release/git",
70
- {
71
- "message": "chore(release): publish version ${nextRelease.version}"
72
- }
73
- ],
74
- "@semantic-release/github"
75
- ]
76
- }
package/.stylelintignore DELETED
@@ -1,5 +0,0 @@
1
- ## Files
2
- *.spec.scss
3
-
4
- ## Folders
5
- /tests
package/.stylelintrc DELETED
@@ -1,8 +0,0 @@
1
- {
2
- "extends": [
3
- "stylelint-config-unsass"
4
- ],
5
- "rules": {
6
- "function-no-unknown": null
7
- }
8
- }
package/commitlint.config.js DELETED
@@ -1,9 +0,0 @@
1
- // ============================================================================================= //
2
- // COMMITLINT //
3
- // ============================================================================================= //
4
-
5
- module.exports = {
6
- extends: [
7
- '@commitlint/config-conventional'
8
- ]
9
- };
package/tests/functions.spec.scss DELETED
@@ -1,24 +0,0 @@
1
- // ============================================================================================= //
2
- // TEST //
3
- // ============================================================================================= //
4
-
5
- @use "true" as *;
6
- @use "../index" as breakpoint;
7
-
8
- @include describe("breakpoint.get-value()") {
9
- @include it("Should return value from token.") {
10
- @include assert {
11
- @include output(false) {
12
- .foo {
13
- width: breakpoint.get-value(lg);
14
- }
15
- }
16
-
17
- @include expect(false) {
18
- .foo {
19
- width: 960px;
20
- }
21
- }
22
- }
23
- }
24
- }
package/tests/mixins.spec.scss DELETED
@@ -1,144 +0,0 @@
1
- // ============================================================================================= //
2
- // TEST //
3
- // ============================================================================================= //
4
-
5
- @use "true" as *;
6
- @use "../index" as breakpoint;
7
-
8
- @include describe("breakpoint.up()") {
9
- @include it("Should return breakpoint 'up' rules.") {
10
- @include assert {
11
- @include output(false) {
12
- .foo {
13
- @include breakpoint.up(lg) {
14
- color: darkcyan;
15
- }
16
- }
17
- }
18
-
19
- @include expect(false) {
20
- @media (min-width: 960px) {
21
- .foo {
22
- color: darkcyan;
23
- }
24
- }
25
- }
26
- }
27
- }
28
- }
29
-
30
- @include describe("breakpoint.down()") {
31
- @include it("Should return breakpoint 'down' rules.") {
32
- @include assert {
33
- @include output(false) {
34
- .foo {
35
- @include breakpoint.down(lg) {
36
- color: darkcyan;
37
- }
38
- }
39
- }
40
-
41
- @include expect(false) {
42
- @media (max-width: 959px) {
43
- .foo {
44
- color: darkcyan;
45
- }
46
- }
47
- }
48
- }
49
- }
50
- }
51
-
52
- @include describe("breakpoint.only()") {
53
- @include it("Should return breakpoint 'only' rules.") {
54
- @include assert {
55
- @include output(false) {
56
- .foo {
57
- @include breakpoint.only(lg) {
58
- color: darkcyan;
59
- }
60
- }
61
- }
62
-
63
- @include expect(false) {
64
- @media (min-width: 960px) and (max-width: 1199px) {
65
- .foo {
66
- color: darkcyan;
67
- }
68
- }
69
- }
70
- }
71
- }
72
- }
73
-
74
- @include describe("breakpoint.between()") {
75
- @include it("Should return breakpoint 'between' rules.") {
76
- @include assert {
77
- @include output(false) {
78
- .foo {
79
- @include breakpoint.between(md, xl) {
80
- color: darkcyan;
81
- }
82
- }
83
- }
84
-
85
- @include expect(false) {
86
- @media (min-width: 768px) and (max-width: 1199px) {
87
- .foo {
88
- color: darkcyan;
89
- }
90
- }
91
- }
92
- }
93
- }
94
- }
95
-
96
- @include describe("breakpoint.config()") {
97
- @include it("Should return breakpoint 'config' rules.") {
98
- @include assert {
99
- @include output(false) {
100
- @include breakpoint.config((
101
- "3xl": 1980px
102
- ));
103
-
104
- .foo {
105
- @include breakpoint.up("3xl") {
106
- color: darkcyan;
107
- }
108
- }
109
- }
110
-
111
- @include expect(false) {
112
- @media (min-width: 1980px) {
113
- .foo {
114
- color: darkcyan;
115
- }
116
- }
117
- }
118
- }
119
- }
120
-
121
- @include it("Should return breakpoint 'config' rules with '$reset' option.") {
122
- @include assert {
123
- @include output(false) {
124
- @include breakpoint.config((
125
- "tablet": 768px
126
- ), true);
127
-
128
- .foo {
129
- @include breakpoint.up("tablet") {
130
- color: darkcyan;
131
- }
132
- }
133
- }
134
-
135
- @include expect(false) {
136
- @media (min-width: 768px) {
137
- .foo {
138
- color: darkcyan;
139
- }
140
- }
141
- }
142
- }
143
- }
144
- }
package/tests/scss.spec.js DELETED
@@ -1,44 +0,0 @@
1
- // ============================================================================================= //
2
- // TESTS //
3
- // ============================================================================================= //
4
-
5
- const path = require('path');
6
- const sassTrue = require('sass-true');
7
- const glob = require('glob');
8
-
9
- /**
10
- *
11
- * @param url
12
- * @param prev
13
- * @param done
14
- * @returns {{file: string}}
15
- */
16
- function importer(url, prev, done) {
17
- if (url[0] === '~') {
18
- url = path.resolve('node_modules', url.substr(1));
19
- }
20
-
21
- return {
22
- file: url
23
- };
24
- }
25
-
26
- describe('Sass', () => {
27
- // Find all the Sass files that end in `*.spec.scss` in any directory of this project.
28
- // I use path.resolve because True requires absolute paths to compile test files.
29
- const sassTestFiles = glob.sync(path.resolve(process.cwd(), '**/*.spec.scss'));
30
-
31
- // Run True on every file found with to describe and its methods provided
32
- sassTestFiles.forEach((file) =>
33
- sassTrue.runSass({
34
- importer,
35
- file,
36
- includePaths: [
37
- './node_modules'
38
- ]
39
- }, {
40
- describe,
41
- it
42
- })
43
- );
44
- });