olmokramer / atom-stylus-autocompile

Compile .styl files on save in Atom
MIT License
5 stars 4 forks source link

Library Support #11

Closed frog42 closed 8 years ago

frog42 commented 8 years ago

Not 100% a bug, but it'd be nice to have support for libraries like Jeet, Axis, Rupture, etc. It looks like you hard-coded Nib, but a text box to list additional libraries would be very convenient.

olmokramer commented 8 years ago

Hi @frog42, that is an excellent idea!

It was pretty easy to implement :) I've changed it so instead of having a toggle for the nib library, you can now specify a (space separated) list of libraries in the comment at the top of the file that stylus should use. So as an example, you can now write:

// out: style.css, libs: nib jeet

@import "nib";
@import "jeet";

main {
  fixed: top right;
  column(2/3);
}

This requires the libraries be installed locally in the (parent) of the stylus file.

I haven't published a new version yet, as I want to do some more testing, but it should be usable already if you clone the master branch. Please let me know what you think :)

frog42 commented 8 years ago

Sweet! I'll try to find time to give it a shot this weekend. Not 100% what you mean by the "parent" of the stylus file. NPM installs these libraries in separate directories that are all in the same "node_modules" directory that Stylus is in. If you mean it recursively searches through the parent directory that holds the Stylus directory, that should work perfectly.

olmokramer commented 8 years ago

I think you're getting it, but just to be clear, it's basically running node's require(<plugin>) from the directory of your stylus file. So in the file structure at the end of this post, test1.styl and test2.styl can use the nib library, test3.styl can not.

stylus-project/
    node_modules/
        nib/
    sub-directory/
        test1.styl
    test2.styl
test3.styl
frog42 commented 8 years ago

Don't think that's going to work for me then. My libraries are installed at the system level, not within the project itself (~/.nvm/versions/node/v5.8.0/lib/node_modules/). Ideally, I need to be able to set the $PATH myself, I think. I'll still take a look at it tomorrow though.

olmokramer commented 8 years ago

Aha, makes sense. I've added a setting where you can define a colon separated list of paths that will also be searched for the libraries if they aren't found in the project. So in your case you could set it to ~/.nvm/versions/node/v5.8.0/lib (the node_modules part is optional) and it will find your libraries. I'm going to do some more testing before release, but you can try the master branch of this repository already.

frog42 commented 8 years ago

I tried to clone into my atom modules directory, but then when I go to save my .styl file, it gave me the error below. I had this at the top of my stylus file:

// out: style.css, main:~/.nvm/versions/node/v5.8.0/lib, libs: nib jeet rupture axis

Here is the error it gave me:

