kevcjones / plugin-scss

A SystemJS plugin which will convert sass and return it inline to allow use for any purpose

• 👋 Hi, I’m @kevcjones
• 👀 40 years (and counting) of failing forward and learning the hard way
• 💞️ I’m looking to collaborate on anything that interests me
• 📫 How to reach me - @kevcjones or by email is fine too

plugin-scss's Issues

Allow libsass options to be passed through to sass.js

It would be nice if plugin-scss allowed for libass options to be specified in your system config.

This would allow the user to configure libsass for their needs, for example, allowing them to provide includePaths for sass imports.

I get a 404 looking for 'scss.js' ... what is this?

I'm using Angular 2 and wanted to use the synchronous import to css to inject stylesheets into my components. My app won't run and I get a 404 looking for scss.js

[SyntaxError: Unexpected token }]

Running builder.buildStatic on a barebones Angular2 Hello World app and receive the following error:

Error loading ...jspm_packages/github/KevCJones/[email protected]/sass-inject-build.js] originalErr: [SyntaxError: Unexpected token }] }

Publish to NPM?

I'm trying to integrate this with our build system which uses SystemJS to output sfx builds. It's a collection of gulp tasks distributed via NPM. As such I'm forced to either point directly to the plugin's github repo in my build system's package.json or manually jspm install it in each project. Neither solution is really ideal. Given that this exposes functionality that can be used both on the server and client sides, I think it would be more flexible to publish to NPM.

Bug when trying to import an empty scss file.

Causes an error in the compiler. Workaround can be adding a single class for now but i should verify the contents at build time and ignore.

Check that JSPM 0.17 works as expected?

Need to verify that the behaviour will work as expected when running with JSPM 0.17....

System.config configuration

Could you integrate this commit into your plugin?

Add caching

Compiler is run even when there have been no changes to the scss. In large applications this is a severe performance hit.

systemjs/builder#593

`jspm bundle` and `jspm build` doesn't seem to work when I use this plugin.

Whenever I used this plugin to import sass text from into a typescript file like so

import styleText from './app.component.scss!';

jspm build just gives me empty output and doesn't generate a .js file. If I comment out the import, the build works fine.

JSPM Bundle gives 'undefined' error

I'm trying to bundle several sass (indented syntax) files. But the output gives me no clue about what's wrong.

[plugin-scss] Stacklite :: github:KevCJones/plugin-scss/sass-inject-build.js -> npm:sass.js [plugin-scss] undefined

The lines in the output are repeated for every import in my source files.

I'm importing the styles like this:

import styles from '../styles/layout.sass!scss';

[SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode]

I receive this error when trying to build a jspm static bundle:

{ [Error: SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
            at Object.exports.runInThisContext (vm.js:53:16)
        Evaluating C:/../jspm_packages/github/KevCJones/[email protected]/index.js
        Error loading C:/../jspm_packages/github/KevCJones/[email protected]/index.js]
  originalErr: [SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode] }

Autoprefixer support

Could you integrate autoprefixer into your plugin and make it configurable via System.config?

TypeError: Path must be a string. Received undefined

I use this plugin in my project https://github.com/flaviait/ng2-jspm-template and it worked perfectly well together with jspm version 0.17-beta.13 and 0.17-beta.14.
Howerver, a few days ago I start to get an error when running jspm bundle which seems to be related to this plugin:

err  TypeError: Path must be a string. Received undefined
      at assertPath (path.js:7:11)
      at Object.dirname (path.js:1324:5)
      at [project-root]/jspm_packages/npm/[email protected]/systemjs-babel-node.js:6645:38
      at [project-root]/jspm_packages/npm/[email protected]/systemjs-babel-node.js:6661:24
      at Array.map (native)
      at OptionManager.resolvePresets ([project-root]/jspm_packages/npm/[email protected]/systemjs-babel-node.js:6650:22)
      at OptionManager.mergePresets ([project-root]/jspm_packages/npm/[email protected]/systemjs-babel-node.js:6640:12)
      at OptionManager.mergeOptions ([project-root]/jspm_packages/npm/[email protected]/systemjs-babel-node.js:6616:16)
      at OptionManager.init ([project-root]/jspm_packages/npm/[email protected]/systemjs-babel-node.js:6732:12)
      at File.initOptions ([project-root]/jspm_packages/npm/[email protected]/systemjs-babel-node.js:7375:77)
      at new File ([project-root]/jspm_packages/npm/[email protected]/systemjs-babel-node.js:7319:24)
      at Pipeline.transform ([project-root]/jspm_packages/npm/[email protected]/systemjs-babel-node.js:3923:18)
      at [project-root]/jspm_packages/npm/[email protected]/plugin-babel.js:154:24
  Error loading [project-root]/jspm_packages/github/KevCJones/[email protected]/index.js

This error seems to occur only on some machines. For example it occurs on my private machine (Arch Linux with nvm) and on a colleague's machine (Ubuntu) but it works on my machine at work (Linux Mint) and on the travis build.

When compiling inside the browser it still works.

IE 11 and Edge Failures

Anyone else having issues with IE 11 or Edge?

IE 11:

SCRIPT0: Out of stack space
sass.worker.js (7,1)

Edge:

SCRIPT5022: (SystemJS) SyntaxError: Unterminated string constant
    Evaluating http://localhost:3000/app/app.styles.scss
system.src.js (5123,3)

Chrome works as expected.