steal-tools icon indicating copy to clipboard operation
steal-tools copied to clipboard

handle css import in production

Open pYr0x opened this issue 7 years ago • 3 comments

as i understand in this PR https://github.com/stealjs/steal-tools/pull/673 a CSS import in a CSS file will be untouched respectively the URL will be rewritten to the original location.

as i understand: after a production build the @import url points to the file e.g. in src not to dist.

but what happened when we use a third party module ?

e.g.: thrid party style.css

@import normalize.css
...some css....

we import that css file in your javscript file e.g. main.js

import "thrid-party-node-module/style.css";
...

pYr0x avatar Apr 26 '17 07:04 pYr0x

@pYr0x I would expect it to point to dist when using bundleAssets. If not that's a bug.

The open question is whether or not we should inline the styles. One issue is, what if normalize.css is imported in multiple other css files. Inlining it would mean that it would be in multiple places.

matthewp avatar Apr 26 '17 12:04 matthewp

i think bundleAssets will not cause that normalize.css will copyed into the dist folder, because we dont build a dependency graph of css files that are imported by CSS. @m-mujica i am wrong?

i will create a test repo and let you know

pYr0x avatar Apr 26 '17 12:04 pYr0x

I think it will be copied if imported into a file that is part of the dep graph. For example:

styles.css

@import "normalize.css";

main.js

import "./styles.css";

In this case normalize.css should be copied into dist/ with bundleAssets set to true. However if you did this:

styles.css

@import "other.css";

other.css

@import "normalize.css";

main.js

import "./styles.css";

Then I think other.css would be copied into dist but normalize.css would not be.

matthewp avatar Apr 26 '17 12:04 matthewp