Add a module system

[JulienCabanes]

• 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";

[lolmaus]

Wow, great job @JulienCabanes.

[Anahkiasen]

In a way there is a plugin for import directory but since it's from Chris I'm pretty sure they know about it :p

[chriseppstein]

Adding #739 to the list which is necessary for #451 as well as any use of SassScript in an import directive.

[KittyGiraudel]

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

I really don't understand where do you get this from. I'd expect folder include to behave like this:

// Import a single file
@import "file"; 
// Import all files from folder
@import "folder/*"; 
// Import all files from all folders from folder
@import "folder/**/*";

Or am I wrong?

[JulienCabanes]

@hugogiraudel this came from #690
The problem with folder/* is you can't control the import order, you would expect an alphabetical one but it's too implicit.
Having a standard _module.scss responsible for importing in the correct order would be better.

[Anahkiasen]

Why not both ? Use an index file if present, otherwise alphabetical ?

[jslegers]

@JulienCabanes & @hugogiraudel & @Anahkiasen :

I love the suggestion made by @Anahkiasen.

An alternate solution would be to have a different syntax depending on what you're loading:

• If the path ends with a letter of number, it's considered a file
• If the path ends with /, it's considered a folder and an index file will be loaded... which could be named _module.scss, _index.scss, _component.scss, _loader.scss, ... Maybe the devs could leave it do users to configure what name they want for their index file? I'm pretty sure we're all unlikeoy to want to give up our personal preference here.
• If the path ends with /*, it's considered a folder and all files will be loaded alphabetically.

Example code

// Import a single file named "file"
@import "file"; 
// Import file "_index.scss" from folder "base"
@import "base/"; 
// Import all files from folder "base" in alphabetical order
@import "base/*"; 
// Import file "_index.scss" from every subfolder of folder "base",
// with folders loaded in alphabetical order
@import "base/*/";
// Import all files from every subfolder of folder "base"
// with both folders and files loaded in alphabetical order
@import "base/*/*";

[KittyGiraudel]

Convention is to use ** for folders, * for files. Henre @import "**/*".

[jslegers]

@hugogiraudel :

I'm not familiar with that convention, but it's but a minor difference...

// Import a single file named "file"
@import "file"; 
// Import file "_index.scss" from folder "base"
@import "base/"; 
// Import all files from folder "base" in alphabetical order
@import "base/*"; 
// Import file "_index.scss" from every subfolder of folder "base",
// with folders loaded in alphabetical order
@import "base/**/";
// Import all files from every subfolder of folder "base"
// with both folders and files loaded in alphabetical order
@import "base/**/*";