elycruz / rollup-plugin-sass

Rollup .sass files.

rollup-plugin-sass

Installation

npm install rollup-plugin-sass -D

Usage

// rollup.config.js
import sass from 'rollup-plugin-sass';

export default {
  input: 'index.js',
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
  plugins: [
    sass()
  ]
}

rollup.config.ts

Add allowSyntheticDefaultImports, or esModuleInterop (enables allowSyntheticDefaultImports), to tsconfig.json:

{
  "compilerOptions": {
    "esModuleInterOp": true
  }
}

Reference: (https://www.typescriptlang.org/tsconfig#esModuleInterop)

Write rollup.config.ts:

// rollup.config.ts
import sass from 'rollup-plugin-sass';

// ...

Profit.

Options

output

• Type: Boolean|String|Function (default: false)

sass({
  // Default behaviour disable output
  output: false,

  // Write all styles to the bundle destination where .js is replaced by .css
  output: true,

  // Filename to write all styles
  output: 'bundle.css',

  // Callback that will be called ongenerate with two arguments:
  // - styles: the concatenated styles in order of imported
  // - styleNodes: an array of style objects:
  //  [
  //    { id: './style1.scss', content: 'body { color: red };' },
  //    { id: './style2.scss', content: 'body { color: green };' }
  //  ]
  output(styles, styleNodes) {
    writeFileSync('bundle.css', styles);
  }
})

insert

• Type: Boolean (default: false)

If you specify true, the plugin will insert compiled CSS into <head/> tag.

sass({
  insert: true
})

processor

• Type: Function

If you specify a function as processor which will be called with compiled css before generate phase.

import autoprefixer from 'autoprefixer';
import postcss from 'postcss';

sass({
  // Processor will be called with two arguments:
  // - style: the compiled css
  // - id: import id
  processor: css => postcss([autoprefixer])
    .process(css)
    .then(result => result.css)
})

The processor also support object result. Reverse css filed for stylesheet, the rest properties can be customized.

sass({
  processor(code) {
    return {
       css: '.body {}',
       foo: 'foo',
       bar: 'bar',
    };
  },
})

Otherwise, you could do:

import style, { foo, bar } from 'stylesheet';

runtime

• Type: Object (default: sass)

If you specify an object, it will be used instead of sass. You can use this to pass a different sass compiler (for example the node-sass npm package).

options

• Type: Object

Options for sass or your own runtime sass compiler.

If you specify data, the plugin will treat as prepend sass string. Since you can inject variables during sass compilation with node.

sass({
  options: {
    data: '$color: #000;'
  }
})

License

MIT elycruz, BinRui.Guan

rollup-plugin-sass's Issues

'resolve' doesn't resolve a path for node_modules

Hi,

I'm having a weird issue: I'm using an @import for a package, with ~, and resolve sometimes fails to resolve the path and hangs the whole Rollup process.

I've been debugging it and the issue is in this call, that for some reason, sometimes doesn't invoke the callback.

At this point you may be wondering why I'm creating an issue here and not on the resolve repository? Well, even if the issue is with resolve, I thought that I can easily bypass that by adding a custom importer... but custom importers are added after the one on the plugin, so if resolve "doesn't resolve" the path, they are never called.

Finally, the questions:

1. Do you think it would be possible to add custom importers before the one from the plugin?
2. If no, what about an option to define their priority?
3. Why do you resolve instead of require.resolve?

If you consider 1 or 2 above 3, I can make a PR.

Regards

Allow relative non-existent paths via "{output:'build/styles/mystyle.css, ...}'"

I was getting an error when configuring the plugin like:

let scssOpt = { 
  output: "build/mystyles/bundle.css"
}

Which was cause by the filepath build/mystyes not existing. IMHO this would be a handy feature, since many times we want JS and CSS to live in separate folders ( other than the root path of rollup.config.js).

---

To achieve this I did the following:

• Added a partial dependency on the convenient fs-extra package; in principle it could be a replacement for fs altogether, but I finall left the original fs.writeFileSync call.
• Modified the output-path test slightly, to cover this case.

I hope this can be useful!

You can't get the real source paths when using sourceMapEmbed

Hi,

I was trying to build a plugin that would extract images and web fonts from the generated CSS and copy them to the distribution directory.

The idea was to use sourceMapEmbed, then after this plugin generated the CSS, I would go get the map, list the original sources and search for url(...)s on the code, copy them and replace the path on the CSS.

The problem I found is that, because this plugin uses renderSync with the data option, the source map sources is stdin.

Playing around with the plugin code I saw that the only reason for using data is when you receive the prependSass option, and I was thinking that maybe you could use data only when prependSass has some value, and in case is empty, use file.

The change would be something like this:

- const sassConfig = Object.assign({ data: `${prependSass}${code}` }, options.options);
+ const baseConfig = prependSass
+   ? { data: `${prependSass}${code}` }
+   : { file: id };
+ const sassConfig = Object.assign(baseConfig, options.options);

The rest would work the same.

Would you consider it if I send a PR?
Regards

Expose sass variables to import them from the package

I'm not sure if this is the right place to ask this, but I am struggling with this for quite a long time now.

The idea is simple. I have npm package and it has some sass variables and mixins. And I need to provide them with the package, so in my projects I could just:

MyBeatifulProject/styles/main.sass:

@import '~my-lib/dist/sass/mixins` // or something like this

.custom-class
  // some stuff
  @mixin-from-my-lib

So, in order to make this working I have to put my mixins.sass in the dist somehow. And I don't have any ideas.

I am aware that this plugin just compiles .sass files to .css and put them in the dist the way I want to, but maybe somebody here can point me to the right direction.

Can't use in typescript config file

(!) Cannot call a namespace ('sass')
rollup.config.ts (23:8)
21:         nodeResolve({ browser: true }),
22:         commonjs(),
23:         sass({
            ^
24:             processor: css => postcss([autoprefixer])
25:                 .process(css)
loaded rollup.config.ts with warnings
[!] TypeError: sass__namespace is not a function

No error in IDE. But can't compile.

Can be fixed with "allowSyntheticDefaultImports": true in tsconfig.json compilerOptions

According to discussion here rollup/rollup-plugin-commonjs#157 (comment). It seems that can't be fixed. Please add to document

可以使用 "allowSyntheticDefaultImports": true in tsconfig.json compilerOptions 修复
根据 rollup/rollup-plugin-commonjs#157 (comment) 的讨论，看起来无法修复，需要加到文档里

Support passing in options.data

In my build process I need to add variables to sass for environment information. I did this before by

options.data = '$sprite: \'' + host + '/sprite.png\'; \n' + sassFile

Thus I'd like to be able to pass in {data: variables} and this plugin would do {data: options.data + code} to pass it to node-sass

babel-plugin-transform-runtime should be in dependencies

instead of in devDependencies

Any hint on how to write hash in final file name?

Any hint on how to write hash in final file name?

node10 regression

Hey,
I have a working rollup + sass setup. When updating to node10 it stoped working.

Testet envs:
✅ node 9.11.1 + rollup 0.58.2 + rollup-plugin-sass 0.6.1
❌ node 10.0.0 + rollup 0.58.2 + rollup-plugin-sass 0.6.1

Is it possible to run your tests with ava 4.3.1 ?

Hello, I am trying to update the debian package to your latest version, but I cannot.

• https://tracker.debian.org/pkg/node-rollup-plugin-sass
• https://salsa.debian.org/js-team/node-rollup-plugin-sass

apt info ava
Package: ava
Version: 4.3.1+dfsg+~cs43.2.10-1
Priority: optional
Section: javascript
Source: node-ava
Maintainer: Debian Javascript Maintainers <[email protected]>
Installed-Size: 601 kB
Provides: node-arrgv (= 1.0.2), node-ava (= 4.3.1), node-ava-typescript (= 3.0.1), node-chunkd (= 2.0.1), node-ci-parallel-vars (= 1.0.1), node-code-excerpt (= 4.0.0), node-common-path-prefix (= 3.0.0), node-convert-to-spaces (= 2.0.1), node-is-error (= 2.2.2), node-p-event (= 5.0.1), node-pkg-conf (= 4.0.0), node-serialize-error (= 11.0.0), node-supertap (= 3.0.1), node-temp-dir (= 2.0.0)
Depends: node-acorn, node-ansi-styles, node-arrify, node-cbor, node-chalk (>= 5), node-chokidar, node-ci-info, node-clean-yaml-object, node-cli-truncate, node-cliui (>= 7.0.4+repack+~cs3.1.0-3~), node-concordance, node-currently-unhandled, node-debug, node-del, node-emittery, node-escape-string-regexp, node-execa, node-find-up (>= 6), node-globby, node-ignore-by-default, node-indent-string, node-inquirer, node-is-plain-object, node-is-promise, node-js-yaml, node-load-json-file (>= 7), node-matcher, node-mem, node-ms, node-p-map, node-p-timeout, node-picomatch, node-plur, node-pretty-ms, node-read-pkg, node-resolve-cwd, node-resolve-from, node-slash, node-stack-utils, node-strip-ansi, node-write-file-atomic, node-yargs, nodejs:any (>= 14)
Homepage: https://ava.li
Download-Size: 137 kB
APT-Manual-Installed: yes
APT-Sources: http://deb.debian.org/debian sid/main amd64 Packages
Description: Futuristic test runner 🚀
 Even though JavaScript is single-threaded, IO in Node.js can happen in
 parallel due to its async nature. AVA takes advantage of this and runs your
 tests concurrently, which is especially beneficial for IO heavy tests. In
 addition, test files are run in parallel as separate processes, giving you
 even better performance and an isolated environment for each test file.
 .
 Switching from Mocha to AVA in Pageres brought the test time down from 31 to
 11 seconds. Having tests run concurrently forces you to write atomic tests,
 meaning tests don't depend on global state or the state of other tests, which
 is a great thing!
 .
 Node.js is an event-based server-side JavaScript engine.

apt info ts-node
Package: ts-node
Version: 10.8.2+~cs8.8.29-1
Priority: optional
Section: javascript
Maintainer: Debian Javascript Maintainers <[email protected]>
Installed-Size: 942 kB
Provides: node-cspotcode-source-map-support (= 0.8.1), node-ts-node (= 10.8.2), node-tsconfig-node10 (= 1.0.9), node-tsconfig-node12 (= 1.0.11), node-tsconfig-node14 (= 1.0.3), node-tsconfig-node16 (= 1.0.3), node-tsconfig-node18 (= 1.0.1), node-v8-compile-cache-lib (= 3.0.1)
Depends: node-acorn, node-ampproject-remapping, node-arg, node-builtin-modules, node-create-require, node-diff, node-make-error, node-typescript, node-yn, nodejs:any
Homepage: https://github.com/TypeStrong/ts-node
Download-Size: 167 kB
APT-Manual-Installed: yes
APT-Sources: http://deb.debian.org/debian sid/main amd64 Packages
Description: TypeScript execution and language shell
Provides a command-line interface to execute TypeScript code
as a shell and an interactive read-eval-print-loop (REPL).

I have the following problems with tests :

+ ava ./test/index.test.ts ./test/style.test.ts -s

  
  ✖ Timed out while running tests

  
  ✖ Timed out while running tests

  ─

or

ava ./test/index.test.ts ./test/style.test.ts --serial --verbose -T 2m

  ✖ test/index.test.ts exited due to an error:

  Error [ERR_WORKER_OUT_OF_MEMORY]: Worker terminated due to reaching memory limit: JS heap out of memory

  Error [ERR_WORKER_OUT_OF_MEMORY]: Worker terminated due to reaching memory limit: JS heap out of memory
      at new NodeError (node:internal/errors:372:5)
      at Worker.[kOnExit] (node:internal/worker:276:26)
      at Worker.<computed>.onexit (node:internal/worker:198:20)

  Uncaught exception in test/style.test.ts

  test/style.test.ts(1,15): error TS2724: '"ava"' has no exported member named 'before'. Did you mean 'BeforeFn'?
  test/style.test.ts(17,3): error TS2322: Type 'DOMWindow' is not assignable to type 'Window & typeof globalThis'.
    Type 'DOMWindow' is not assignable to type 'Window'.
      Types of property 'self' are incompatible.
        Type 'DOMWindow' is not assignable to type 'Window & typeof globalThis'.
          Type 'DOMWindow' is missing the following properties from type 'typeof globalThis': AnalyserNode, Animation, AnimationEffect, AnimationEvent, and 500 more.
  

  ✖ test/style.test.ts exited with a non-zero exit code: 1
  ─

  1 uncaught exception

Thank you in advance.

Inject the style to head tag does not work

I am trying to inject the style to the head tag, the function ___$insertStyle is generated in the main bundle js file but no one is calling the function.

    scss({
      output: 'build/bundle.css',
      insert: true,
      options: {
        outputStyle: 'compressed'
      },
      processor(code) {
        return postcss([require('autoprefixer')])
          .process(code)
          .then((result) => {
            return result.css;
          });
      }
    }),

Using options - file of node-sass in plugin config

I have an entry.scss file which comprises of all the scss files to be imported :- I dont import entry.scss in my rollup entry js file. So thats the reason i use the file option in the plugin.

Entry.scss

@import './fonts.scss';
@import './components/App.scss';
@import './components/Navigation.scss';

But when i provide the file option within the plugin, it doesn't work :-

Plugin config

sass({
   options: {
      file: 'src/app/styles/entry.scss;'
    },
    output: 'build/public/bundle.css'
}),

Why is the sass version locked to 1.7.2?

Why is the sass version locked to 1.7.2?
I think it would be beneficial to use never versions. Correct me if I am missing something.

I need the importing of CSS same as @LucaMele in #50
According to the docu of SASS-LANG the sass lib supports this since 1.11.0:
https://sass-lang.com/documentation/at-rules/import#importing-css

Relative url paths in node_modules css

Preface: I'm not entirely sure if this is an issue that should be handled by rollup-plugin-sass but I didn't know where else to ask this.

Some npm libraries use relative image url paths in their css (eg. leaflet). I cannot figure out how to get this plugin to respect those relative paths. My js and css live in
src/MyProject/

• MyProject.js
• MyProject.css

and I have rollup's destination set to
dist/MyProject/

• MyProjectOutput.js
• MyProjectOutput.css

However, the relative paths in the output css are unchanged. So if /node_modules/leaflet/dist/leaflet.css is included in MyProjectOutput.css and it has a path like "url(images/marker-icon.png)" my browser will look for an image at "/dist/images/marker-icon.png" and 404. Any suggestions as to how I might fix that?

cannot compressed the css

I used the configuration like this

sass({
    output: 'dist/app.css',
    options: {
      outputStyle: 'compressed',
      sourceMap: false,
    }
 }),

But the dest file is not be compressed. How can I fixed it? Thanks.

Dart Sass

If you use Dart Sass, do you select this library?
I was using postCss, but it does not seem to support Dart Sass.

Thank you for your answer.

export sass variables for include in JavaScript

I try to use the :export construct as described in https://stackoverflow.com/questions/61517117/cannot-export-sass-variables-into-javascript?noredirect=1&lq=1 to be able to use values of SASS variables in my JavaScript but can't get it working:

@import "variables";

:export {

    // Export the color palette to make it accessible to JS
    some-light-blue: $some-light-blue;
    battleship-grey: $battleship-grey;
    // etc...

}

Should this work with rollup-plugin-sass, or is there another method to accomplish this?

insert + rollup-plugin-node-resolve v5 did not work

A rollup config with sass + rollup-plugin-node-resolve@5 and the option insert: true did not work properly. See Changelog.

What I can see:

• the global ___$insertStyle function is generated correctly in the bundle
• the actual call of the ___$insertStyle function including the styles is not generated

Here are my rollup.config.js:

{
    input: './src/foo.ts',
    output: [
        { file: 'dist/foo.js', format: 'es' }
    ],
    external: ['bar'],
    plugins: [
        resolve(),
        typescript(),
        sass({
            output: false,
            insert: true
        })
    ]
}

Workaround:
Remove rollup-plugin-node-resolve
or
Use [email protected] (latest v4)

Unable to build

Running npm run build after cloning from GitHub:

$ npm run build
> node build/build.js

node_modules/nan
resolve failed:  { Error: Cannot find module 'babel-runtime'

babel-runtime is installed in node_modules.

Can't make documented processor function work

// Rollup plugins.
import babel from 'rollup-plugin-babel';
import cjs from 'rollup-plugin-commonjs';
import globals from 'rollup-plugin-node-globals';
import replace from 'rollup-plugin-replace';
import resolve from 'rollup-plugin-node-resolve';
import sass from 'rollup-plugin-sass';
import postcss from 'rollup-plugin-postcss';

export default {
  dest: 'build/app.js',
  entry: 'src/index.jsx',
  format: 'iife',
  plugins: [
    resolve({
      browser: false,
      main: true
    }),
    sass({
      processor(style, id) {
        return postcss([ require('autoprefixer') ])
          .process(/* css */)
          .then((result) => {
            return result.css;
          });
      },
      output: 'styles.css'      
    }),
    babel({
      babelrc: false,
      exclude: 'node_modules/**',
      presets: [ 'es2015-rollup', 'stage-0', 'react' ],
      plugins: [ 'external-helpers' ]
    }),
    cjs({
      exclude: 'node_modules/process-es6/**',
      include: [
        'node_modules/deep-equal/**',
        'node_modules/fbjs/**',
        'node_modules/invariant/**',
        'node_modules/history/**',
        'node_modules/hoist-non-react-statics/**',
        'node_modules/lodash/**',
        'node_modules/object-assign/**',
        'node_modules/query-string/**',
        'node_modules/react/**',
        'node_modules/react-dom/**',
        'node_modules/react-redux/**',
        'node_modules/react-router/**',
        'node_modules/redux/**',
        'node_modules/strict-uri-encode/**',
        'node_modules/warning/**'
      ]
    }),
    globals(),
    replace({ 'process.env.NODE_ENV': JSON.stringify('development') })
  ],
  sourceMap: true
};

Error log:

Error transforming /Users/user/git/babel-react-rollup-starter/src/sass/index.scss with 'sass' plugin: postcss(...).process is not a function
TypeError: Error transforming /Users/user/git/babel-react-rollup-starter/src/sass/index.scss with 'sass' plugin: postcss(...).process is not a function
    at Object.processor (/Users/user/git/babel-react-rollup-starter/config/dev.js:26:12)
    at Object._callee$ (/Users/user/git/babel-react-rollup-starter/node_modules/rollup-plugin-sass/dist/rollup-plugin-sass.js:103:32)
    at tryCatch (/Users/user/git/babel-react-rollup-starter/node_modules/regenerator-runtime/runtime.js:64:40)
    at GeneratorFunctionPrototype.invoke [as _invoke] (/Users/user/git/babel-react-rollup-starter/node_modules/regenerator-runtime/runtime.js:355:22)
    at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (/Users/user/git/babel-react-rollup-starter/node_modules/regenerator-runtime/runtime.js:116:21)
    at step (/Users/user/git/babel-react-rollup-starter/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /Users/user/git/babel-react-rollup-starter/node_modules/babel-runtime/helpers/asyncToGenerator.js:35:14
    at new Promise (/Users/user/git/babel-react-rollup-starter/node_modules/babel-runtime/node_modules/core-js/library/modules/es6.promise.js:191:7)
    at /Users/user/git/babel-react-rollup-starter/node_modules/babel-runtime/helpers/asyncToGenerator.js:14:12
    at Object.transform (/Users/user/git/babel-react-rollup-starter/node_modules/rollup-plugin-sass/dist/rollup-plugin-sass.js:144:10)

CI/CD/Tests - Test race condition

There seems to be a race condition in test/index.test.ts, where a particular test fails on fresh installs and sometimes on github CI/CD actions - Subsequent runs of the test causes the test to pass which points to either a race condition or caching issue though requires further investigation:

Test result, from github CI/CD run:
https://github.com/differui/rollup-plugin-sass/runs/3738609952?check_suite_focus=true#logs)

  ...
  index.ts › should support output as function

  test/index.test.ts:170

   169:     .then(rslt => t.true(squash(rslt.toString()) === ''))
   170:     .then(() => t.true(                                  
   171:       outputSpy.calledWith(expectedSpyArg),              

  `outputSpy` should've been called with `body{color:red}body{color:green}`.  Spy called with `body{color:green}body{color:red}`, other args [[{"id":"/home/runner/work/rollup-plugin-sass/rollup-plugin-sass/test/assets/actual_b.scss","content":"body{color:green}"},{"id":"/home/runner/work/rollup-plugin-sass/rollup-plugin-sass/test/assets/actual_a.scss","content":"body{color:red}"}]]

  Value is not `true`:

  false

  › test/index.test.ts:170:23

Acceptance Criteria

• Test should not fail, on first install, and/or on github CI/CD, on subsequent, scenario, runs - 'first run'/github CI/CD dev-build-and-test workflow re-run etc..

Error:r Unexpected character '@' for import statements

I'm trying to compile *.vue files with scss style tags, but I can't get scss/sass compilation to work.

Part of my rollup config:

        resolve(),
        css(),
        vue({ css: false }),
        sass({
          processor: css => postcss([autoprefixer])
            .process(css)
            .then(result => result.css),
          options: {
            implementation: require('sass'),
            fiber: require('fibers'),
          },
        }),

The error message I get:

[!] Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
..\..\..\node_modules\vuetify\src\styles\main.sass (3:0)
1: // Modeled after ITCSS https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
2:
3: @import './tools/_index'
   ^
4: @import './settings/_index'
5: @import './generic/_index'
Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
    at error (...\node_modules\rollup\dist\rollup.js:5330:30)
    at Module.error (...\node_modules\rollup\dist\rollup.js:9605:9)
    at tryParse (...\node_modules\rollup\dist\rollup.js:9516:16)
    at Module.setSource (...\node_modules\rollup\dist\rollup.js:9834:33)
    at Promise.resolve.catch.then.then.then (...\node_modules\rollup\dist\rollup.js:12614:20)

Consider switching to sass from node-sass

Since #54 has been merged and individual projects can choose which run time to use, it would be nice to switch the default from node-sass to sass.

Speed-wise, they seem to be about the same (according to the tests here: https://github.com/sass/dart-sass/blob/master/perf.md) and installing node-sass is always a pain.

For users who truly need node-sass, they can include it manually.

@import statements are not parsed

rollup-config.js:

export default {
  entry: 'src/main-aot.ts',
  dest: 'aot/dist/build.js', // outputs a single application bundle
  sourceMap: false,
  plugins: [
    sass({
      // Write all styles to the bundle destination where .js is replaced by .css
      output: true
    /*include: ['src/style/app.scss'],*/ this triggers many erros, syntax error at '@', syntax error at $header-gray: ... 

    }),
    nodeResolve({
      jsnext: true,
      main: true
    }),
.....

JS and CSS bundles are generated but where I have @import statements, the sass is not compiled into css.
colors.scss(which is imported in app.scss):

/*
OCEANA color palettes and usage
*/
/*TEXT*/
$header-gray: #303030; //Card header Text Card header icon
$blue-dark-grey: #304050; //main text

generated bundle.css(with no errors):

OCEANA color palettes and usage
*/
/*TEXT*/
/*UI*/
CODE FROM COLORS.SCSS SHOULD BE HERE BUT IS MISSING

.mat-elevation-z0 {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); }
....

Are @import statements working?
If I'm missing something, pardon me.

No output file?

I'm having trouble getting sass() to actually do anything, and I can't find any tutorials or examples anywhere to help...

export default {
    entry: 'app/main_jit.ts',
    dest: '../../../bin/web/billing/bundle.js',
    sourceMap: false,
    format: 'iife',
    plugins: [
        angular(),
        typescript({
            "target": "es5",
            "module": "es2015",
            "moduleResolution": "node",
            "sourceMap": false,
            "emitDecoratorMetadata": true,
            "experimentalDecorators": true,
            "removeComments": false,
            "noImplicitAny": true,
            "strictNullChecks": false,
            "suppressImplicitAnyIndexErrors": true
        }),
        nodeResolve({module: true}),
        commonjs({
            include: 'node_modules/rxjs/**'
        }),
        sass({
            output: '../../../bin/web/billing/index.css',
            options: {
                file: 'app/index.scss'
            }
        })
    ]
}

As you can see, I'm trying to take in an scss file 'app/index.scss' and then produce a css file '../../../bin/web/billing/index.css'... however no file is ever generated.

I've tried many combinations of paths for both input and output, and I've never seen any output files at all, anywhere. What am I doing wrong?

(note: it works fine with node-sass, using the same file paths)

Also, why is there an "output" param, if there is already an outFile in the sass options?

Thanks

fs is not defined

On:
https://github.com/differui/rollup-plugin-sass/blob/master/src/index.js

You import writeFile from fs but then on line 35 you attempt to use fs.writeFile, which ends up with fs is undefined if you pass in the output option.

The fix is easy, change fs.writeFile to writeFile

next: Remove unrequired dependencies

We have several dependencies which are not really required anymore (babel, pify, etc.). Removing these plugins and writing the plugins source in a more idiomatically supported way (in way already supported by node v12+) will keep the plugin a bit more lean and make the journey from code edits to tests a bit faster (we currently have to rebuild the plugins sources, on every edit, before running tests).

Support multiple style imports

Currently, every import overwrites the previous import. I thought that it would concatentate the imports. I'm not sure in which order they should be.

Update for rollup 1.0

just a heads up, as of rollup 1.0, this plugin throws a deprecation warning.

(!) sass plugin: The ongenerate hook used by plugin sass is deprecated. The generateBundle hook should be used instead.

Dep. - Update vulnerable dependencies ('AVA', 'json-schema')

We need to upgrade currently vulnerable dependencies in the repo - Latest npm audit shows to vulnerabilities one critical and another moderate which should be updated.

Additionally part of the dependencies upgrade solves an issue with installing the latest version of the plugin on *nix systems (see issue #97 ).

Acceptance Criteria

Perform required updates:

• Run npm audit fix on repo.
• Upgrade 'ava' version to a minimum of 4.3.1.
  • Take a look at "Breaking Changes" section, in AVA 4 release notes
  • Fix tests which break after update.
  • Make required changes from (AVA 4) release notes.

:export for consumption of variables in JavaScript

I try to use the :export construct as described in https://stackoverflow.com/questions/61517117/cannot-export-sass-variables-into-javascript?noredirect=1&lq=1 to be able to use values of SASS variables in my JavaScript but can't get it working:

@import "variables";

:export {

    // Export the color palette to make it accessible to JS
    some-light-blue: $some-light-blue;
    battleship-grey: $battleship-grey;
    // etc...

}

Should this work with rollup-plugin-sass, or is there another method to accomplish this?

Bug in version 1.2.5

I am constantly receiving this error after upgrade the plugin version to 1.2.5. Downgrading to 1.2.4 works fine..

 [!] TypeError: The "path" argument must be of type string. Received an instance of RegExp
 TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received an instance of RegExp
     at validateString (internal/validators.js:124:11)
     at Object.resolve (path.js:1074:7)
     at /tmp/pwt_test_1711/node_modules/rollup-plugin-sass/node_modules/rollup-pluginutils/dist/pluginutils.cjs.js:183:68
     at Array.map (<anonymous>)
     at Object.createFilter (/tmp/pwt_test_1711/node_modules/rollup-plugin-sass/node_modules/rollup-pluginutils/dist/pluginutils.cjs.js:183:35)
     at Object.plugin [as default] (/tmp/pwt_test_1711/node_modules/rollup-plugin-sass/src/index.ts:134:14)

Deps - Downgrade typescript version

The typescript version we chose for the library is too cutting edge - type files generated by this version conflict with older, still used (1-2 years old) versions of typescript (namely typescript versions under ^3.5.3).

In order to offer more support to still relevant typescript projects we need to downgrade our typescript version far enough where we can allow older projects to install the version of typescript they need.

Issue observed:

Projects that use rollup.config.ts files, and are using older typescript versions may not be able to use the plugin due to the generated *.d.ts type files conflicting with older typescript formats.

Known projects that use these older versions of typescript:

angular 8, 9, and 10 et al..

Acceptance criteria:

Lower typescript version to ^3.5.3 (version used by angular 8 (2 years old)) or comparable.

sass not a function with v1.2.6

After upgrading from v1.2.4 to v1.2.6, Rollup complains that sass is not a function.

The following Rollup config works with v1.2.4

const sass = require('rollup-plugin-sass')

module.exports = {
  ...
  plugins: [
    ...
    sass({
      insert: true,
      processor: css =>
        postcss([autoprefixer])
          .process(css, { from: undefined })
          .then(result => result.css),
      runtime: require('sass')
    })
    ...
  ]
}

After upgrading:

[!] TypeError: sass is not a function

This is the devDependencies section of my projects package.json:

  "devDependencies": {
    "rollup": ">=2.56.3",
    ...
    "rollup-plugin-sass": "1.2.6",
    "sass": ">=1.37.5"
  }

sass 全局变量不生效

import sass from 'rollup-plugin-sass';
plugins: [
sass({
options: {
// data: '$Text: #666;$Primary: #1badff;',
file: 'src/theme.scss',
},
insert: true,
}),
],

我按照文档这样添加全局scss或者全局变量，并不能生效

@Import **.css not parsed

My JS File:

My SCSS file which is imported from the JS file:

Result:

as you can see, @import url(../../../node_modules/react-select/dist/react-select.css); does not get imported in the bundled es.

My rollup config:

const resolve = require('rollup-plugin-node-resolve')
const babel = require('rollup-plugin-babel')
const replace = require('rollup-plugin-replace')
const sass = require('rollup-plugin-sass')
const autoprefixer = require('autoprefixer')
const postcss = require('postcss')

const path = require('path')
const fs = require('fs')
const project = require('../project.config')
const babelOptions = JSON.parse(fs.readFileSync('.babelrc'))

const inProject = path.resolve.bind(path, project.basePath)
const inProjectSrc = (file) => inProject(project.srcDir, file)

const fPath = path.resolve(process.cwd(), project.libDir)

export default {
  input: `${inProjectSrc(project.aletheia)}.js`,
  output: {
    file: `${fPath}/${project.aletheia}.es.js`,
    format: 'es',
  },
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
    sass({
      insert: true,
      include: [ '**/*.css', '**/*.scss' ],
      options: {
        includePaths: [
          'node_modules',
        ],
      },
      processor: css => postcss([autoprefixer])
        .process(css)
        .then(result => result.css),
    }),
    babel({
      ...babelOptions,
      plugins: [
        'inline-json-import', // @TODO add this to the webpack build
        'external-helpers', // @TODO add this to the webpack build
        'babel-plugin-transform-decorators-legacy',
        'babel-plugin-transform-class-properties',
        'babel-plugin-transform-es2015-function-name',
        'babel-plugin-transform-react-stateless-component-name',
        'babel-plugin-transform-object-rest-spread',
        'inline-react-svg',
        ['minify-replace', { // @TODO add this to the webpack build
          'replacements': [{
            identifierName: '__DEV__',
            replacement: {
              type: 'numericLiteral',
              value: 0,
            },
          }, {
            identifierName: '__LOCAL__',
            replacement: {
              type: 'numericLiteral',
              value: 0,
            },
          }, {
            identifierName: '__PROD__',
            replacement: {
              type: 'numericLiteral',
              value: 1,
            },
          }, {
            identifierName: '__TEST__',
            replacement: {
              type: 'numericLiteral',
              value: 0,
            },
          }],
        }],
      ],
      babelrc: false,
      exclude: [
        'node_modules/**',
      ],
      runtimeHelpers: true,
    }),
    resolve({
      jsnext: true,
      module: true,
      only: [/^\.{0,2}\/|\.scss$|\.css$/i], // threat all node_modules as external
    }),
  ],
}

Support for minification

Hello,

I really miss minification in this plugin.

I know that there is a workaround
processor: isProd ? (css) => postcss({ from: undefined, plugins: [cssnano()] }) .process(css) .then((result) => result.css) : null,

but it would be better integrated :)

CI/CD - Add github actions

Automate test and build tasks for the project via github actions.

• - Add a workflow file for "build" and "test", for 'dev' branch.
• - Add "Publish to Npm" workflow for push/pull requests to master.

Does this plugin support @import in SASS files?

I've got a simple SASS file theme.scss:

@import 'sth.scss';

And Rollup config:

const path = require( 'path' );
const nodeResolve = require( 'rollup-plugin-node-resolve' );
const sassRollupPlugin = require( 'rollup-plugin-sass' );

export default {
	entry: './entry-point.js',
	format: 'iife',

	dest: path.join( 'build', 'dist', 'ckeditor.js' ),

	plugins: [
		nodeResolve(),

		sassRollupPlugin( {
			insert: true
		} )
	]
};

And I get this:

Error parsing /www/ckeditor5/ckeditor5/node_modules/ckeditor5-editor-classic/theme/theme.scss: Unexpected character '@' (1:0) in /www/ckeditor5/ckeditor5/node_modules/ckeditor5-editor-classic/theme/theme.scss

I thought that SCSS imports would be handled by node-sass itself, so this error is surprising. But then, I don't see any tests for your package which would check imports. So is it a missing feature of this plugin or should I use it with some other package like https://www.npmjs.com/package/node-sass-import?

Can we get compatible options?

Compatible with rollup-plugin-css-only

output

• Type: String|Function|Boolean (default: true)

If you specify a string, it will be the path to write the generated CSS.
If you specify a function, call it passing the generated CSS as an argument.
If you specify true, the stylesheet is placed next to the bundle: e.g. bundle.js => bundle.css
If you specify false, it will export the stylesheet as a string.

The transform callback should return empty string when styles are extracted.

Using option output: 'bundle.css'

The current implementation causes the error below, because the SASS is parsed as javascript.

Error parsing App.vue.component.css: Unexpected character '@' (2:0) in App.vue.component.css

Changing this line to return an empty string (and putting the writefile above it), gets it working.
https://github.com/differui/rollup-plugin-sass/blob/7dee47cde6d23ecbc649fea8c4fb6f36bc9aed62/dist/rollup-plugin-sass.cjs.js#L84

When resolve.sync fails the catch clause prevents any custom importer from running

https://github.com/differui/rollup-plugin-sass/blob/e94b639f895563b9f78bb53c21695ce02fe0a56a/src/index.js#L69-L73
this logic prevents any custom importer from running, a better way is to return null in case customizedSassOptions.importer is defined to allow it/them to run.

To reproduce just try to import with any custom path format that will not correctly resolve for example a path with a variable like:

@import '~test/${theme}/utils';

it will fail and notice that even after adding

options: {
        importer: [
          function(url, prev, done) {
            console.log('this will never run...');
          }
        ],
       // ...
}

The custom importer doesn't run (while it does after returning null).

`--quiet -q` flag/option is not respected

all @warn statements are still visible in the output.

importer

hola!
how are you?

how can i use a custom scss importer (like with webpack or simpla node-sass)?

insert option + chunks places ___$insertStyle function in every chunked file

When rollup is run with

   output: { fomat: 'esm',
      ...
   plugins: [rollupPluginSass({insert:true}), ...

multiple chunks (which don't import any css) have the insert css function ___$insertStyle needlessly placed at the top of each chunked file.

ideally this function to insert a style element into the header would be added earlier in the rollup build pipeline so that it could be chunked to a single, appropriate file.

Edit

After having created this issue I saw there have been no commits to this repository for 13 months (at the time of writing). if anyone is a bit stuck on this issue, I moved to rollup-plugin-postcss which works as expected (only placing the insert css function once in the bundle of outputs).

Cannot find module 'babel-runtime/regenerator'

Just from importing the plugin in my rollup.config.js, even when I'm not calling sass(), I get this error:

Cannot find module 'babel-runtime/regenerator'
Error: Cannot find module 'babel-runtime/regenerator'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:\web\node_modules\rollup-plugin-sass\dist\rollup-plugin-sass.cjs.js:5:43)
    at Module._compile (module.js:409:26)
    at Module._extensions..js (module.js:416:10)
    at Object.require.extensions..js (C:\web\node_modules\rollup\bin\rollup:763:6)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)

output: true broken

It seems that output: true is broken. While it used to "write all styles to the bundle destination where .js is replaced by .css", it now writes them to the input destination (which is usually not what is wanted).

For example:

import resolve from 'rollup-plugin-node-resolve';
import sass from 'rollup-plugin-sass';

export default {
  input: 'src/index.js',
  output: {
    name: 'Project',
    sourcemap: true,
    file: './project.js',
    format: 'umd'
  },
  plugins: [
    resolve(),
    sass({
      output: true
    })
  ]
};

Produces src/index.css.

add tag for 1.2.2 release

npmjs.com has version 1.2.2 but last version tagged in the repo is 1.1.0. Please push a tag for the latest version.

Watch partials

Hi,

I'm currently using the plugin to generate my css from an scss file imported in the main js file as such:

import './../styles/main.scss'

Running the rollup command with the watch flag, when i save the main.scss files it recompiles fine, however if I change any of the partials, its not detected.

Is there a way for the rollup watch to extend to those partials?

Support for sass source maps

I am currently generating the plugin like this

const sass = require('rollup-plugin-sass');
...
const output = 'my-output${env.prodution ? '.min' : ''}.css';
const sourceMap = `${output}.map`
const outputStyle = env.production ? 'compressed' : nested';
const plugin = sass({output, options: {sourceMap, outputStyle}});

Only the css file is generated. No css.map file is generated.

Is there something wrong with my config, or does the plugin not support source maps?