Remove stylus in cozy-sharing

[edas]

See https://github.com/cozy/cozy-libs/pull/873#discussion_r358134541

In cozy-sharing we ask the embedding app to import cozy-sharing/dist/stylesheet.css. We could avoid that by adding a keepImport: true in our babel config. To do that we should also remove stylus and use plain CSS instead.

[ptbrowne]

keepImport: true would be in the config of babel-plugin-css-module-transform right ? https://github.com/michalkvasnicak/babel-plugin-css-modules-transform#keeping-import.

To do that we should also remove stylus and use plain CSS instead.

I am not sure I am following the logic here. If babel-plugin-css-module-transform is already used, the transpiled files do not contain any stylus.

@require 'components/forms.styl'
@require 'components/popover.styl'
@require 'settings/breakpoints.styl'
@require 'settings/palette.styl'

I don't see how to easily remove stylus if all this functionality from cozy-ui is used.

Would it be conceivable to only add import './stylesheet.css' to dist/index.js as a final step of the transpilation ?

[edas]

I am not sure I am following the logic here. If babel-plugin-css-module-transform is already used, the transpiled files do not contain any stylus.

When the import are kept, they try to import the stylus files in the transpiled source code (and fail).

I don't see how to easily remove stylus if all this functionality from cozy-ui is used.

Yep, that will require some work, and that's why I have not done this immediatly. Apart from a few variable, most work is to flatten the @extend $button of @extend $form, which should be doable if we really want to.

Would it be conceivable to only add import './stylesheet.css' to dist/index.js as a final step of the transpilation ?

At least in the current Drive app, there are many place where we directly import some components without importing the index.js. We could force Drive to import the index.js but I am not sure it would really be better than a manual css import.

[ptbrowne]

At least in the current Drive app, there are many place where we directly import some components without importing the index.js.

AMHA it is better in the sense that drive should not know about the path of dist files. I think using imports from dist/index.js is less brittle (since cozy-sharing does not have to think that the name of its files are public APIs) and from the point of view of cozy-sharing, there is only 1 place to control its public API, allowing us to do stuff like "when someone import something from index.js, import stylesheet.css".

Changing imports to use index.js would be easy to do with a codemod.