at-import / node-sass-import-once Goto Github PK

Hi,

I have multiple scss that imports from bower_components and the files are located all over my directory structure. Here's a sample hieararchy:

├── package.json
└── public
    ├── bower_components
    └── scripts
        ├── cards
        │   └── widgets
        │       └── css
        │           ├── a.scss
        │           └── b.scss
        └── common
            └── css
                ├── c.scss
                └── d.scss

If I have import on a.scss and on c.scss, the grunt task won't finish (i.e. import in two different level won't work). If I have import in a.scss and b.scss or c.scss or d.scss (i.e. same level) it's okay, it imports with no issues. I did an strace and it looks like it is waiting (keeps calling epoll_wait), don't know if it's waiting on write or read, can't trace it from there.

I am not sure if this is because of the importer or the node-sass but I figure I start here. Let me know if you can think of anything that might cause this issue.

Thanks in advance and happy new year.

Alex

It would be nice to support node_modules import the way bower is supported as lot of libraries can now be downloaded with npm therefore reducing complexity and eliminating bower if possible.

Like:

var sass = require('node-sass');,
    importOnce = require('node-sass-import-once');

sass.render({
  file: scss_filename,
  importer: importOnce,
  importOnce: {
    index: false,
    css: false,
    bower: false,
    node: false
  }
});

I compile the sass file use renderSync method, encounter an error.

var result = sass.renderSync({
    data: scss_content,
    importer: importOnce,
    importOnce: {
        index: false,
        css: false,
        bower: false
    }
});

I think the name of the module is little misleading. You would expect it to handle only "import once", but instead you get to also choose if you want Bower components or CSS files to be handled. Do you think that separating all those features to their respective packages is valid proposal? Or at least split them to different files inside current repo (e.g. node-sass-import-once/bower)?

It'd be nice if we could import json files to be converted to sass-maps..

e.g: @include'ing mymap.json:

{
  "one": "a",
  "two": "b"
}

Would be imported to be refered in sass as if it were defined like:

$mymap: (
  'one': 'a', 
  'two': 'b'
);

Apparently the importer doesn't work on OSX.

Fails with nested relative imports.

Probably related to #24

I just realised that this does not properly throw or setting proper exit codes with process.exitCode if an import fails. Instead it just logs to the console:

Error: Could not import `module-does-not-exist` from any of the following locations:
  /frontend-lib/src/scss/module-does-not-exist.scss
  /frontend-lib/src/scss/module-does-not-exist.sass
  /frontend-lib/src/scss/_module-does-not-exist.scss
  /frontend-lib/src/scss/_module-does-not-exist.sass
  /frontend-lib/node_modules/@axa-ch/style-guide/scss/module-does-not-exist.scss
  /frontend-lib/node_modules/@axa-ch/style-guide/scss/module-does-not-exist.sass
  /frontend-lib/node_modules/@axa-ch/style-guide/scss/_module-does-not-exist.scss
  /frontend-lib/node_modules/@axa-ch/style-guide/scss/_module-does-not-exist.sass

This false behaivior is caused at the following lines:

• https://github.com/at-import/node-sass-import-once/blob/master/index.js#L310-L313
• https://github.com/at-import/node-sass-import-once/blob/master/index.js#L321-L324

Further more the done callback in above code blocks does not use first-error arguments.

I've tried out the plugin in conjunctions with gulp-sass and the includePaths option with a path to my node_modules folder. Now the following import statements fail:

@import 'node_modules/reset-css/reset.scss';
@import 'node_modules/include-media/dist/include-media.scss';

They are at the right place, I've checked with cd and ls, so my guess is that node-sass-import-once fails to load them. Everything seems fine when disabling the importer option.

Versions:

• node -v: 5.9.1
• npm -v: 3.8.6
• node-sass-import-once: 1.2.0
• gulp: 3.9.1

Stack trace:

Error: Could not import `node_modules/reset-css/reset.scss` from any of the following locations:
  /Users/myname/Documents/Repositories/myrepo/myrepo/assets/src/scss/app/node_modules/reset-css/reset.scss
  /Users/myname/Documents/Repositories/myrepo/myrepo/assets/src/scss/app/node_modules/reset-css/reset.scss
  /Users/myname/Documents/Repositories/myrepo/frontend/node_modules/reset-css/reset.scss

