Add a module system

• Proposal
• Specs
• Documentation
• Dart Sass
• LibSass

See also the module system project.

---

This is a compilation of issues and wishes about @import

Import CSS files #556

@import "normalize";

Would import sass, scss or css file

There’s a plugin for that

Import Once #139

@import-once "foo";
@import "foo" !once;
@depend "foo";

Multiple syntax suggestions for one time import

There is a plugin for that

Import Directory #690

@import "foo";

If “foo” is a folder than it tries to import “foo/_module.scss”

reasonable

Namespaces and Aliases #353

@import "foo" as "bar";

This would put every “foo” components (mixins, vars, placeholders…) in a “bar” package.

What would be the separator ? . or / or \ or :: ? Where would go the $ and % ? Before or after the namespace ? What it would look like :

// Mixins
@include bar.baz();
or
@include bar/baz();

// Variables
color: $bar.baz;
or
color: bar.$baz;
or
color: $bar/baz;
or
color: bar/$baz;

// Placeholders
div { @extend %bar.baz; }
or
div { @extend bar.%baz; }
or
div { @extend %bar/baz; }
or
div { @extend bar/%baz; }

// Functions
color: bar.baz();
or
color: bar/baz();

Non-transitive imports #353

if A imports B and B imports C, A shouldn’t necessarily see everything from C. A way of getting around non-transitive imports.

Renaming classes #353

This isn’t something I’m 100% sold on, but it has been requested. Maybe the correct way to do this is some combination of namespacing and @extend.

Disabling CSS output #353

Both selectively and wholesale. The importer may want to @extend the rules in the importee but not have them concretely present, or it may want to suppress rules matching a certain selector.

This is also related to #320 :

// A.scss
.foo {...}
.bar {...}

// B.scss
@use "A";
.baz { @extend .foo; }

B output would not contain .foo & .bar definition but only .baz;

Conditional imports #451

@if true {
    @import "foo";
}

It “worked” before but never intended.

Paths

A way to setup shortcut paths (like Require.js)

// No syntax intended, only the purpose
@paths (
    "bootstrap": "../components/bootstrap-sass/vendor/assets/stylesheets/bootstrap"
);

@import "bootstrap";

[MrMcGibblets]

Trying to follow the issues to get an understanding where this is, in regards to libSass, it was tagged libsass4.0 and is now tagged 5.0, considering 4.0 has a release goal for 2021, are we not expecting this until after then?

[backnight]

Hello, I would like to know where is the current development state of these features ? Especially for a feature like this in less : http://lesscss.org/features/#import-options

=> @import (reference) “filename”;

Thank you.