Having worked with JSS , do you have a solution, or example , or even code snippet you can provide to show how I can try JSS with Meteor. I have tried it and haven’t seemed to get things working.
I haven’t looked at all the responses, but try {named:false} instead of {name:false}, and also make sure you wrap that code in a Meteor.startup block, otherwise it might execute before there’s any DOM to add the style element to. Does that work, if you put it in a Meteor.startup block?
I’m making one solution for that: rocket:module. There’s also some other solutions for using ES6, though many of them don’t provide ES6 Modules, only the language features.
On the contrary! It’s totally designed for the client side. Specifically, JSS is designed to make it easy to encapsulate styles on a per-component basis (React components for example). It’s a lot more dynamic than CSS, Less, Sass, and Stylus in that regard. JSS’ automatic namespacing prevents selector collisions for this purpose.
(Though you can totally use it on the server side if you wish!)
Should this go in server or client ?
Put the Meteor.startup block in the client. Meteor.startup is essentially Meteor’s version of jQuery’s $(document).ready().
Actually the error is now this .
Uncaught TypeError: Meteor.npmRequire is not a function
Meteor.startup(function () {
var jss = Meteor.npmRequire('jss');
var sheet = jss.createStyleSheet({
'.test' : {
background: 'blue'
}
} , {named:false}).attach()
});Can you post it to a repo? Then I can clone and check it out.
Oh! Yeah. Meteor.npmRequire is for the server side only, but JSS needs to run client side. This is a limitation of Meteor’s packaging ecosystem. I’m trying to provide a solution with rocket:module.
Its very basic meteor checkout but yes i’d be happy to do so
A possible solution would be to download the JSS code (assuming there’s a version of jss that adds itself to the window as jss) and place it in your project directly instead of trying to get it from NPM. Another solution can be to use cosmos:browserfiy to import npm stuff for the client. Cosmos:browserify similar to rocket:module, but rocket:module is taking some extra steps to share NPM dependencies across Meteor packages, and is using Webpack instead of Browserify.
ok is your project ready , and can you get a working example with the repo I created ? i’ll accept the PR to view.
https://github.com/rwatts3/jss-test
Either way for me I want the best proposed solution so if your solution works i’d like to use that .
I haven’t tried it, but it looks good. It will only provide you with language features (arrow functions, classes, etc), not ES6 Modules.
So, the quickest solution for you right now is to learn how to use cosmos:browserify. You’ll have to create a package in your app that depends on cosmos:browserify (rocket:module aims to work in applications without requiring code to be in a package), then you will use Npm.depends in your package’s package.js to specify it depends on JSS from NPM, then in your package you make an entry point whose file name ends with browserify.js. Inside that file you can do
var jss = require('jss')
Meteor.onStartup(function() {
// do what you want right here with jss.
})
I’d suggest my project, but it’s not quite ready. I’m trying to finish it as soon as possible. Welcome to Meteor with its issue of not being able to easily import non-Meteor libraries. 
I just went back and looked through the documentation. They really need to take the examples from JSS: The Important Parts and put them into the JSS Readme.md. I was thinking the only way to use JSS was with the sheet.attach() and sheet.detach() api (which is what I’d expect from a platform that didn’t have a single-page architecture). Seeing the examples from the Important Parts, though… yeah, that makes a lot of sense. I can see how that would work well with a component architecture. Makes me that much more convinced it’s the way to go.
@rwatts… start with the JSS: The Important Parts link. But also keep in mind that JSS isn’t limited to just generating composable style classes. It can also write directly to the style attribute
<template name="myComponent">
<div class="myComponent" style="{{getSize}}">
<!-- stuff -->
</div>
</template>
Meteor.startup(function () {
window.addEventListener('resize', function(){
Session.set("appWidth", $(window).width());
Session.set("appHeight", $(window).height());
});
});
Template.myComponent.helpers({
getSize: function(){
return jss.createStyleSheet({
"width": Session.get('appWidth') - 100 + "px;",
"height": Session.get('appHeight') - 100 + "px;"
}, {named: false}).toString();
}
});
I haven’t used the above code exactly; but I’ve been using the general approach with much success (with a hand-rolled parseStyle() function). I’d very much like to replace my current hand-rolled methods with something like the above.
1 Like
@awatson1978 That’s an awesome example! Also, JSS has a way to apply styles directly to elements:
var rule = jss.createRule({
padding: '20px',
background: 'blue'
})
rule.applyTo(document.querySelectorAll('.foobar')[0])
or, how about this example?:
Template.myComponent.rendered = function() {
rule.applyTo(this.firstNode) // or similar
}
But does this mean we might have a flicker from more than one paint? Does Meteor attache the DOM node before or after it completes the onRender handler?.. There’d be no flicker with your way using toString.
@rwatts Have you tried cosmos:browserify yet? Here’s an example of how to use it: https://github.com/elidoran/cosmos-browserify-example.
I Joe no I haven’t tried it just yet. I’ll probably pick up my learning on
JSS this weekend. I had to finish a few projects before I could start
looking deeper into JSS. All in all JSS will probably be a future thing I
use once I am done learning its powers. Thank you for all of the feedback
though.
1 Like