Is it necessary to use a css preprocessor like less or sass to be able to access the defined color variables in Blueprint.Colors?
I've looked at the source and those only appear on .scss and .less files. However, the documentation assumes the variables are accessible with the default setup.
Blueprint.Colors is a JS object that can be used in your JS code. It does not require a CSS preprocessor because it's just a plain JS object (source code). Examples: Blueprint.Colors.BLACK, Blueprint.Colors.BLUE3.
The Sass variables all begin with $ and can only be used in Sass files that import the Blueprint variables.scss file. Examples: $black, $blue3. (Less variables have the same names but use an # prefix: #black.)
(It's also possible, but nontrivial, to use the JS variables in a CSS preprocessor. We do this internally by generating the Sass variables from the JS object.)
Related
In my src folder, I have assets/styles folder where my global scss files are.
In my index.scss I import them like this
#import 'assets/styles/colors.scss';
#import 'assets/styles/links.scss';
#import 'assets/styles/basics.scss';
And then in index.js, I import compiled index.css
Problem: In basics.scss I'm using variable from colors.scss and getting an error Undefined variable: \"$black\".
And the same happens in components scss files if they use variables from that file. I really don't want to import colors in every single component. Is there a way to make these 3 files global?
To work with scss in reacting I'm using Adding a CSS Preprocessor (Sass, Less etc.) (Since moved here).
UPD
Use partials when importing parts into index.scss
#import 'assets/styles/colors';
#import 'assets/styles/links';
#import 'assets/styles/basics';
The filenames should be
_colors.scss
_links.scss
_basics.scss
You can read more about this in the SASS docs under the Partial section.
I'm using Google's closure compiler (set to compilation_level=ADVANCED_OPTIMIZATIONS) to successfully minify/obfuscate my javascript code (I'm currently doing this semi-manually with a Sublime text plugin).
The vast majority of my javascript is in a single .js file, but of course if I obfuscate this code, and there's other snippets of javascript in my project's html files (perhaps referring to pre-obfuscation function names), then I'm going to run into problems.
What's the best approach to dealing with this dilemma? Ideally I could run a whole project through the compiler which would recognise javascript inside html files and obfuscate them in a consistent way.
Export the functions that you need to call from HTML code, those will not be renamed (minified) by the compiler. Either use the #export tag as part of the type definition, or call goog.exportSymbol or goog.exportProperty after they are defined. See the section in this wiki page about #export.
See the section Solution: Export the Symbols You Want to Keep on the page about Advanced Compilation and Externs for discussion and yet another way:
function displayNoteTitle(note) {
alert(note['myTitle']);
}
// Store the function in a global property referenced by a string:
window['displayNoteTitle'] = displayNoteTitle;
You can use obscure names for the things that are exported if you need to. If you have a lot of code in the html files, move that code to functions in your single file and call those functions from html. Closure Compiler will not compile code that is inside an html file.
Eg: I want to import a file called #import 's-grid-settings' in multiple different stylus files. Is this a bad idea?
It depends :)
Stylus have two ways of “importing” other stylus documents: via #import and via #require.
The difference is that #import would import the file each time, while #require would do this only once.
#require this way could be useful to share the settings and/or some common stuff like placeholders etc. between multiple stylus files in a such way those files could be either compiled each by itself or as a bundle. If the #import was used in this case, it would include all its stuff every time it was called, while #require would do this only once at the first call.
So, the answer to your question would depend on what is there inside your file.
I was looking at the unminified version of the 1.2.8 angular library (https://code.angularjs.org/1.2.8/angular.js). There are a number of directives that i will never use in my application, such as:
scriptDirective
ngBindDirective
ngBindHtmlDirective
ngNonBindableDirective
ngPluralizeDirective
ngTranscludeDirective
I removed all of the above, and corresponding code/functions. After recompiling my application, it performs as expected.
However, when i attempted to minify/uglify the file, im left with a file ~ 140kb in size. Yet, the original minified file size was ~98kb.
Ive used minify/uglify from Gulp and various online compressors.
How can i remove elements from the library, minify it, and the result file be smaller than original?
Right now my Karma config has the following files to include:
files: [
'vendor/vendor.js',
'vendor/angular-mocks/angular-mocks.js',
'src/components/security/index.js',
'src/components/security/authentication.js',
'src/components/security/login-controller.js',
'src/components/filters/index.js',
'src/components/filters/toDate.js',
'src/components/services/index.js',
'src/components/services/alert.js',
'src/menu/index.js',
'src/menu/menu-controller.js',
'src/user/index.js',
'src/manage/index.js',
'src/manage/user/manage-user-controller.js',
'src/manage/channel/manage-channel-controller.js',
'src/stream/index.js',
'src/stream/stream-controller.js',
'src/messages/index.js',
'src/messages/messages-controller.js',
'src/app.js',
'src/**/*.spec.js'
],
The file vendor/vendor.js is automatically created by a Gulp task concatenating all vendor files using my bower config. It's all my own Javascript code that's so hard to include because order matters a great deal. The index.js files within a folder define the module (and its routes) and thus must be loaded before the individual files. And app.js always has to be last.
So my question is how I do this a bit smarter, for example with a glob that first includes all the index.js files and then all the others?
This is exactly what RequireJS is for. You can use it in your deployed code, but you can also just use it for your tests.
If you do this, your "karma.conf.js" ends up being a little shorter and less volatile. Your RequireJS config file specifies some dependency mapping. Each test spec ends up specifying what dependencies it needs, either in a "declarative" fashion in the "define" call, or sometimes manually through the "require" function (you sometimes need the latter to deal with circular reference problems).
Hm I guess asking the question gave me the idea I needed :) This works:
files: [
'vendor/vendor.js',
'vendor/angular-mocks/angular-mocks.js',
'src/*/**/index.js',
'src/*/**/*.js',
'src/app.js',
'src/**/*.spec.js'
],
Adding the *.js after index.js results in debug messages like this:
src/manage/index.js ignored. Already in the list.
Excellent!