Failed to activate the stylus-autocompile package Cannot find module 'resolve' Hide Stack Trace Error: Cannot find module 'resolve' at Module._resolveFilename (module.js:338:15) at Function.Module._resolveFilename (/opt/homebrew-cask/Caskroom/atom/1.5.4/Atom.app/Contents/Resources/app.asar/src/module-cache.js:383:52) at Function.Module._load (module.js:289:25) at Module.require (module.js:366:17) at require (/opt/homebrew-cask/Caskroom/atom/1.5.4/Atom.app/Contents/Resources/app.asar/src/native-compile-cache.js:50:27) at Object. (/Users/Sin/.atom/packages/stylus-autocompile/lib/stylus-autocompile.js:4:41) at Module._compile (/opt/homebrew-cask/Caskroom/atom/1.5.4/Atom.app/Contents/Resources/app.asar/src/native-compile-cache.js:103:30) at Object.defineProperty.value as .js at Module.load (module.js:356:32) at Function.Module._load (module.js:313:12) at Module.require (module.js:366:17) at require (/opt/homebrew-cask/Caskroom/atom/1.5.4/Atom.app/Contents/Resources/app.asar/src/native-compile-cache.js:50:27) at Package.module.exports.Package.requireMainModule (/opt/homebrew-cask/Caskroom/atom/1.5.4/Atom.app/Contents/Resources/app.asar/src/package.js:715:27) at Package.module.exports.Package.activateNow (/opt/homebrew-cask/Caskroom/atom/1.5.4/Atom.app/Contents/Resources/app.asar/src/package.js:173:16) at /opt/homebrew-cask/Caskroom/atom/1.5.4/Atom.app/Contents/Resources/app.asar/src/package.js:795:25 at Function.module.exports.Emitter.simpleDispatch (/opt/homebrew-cask/Caskroom/atom/1.5.4/Atom.app/Contents/Resources/app.asar/node_modules/event-kit/lib/emitter.js:25:14) at Emitter.module.exports.Emitter.emit (/opt/homebrew-cask/Caskroom/atom/1.5.4/Atom.app/Contents/Resources/app.asar/node_modules/event-kit/lib/emitter.js:125:28) at CommandRegistry.module.exports.CommandRegistry.handleCommandEvent (/opt/homebrew-cask/Caskroom/atom/1.5.4/Atom.app/Contents/Resources/app.asar/src/command-registry.js:241:20) at /opt/homebrew-cask/Caskroom/atom/1.5.4/Atom.app/Contents/Resources/app.asar/src/command-registry.js:3:61 at KeymapManager.module.exports.KeymapManager.dispatchCommandEvent (/opt/homebrew-cask/Caskroom/atom/1.5.4/Atom.app/Contents/Resources/app.asar/node_modules/atom-keymap/lib/keymap-manager.js:580:16) at KeymapManager.module.exports.KeymapManager.handleKeyboardEvent (/opt/homebrew-cask/Caskroom/atom/1.5.4/Atom.app/Contents/Resources/app.asar/node_modules/atom-keymap/lib/keymap-manager.js:388:22) at WindowEventHandler.module.exports.WindowEventHandler.handleDocumentKeyEvent (/opt/homebrew-cask/Caskroom/atom/1.5.4/Atom.app/Contents/Resources/app.asar/src/window-event-handler.js:98:36) at HTMLDocument. (/opt/homebrew-cask/Caskroom/atom/1.5.4/Atom.app/Contents/Resources/app.asar/src/window-event-handler.js:3:61) The error was thrown from the stylus-autocompile package. You can help by creating an issue. Please explain what actions triggered this error.

olmokramer commented 8 years ago

You should run apm install from the directory you cloned the repository to

frog42 commented 8 years ago

Ok, it looks like it's using the .styl document's directory as the base directory to start the search from. Notice how it just adds "Users/Frog42/.nvm/versions/node/v5.8.0/lib" onto the path for my CSS folder:

Error while reading file: /Users/Frog42/Dev/trytha-dev/web2py/applications/Trytha/static/css/Users/Frog42/.nvm/versions/node/v5.8.0/lib

olmokramer commented 8 years ago

Ah I see, that's because you've set it as the main field at the top of your stylus file. The main field is used to specify a file that should be compiled instead of the current file. Instead you should set the path in the stylusLibPath setting in the settings view.

frog42 commented 8 years ago

Ah. That's another problem, then. There is nothing in the settings view for atom-stylus-autocomplete in my Atom. Only the uninstall option. It also somehow breaks the settings for a lot of my other installed modules in some fashion (not sure exactly how, but all of the pictures of the creators' avatars become broken). I'd guess that's a shared namespace or an unclosed bracket somewhere maybe?

olmokramer commented 8 years ago

Did you clone the package into ~/packages/atom-stylus-autocompile? Because the package's official name is stylus-autocompile (without the atom- prefix, that's just something I like to have in my git repositories so I can distinguish atom packages from other stuff). Can you try to remove the prefix from the directory name?

About the avatars, that's just weird... And probably not something I can fix; Atom's settings view automatically fetches them from GitHub. I've seen it happen some times, but it fixed itself after some time. Maybe a caching problem?

frog42 commented 8 years ago

Aha! Yes, changing the directory name seems to have done the trick. It appears to be compiling as it should now (no errors, at least). Not sure why, but using the cloned module still breaks everyone's avatars (I completely removed the old directory containing stylus-autocompile and the now-empty atom-stylus-autocompile). I can live with broken avatars. Maybe once you finalize this and I install it through Atom that will fix it.

frog42 commented 8 years ago

Really appreciate this, thanks.

olmokramer commented 8 years ago

Glad you like it :) And I'm really happy with the result, it's really flexible and should support most libraries out of the box!