Extensible, scalable, Sass-based, OOCSS framework for large and long-lasting UI projects.

  • By inuitcss
  • Last update: Jan 2, 2023
  • Comments: 16

inuitcss

CircleCI

Extensible, scalable, Sass-based, OOCSS framework for large and long-lasting UI projects.

inuitcss is a framework in its truest sense: it does not provide you with UI and design out of the box, instead, it provides you with a solid architectural baseline upon which to complete your own work.

Installation

You can use inuitcss in your project by installing it using a package manager (recommended):

npm:

$ npm install inuitcss --save

yarn:

$ yarn add inuitcss

Bower:

$ bower install inuitcss --save

Copy/paste (not recommended):

You can download inuitcss and save it into your project’s css/ directory. This method is not recommended because you lose the ability to easily and quickly manage and update inuitcss as a dependency.

Getting Started

Once you have got inuitcss into your project using one of the methods outlined above, there are a handful of things we need to do before we’re ready to go.

Firstly, we need to identify any files whose name contain the word example. These files are demo and/or scaffolding files that inuitcss requires, but that you are encouraged to create and define yourself. These files, as of v6.0.0, are:

example.main.scss
settings/_example.settings.config.scss
settings/_example.settings.global.scss
components/_example.components.buttons.scss

Here’s what we need to do with them:

example.main.scss

This is your main, or manifest, file. This is the backbone of any inuitcss project, and it is responsible for @importing all other files. This is the file that we compile out into a corresponding CSS file.

You need to copy this file from the directory that your package manager installed it into, and move it to the root of your css/ directory. Once there, rename it main.scss.

Next, you’ll need to update all of the @imports in that file to point at the new locations of each partial (that will depend on how your project is set up).

Once you’ve done this, you should be able to run the following command on that file and get a compiled stylesheet without any errors:

path/to/css/$ sass main.scss:main.css

N.B. If you downloaded inuitcss, you do not need to move this file; you can simply rename it.

_example.settings.config.scss

This is a configuration file that inuitcss uses to handle the state, location, or environment of your project. This handles very high-level settings that don’t necessarily affect the CSS itself, but can be used to manipulate things depending on where you are running things (e.g. turning a debugging mode on, or telling your CI sever that you’re compiling for production).

Copy this file into your own css/settings/ directory and rename it _settings.config.scss.

N.B. If you downloaded inuitcss, you do not need to move this this file; you can simply rename it.

_example.settings.global.scss

This is an example globals file; it contains any settings that are available to your entire project. These variables and settings could be font families, colours, border-radius values, etc.

Copy this file into your own css/settings/ directory and rename it _settings.global.scss. Now you can begin adding your own project-wide settings.

_example.components.buttons.scss

You don’t need to really do much with this file other than ensure you don’t let it into your final project!

This file exists to show you how you might build components into an inuitcss project, because components are the one thing that inuitcss purposefully refuses to provide.

You can, if you wish, copy this file to your own css/components/ directory and rename it _components.buttons.scss. You can now use this file as the basis for your own buttons component.

CSS directory structure

inuitcss follows a specific folder structure, which you should follow as well in your own CSS directory:

  • /settings: Global variables, site-wide settings, config switches, etc.
  • /tools: Site-wide mixins and functions.
  • /generic: Low-specificity, far-reaching rulesets (e.g. resets).
  • /elements: Unclassed HTML elements (e.g. a {}, blockquote {}, address {}).
  • /objects: Objects, abstractions, and design patterns (e.g. .o-layout {}).
  • /components: Discrete, complete chunks of UI (e.g. .c-carousel {}). This is the one layer that inuitcss doesn’t provide code for, as this is completely your terrain.
  • /utilities: High-specificity, very explicit selectors. Overrides and helper classes (e.g. .u-hidden {}).

Following this structure allows you to intersperse inuitcss’ code with your own, so that your main.scss file might look something like this:

// SETTINGS
@import "settings/settings.config";
@import "node_modules/inuitcss/settings/settings.core";
@import "settings/settings.global";
@import "settings/settings.colors";

