Myth with `index.css` in new SUIT CSS Components

[carlcs]

I use Myth in combination with SUIT CSS Components, but can't get it to work with its newest update. A component now uses one index.css file that pulls all other css the component package provides via @import (eg. @import "./lib/size-sm.css";).

If I try to import such a component via its index.css file (@import "../suit-utils-size/index.css";) Myth can't find the dependencies at the set relative paths (./lib/size-sm.css).

Nicolas' "SUIT CSS preprocessor" does handle those paths, but I'd like to continue working with my current tools (Bower to get packages (unforked version), Grunt with "grunt-myth" to process the CSS with Myth).

Is it possible to accomplish this with Myth?

[MoOx]

I also use a lot of @necolas tools. Latest rework-import package handle relative path. It has been updated in current master branch, so please try with current master until a release came out (planned soon).

To get latest myth, delete grunt-myth, install master (npm install git://github.com/segmentio/myth.git) then reinstall grunt-myth & it should be ok (grunt-myth should not get myth from npm registry since you already have it at the same level in node_modules)

(Sent from my phone)

[carlcs]

Thanks Moox, will try that!

[carlcs]

I think I am halfway there with the current master (didn't know this is different to the version npm installs) AND a new installation of grunt-myth!

But now I encounter an error with SUIT components that make use of the "custom media" feature. Opened issue #86 for that and close here.

[MoOx]

Installing from git allow you to benefit from "non published yet" updates. It that simple (note: most of the time, version in package.json in master is not relevant, but only tells you what is the last stable version published)

[carlcs]

@MoOx I got another question on how to handle new SUIT Components. Besides relative path (which now work great with latest Myth) @necolas also uses some sort of hooks defined in the style property in package.json to @import CSS dependencies. Can I use these with Myth or do they only work with Component(1) or rework-npm build tools?

I'm a bit confused with all this and how it goes together. Do I have to leave Bower and Grunt to use SUIT properly, should I fork SUIT components and make them fit a Bower / Myth and Grunt built process? May I ask how you'd use SUIT for rather small websites?

[MoOx]

For now I use suitcss through npm, so I end up with

@import "../node_modules/normalize.css/normalize.css";

@import "../node_modules/cssrecipes-reset/index.css";
@import "../node_modules/cssrecipes-defaults/index.css";
@import "../node_modules/cssrecipes-vertical-rhythm/ratio/minor-third.css";
@import "../node_modules/cssrecipes-vertical-rhythm/index.css";

@import "../node_modules/suitcss-utils/node_modules/suitcss-utils-size/size.css";
@import "../node_modules/suitcss-utils/node_modules/suitcss-utils-display/display.css";
@import "../node_modules/suitcss-utils/node_modules/suitcss-utils-position/position.css";
@import "../node_modules/suitcss-utils/node_modules/suitcss-utils-align/align.css";
@import "../node_modules/suitcss-utils/node_modules/suitcss-utils-text/text.css";
@import "../node_modules/suitcss-components-grid/index.css";

It's not ideal, but it does the job :/

Myth goal is to take care of css features, it doesn't aim to handle a entire process like component(1).

For my concern, I think I'll end up using component(1) since this tool fit my current spirit of UI development. But I did not take time yet to dig into that. I'll see what I will do at this moment. Curious to know how guys like @necolas or @ianstormtaylor use suitpreproc/myth with css libs into ui components.

Maybe checkout https://github.com/mnmly/builder-myth

[ianstormtaylor]

Whenever I use it with component we just put Myth at the end of the build process, since it's app-specific generally and not component-specific.