Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@littlemissrobot/sass-breakpoints
Advanced tools
@littlemissrobot/sass-breakpoints - npm Package Compare versions
Comparing version 0.1.0 to 1.0.0
| { | ||
| "name": "@littlemissrobot/sass-breakpoints", | ||
| "version": "0.1.0", | ||
| "version": "1.0.0", | ||
| "description": "Little Miss Robot breakpoints setup for defining breakpoints and applying media queries", | ||
| "main": "index.js", | ||
| "scripts": { | ||
| "start": "NODE_ENV=local ./node_modules/.bin/gulp start --gulpfile .gulp/Gulpfile.js", | ||
| "build": "NODE_ENV=prod ./node_modules/.bin/gulp build --gulpfile .gulp/Gulpfile.js", | ||
| "todo": "leasot -x --reporter markdown 'src/**/*.html' 'src/**/*.scss' > TODO.md", | ||
| "start": "NODE_ENV=DEVELOPMENT ./node_modules/.bin/gulp start --gulpfile .gulpfile.js", | ||
| "build": "NODE_ENV=PRODUCTION ./node_modules/.bin/gulp build --gulpfile .gulpfile.js", | ||
| "prepublishOnly": "npm run build" | ||
@@ -25,19 +24,26 @@ }, | ||
| "files": [ | ||
| "lib" | ||
| "scss", | ||
| "_index.scss" | ||
| ], | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "devDependencies": { | ||
| "@littlemissrobot/stylelint-config": "^1.0.7", | ||
| "@littlemissrobot/stylelint-config": "^1.0.15", | ||
| "browser-sync": "^2.26.7", | ||
| "del": "^5.1.0", | ||
| "gulp": "^4.0.2", | ||
| "gulp-postcss": "^8.0.0", | ||
| "gulp-sass": "^4.0.2", | ||
| "gulp-sass": "^4.1.0", | ||
| "gulp-sourcemaps": "^2.6.5", | ||
| "gulp-stylelint": "^13.0.0", | ||
| "leasot": "^10.0.0", | ||
| "node-sass": "^4.13.0", | ||
| "postcss-preset-env": "^6.7.0", | ||
| "stylelint": "^13.3.0" | ||
| "postcss-scss": "^2.1.1", | ||
| "stylelint": "^13.5.0" | ||
| }, | ||
| "dependencies": { | ||
| "@littlemissrobot/sass-functions": "^0.1.0" | ||
| "@littlemissrobot/sass-functions": "^1.0.0", | ||
| "@littlemissrobot/sass-spacing": "^1.0.0", | ||
| "sass": "^1.26.8" | ||
| } | ||
| } |
520
README.md
@@ -1,421 +0,287 @@ | ||
| # Little Miss Robot - Sass Breakpoints | ||
| # Little Miss Robot - Sass breakpoints | ||
| > This repository contains the logic and functionality to define and insert | ||
| > media queries or breakpoints through the use of a configuration object within | ||
| > SASS. It allows to make use of pre-defined mixins and functions that are only | ||
| > breakpoint related. | ||
| > This repository contains logic and functionality to define and insert | ||
| > breakpoint based media queries through the use of a configuration. | ||
| ## Info | ||
| This package does not contain or generate any CSS. It simply provides a system | ||
| with `@function` and `@mixin` statement to manage breakpoints. It is part of the | ||
| @littlemissrobot/sass-system package. | ||
| This repository does not generate any CSS. It simply makes functions and mixins | ||
| available to be used in combination with a configuration object to manage your | ||
| breakpoints. This only works when writing CSS in SASS and is specifically made | ||
| for that language. | ||
| ## IMPORTANT | ||
| This library makes use of [Dart Sass](https://sass-lang.com/dart-sass), which is | ||
| the primary implementation of Sass. Make sure that your Sass compiler is making | ||
| use of Dart Sass. | ||
| This means that if you are using a task manager (like Gulp) or a module bundler | ||
| (like Webpack), you must indicate which compiler it should use for compiling | ||
| Sass to CSS. | ||
| Furthermore, this library makes heavy use of Sass modules: | ||
| [`@use`](https://sass-lang.com/documentation/at-rules/use). Therefore we | ||
| recommend importing and using this library with the `@use` statement. | ||
| ## Install | ||
| ```sh | ||
| # As a dependency | ||
| $ npm install @littlemissrobot/sass-breakpoints | ||
| # As a dev-dependency | ||
| $ npm install --save-dev @littlemissrobot/sass-breakpoints | ||
| ``` | ||
| ## Dependencies | ||
| - [@littlemissrobot/sass-functions/lib/main](https://www.npmjs.com/package/@littlemissrobot/sass-functions) | ||
| ## Usage | ||
| 1. Create a **.scss** file | ||
| 2. Import the library from the node_modules folder. | ||
| 1. Import the library from the node_modules folder: | ||
| ```scss | ||
| @import | ||
| // Dependency | ||
| "@littlemissrobot/sass-functions/lib/main", | ||
| // Library | ||
| "@littlemissrobot/sass-breakpoints/lib/main"; | ||
| @use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-breakpoints" as _b; | ||
| ``` | ||
| 3. Create a map-variable **$lmr-sass-breakpoints** and pass it a map where each | ||
| key is the name of the viewport, the value of that name is a map where the width | ||
| is defined. This is a map because this allows us to expand on the breakpoints | ||
| variable with other libraries that work well together. The unit can either be | ||
| pixels or rem. We prefer to work with rem. Therefore, in our setup 1rem is | ||
| equal to 10px to keep it readable. | ||
| 2. Pass the configuration to the dependencies and the library: | ||
| ```scss | ||
| $lmr-sass-breakpoints: ( | ||
| viewport-0: ( | ||
| width: 0, | ||
| ), | ||
| viewport-3: ( | ||
| width: 36rem | ||
| ), | ||
| viewport-4: ( | ||
| width: 48rem | ||
| ), | ||
| viewport-7: ( | ||
| width: 72rem | ||
| ), | ||
| viewport-9: ( | ||
| width: 99.2rem | ||
| ), | ||
| viewport-12: ( | ||
| width: 120rem | ||
| ) | ||
| // Dependency | ||
| @use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-spacing" as _s with ( | ||
| $base-font-size: 16px | ||
| ); | ||
| // Library | ||
| @use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-breakpoints" as _b with ( | ||
| $viewports: ( | ||
| viewport-3: 360px, | ||
| viewport-4: 480px, | ||
| viewport-7: 720px, | ||
| viewport-9: 992px, | ||
| viewport-12: 1200px | ||
| ) | ||
| ); | ||
| ``` | ||
| ## Mixins | ||
| 3. Functionality of the library is now available through the namespace `_b`. | ||
| ### respond-at($min-width) | ||
| ## Concept | ||
| Mixin that applies a media-query to a certain element. This media query can | ||
| either be placed inside a selector or can wrap around one or multiple selectors. | ||
| This mixin applies styling to the selector when the viewport is above the passed | ||
| width. The styling is applied until that breakpoint is reached. | ||
| The main focus of this library is to create consistent usage of breakpoints. | ||
| Each breakpoint should have a name and a width in pixels when it should get | ||
| triggered. | ||
| Parameters: | ||
| Naming the breakpoints can be contextual like mobile, tablet, desktop. But this | ||
| limits the amount of breakpoints we can create. Here we try avoiding using | ||
| $desktop-small, $desktop-small-x, ... because these are difficult to maintain. | ||
| * **min-width**: the minimum width until the breakpoint is reached. The value | ||
| can be: | ||
| We recommend naming breakpoints after the hundreth they belong too. For example: | ||
| * A number in pixels. | ||
| * A number in rem. This value is converted automagically to pixels. | ||
| * A string, which is the name of the breakpoint defined in | ||
| $lmr-sass-breakpoints. This must have a width key. This key can either be | ||
| in pixels or in rem. | ||
| * viewport-1: 110px | ||
| * viewport-1: 120px | ||
| * viewport-2: 240px | ||
| * viewport-3: 360px | ||
| * viewport-4: 480px | ||
| * viewport-7: 720px | ||
| ```scss | ||
| // ============================================================================= | ||
| // Configuration | ||
| // ============================================================================= | ||
| $lmr-sass-breakpoints: ( | ||
| viewport-7: ( | ||
| width: 72rem | ||
| ) | ||
| ); | ||
| We recommend staying with just one value every hundreth. This is done to avoid | ||
| very small gaps and inconsistencies. | ||
| // ============================================================================= | ||
| // Inside selector | ||
| // ============================================================================= | ||
| div { | ||
| The eventual breakpoint is placed in converted and placed in `em`. This is done | ||
| because this [is the only value consistent in every | ||
| browser](https://zellwk.com/blog/media-query-units/) | ||
| // Number in pixels | ||
| // ------------------------------------------------------------------------- | ||
| @include respond-at(720px) { | ||
| margin: 3rem; | ||
| } | ||
| ## Configuration | ||
| // Number is rem | ||
| // ------------------------------------------------------------------------- | ||
| @include respond-at(72rem) { | ||
| margin: 3rem; | ||
| } | ||
| As a dependency, @littlemissrobot/sass-spacing, is used to calculate the | ||
| breakpoint value in em. | ||
| // Name of the breakpoint | ||
| // ------------------------------------------------------------------------- | ||
| @include respond-at("viewport-7") { | ||
| margin: 3rem; | ||
| } | ||
| } | ||
| ```scss | ||
| // Dependency | ||
| @use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-spacing" as _s with ( | ||
| $base-font-size: 16px | ||
| ); | ||
| // ============================================================================= | ||
| // Around selector | ||
| // ============================================================================= | ||
| // Library | ||
| @use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-breakpoints" as _b with ( | ||
| $viewports: ( | ||
| viewport-3: 360px, | ||
| viewport-4: 480px, | ||
| viewport-7: 720px, | ||
| viewport-9: 992px, | ||
| viewport-12: 1200px | ||
| ) | ||
| ); | ||
| ``` | ||
| // Number in pixels | ||
| // ----------------------------------------------------------------------------- | ||
| @include respond-at(720px) { | ||
| ### $viewports | ||
| div { | ||
| margin: 3rem; | ||
| } | ||
| } | ||
| * **unit for each value**: px | ||
| * **default**: | ||
| ```scss | ||
| $viewports: ( | ||
| viewport-0: 0px, | ||
| viewport-3: 360px, | ||
| viewport-4: 480px, | ||
| viewport-7: 720px, | ||
| viewport-9: 992px, | ||
| viewport-12: 1200px, | ||
| ); | ||
| ``` | ||
| * **required**: true | ||
| // Number is rem | ||
| // ----------------------------------------------------------------------------- | ||
| @include respond-at(72rem) { | ||
| The `$viewports` is a sass map where every key is the name of the viewport name | ||
| and the value is its width when it should get triggered. | ||
| div { | ||
| margin: 3rem; | ||
| } | ||
| } | ||
| ## Mixins | ||
| // Name of the breakpoint | ||
| // ----------------------------------------------------------------------------- | ||
| @include respond-at("viewport-7") { | ||
| ### at($value) | ||
| div { | ||
| margin: 3rem; | ||
| } | ||
| } | ||
| ``` | ||
| Apply a breakpoint, to every element and prop above the given minimum width of | ||
| the breakpoint. | ||
| ### respond-to($max-width) | ||
| Mixin that applies a media-query to a certain element. This media query can | ||
| either be placed inside a selector or can wrap around one or multiple selectors. | ||
| This mixin applies styling to the selector when the viewport is below the passed | ||
| width. The styling is applied until that breakpoint is reached. | ||
| Parameters: | ||
| * **max-width**: the maximum width until the breakpoint is reached. The value | ||
| can be: | ||
| * **$value**: the minimum width, when below this width, the styling is not | ||
| applied. The value can either be: | ||
| * A number in pixels. | ||
| * A number in rem. This value is converted automagically to pixels. | ||
| * A string, which is the name of the breakpoint defined in | ||
| $lmr-sass-breakpoints. This must have a width key. This key can either be | ||
| in pixels or in rem. | ||
| * A number in pixels. | ||
| * A string, which is the name of the breakpoint defined in the config. | ||
| ```scss | ||
| // ============================================================================= | ||
| // Configuration | ||
| // ============================================================================= | ||
| $lmr-sass-breakpoints: ( | ||
| viewport-7: ( | ||
| width: 72rem | ||
| ) | ||
| @use "@littlemissrobot/sass-breakpoints" as _b with ( | ||
| $viewports: ( | ||
| viewport-7: 720px | ||
| ) | ||
| ); | ||
| // ============================================================================= | ||
| // Inside selector | ||
| // ============================================================================= | ||
| div { | ||
| body { | ||
| // Number in pixels | ||
| // ------------------------------------------------------------------------- | ||
| @include respond-to(720px) { | ||
| margin: 3rem; | ||
| } | ||
| // Name of the breakpoint | ||
| @include _b.at("viewport-7") { | ||
| background-color: blue; | ||
| } | ||
| // Number is rem | ||
| // ------------------------------------------------------------------------- | ||
| @include respond-to(72rem) { | ||
| margin: 3rem; | ||
| } | ||
| // Name of the breakpoint | ||
| // ------------------------------------------------------------------------- | ||
| @include respond-to("viewport-7") { | ||
| margin: 3rem; | ||
| } | ||
| // Number in pixels | ||
| @include _b.at(720px) { | ||
| background-color: blue; | ||
| } | ||
| } | ||
| // ============================================================================= | ||
| // Around selector | ||
| // ============================================================================= | ||
| // Name of the breakpoint | ||
| @include _b.at("viewport-7") { | ||
| // Number in pixels | ||
| // ----------------------------------------------------------------------------- | ||
| @include respond-to(720px) { | ||
| div { | ||
| margin: 3rem; | ||
| } | ||
| body { | ||
| background-color: blue; | ||
| } | ||
| } | ||
| // Number is rem | ||
| // ----------------------------------------------------------------------------- | ||
| @include respond-to(72rem) { | ||
| // Number in pixels | ||
| @include _b.at(720px) { | ||
| div { | ||
| margin: 3rem; | ||
| } | ||
| body { | ||
| background-color: blue; | ||
| } | ||
| } | ||
| // Name of the breakpoint | ||
| // ----------------------------------------------------------------------------- | ||
| @include respond-to("viewport-7") { | ||
| div { | ||
| margin: 3rem; | ||
| } | ||
| } | ||
| ``` | ||
| ### respond-between($min-width, $max-width) | ||
| ### to($value) | ||
| Mixin that applies a media-query to a certain element. This media query can | ||
| either be placed inside a selector or can wrap around one or multiple selectors. | ||
| This mixin applies styling to the selector when the viewport is between the | ||
| passed widths. | ||
| Apply a breakpoint, to every element and prop below the given maximum width of | ||
| the breakpoint. | ||
| Parameters: | ||
| * **min-width**: the minimum width, when below this width, the styling is not | ||
| applied. | ||
| * **max-width**: the maximum width, when above this width, the styling is not | ||
| applied. | ||
| * **$value**: the maximum width, when above this width, the styling is not | ||
| applied. The value can either be: | ||
| These parameters can both either be: | ||
| * A number in pixels. | ||
| * A string, which is the name of the breakpoint defined in the config. | ||
| * A number in pixels. | ||
| * A number in rem. This value is converted automagically to pixels. | ||
| * A string, which is the name of the breakpoint defined in | ||
| $lmr-sass-breakpoints. This must have a width key. This key can either be | ||
| in pixels or in rem. | ||
| ```scss | ||
| // ============================================================================= | ||
| // Configuration | ||
| // ============================================================================= | ||
| $lmr-sass-breakpoints: ( | ||
| viewport-7: ( | ||
| width: 72rem | ||
| ), | ||
| viewport-9: ( | ||
| width: 96rem | ||
| ) | ||
| @use "@littlemissrobot/sass-breakpoints" as _b with ( | ||
| $viewports: ( | ||
| viewport-7: 720px | ||
| ) | ||
| ); | ||
| // ============================================================================= | ||
| // Inside selector | ||
| // ============================================================================= | ||
| div { | ||
| body { | ||
| // Number in pixels | ||
| // ------------------------------------------------------------------------- | ||
| @include respond-between(720px, 960px) { | ||
| margin: 3rem; | ||
| } | ||
| // Name of the breakpoint | ||
| @include _b.to("viewport-7") { | ||
| background-color: blue; | ||
| } | ||
| // Number is rem | ||
| // ------------------------------------------------------------------------- | ||
| @include respond-between(72rem, 96rem) { | ||
| margin: 3rem; | ||
| } | ||
| // Name of the breakpoint | ||
| // ------------------------------------------------------------------------- | ||
| @include respond-between("viewport-7", "viewport-9") { | ||
| margin: 3rem; | ||
| } | ||
| // Combined | ||
| // ------------------------------------------------------------------------- | ||
| @include respond-between(720px, 96rem) { | ||
| margin: 3rem; | ||
| } | ||
| @include respond-between("viewport-7", 960px) { | ||
| margin: 3rem; | ||
| } | ||
| @include respond-between(72rem, "viewport-9") { | ||
| margin: 3rem; | ||
| } | ||
| // Number in pixels | ||
| @include _b.to(720px) { | ||
| background-color: blue; | ||
| } | ||
| } | ||
| // ============================================================================= | ||
| // Around selector | ||
| // ============================================================================= | ||
| // Number in pixels | ||
| // ----------------------------------------------------------------------------- | ||
| @include respond-between(720px, 960px) { | ||
| div { | ||
| margin: 3rem; | ||
| } | ||
| } | ||
| // Number is rem | ||
| // ----------------------------------------------------------------------------- | ||
| @include respond-between(72rem, 96rem) { | ||
| div { | ||
| margin: 3rem; | ||
| } | ||
| } | ||
| // Name of the breakpoint | ||
| // ----------------------------------------------------------------------------- | ||
| @include respond-between("viewport-7", "viewport-9") { | ||
| @include _b.to("viewport-7") { | ||
| div { | ||
| margin: 3rem; | ||
| } | ||
| body { | ||
| background-color: blue; | ||
| } | ||
| } | ||
| // Combined | ||
| // ----------------------------------------------------------------------------- | ||
| @include respond-between(720px, 96rem) { | ||
| // Number in pixels | ||
| @include _b.to(720px) { | ||
| div { | ||
| margin: 3rem; | ||
| } | ||
| body { | ||
| background-color: blue; | ||
| } | ||
| } | ||
| ``` | ||
| @include respond-between("viewport-7", 960px) { | ||
| ### between($min, $max) | ||
| div { | ||
| margin: 3rem; | ||
| } | ||
| } | ||
| Apply a breakpoint, to every element and prop between the given minimum and | ||
| maximum width of the breakpoint. | ||
| @include respond-between(72rem, "viewport-9") { | ||
| Parameters: | ||
| div { | ||
| margin: 3rem; | ||
| } | ||
| } | ||
| ``` | ||
| * **$min**: the minimum width, when below this width, the styling is not | ||
| applied. The value can either be: | ||
| ## Functions | ||
| * A number in pixels. | ||
| * A string, which is the name of the breakpoint defined in the config. | ||
| ### get-width($name) | ||
| * **$max**: the maximum width, when above this width, the styling is not | ||
| applied. The value can either be: | ||
| Function that returns the value of the width key defined within the a breakpoint | ||
| in the $lmr-sass-breakpoints map. These can be used to retrieve the value and | ||
| make a calculation or can be used with other media queries. | ||
| * A number in pixels. | ||
| * A string, which is the name of the breakpoint defined in the config. | ||
| Parameters: | ||
| * **$name**: the name of the breakpoint in the $lmr-sass-breakpoints map. | ||
| ```scss | ||
| // ============================================================================= | ||
| // Configuration | ||
| // ============================================================================= | ||
| $lmr-sass-breakpoints: ( | ||
| viewport-7: ( | ||
| width: 72rem | ||
| ), | ||
| viewport-9: ( | ||
| width: 960px | ||
| ) | ||
| @use "@littlemissrobot/sass-breakpoints" as _b with ( | ||
| $viewports: ( | ||
| viewport-7: 720px, | ||
| viewport-9: 992px | ||
| ) | ||
| ); | ||
| // ============================================================================= | ||
| // Function | ||
| // ============================================================================= | ||
| body { | ||
| // Returns 72rem | ||
| get-width("viewport-7"); | ||
| // Name of the breakpoint | ||
| @include _b.between("viewport-7", "viewport-9") { | ||
| background-color: blue; | ||
| } | ||
| // Returns 960px | ||
| get-width("viewport-9"); | ||
| // Number in pixels | ||
| @include _b.between(720px, 992px) { | ||
| background-color: blue; | ||
| } | ||
| } | ||
| // ============================================================================= | ||
| // With media queries | ||
| // ============================================================================= | ||
| div { | ||
| // Name of the breakpoint | ||
| @include _b.between("viewport-7", "viewport-9") { | ||
| // same as respond-at("viewport-9") | ||
| @include respond-at(get-width("viewport-9")) { | ||
| margin: 3rem; | ||
| } | ||
| body { | ||
| background-color: blue; | ||
| } | ||
| } | ||
| // same as respond-to("viewport-7") | ||
| @include respond-to(get-width("viewport-7")) { | ||
| margin: 3rem; | ||
| } | ||
| // Number in pixels | ||
| @include _b.between(720px, 992px) { | ||
| // same as respond-between("viewport-7", "viewport-9") | ||
| @include respond-between(get-width("viewport-7"), get-width("viewport-9")) { | ||
| margin: 3rem; | ||
| } | ||
| body { | ||
| background-color: blue; | ||
| } | ||
| } | ||
| ``` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by50%
12
- Number of low quality alerts
- decreased by-50%
1
Worsened metrics
- Total package byte prevSize
- decreased by-7.82%
17076
- Dependency count
- increased by200%
3
- Dev dependency count
- increased by10%
11
- Number of lines in readme file
- decreased by-31.75%
288
Dependency changes
+ Addedsass@^1.26.8
+ Added@littlemissrobot/sass-functions@1.1.2(transitive)
+ Added@littlemissrobot/sass-spacing@1.1.2(transitive)
+ Added@parcel/watcher@2.5.0(transitive)
+ Added@parcel/watcher-android-arm64@2.5.0(transitive)
+ Added@parcel/watcher-darwin-arm64@2.5.0(transitive)
+ Added@parcel/watcher-darwin-x64@2.5.0(transitive)
+ Added@parcel/watcher-freebsd-x64@2.5.0(transitive)
+ Added@parcel/watcher-linux-arm-glibc@2.5.0(transitive)
+ Added@parcel/watcher-linux-arm-musl@2.5.0(transitive)
+ Added@parcel/watcher-linux-arm64-glibc@2.5.0(transitive)
+ Added@parcel/watcher-linux-arm64-musl@2.5.0(transitive)
+ Added@parcel/watcher-linux-x64-glibc@2.5.0(transitive)
+ Added@parcel/watcher-linux-x64-musl@2.5.0(transitive)
+ Added@parcel/watcher-win32-arm64@2.5.0(transitive)
+ Added@parcel/watcher-win32-ia32@2.5.0(transitive)
+ Added@parcel/watcher-win32-x64@2.5.0(transitive)
+ Addedbraces@3.0.3(transitive)
+ Addedchokidar@4.0.1(transitive)
+ Addeddetect-libc@1.0.3(transitive)
+ Addedfill-range@7.1.1(transitive)
+ Addedimmutable@4.3.7(transitive)
+ Addedis-extglob@2.1.1(transitive)
+ Addedis-glob@4.0.3(transitive)
+ Addedis-number@7.0.0(transitive)
+ Addedmicromatch@4.0.8(transitive)
+ Addednode-addon-api@7.1.1(transitive)
+ Addedpicomatch@2.3.1(transitive)
+ Addedreaddirp@4.0.2(transitive)
+ Addedsass@1.80.6(transitive)
+ Addedsource-map-js@1.2.1(transitive)
+ Addedto-regex-range@5.0.1(transitive)
- Removed@littlemissrobot/sass-functions@0.1.3(transitive)