I'm trying to find out if it is possible to use autoprefixer (https://npmjs.org/package/autoprefixer) to automatically process the CSS with meteor.
I'm trying to enable the node package to work with meteor with meteor-npm but then I don't really get what to do or if it is at all possible.
My first choice would be to use stylus (see below), but based on your comments it looks like you are using less. It may be possible to create a local package which adds a source handler for all less files. See the less plugin and the stylus plugin.
Alternatively, you could use an external process to compile your files. I use a Cakefile to watch my .jade files and turn them into html. Maybe you could do something similar with autoprefixer.
$ meteor add stylus
The package comes with nib which solves the problem you are asking about. Here's an example:
example.styl
#import 'nib'
$bluestart = #0076b8
$bluestop = #005a8d
footer
border-radius: 5px
background: linear-gradient(top, $bluestart, $bluestop)
The compiled css will have all of the border radius and gradient prefixes expanded for you.
There are ever more meteor packages available! At the time of writing, there are three less+autoprefixer packages amongst the offerings:
https://atmospherejs.com/?q=autoprefix
You should just use seba:minifiers-autoprefixer package. For Meteor 1.3+:
meteor remove standard-minifier-css
meteor add seba:minifiers-autoprefixer
It will autoprefix all CSS processed by Meteor in production. It does not matter where CSS is coming from (SCSS, Stylus, raw, etc.).
Related
I think this should be possible, though dont know, I use tools like 'gulp' and 'webpack' to bundle asset files but is there any tool that extracts the necessary css classes, only that are being used, from the css files and pack them.
What you are looking for is called tree shaking, and usually it's already done in the build process with webpack,
You can install this plugin for css specific tree shaking or you can look for more info here about how it works with javascript (something similar happens in css)
In Gulp there is package called Uncss
https://github.com/ben-eb/gulp-uncss
and also an addon that is available for firefox
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
which will help you in removed unused css
Take a look into tree shaking, there are several that are for specific css.
I'm using the official Ionic package for Meteor. Working directly with Ionic, there is a way to write a SASS theme. How would you do this in a Meteor set up?
Add the fourseven:scss package
Download this repo
https://github.com/nickw/meteor-ionic-scss-import and copy all the files to /client/stylesheets/ionic
In your main scss file, import ionic.import.scss: #import "./ionic/ionic.import.scss";
Overwrite the colors in _variables.import.scss
Go have a beer.
You might want to have a look at how it was done in Meteoric. Although this package is no longer maintained you can reuse the concepts that are used there:
Use https://atmospherejs.com/meteoric/ionic-sass and https://atmospherejs.com/meteoric/ionicons-sass as prepackaged versions of Ionic SCSS
Use https://atmospherejs.com/fourseven to make sure Meteor can process SCSS
To create your custom theme, simply overwrite the variables in _variables.scss in your own stylesheet.
Note that these packages support an older version of Ionic, if you want to use the newest version, you can include it from here in your "style" folder: https://github.com/driftyco/ionic/tree/master/scss
Searching on libraries for Stylus I've only found Nib.
I was wondering HOW TO install and use Nib on Meteor. The docs for Nib specify how to use it on pure Node.js; what is the procedure on Meteor?
Also: are there any other libraries for Stylus on Meteor? This info has been really hard to find since the meteor docs don't say anything.
The docs don't say this, but nib is automatically installed when you meteor add stylus. Note that you will still need to #import 'nib' at the top of any .styl files where you want the nib extensions.
As for the last part of your question, I'm not aware of other libraries for stylus. If you have something specific in mind, please update the question.
check out flexbox based grid system with autoprefixer: http://s-grid.meteor.com
You can also use it with Grunt scaffold: https://github.com/juliancwirko/s-grid-grunt and as a standalone npm package: https://www.npmjs.com/package/s-grid
There is also some other packages which uses nib, autoprefixer etc.: https://atmospherejs.com/?q=stylus
As stated by Rob Dodson, style tags are now unavoidable with Web Components. I am trying to find a way to use LESS with this new tecnhology without having to paste the compiled CSS in my HTML document everytime I change something in the LESS file . Is there anyway to achieve that?
I am using Polymer.
Thanks!
Laurent
You can make the client compile the LESS to CSS , you should definitely take a look at this :
http://lesscss.org/#client-side-usage
It is advised to compile it yourself to css in a production environment though !
Doing this client-side hardly seems like the corrent solution, especially at scale. For instance, do you really want 1000 web components in your app all including LessCSS and compiling on the client side?
Just compile server-side and include the compiled version in your html import. Apps like DocPad, make this a lot easier. For instance:
src/documents/components/my-component/my-component.css.less is your source file, and is compiled to out/components/my-component/my-component.css, which is accessible at /compoennt/my-component/my-component.css.
We use this workflow to also make use of javascript pre-processors like coffeescript, as well as post-processors like css auto prefixer, and bundlers like Browserify. See: https://stackoverflow.com/a/23050527/130638 for more info.
Simply compile your less and embed the generated CSS file via good old link tag.
I don't think that rob wanted to say that using style tags is the only way to go. You can still link to external stylesheets as you always did.
Why don´t you compile on server side using php compiler? Have a look here - http://leafo.net/lessphp/ -
To let you know, i´m using this compiler on my projects, on the server side without any kind of problems!!!!!!! :) IMO, it´s better to have the compilation work on the server side. I´m not totally 100% sure, but i think IE8 don´t recognize text/less
The way I have done this before is have individual .less or .scss file for each component and have it compile into the individual .css file which is then called into the respective component file. and finally vulcanize everything into a single file.
Incase you want to use a single CSS file, then use //deep// combinator or ::shadow pseudo elements in the CSS.
If you able to create the custom elements without using ShadowDOM then you can simply have all your less merge into a single CSS.
Honestly speaking I was unable to create a wc without shadowDOM in polymer. There is a long conversation on github on enabling / disabling and hacking a way to create a wc without shadowDOM here https://github.com/Polymer/polymer/issues/222
One solution would be to have the preprocessor translate .less files into .css and then linking them inside Polymer components, like explained in the official documentation: https://www.polymer-project.org/1.0/docs/devguide/styling#external-stylesheets
Unfortunately this is deprecated. So the other way to go could be to have another step that wraps the preprocessor-generated css files with a dom-module: this way you can follow the Polymer way including the style module inside your components, or using the css file compiled from less if you do things outside Polymer components.
I'm using Gulp for my build process and I found this module very useful:
https://github.com/MaKleSoft/gulp-style-modules
It creates, for every .less file I have in my sources, an .html file with a dom-module wrapped around it, ready to be included in the components' styles.
I am trying to use LESS CSS to write my CSS. I have imported the style.less and less.js file in that order.
Now i wanna extract the CSS that LESS generates.. is there any way i can do that ? i dont want to use the script to generate it dynamically in production. just for development.
You can extract the CSS using the Firebug extension in Firefox. The compiled CSS appears under the menu choice "inline" in the CSS tab.
http://incident57.com/less/ if you're fortunate enough to use OS X, and there's a ruby gem too http://rubygems.org/gems/less although this has been superseded by the node.js implementation installed through npm. Check http://lesscss.org/ for more information.
There's also http://www.dotlesscss.org/ for windows, but not sure how useful it is.
And in 2013 we have:
http://less2css.org/
Seems to work just fine for me. Just copy/paste.
Chances are you'll want to minify your CSS after this, so:
http://cssminifier.com/
For others who'd stumble here, in modern browser you can see it in the LocalStorage. I use Chrome and it's in the dev toolbar under Resources.
In my case we also want to save the css file automatically (we have a tool that generates a template), we can do it easily with javascript.
This returns the generated CSS, just replace it with the right path, as you see it under the Resources tab:
localStorage.getItem('http://domain.com/css/main.less');
Then we send that through Ajax to save it in a css file. When switching to production we remove the less and replace it by the generated css file.