reworkcss / rework-npm

Import CSS from npm modules using rework

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Feature request: import globbing

timkelty opened this issue · comments

In transitioning to Rework from Sass, one thing I am missing is the ability to do import globbing (https://github.com/chriseppstein/sass-globbing).

Is this something that could reasonably be added to rework-npm?

Not really, no, since it uses the exact same import algorithm as Node.js modules use, which does not have import globs. Also, in my experience, import globs in CSS are an anti-pattern, because the ordering of the imports is not well defined. In CSS the order that the files are imported is very important for determining the priority of conflicting properties. When specifically listing each file it is obvious where they will occur in the output.

I know what you're saying, but disagree about it being anti-pattern.

If you're writing really modularized css, the import order often really doesn't matter. In addition, if you're writing your css with each component/module as their own file, not having globbing can get pretty tedious.

Since rework-npm wont reimport in the same scope, if you really needed to control order, you could do something like this:

@import "./utilities/first.css"
@import "./utilities/second.css"
@import "./utilities/*.css"
@import "./components/*.css"

If I were to work on a plugin for this, would suggest making it standalone, or a fork of rework-npm, or even perhaps rework-importer? Since I already need and use rework-npm, this is where I'm starting, but I haven't peeked at any code yet. And it seems like using multiple plugins that handle import rules could get messy.

If you make a clean implementation of it while still using the Node.js module resolution algorithm, I would be willing to merge it into this project. But it probably would need to use a fork of resolve, which is what we use to resolve the module path.

Cool, I'll work on it! Thanks for the help.