share Stylus variables across Meteor packages - meteor

consider the following app structure:
app.html
app.coffee
app.styl ## global styles, e.g. primary = #222
packages/
FirstPackage/
package.styl ## package styles, e.g. background: primary
SecondPackage/
package.styl
ThirdPackage/
package.styl
how can the packages use the styles defined app.styl?

This is possible with the meteor stylus package:
When adding the file to share in package.js (package name: project:name), mark it as 'importabe' by adding {isImport: true}:
api.addFiles('file.styl', 'client', {isImport: true});
Then import that file into stylus files of other packages:
#import '{project:name}/file.styl'
More info: https://atmospherejs.com/meteor/stylus#cross-packages-imports

take a look here: http://s-grid.meteor.com/#stylusconfiguration This is hard with Meteor for now. But you can add more paths to Stylus build plugin. Here you will find how to do this with package which provide stylus build plugin with config .json file for it: http://s-grid.meteor.com/#additionalincludepaths

Related

How to get two packages to handle the same file extension

I would like to know how to get two packages to compile the same file extension.
I am writing a package that compiles .jsx by looking for certain strings and replacing them. Inside this plugin, I am using isobuild:compiler-plugin#1.0.0:
Plugin.registerCompiler({
extensions: ['jsx']
}, function () {
...
});
The problem is that I cannot use this with mdg's jsx package because that package is also trying to compile .jsx.
Meteor gives me:
While determining active plugins:
error: conflict: two packages included in the app (jsx and my-plugin) are both trying to handle *.jsx
Ideally, I would like jsx plugin to compile the .jsx files first, and then my plugin to compile them again. Any suggestions on how to achieve this? Or can someone point me to any other directions?

Share a stylus sheet between packages

I've got an app broken into a handful of packages. Each of these packages has their own .styl sheet to style the components that specific package offers. Currently, these .styl sheets all rely on the same functions, mixins, and variables declared in the variables.import.styl that is in the ./client/styles folder. I do this because if I change the errorRed color in the variables.import.styl, it changes the color across all packages.
To get access to those variables, at the top of each package's stylesheet, I have a #import "./client/styles/variables.import". Alternatively, I could create a separate package for the stylus vars & then make that package a dependency in all the other packages. I don't love either option, but I suppose it's the price I pay to keep stylesheets separated by package. Anyone have a more elegant alternative?
It's worth noting that on the Meteor devel branch, my previous solution no longer works (stylus can't see folder above the package root). Regardless of whether this is fixed or not before the next version release, I know there's gotta be a cleaner solution.
As of Meteor 1.2, this is now a feature working out of the box, for both stylus and less stylesheets.
https://github.com/meteor/meteor/tree/devel/packages/stylus#cross-packages-imports
In your package.js Package.onUse section, use api.addFiles to declare stylus sheets provided by this package :
api.addFiles('styles/package-sheet.styl', 'client', {isImport: true});
Notice the isImport: true option ?
Then in your main app master stylus stylesheet you can import a specific package (let's suppose it's named my-username:mypackage) sheet using this syntax :
#import '{my-username:my-package}/styles/package-sheet.styl'
Note that for importing sheets within your app you will also need to use this new syntax, without any package name :
#import '{}/client/styles/app-sheet.styl'
The previous syntax will no longuer work !
// the Meteor build tool will complain about not finding the sheet
#import 'client/styles/app-sheet.styl'

How do I add/import less files in Meteor package

I have created a package in which I placed less files and then add these files in package file but I didn't find these files in resource in browser.
My package structure is:
package -> client -> autocomplet -> autocomplet.import.less, autocomplet.js, autocomplet.html
And in package.js file:
Package.onUse(function(api) {
api.use('templating', 'client');
api.versionsFrom('1.1.0.2');
api.addFiles('./client/autocomplete/autocomplete.html');
api.addFiles('./client/autocomplete/autocomplete.js');
api.addFiles('./client/autocomplete/autocomplete.css');
});
Kyll's comment pointed out one of the issues. You need to both use less to import the less files, and also add the files themselves. Also note that ./ is not necessary because the paths are already relative to the location of package.js. Something like the following:
Package.onUse(function(api) {
api.versionsFrom('1.1.0.2');
api.use('templating', 'client');
api.use('less');
api.addFiles('client/autocomplete/autocomplete.html');
api.addFiles('client/autocomplete/autocomplete.js');
api.addFiles('client/autocomplete/autocomplete.import.less');
});
P.S. Have you checked out the autocomplete package? (Disclaimer: I wrote this package.)

Using a variable in #import statement - DotLess

I'm am using DotLess v1.4 and I would like to do the following:
// Variables
#Utilities-path: "../../Utilities";
#import "#{Utilities-path}/bacon.less";
When I do this I get a file not found error.
File Not Found while parsing: You are importing a file ending in .less that cannot be found.
If I do this it works correctly.
#import url('../../Utilities/bacon.less');
As far as I'm aware this was added to Less in version 1.4, so I assumed it would work in the latest version of DotLess.
Does anyone know if this feature is available and if so what I am doing wrong?
This is feature is not available in DotLess v1.4. Version 1.4 does not mean that is using the equivalent version of LESS.
According to: https://github.com/less/less.js/issues/410#issuecomment-16219936 it looks like this feature was added in less v1.4.0 and requires the use of a mixin to do the import.
#Utilities-path: "../../Utilities";
.bacon(){
#import "#{Utilities-path}/bacon.less";
}
.bacon();

Adding custom include-path folders to LESS.build

I am currently using Sublime Text with LESS.build package to compile my .less files into CSS.
My current LESS.build cmd is:
"cmd": ["lessc", "screen.less", "${file_path}/screen.css", "--verbose"]
I tried to add some extra folders to the --include-path:
"cmd": [
"lessc",
"screen.less",
"${file_path}/screen.css",
"--verbose",
"--include-path='.:/var/www/whatever/'"
]
But, whenever i try to build my .less files the --include-path params seems to be ignored.
The only workaround i found is adding the full relative path on my #import:
#import "../../../www/whatver/config.less"; //Ugly solution
Can anyone point me where i am failing and/or any other workaround prettier than mine's?
Looks like there was a bug out for this. https://github.com/cowboyd/less.rb/issues/13
and there was a similar issue here LESS #import: Passing paths to lessc.

Resources