// TOOLS
@import "node_modules/inuitcss/tools/tools.font-size";
@import "node_modules/inuitcss/tools/tools.clearfix";
@import "node_modules/sass-mq/mq";
@import "tools/tools.aliases";

// GENERIC
@import "node_modules/inuitcss/generic/generic.box-sizing";
@import "node_modules/inuitcss/generic/generic.normalize";
@import "node_modules/inuitcss/generic/generic.shared";

// ELEMENTS
@import "node_modules/inuitcss/elements/elements.page";
@import "node_modules/inuitcss/elements/elements.headings";
@import "elements/elements.links";
@import "elements/elements.quotes";

// OBJECTS
@import "node_modules/inuitcss/objects/objects.layout";
@import "node_modules/inuitcss/objects/objects.media";
@import "node_modules/inuitcss/objects/objects.flag";
@import "node_modules/inuitcss/objects/objects.list-bare";
@import "node_modules/inuitcss/objects/objects.list-inline";
@import "node_modules/inuitcss/objects/objects.box";
@import "node_modules/inuitcss/objects/objects.block";
@import "node_modules/inuitcss/objects/objects.table";

// COMPONENTS
@import "components/components.buttons";
@import "components/components.page-head";
@import "components/components.page-foot";
@import "components/components.site-nav";
@import "components/components.ads";
@import "components/components.promo";

// UTILITIES
@import "node_modules/inuitcss/utilities/utilities.widths";
@import "node_modules/inuitcss/utilities/utilities.headings";
@import "node_modules/inuitcss/utilities/utilities.spacings";

NOTE: Every @import above which begins with "node_modules" is inuitcss core. When you installed inuitcss via bower, these imports would begin with "bower_components".

Having your own and inuitcss’ partials interlaced like this is one of the real strengths of inuitcss.

Core functionality

Before inuitcss can do anything, it needs to know your base font-size and line-height. These settings are stored in settings.core (as $inuit-global-font-size and $inuit-global-line-height), and can be overridden in the same way you’d override any of inuitcss’ config.

Probably the most opinionated thing inuitcss will ever do is reassign your $inuit-global-line-height variable to $inuit-global-spacing-unit. This value then becomes the cornerstone of your UI, acting as the default margin and padding value for any components that require it.

While this might seem overly opinionated, it does mean that:

  1. You get a free vertical rhythm because everything sits on a multiple of your baseline, and…
  2. We reduce the amount of magic numbers in our codebase because we can rationalise where the majority of values in our CSS came from.

Modifying inuitcss

inuitcss is highly configurable, but should not be edited directly. The correct way to make changes to inuitcss is to pass in variables before you @import the specific file. Let’s take settings.core as an example—in this file we can see the variables $inuit-global-font-size and $inuit-global-line-height. If we want to keep these as-is then we needn’t do anything other than @import the file. If we wanted to change these values to 12px and 18px respectively (don’t worry, inuitcss will convert these pixel values to rems for you) then we just need to pass those values in before the @import, thus:

$inuit-global-font-size:   12px;
$inuit-global-line-height: 18px;
@import "node_modules/inuitcss/settings/settings.core";

The same goes for any inuitcss module: you can configure it by predefining any of its variables immediately before the @import:

$inuit-wrapper-width: 1480px;
@import "node_modules/inuitcss/objects/objects.wrapper";

$inuit-fractions: 1 2 3 4 12;
@import "node_modules/inuitcss/utilities/utilities.widths";

This method of modifying the framework means that you don’t need to edit any files directly (thus making it easier to update the framework), but also means that you’re not left with huge, bloated, monolithic variables files from which you need to configure an entire library.

Extending inuitcss

To extend inuitcss with your own code, simply create a partial in the <section>.<file> format, put it into the appropriate directory and @import it in your main.scss.

