Rollup - Allow :export statement in scss file to import in js

Question

We have a Vue component library built with Rollup. The development is in early stage but everything worked well so far besides this one thing: we are not able to export SASS variables from a scss file and import them in a js file. We are used to do it using the :export statement of Webpack sass-loader. Something like this:

breakpoint.scss

@import './unit.scss';

$breakpoint-mobile: 360px;
$breakpoint-tablet: 768px;
$breakpoint-desktop: 1200px;

:export {
  mobile: strip-unit($breakpoint-mobile);
  tablet: strip-unit($breakpoint-tablet);
  desktop: strip-unit($breakpoint-desktop);
}

then in any js file, we could import the stylesheet import breakpoints from '@/styles/settings/breakpoints.scss' where breakpoints will be equal to { mobile: '360', tablet: '768', desktop: '1200' }.

So it works fine with Webpack, but I can't get it working with Rollup using rollup-plugin-styles without additional config (I also tried rollup-plugin-postcss, same result). I also can't find anything on Google related to that issue...

This is the result of breakpoints.scss compiled by Rollup:

import n from '../../node_modules/rollup-plugin-styles/dist/runtime/inject-css.js';

var css = ":export{mobile:360;tablet:768;desktop:1200;}";
n(css,{});

export default css;
export { css };
//# sourceMappingURL=breakpoints.scss.js.map

So it seems like it wants to inject the styles which makes sense, but still not the behavior I want. Is it already possible to achieve what I'm looking for or I need to contribute to rollup-plugin-styles to add the support?

Answer 1

Update: it looks like this is supported, please see the answer provided by pmrotule.

Old answer: The feature you are referring to is Interoperable CSS (ICSS). As you have stated, the popular css-loader for webpack-based projects supports it. As far as I can tell rollup-plugin-styles does currently not support Interoperable CSS. This is one of the reasons I still use webpack for my projects.

There is an open issue for this feature.

Contributing to the project and adding support for ICSS is a great idea, but expect some discussion about how the configuration will look like.

Answer 2

I just realized that if I use the option modules: true of rollup-plugin-styles, I get the behavior I was looking for... More details in the README.