Multiple selectors + composition removed

During some routine development an issue with how modular-css supported composition arose. See #238 for the gory details, but the short version is that code like the following is no longer supported.

.base { background: blue; }
.one .two .three { composes: base; }

The problem is that there's no sane way to export that w/o causing all sorts of potential overlapping disasters. This was actually called out in the CSS Modules Spec and just slipped through the cracks.

So now code like above will throw an error, sorry 😞

On the plus side webpack support now correctly uses their internal assets system, for whatever that's worth! I'm not 100% sure what benefit it brings but now I don't have to write code to save out files so that's a big 👍🏻 from me.

v1.0.0 🎉

It's time, there's finally a webpack plugin and we got a postcss plugin along for the ride.

No other features in this update, but those two are pretty good so I think this is a good time for v1.0.0. 👋

Selector namespaces and :external(...)

This is a big feature release, mostly.

1. Namespaced selectors

This is a simple way to avoid namespace collisions between @values you need to import. See #207 and #210 for more details.

@value * as ns from "./file.css"

.a {
    composes: ns.b;
}

2. :external(...)

A way to override styling on selectors from other files. #212

/* Source CSS */
.one {
    color: red;
}

.two :external(one from "./one.css") {
    color: blue;
}

/* Result CSS */
.mc56537f08_one {
    color: red;
}

.mc04cb4cb2_two .mc56537f08_one {
    color: blue;
}

Edge-cases are hard

But now modular-css handles more of them!

• global(.fooga) and .fooga can't exist in the same file
• Case-insensitive filesystems would duplicate files sometimes
• values couldn't be used inside @value statements

Documentation and globbing!

This is a pretty minor release, mostly focused on cleaning up the documentation and removing a confusing signature for the .glob() method.

Breaking Changes

• .glob() no longer accepts a dir arg, use cwd instead.
• modular-css no longer ships with a Promise polyfill.

Rollup errors

Small release dedicated to ensuring that any errors from postcss plugins (particularly in the after slot) are properly exposed.

#178 Better handle errors within rollup

CLI improvements

The CLI has long been an after-thought, but after running into a few places where an actual CLI or even CLI-style functionality would be useful it's time for a revamp.

The CLI has been completely rewritten, now w/ actual support for --help and other useful things you'd expect from a CLI.

usage: modular-css [options] <glob>...

options:
    -d, --dir DIR       Directory to search from [process cwd]
    -o, --out FILE      File to write output CSS to [stdout]
    -j, --json FILE     File to write output compositions JSON to
    -m, --map           Include inline source map in output
    --help              Show this help

So as an example, here's how you'd shove together all the .css files in a directory while ignoring everything in node_modules folders, and then outputting the CSS and JSON to files.

> modular-css -o ./out.css -j ./out.json **/*.css !**/node_modules/**

or use the CLI-style functionality from JS

var glob = require("modular-css/glob");

glob({
    dir    : "/some/dir",
    search : [ "**/*.css", "!**/node_modules/**" ]
});

This release also includes an update to [email protected] which required some flopping around but should improve a few things.

Strict mode

In fixing #82 it became apparent that more precise control for warnings vs errors was necessary, so now modular-css defaults to strict mode. Warnings from PostCSS plugins will be treated as errors and appropriately blow everything up!

To disable this behavior pass strict: false in your options.

Source maps + @values = <3

Since sourcemaps got some love for v0.20.0 it was finally time to take a look at exposing @value chains in source maps. It ended up not being that hard, so here we go! Now sourcemaps will show you where a value replacement came from, which is really nice!

See #129 for comparison links to the old source maps vs the new, more thorough ones.

Sourcemap fixups!

Sourcemaps were kinda broken in a bunch of dumb ways. They were broken deep in the core when building the combined CSS file, and the rollup plugin wasn't doing sensible things. Now sourcemaps are reasonable and accurate from the core on out, and the rollup plugin does all the right things so it works as it should.

🎉 🎉 🎉