But extending inuitcss does not only mean adding your own partials to the project. Due to inuitcss’ modular nature, you can also omit those partials of inuitcss you don't need. But be aware that there are a few interdependencies between various inuitcss partials. The only partial that is indispensable for the framework to work properly is settings.core, though. But we recommend using all partials from the /settings, /tools and /generic layer.

Aliases

In order to avoid clashes with your own code, all of inuitcss’ mixins and variables are namespaced with inuit-, for example: $inuit-global-spacing-unit. These variables and mixins can become very tedious and time consuming to type over and over, so it is recommended that you alias them to something a little shorter. You can do this by creating a tools.aliases file (tools/_tools.aliases.scss) which would be populated with code like this:

// Reassign `$inuit-global-spacing-unit` to `$unit`.
$unit: $inuit-global-spacing-unit;

// Reassign lengthy font-size mixin to `font-size()`.
@mixin font-size($args...) {
  @include inuit-font-size($args...);
}

You can now use your own aliases onto inuitcss’ defaults throughout your project.

Components

inuitcss is a design-free, OOCSS framework—it does its best to provide zero cosmetic styling. This means that inuitcss can be used on any and all types of project (and it has been) without dictating (or even suggesting) a look-and-feel. If you do require a UI out of the box, then inuitcss is probably not the best tool for you. I’d recommend looking at a UI Toolkit such as Bootstrap.

Because inuitcss does no cosmetic styling, it is up to you to author the Components layer. Components are small partials that contain discrete chunks of UI that utilise the layers that came before it, for example, a carousel, or a dropdown nav, or an image gallery, and so on.

Namespaces

You may have stumbled upon the “odd” way inuitcss’ classes are prefixed. There are three different namespaces directly relevant to inuitcss:

  • .o-: Objects
  • .c-: Components
  • .u-: Utilities

In short: Every class in either of these three directories gets the appropriate prefix in its classname. All of inuitcss’ classes in one of these three layers has this kind of prefix. Be sure to follow this convention in your own code as well to keep a consistent naming convention across your code base.

If you want to dive deeper into namespacing classes and want to know why this is a great idea, have a look at this article.

Responsive

inuitcss is built with as much extensibility as possible in mind. Adding full responsive functionality for every kind of module would pretty much kill the intended generic concept behind the framework.

The one opinionated decision we made was adding Sass-MQ as a dependency, to provide at least a full working responsive grid off-the-shelf. So if you need media-query support in your own Sass code, have a look at the Sass-MQ documentation on how to use it properly.

NOTE: If you've installed inuitcss neither with npm nor with bower, make sure that Sass-MQ is properly imported in your main.scss in the tools layer.

If you want to use another media-query library like @include-media or sass-mediaqueries, feel free to do so. But in this case you have to manage your responsive widths classes yourself.

Providing plugins for inuitcss

Since inuitcss just provides very generic modules, there are probably modules you will write anew in every project. Although these modules might seem generic enough to you to be integrated into the core framework, we probably will consider it as not generic enough (we'd appreciate every idea, though!). But just because we are not willing to include a module you consider being useful, does not mean other inuitcss users shall not benefit from such an useful module. Due to inuitcss’ modular architecture, it's totally possible and we even welcome it, that these modules are published as kind of inuitcss plugins by you in a separate repository.

We'd love to see that the framework gets extended through the contribution of you and your plugins!

Prerequisites

Make sure you have at least Sass v3.3 installed.

Github

https://github.com/inuitcss/inuitcss

Comments(16)

  • 1

    [utilities.widths] Make obvious that there are pull and push classes

    Pull and push classes are generated alongside width utility classes. But it's nowhere to be found in comments or examples (for example, I didn't know about it until I accidentally checked the code for widths mixin :)). Maybe the best solution is to point it out via examples in comments in utility.widths?

    @inuitcss/core what do you think?

  • 2

    Adding unit tests

    Compliments #133

    So I thought I would go ahead and throw the initial setup together so everyone can see what the code could look like.

    All tests are green 😄

  • 3

    New optional utility: display

    Hi,

    This issue has already been discussed on #175 but I think this is a different approach.

    I think we could try a more convenient way and we can disable it by default.

    Why not a mobile-first? I was inspired by _utilities.widths.

    _utilities.displays.scss

    
