fix: add css files to sideEffects field of all packages

[taejs]

Issue

fixes https://github.com/naver/egjs-flicking/issues/708, https://github.com/naver/egjs-flicking/issues/573

Details

이슈 재현

이슈는 nuxt + production 환경일 때 flicking.css파일이 사라진다는 내용입니다. 제 개발 환경이 react + 자체 ssr + production 환경임에도 해당 현상이 재현되어 공통점을 찾아보았습니다.

webpack@4 production 환경에서만 MiniCssExtractPlugin(webpack@4 호환 1.6.2), OptimizeCSSAssetsPlugin이 적용되어있습니다. 이 경우 재현이 가능한것으로 보입니다. develop 환경에서는 style-loader를 사용하고 있습니다.

해결 방법

eg-js/flicking은 v4로 버전업 되면서 dist의 css 파일을 import해 사용하는 방식으로 변경되었습니다. 그러나 package.json의 sideEffects가 css파일을 별도로 제공하지 않을때 기준 그대로 false로 적용되어있습니다. 이 부분을 변경해주면 Flicking.css가 MiniCssExtractPlugin 1.6.2에서도 사라지지 않는것을 확인할 수 있습니다.

임시 해결방법으로는 아래 내용을 이용할 수 있습니다. Webpack - Mark the file as side-effect-free

마지막으로 "sideEffects"는 [module.rules 옵션](https://webpack.kr/configuration/module/#modulerules)으로도 설정할 수 있습니다.

우선 저는 제 개발환경에 아래 임시 방편을 적용해둘 예정입니다.

이 pr은 정확한 원인을 찾지 못하고 표면적인 현상만 수정했기 때문에 closed 되어도 무관합니다.

[CLAassistant]

All committers have signed the CLA.

[WoodNeck]

@taejs Thanks for fixing the issue! As we additionally provide sass files, I think merging this PR is fine after adding .sass at package.json file.

[taejs]

I added sass in sideEffects field. And removed the specific directory name(dist) because it's unnecessary.

"dist/.css" - > ".css", "*.sass"

[taejs]

The array accepts simple glob patterns to the relevant files. It uses glob-to-regexp under the hood (Supports: *, **, {a,b}, [a-z]). Patterns like .css, which do not include a /, will be treated like **/.css.

Following webpack guide, .css treated like **/.css in sideEffects field.

On second thought, It could be better to add a directory wild card since other bundlers don't guarantee this. Thanks for the review!

[BrandonKuenzi]

Is there any update on this?