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

Last update: Dec 30, 2022

Related tags

Overview

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:

You get a free vertical rhythm because everything sits on a multiple of your baseline, and…
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.

Comments

[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?
enhancement

opened by nenadjelovac 33
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 😄

opened by tymondesigns 31

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
//   .u-hide@tablet
//   .u-hide
//   .u-show@tablet

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


// A mixin to spit out our display classes.
//
//   .u-display-none@tablet

@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?

duplicate enhancement

opened by hayatbiralem 27

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?
help wanted question documentation

opened by casertap 25
[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?
question
opened by anotherfrontendguy 25
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 ...
question

opened by florianbouvot 25
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.)
question
opened by csswizardry 24
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
enhancement inuitcss v7
opened by ajshortt 22
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.
enhancement documentation

opened by hatzipanis 21

[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}";
  }
}

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

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

enhancement question

opened by florianbouvot 20

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
question

opened by kennynaoh 19
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.2

Release notes

Sourced from json5's releases.

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 used in strings.

Fix: package.json5 has been restored, and it is automatically generated and

... (truncated)

Changelog

Sourced from json5's changelog.

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]

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)

... (truncated)

Commits

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

d720b4f Improve readme (e.g. explain JSON5 better!) (#291)

910ce25 docs: fix spelling of Aseem

2aab4dd test: require tap as t in cli tests

6d42686 test: remove mocha syntax from tests

4798b9d docs: update installation and usage for modules

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

#15223 fix: Deleting super property should throw (@SuperSodaSea)

babel-helpers, babel-plugin-proposal-class-properties, babel-plugin-transform-classes, babel-plugin-transform-object-super

#15241 fix: Throw correct error types from sed ant class TDZ helpers (@SuperSodaSea)

:bug: Bug Fix

babel-parser, babel-plugin-transform-typescript

#15209 fix: Support auto accessors with TypeScript annotations (@liuxingbaoyu)

babel-traverse

#15287 Fix .parentPath after rename in SwitchCase (@nicolo-ribaudo)

babel-plugin-transform-typescript, babel-traverse

#15284 fix: Ts import type and func with duplicate name (@liuxingbaoyu)

babel-plugin-transform-block-scoping

#15278 Fix tdz analysis for reassigned captured for bindings (@nicolo-ribaudo)

babel-plugin-proposal-async-generator-functions, babel-preset-env

#15235 fix: Transform for await with shadowed variables (@liuxingbaoyu)

babel-generator, babel-plugin-proposal-optional-chaining

#15258 fix: Correctly generate (a ?? b) as T (@liuxingbaoyu)

babel-plugin-transform-react-jsx, babel-types

#15233 fix: Emit correct sourcemap ranges for JSXText (@liuxingbaoyu)

babel-core, babel-helpers, babel-plugin-transform-computed-properties, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime

#15232 fix: Computed properties should keep original definition order (@SuperSodaSea)

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

#15223 fix: Deleting super property should throw (@SuperSodaSea)

babel-generator

#15216 fix: Print newlines for leading Comments of TSEnumMember (@liuxingbaoyu)

:nail_care: Polish

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

#15275 Improve relative execution tracking in fn exprs (@nicolo-ribaudo)

:house: Internal

babel-helper-define-map, babel-plugin-transform-property-mutators

#15274 Inline & simplify @babel/helper-define-map (@nicolo-ribaudo)

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

#15200 Rewrite transform-block-scoping plugin (@nicolo-ribaudo)

:running_woman: Performance

babel-helper-compilation-targets

#15228 perf: Speed up getTargets (@liuxingbaoyu)

Committers: 6

Babel Bot (@babel-bot)

Huáng Jùnliàng (@JLHwung)

Nicolò Ribaudo (@nicolo-ribaudo)

... (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

#15223 fix: Deleting super property should throw (@SuperSodaSea)

babel-helpers, babel-plugin-proposal-class-properties, babel-plugin-transform-classes, babel-plugin-transform-object-super

#15241 fix: Throw correct error types from sed ant class TDZ helpers (@SuperSodaSea)

:bug: Bug Fix

babel-parser, babel-plugin-transform-typescript

#15209 fix: Support auto accessors with TypeScript annotations (@liuxingbaoyu)

babel-traverse

#15287 Fix .parentPath after rename in SwitchCase (@nicolo-ribaudo)

babel-plugin-transform-typescript, babel-traverse

#15284 fix: Ts import type and func with duplicate name (@liuxingbaoyu)

babel-plugin-transform-block-scoping

#15278 Fix tdz analysis for reassigned captured for bindings (@nicolo-ribaudo)

babel-plugin-proposal-async-generator-functions, babel-preset-env

#15235 fix: Transform for await with shadowed variables (@liuxingbaoyu)

babel-generator, babel-plugin-proposal-optional-chaining

#15258 fix: Correctly generate (a ?? b) as T (@liuxingbaoyu)

babel-plugin-transform-react-jsx, babel-types

#15233 fix: Emit correct sourcemap ranges for JSXText (@liuxingbaoyu)

babel-core, babel-helpers, babel-plugin-transform-computed-properties, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime

#15232 fix: Computed properties should keep original definition order (@SuperSodaSea)

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

#15223 fix: Deleting super property should throw (@SuperSodaSea)

babel-generator

#15216 fix: Print newlines for leading Comments of TSEnumMember (@liuxingbaoyu)

:nail_care: Polish

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

#15275 Improve relative execution tracking in fn exprs (@nicolo-ribaudo)

:house: Internal

babel-helper-define-map, babel-plugin-transform-property-mutators

#15274 Inline & simplify @babel/helper-define-map (@nicolo-ribaudo)

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

#15200 Rewrite transform-block-scoping plugin (@nicolo-ribaudo)

:running_woman: Performance

babel-helper-compilation-targets

#15228 perf: Speed up getTargets (@liuxingbaoyu)

v7.20.6 (2022-11-28)

:bug: Bug Fix

babel-helpers

#15231 Update checkInRHS helper min version (@nicolo-ribaudo)

v7.20.5 (2022-11-28)

... (truncated)

Commits

d414940 v7.20.7

6757a60 Rewrite transform-block-scoping plugin (#15200)

362451b chore: Enable eslint rule no-unnecessary-type-assertion (#15260)

e5e1369 fix: Computed properties should keep original definition order (#15232)

29a97b8 v7.20.5

f6546d7 Bump typescript to 4.9.3 (#15202)

5f19f62 Bump babel deps (#15187)

12a58cb v7.20.2

77f3700 fix: @babel/node repl and enable no-use-before-define rule (#15124)

aadd7a3 v7.19.6

Additional commits viewable in compare view

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.

dependencies
opened by dependabot[bot] 0
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 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.

dependencies
opened by dependabot[bot] 0
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

a0eea46 0.2.2

980e0bf Prevent overwriting previously decoded tokens

3c8a373 0.2.1

76abc93 Switch to GitHub workflows

746ca5d Fix issue where decode throws - fixes #6

486d7e2 Update license (#1)

a650457 Tidelift tasks

66e1c28 Meta tweaks

See full diff in compare view

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.

dependencies
opened by dependabot[bot] 0
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

Drop support for Node 15 (@nschonni)

Set rejectUnauthorized to true by default (@scott-ut, #3149)

Features

Add support for Node 17 (@nschonni)

Dependencies

Bump eslint from 7.32.0 to 8.0.0 (@nschonni, #3191)

Bump fs-extra from 0.30.0 to 10.0.0 (@nschonni, #3102)

Bump npmlog from 4.1.2 to 5.0.0 (@nschonni, #3156)

Bump chalk from 1.1.3 to 4.1.2 (@nschonni, #3161)

Community

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

Misc

Bump various GitHub Actions dependencies (@nschonni)

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

Remove mkdirp (@jimmywarting, #3108)

Bump meow to 9.0.0 (@ykolbin, #3125)

Bump mocha to 9.0.1 (@xzyfer, #3134)

Misc

Use default Apline version from docker-node (@nschonni, #3121)

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

918dcb3 Lint fix

0a21792 Set rejectUnauthorized to true by default (#3149)

e80d4af chore: Drop EOL Node 15 (#3122)

d753397 feat: Add Node 17 support (#3195)

dcf2e75 build(deps-dev): bump eslint from 7.32.0 to 8.0.0

bfa1a3c build(deps): bump actions/setup-node from 2.4.0 to 2.4.1

80d6c00 chore: Windows x86 on GitHub Actions (#3041)

566dc27 build(deps-dev): bump fs-extra from 0.30.0 to 10.0.0 (#3102)

7bb5157 build(deps): bump npmlog from 4.1.2 to 5.0.0 (#3156)

2efb38f build(deps): bump chalk from 1.1.3 to 4.1.2 (#3161)

Additional commits viewable in compare view

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.

dependencies
opened by dependabot[bot] 0
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.
opened by Jamiewarb 7

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

Releases(6.0.0)

6.0.0(Feb 26, 2018)
Summary

It's finally here! The major release of version 6.0.0. If you have been using any of the previous v6.0.0 pre-release versions of inuitcss, there might be breaking changes affecting your code. Please double-check the following changelog to cover everyone of these potential breaking changes. To see all the changes for every version, check out the CHANGELOG.md file.

Changelog

Breaking changes

Change the way inuitcss deals with the baseline grid, as part of improving the vertical rhythm generated by the inuit-font-size mixin. It includes changes to the mixin and some core variables [#291]

Responsive spacings are off by default, now. If you used the class .u-margin-bottom-none@[BREAKPOINT] as the only responsive spacing class in your markup, please make sure that the respective CSS is still generated. If it's not, please define the according classes as follows in your Sass:

$inuit-responsive-spacing-directions: ( "-bottom": "-bottom", ); $inuit-responsive-spacing-properties: ( "margin": "margin", ); $inuit-responsive-spacing-sizes: ( "-none": 0 );

If you already altered your responsive spacings in any way, you don't have to worry. [#312]

Remove all .o-wrapper modifier and return to the initial, bare wrapper object. [#299]

.o-crop and .o-ratio configurable maps now have a different structure, to include named modifiers. [#346]

New features

Add .o-crop--fill modifier. [#278]

Add .o-ratio--img-contain modifier [#285]

.o-crop and .o-ratio objects now receive user defined strings for the ratio modifiers class names. [#346]

.o-crop and .o-ratio objects now support decimals as ratios (e.g. 1.618:1 etc.). [#276]

Add more positioning modifier classes for the crop object. [#298]

Fixes

Fix o-layout--stretch in conjunction with o-layout--center, o-layout--right and o-layout--left. [#293]

Update to Sass’ @else if syntax according to current spec. [#331]

Correct filename for _objects.table.scss in README.md example. [#347]

Minor changes

Provide opt-out mechanism of static images when width/height attribute is assigned on <img>s. [#328]

Provide possibility to reset push/pull. [#316]

Contributors to this release

This list is in no specific order and lists everyone who contributed to this release.

@florianbouvot

@anselmh

@herzinger

@zomars

@rowild

@drdla

@csshugs

@nicoqh

@GarethOates

@olivertappin

Thanks everyone involved in getting 6.0.0 out there, you are great! ❤️
Source code(tar.gz)
Source code(zip)
6.0.0-beta.5(Jun 27, 2017)
Summary

This is the fifth beta release of inuitcss v6. This release contains a lot of changes, including breaking changes, deprecations and a lot of improvements, bugfixes and new features.
Please bear this in mind and double-check everything before you upgrade your project to the new version.

Changelog

Here’s a list of changes since 6.0.0-beta.4: https://github.com/inuitcss/inuitcss/compare/6.0.0-beta.4...6.0.0-beta.5

In future, we will provide a dedicated changelog file to make it easier to track changes inside the repository without relying on the online github.com website.

Contributors to this release

This list is in no specific order and lists everyone who contributed to this release.

@csshugs

@florianbouvot

@anselmh

@herzinger

@tymondesigns

@matharden

@jorenvanhee

@hayatbiralem

Thank you so much for adding value and your hard work to this project! ❤️🎉
Source code(tar.gz)
Source code(zip)