// Enable inuit-displays.

$inuit-displays: true;
$inuit-display-aliases: true;


/* ==========================================================================
   #DISPLAYS
   ========================================================================== */

/**
 * Responsive display helpers.
 */


// Optionally, inuitcss can generate display helper classes. E.g.:
//
//   .u-display-block
//   .u-display-inline-block
//   .u-display-none

$inuit-displays: false !default;
$inuit-display-values: (
        none,
        inline,
        inline-block,
        block
) !default;


// Optionally, inuitcss can generate display helper aliases. E.g.:
//
//   .u-show
//   [email protected]
//   .u-hide
//   [email protected]

$inuit-display-aliases: false !default;
$inuit-display-alias-definitions: (
        none: hide,
        block: show
) !default;


// A mixin to spit out our display classes.
//
//   [email protected]

@mixin inuit-displays($display-values, $breakpoint: null) {

  // Loop through the display values.
  @each $display-value in $display-values {

    // Make a rule in the format `.u-display-block[@<breakpoint>]`.
    $rule: '.u-display-#{$display-value}#{$breakpoint}';

    // Add alias to rule if exists.
    $alias: map-get($inuit-display-alias-definitions, $display-value);
    @if $inuit-display-aliases == true and $alias != null {
      $rule: $rule + ", .u-#{$alias}#{$breakpoint}";
    }

    // Build it.
    #{$rule} {
      display: $display-value !important;
    }
  }

}