Greetings,

I decided to try your package in my webpack project which uses gulp. The project was created with fountainjs, so I did not created any gulp related files or tasks. Furthermore, since I'm quite new to gulp, I can't figure how to configure your dependency to work with my project.
In fact, I think the instructions, that simply amount to the following sentence, are not that much explanatory.

If you are using Gulp or Grunt to compile (or similiar), require node-sass-import-once as normal and pass it as the importer option in to your task.

For instance, should I be adding such confs in my gulpfile.js? Also, I think a code snippet with an example would be very helpfull. Sure, I can always read a ton of tutorials about gulp until I understand how to configure tasks and importer options, but that would take days if not weeks, as oposing to having a code snippet as a starting point.

Thank you

When run successfully, the object passed to done() gets console.log'd out, even without me doing so. Not sure if it's related to gulp-sass or node-sass

Hi, i would really love to start using the module, but... Relates to #4.
I have node sass "version": "3.0.0-beta.7", "libsass": "3.2.0-beta.6" and the latest gulp-sass. Here is how i pass it to the options:

.pipe($.sass({
            style: 'expanded',
            importer: importOnce
        }))

The error:

/Users/vadzim/DEV/Projects/WKL/wkcss/node_modules/node-sass-import-once/index.js:275
  if (!this.options.importOnce) {
           ^
TypeError: Cannot read property 'options' of undefined
    at importer (/Users/vadzim/DEV/Projects/WKL/wkcss/node_modules/node-sass-import-once/index.js:275:12)
    at options.importer (/Users/vadzim/DEV/Projects/WKL/wkcss/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:212:20)

Thanks for your work.

For projects where your sass code is separated in different directories (bundles), it would be great to have an option to provide aliases. This option would map an arbitrary 'module/bundle' name to a sub-directories inside a project, in a similar way as what webpack does with its resolve.alias option.

Here is how it could work:

node file

var sass = require('node-sass'),
    importOnce = require('node-sass-import-once');

sass.render({
  file: scss_filename,
  importer: importOnce,
  importOnce: {
    bower: true,
    alias: {
      'foo': path.join(__dirname, './src/bundles/foo/stylesheets/scss'),
      'bar':  path.join(__dirname, './src/bundles/bar/stylesheets/scss')
    }
  }
});

sass file (can be in any directory, e.g. in ./src/bundles/baz/stylesheets/some/module/file)

@import "foo/module/filename"; // ./src/bundles/foo/module/(_)filename.s(c|a)ss
@import "bar/filename"; // ./src/bundles/bar/(_)filename.s(c|a)ss

Aliases would override bower/node modules in case of a name conflict.

Hi, I am using a simple gulp-sass task while using node-sass-import-once, and as soon as I reference in one of my .scss files a @import of a file without _xxxx.scss (underscore + file extension), it fails to find it...

var sass = require('gulp-sass'),
    nodeSass = require('node-sass'),
    importOnce = require('node-sass-import-once')


gulp.task('sass', function () {

    return gulp.src(CONFIG.scss + '**/*.{scss,sass}')
        .pipe(sass({includePaths: CONFIG.importPath, importer: importOnce}).on('error', sass.logError))
        .pipe(gulp.dest(CONFIG.app + 'assets/style'));
});

@import '../../app/components/layout/container/container.ui-layout';

Error: Could not import `../../app/components/layout/container/container.ui-layout` from any of the following locations:
  /Users/user/projects/project/src/main/webapp/app/components/layout/container/container.ui-layout
  /Users/user/projects/project/src/main/webapp/app/components/layout/container/container.ui-layout
  /Users/user/projects/project/src/main/app/components/layout/container/container.ui-layout

It specifically needs to be explicited by specifying underscore + extension to work, like in

@import '../../app/components/layout/container/_container.ui-layout.scss';

Is this the desired behaviour ?

I never used this module with previous versions of node-sass, but under node-sass 3.4, we have multiple failures:

• FAILS to import files only once.
• FAILS to import relative files. The expected Ruby behavior is that it will look in the current file's directory for the import before looking in the include paths. E.g. if breakpoint/_parsers.scss imports "parser/single", it should look for it in the breakpoint directory.

I don't see a test for the second failure, so we'll need to add one.

There's actually 8 other test failure, but they may be cascading failures since the very first test fails.

If someone is already including this module that is because one needs including paths on by default, so I'd suggest:

var sass = require('node-sass');,
    importOnce = require('node-sass-import-once');

sass.render({
  file: scss_filename,
  importer: importOnce,
  importOnce: {
    index: false,
    css: true,
    bower: true,
    node: true
  }
});

EDIT: See my updated solution below

Hi,

I've tried implementing this module in a project, but ran into issues. The error is: "Fatal error: Cannot read property 'options' of undefined".

Maybe I've missed something obvious, but I looked at index.js and it's "this" that's undefined. It fails at line 275 "if (!this.options.importOnce) {".

I haven't fiddled much with node or indeed grunt, so I don't know the "correct" way to fix it. Maybe it needs to be wrapped in some grunt-specific code (all the grunt versions of node-modules seem to suggest it).

I've temporarily made it work, by copying the module and requiring that instead. Inside I've modified all instances of "this" to "localObj", which is defined alongside the other top-level vars:

    var fs = require('fs'),
    yaml = require('js-yaml'),
    path = require('path'),
    localObj = {
        options: {
            index: false,
            css: false
        }
    };

This works for me (I also removed the bower stuff), but it would be ideal if the module supported grunt better, or a grunt version of it could be made.

I have a .yml file I'm importing like this:

colors:
  primary: 
    base: rgb(0, 255, 200)
    dark: darken(rgb(0, 255, 200), 10%)

Is there anyway to get the importer to parse the sass instead of just mapping it as a string? The darken(rgb(0, 255, 200), 10%) bit is not turned into a rgb or hex value from this.

Disclaimer: I've only read the README and not used this package.

But the "features" section says:

Allows folders to contain an index file (index.scss, index.sass, index.scss, index.sass) that will automatically be imported if just the folder name is imported. For instance, @import 'partials'; will try and import ()partials.s(c|a)ss first, then partials/()index.s(c|a)ss.

This is bad developer experience. Can you imagine having multiple _index.scss files open? The editor tabs would all say the same thing. blech

Is there an option so that @import 'partials'; imports a partials/(_)partials.s(c|A)ss file?

Hi

Do you have any ideas how to use it with extract-text-webpack-plugin ?
I have tons of duplicities because import.

Thank you for any help

My workaround:

const importOnce = require('node-sass-import-once');
let pnp;

try {
  pnp = require('pnpapi');
} catch (error) { // pnpapi is not defined
  pnp = null;
}

function importer(uri, prev, done) {
  let resolution;
  let pnpError;

  try {
    resolution = pnp.resolveToUnqualified(uri, prev, { considerBuiltins: false });
  } catch (error) {
    pnpError = error;
  }

  importOnce.call(this, resolution || uri, prev, result => {
    const keys = Object.keys(result);

    if (keys.length) {
      return done(result);
    }

    if (pnpError) {
      console.error(pnpError);
    }

    return importOnce.call(this, uri, prev, done);
  });
}

/***/

sass.render({
  file: filename,
  importer: pnp ? importer : importOnce,
  includePaths: pnp
    ? []
    : [
      path.resolve(__dirname, '..'),
      path.resolve(__dirname, '../node_modules'),
      path.resolve(__dirname, '../../../node_modules')
    ]
})

In my main sass file I have @import "styleguide/css/vendor/selectize/selectize.bootstrap3"

and I get following output:

Error: Could not import `styleguide/vendor/selectize/selectize.bootstrap3` from any of the following locations:
  C:\dev\myApp\client\sass\styleguide\vendor\selectize\selectize.bootstrap3

If I comment out this import or rename it to use dashes it works fine (but this is impractical since it's vendor file).

When running (through Gulp) often will get, getting the following error:

Assertion failed: (handle->flags & UV_CLOSING), function uv__finish_close, file ../deps/uv/src/unix/core.c, line 209.
[1]    15739 abort      gulp

I'd love to be able to import JS modules that export their payload as an object or JSON... Is there any interest in on your side in me submitting a PR that implements this?

Since node-sass can only have one importer, we can't have one importer doing "import once" and another one doing "globbing".

What's the solution here? Stop using globbing? Or add it to node-sass-import-once?

@import 'components/*';