// Check if enabled.
@if $inuit-displays == true {

  // Global helpers.
  @include inuit-displays($inuit-display-values);

  // Responsive helpers.
  @if (variable-exists(mq-breakpoints)) {
    @each $inuit-bp-name, $inuit-bp-value in $mq-breakpoints {
      @include mq($from: $inuit-bp-name) {
        @include inuit-displays($inuit-display-values, \@#{$inuit-bp-name});
      }
    }
  }

}

    output

    .u-display-none, .u-hide {
  display: none !important;
}

.u-display-inline {
  display: inline !important;
}

.u-display-inline-block {
  display: inline-block !important;
}

.u-display-block, .u-show {
  display: block !important;
}

@media (min-width: 20em) {
  .u-display-none\@mobile, .u-hide\@mobile {
    display: none !important;
  }
  .u-display-inline\@mobile {
    display: inline !important;
  }
  .u-display-inline-block\@mobile {
    display: inline-block !important;
  }
  .u-display-block\@mobile, .u-show\@mobile {
    display: block !important;
  }
}

@media (min-width: 46.25em) {
  .u-display-none\@tablet, .u-hide\@tablet {
    display: none !important;
  }
  .u-display-inline\@tablet {
    display: inline !important;
  }
  .u-display-inline-block\@tablet {
    display: inline-block !important;
  }
  .u-display-block\@tablet, .u-show\@tablet {
    display: block !important;
  }
}

@media (min-width: 61.25em) {
  .u-display-none\@desktop, .u-hide\@desktop {
    display: none !important;
  }
  .u-display-inline\@desktop {
    display: inline !important;
  }
  .u-display-inline-block\@desktop {
    display: inline-block !important;
  }
  .u-display-block\@desktop, .u-show\@desktop {
    display: block !important;
  }
}

@media (min-width: 81.25em) {
  .u-display-none\@wide, .u-hide\@wide {
    display: none !important;
  }
  .u-display-inline\@wide {
    display: inline !important;
  }
  .u-display-inline-block\@wide {
    display: inline-block !important;
  }
  .u-display-block\@wide, .u-show\@wide {
    display: block !important;
  }
}

    Users can use other display values like table, table-cell, etc. with optional aliases if they want or they just use none and block.

    What are you saying? Is not that useful?

  • 4

    example of using inuitcss in a webpack project

    I am trying to integrate inuitcss in my webpack app. The webpack project I am using is using a custom loader to load bootstrap-sass which seams quite complicated https://github.com/erikras/react-redux-universal-hot-example/blob/master/webpack/dev.config.js

    Is there any example on how to do that with inuitcss?

  • 5

    [generic.shared] Use rem units?

    Can't we use rem units here instead of px? Like the original generic.shared did?

    use:

    @include inuit-rem(margin-bottom, $inuit-global-spacing-unit);

    instead of:

    margin-bottom: $inuit-global-spacing-unit;

    Or is there a reason this hasn't been ported over?

  • 6

    Separate functions and mixins tools into independent files

    Far from being a priority, I wonder if it would be efficient to split tools.functions and tools.mixins into independent files ?

    e.g.: tools.maths tools.font-size tools.clearfix ...

  • 7

    License

    Many moons ago, I picked the Apache 2.0 license, because it felt nice and permissive whilst also keeping full credit for myself. Are people still happy with Apache 2.0, or would a move to the more ubiquitous MIT license make sense?

    MIT – good

    • Nice and permissive
    • Copyright gets maintained – license information has to stay in the code
    • Fairly ubiquitous – people are used to it
    • Zero liability – I don’t get in trouble if my clearfixes take your app offline

    MIT – bad

    • Modifications – People don’t need to explain how, when, why, where they modified original code

    Apache 2.0 – good

    • All as above
    • Modifications – people have to point out exactly where they made any changes to the original code

    Apache 2.0 – bad

    • Prevents trademarking – license explicitly stops me from trademarking any of the source code

    Does anybody else have any thoughts?

    (For transparency and openness, I’m leaning toward keeping with Apache 2.0.)

  • 8

    Responsive vertical spacing object

    Over the last year or so, I keep adding a useful object of my own which helps utilise the spacing variables in the form of vertical padding. Much like the o-box, the proposed object applies padding to the desired element.

    I know this might be another custom extension of inuit that won't be included in the package but as I keep using it, I felt I would share anyway.

    The Problem I often get designs given to me where modules and sections have certain vertical spacings on mobile, different on tablet, different on smallDesk and so on. These also don't often scale like you would expect.

    What is it? Simply put, it's an object that applies top and bottom padding to an element. The object is very similar to o-box but the difference is that the values are set in a map which allows for custom responsive spacing. The @each loop iterates in a mobile-first way so it takes each array item as a $from breakpoint.

    Debatable areas

    • I'm "ummming" and "ahhhhing" about the naming of the object so that's up for discussion.
    • The functionality could also be integrated into the o-box object instead of it's own object via --veritcal-only and --{spacing-type} modifiers.

    Again, this is an object I use a lot so please feel free to shoot it down or embrace it :)

    PR to follow

  • 9

    Slack community

    Any thought to having a public Slack channel? We're using Inuit heavily in our everyday work and it would be great to be able to exchange ideas and contribute.

  • 10

    [objects.list-inline] Use :not instead of & + &

    I'm wondering if it could be interesting to switch this:

    > .o-list-inline__item + .o-list-inline__item {
  &:before {
    content: "#{$inuit-list-inline-delimiter}";
  }
}

    to

    > .o-list-inline__item:not(:last-child):after {
  content: "#{$inuit-list-inline-delimiter}";
}

    Bonus : may be font-size: 0 hack are not needed ;)

  • 11

    Which files need to be hosted?

    Hello @csswizardry , I am the member of cdnjs project. We want to host this library. But there is a question want to ask. I am not sure which files are needed to grab on npm. Please help me confirm which js or css file is necessary. Thank for your help!

    https://github.com/cdnjs/cdnjs/issues/9044

  • 12

    Bump json5 and @babel/core

    Bumps json5 and @babel/core. These dependencies needed to be updated together. Updates json5 from 0.5.1 to 2.2.3

    Release notes

    Sourced from json5's releases.

    v2.2.3

    v2.2.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)

    v2.1.3 [code, diff]

    • Fix: An out of memory bug when parsing numbers has been fixed. (#228, #229)

    v2.1.2

    • Fix: Bump minimist to v1.2.5. (#222)

    v2.1.1

    • New: package.json and package.json5 include a module property so bundlers like webpack, rollup and parcel can take advantage of the ES Module build. (#208)
    • Fix: stringify outputs \0 as \\x00 when followed by a digit. (#210)
    • Fix: Spelling mistakes have been fixed. (#196)

    v2.1.0

    • New: The index.mjs and index.min.mjs browser builds in the dist directory support ES6 modules. (#187)

    v2.0.1

    • Fix: The browser builds in the dist directory support ES5. (#182)

    v2.0.0

    • Major: JSON5 officially supports Node.js v6 and later. Support for Node.js v4 has been dropped. Since Node.js v6 supports ES5 features, the code has been rewritten in native ES5, and the dependence on Babel has been eliminated.

    • New: Support for Unicode 10 has been added.

    • New: The test framework has been migrated from Mocha to Tap.

    • New: The browser build at dist/index.js is no longer minified by default. A minified version is available at dist/index.min.js. (#181)

    • Fix: The warning has been made clearer when line and paragraph separators are

    ... (truncated)

    Changelog

    Sourced from json5's changelog.

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1 [code, diff]

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0 [code, diff]

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)

    v2.1.3 [code, diff]

    • Fix: An out of memory bug when parsing numbers has been fixed. (#228, #229)

    v2.1.2 [code, diff]

    • Fix: Bump minimist to v1.2.5. (#222)

    v2.1.1 [code, [diff][d2.1.1]]

    ... (truncated)

    Commits
    • c3a7524 2.2.3
    • 94fd06d docs: update CHANGELOG for v2.2.3
    • 3b8cebf docs(security): use GitHub security advisories
    • f0fd9e1 docs: publish a security policy
    • 6a91a05 docs(template): bug -> bug report
    • 14f8cb1 2.2.2
    • 10cc7ca docs: update CHANGELOG for v2.2.2
    • 7774c10 fix: add proto to objects and arrays
    • edde30a Readme: slight tweak to intro
    • 97286f8 Improve example in readme
    • Additional commits viewable in compare view

    Updates @babel/core from 7.1.2 to 7.20.7

    Release notes

    Sourced from @​babel/core's releases.

    v7.20.7 (2022-12-22)

    Thanks @​wsypower for your first PR!

    :eyeglasses: Spec Compliance

    • babel-helper-member-expression-to-functions, babel-helper-replace-supers, babel-plugin-proposal-class-properties, babel-plugin-transform-classes
    • babel-helpers, babel-plugin-proposal-class-properties, babel-plugin-transform-classes, babel-plugin-transform-object-super

    :bug: Bug Fix

    • babel-parser, babel-plugin-transform-typescript
    • babel-traverse
    • babel-plugin-transform-typescript, babel-traverse
    • babel-plugin-transform-block-scoping
    • babel-plugin-proposal-async-generator-functions, babel-preset-env
    • babel-generator, babel-plugin-proposal-optional-chaining
    • babel-plugin-transform-react-jsx, babel-types
    • babel-core, babel-helpers, babel-plugin-transform-computed-properties, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime
    • babel-helper-member-expression-to-functions, babel-helper-replace-supers, babel-plugin-proposal-class-properties, babel-plugin-transform-classes
    • babel-generator

    :nail_care: Polish

    • babel-plugin-transform-block-scoping, babel-traverse

    :house: Internal

    • babel-helper-define-map, babel-plugin-transform-property-mutators
    • babel-core, babel-plugin-proposal-class-properties, babel-plugin-transform-block-scoping, babel-plugin-transform-classes, babel-plugin-transform-destructuring, babel-plugin-transform-parameters, babel-plugin-transform-regenerator, babel-plugin-transform-runtime, babel-preset-env, babel-traverse

    :running_woman: Performance

    Committers: 6

    ... (truncated)

    Changelog

    Sourced from @​babel/core's changelog.

    v7.20.7 (2022-12-22)

    :eyeglasses: Spec Compliance

    • babel-helper-member-expression-to-functions, babel-helper-replace-supers, babel-plugin-proposal-class-properties, babel-plugin-transform-classes
    • babel-helpers, babel-plugin-proposal-class-properties, babel-plugin-transform-classes, babel-plugin-transform-object-super

    :bug: Bug Fix

    • babel-parser, babel-plugin-transform-typescript
    • babel-traverse
    • babel-plugin-transform-typescript, babel-traverse
    • babel-plugin-transform-block-scoping
    • babel-plugin-proposal-async-generator-functions, babel-preset-env
    • babel-generator, babel-plugin-proposal-optional-chaining
    • babel-plugin-transform-react-jsx, babel-types
    • babel-core, babel-helpers, babel-plugin-transform-computed-properties, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime
    • babel-helper-member-expression-to-functions, babel-helper-replace-supers, babel-plugin-proposal-class-properties, babel-plugin-transform-classes
    • babel-generator

    :nail_care: Polish

    • babel-plugin-transform-block-scoping, babel-traverse

    :house: Internal

    • babel-helper-define-map, babel-plugin-transform-property-mutators
    • babel-core, babel-plugin-proposal-class-properties, babel-plugin-transform-block-scoping, babel-plugin-transform-classes, babel-plugin-transform-destructuring, babel-plugin-transform-parameters, babel-plugin-transform-regenerator, babel-plugin-transform-runtime, babel-preset-env, babel-traverse

    :running_woman: Performance

    v7.20.6 (2022-11-28)

    :bug: Bug Fix

    v7.20.5 (2022-11-28)

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by nicolo-ribaudo, a new releaser for @​babel/core since your current version.


    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 13

    Bump qs from 6.5.2 to 6.5.3

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge`: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 14

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 15

    Bump node-sass from 4.13.1 to 7.0.0

    Bumps node-sass from 4.13.1 to 7.0.0.

    Release notes

    Sourced from node-sass's releases.

    v7.0.0

    Breaking changes

    Features

    Dependencies

    Community

    • Remove double word "support" from documentation (@​pzrq, #3159)

    Misc

    Supported Environments

    OS Architecture Node
    Windows x86 & x64 12, 14, 16, 17
    OSX x64 12, 14, 16, 17
    Linux* x64 12, 14, 16, 17
    Alpine Linux x64 12, 14, 16, 17
    FreeBSD i386 amd64 12, 14

    *Linux support refers to major distributions like Ubuntu, and Debian

    v6.0.1

    Dependencies

    Misc

    Supported Environments

    ... (truncated)

    Changelog

    Sourced from node-sass's changelog.

    v4.14.0

    https://github.com/sass/node-sass/releases/tag/v4.14.0

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 16

    Dart Sass 2.0.0 support: "Using / for division is deprecated and will be removed in Dart Sass 2.0.0."

    Hey there,

    We have been using Inuit for 6 years now, and recently moved over to Dart Sass, away from Node Sass.

    Dart Sass is throwing some deprecation warnings for the / division operator:

    DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($px, $base-font-size)
More info and automated migrator: https://sass-lang.com/d/slash-div

    As LibSass (and therefore NodeSass) is now deprecated (https://sass-lang.com/blog/libsass-is-deprecated), I am wondering what the main contributors thoughts are on if Inuit should be looking to migrate to Dart Sass?

    The following is directly from the libsass-is-deprecated article:

    How to migrate?

    If you’re a user of Node Sass, migrating to Dart Sass is straightforward: just replace node-sass in your package.json file with sass. Both packages expose the same JavaScript API.

    ...

    Please note that because activity on LibSass has been low for several years, it has a number of outstanding bugs and behavioral variations from the Sass spec. You may need to make minor updates to stylesheets to make them compatible with Dart Sass. See this list of major compatibility issues for reference.

Popular Tag

Related