Ember-cli-compass-compiler: how to override the default options? - ember.js

I'm using ember-cli-compass-compiler right now, it works well if only compass used, but I also want to use some plugins, such as Susy. I don't know how to require plugins with compass.
I've try to read the source code, founded it has a option object and includes require: sass-CSS-importer by default, but how to override/extend this option? What code should I put in Broccoli.js file?
Thanks for helping.

Finally I figure this out by myself, in case of someone needs help, I put my solution at here:
Open Brocfile.js and find this line:
var app = new EmberApp();
then, change it to:
var app = new EmberApp({
compassOptions: {
require: ['sass-css-importer', 'susy']
}
});
this assumes you want to use Susy as well as me, and of course you can override other options like above.
BTW, if you use sass syntax checker, e.g. syntastic in vim, #import "susy"; will rise an error about load path problem. Before using Ember-CLI, I use a config.rb as compass's configurations, so sass knows about require "susy" is a dependency should be concerned about. But now we no longer have config.rb file anymore, fortunately you can let sass knows required gem(s) by passing -r GEM_NAME to passing the syntax checker. For case of syntastic, you can simply put this line in your .vimrc file:
let g:syntastic_scss_sass_args = "-r sass-css-importer -r susy"

Related

Tailwindcss prettier plugin only affects css files

Ive installed the prettier-plugin-tailwindcss in my emberjs app. It runs and sorts the classes in my css files correctly but it doesnt touch the handlebars files. The standard prettier stuff still works in the handlebar files.
Ive tried adding a twConfig to the .prettierrc as suggested in the docs but that was unrecognised.
I'd really like to use this plugin but I need to support the handlebars files. Please let me know if anyone has any ideas on how I could solve this.
Here's my current prettierrc.yaml
# We use pretty much all defaults from Prettier https://prettier.io/docs/en/options.html
# We prefer single quotes to align with our internal RECONZ styleguide
singleQuote: true
twConfig: 'app/tailwind/config.js' // adding this throws this error below
// [warn] Ignored unknown option { twConfig: "app/tailwind/config.js" }.
overrides:
- files: '*.hbs'
options:
parser: 'glimmer'
# The Ember community uses single quotes in JS & double in templates
singleQuote: false
These are the versions I have installed:
"prettier": "^2.6.0",
"prettier-plugin-tailwindcss": "^0.1.11",
yarn: v1.22.17
UPDATE: the issue seems to be the parser which is set to glimmer When I tried with html instead the plugin worked but unfortunately I need to keep the parser as glimmer because html also causes some unwanted effects. Is there another option I could use?

How to highlight code in hbs template?

I want to introduce into my project some code to be highlighted on certain pages (like index.hbs) I've searched for libraries that can do this and found tools like highlight.js, but I was unable to use it in my ember project. Can anyone explain how to import a custom library like highlight.js or can someone give me a recomandation for a tool. I've tried to use this tool: ember-cli-eg-code-highlight, but it is not specified how to use it. Ok I have installed it, pasted the {{highlight-js code=file lang=language hasLineNumbers=hasLineNumbers}} in my index.hbs, but it does not work. Also the ENV.emberHighlightJs: { style: 'arta' };I have no ideea where to put it. Tried to put it inember-cli-build.js but it is not working.
I have found also markdown-code-highlighting. But I am lost at this step: "In your Brocfile you'll need to import the CSS styling you want for the highlighter. " So where exactly is my brocfile in my ember project?
Did you restart ember server ?
You can find example of using ember-cli-eg-code-highlight here: https://github.com/EmberGrep/ember-cli-eg-code-highlight/blob/master/tests/dummy/app/templates/application.hbs
But it looks like addon is buggy. So it worth to check this PR https://github.com/EmberGrep/ember-cli-eg-code-highlight/pull/9
P.S. about brocfile -- now it names as ember-cli-build.js at the root of project

Webpack watch not working on Webstorm on Windows?

So basically I have a project using Webpack, if I build using Webpack -w, editing the file with another editor will trigger the watch; however if I edit the file using Webstorm, nothing will happen.
I have came across this post, which seems I'm not the only one, however that solution is for Ubuntu, so I was wondering if there is anything similar for Windows?
Thanks
Seems Webpack watch doesn't work if the file is not saved directly. Please try turning 'Safe write' option ( Settings | Appearance & Behavior | System Settings | Use "safe write" (save changes to temporary file first)) off.
In 2020.* the option name is Back up files before saving
Also make sure you use Node's path construction instead of slashes. Example:
entry: {
'MyPackage': path.join(__dirname, 'modules', 'PkgEntry.js'),
...
instead of:
entry: {
'MyPackage': '\\modules\\PkgEntry.js'),
...
Had the same issue today. And accepted answer didn't help me.
Check this page https://confluence.jetbrains.com/display/IDEADEV/Inotify+Watches+Limit and try to increase your Inotify Watches Limit. Helped me.

How to compile project's CSS files into one file

By default ember-cli seems to be set up not to compile css files into one (as it does with the JS files).
What is the best way to configure ember-cli to merge all files in app/styles (and subdirectories) into one app.css file (and then fingerprint etc)? Is this possible via the Brocfile or do I need to override EmberApp.styles()?
Update: As far as I can see there are the following (not very elegant) options:
1) Using SASS and #import the CSS files into app.scss individually. The downside of this is that I need to use an extra plugin (SASS) and that SASS does not seem to allow for globbing patterns in #import (e.g. #import('**/*.scss')), which makes this solution cumbersome for big projects.
2) Overriding EmberApp.styles() such that it does not copy the CSS files (this is currently being done by a wrapper around broccoli-static-compiler) and configuring Broccoli such that it concatenates the css files into app.css. This solution seems a bit hacky though and there is a risk of incompatibility with newer versions of ember-cli.
3) Workaround: Use broccoli-funnel and broccoli-concat to do the concatenation yourself.
In Brocfile.js:
var appTree = app.toTree()
var concatenated = concat(appTree, {
inputFiles: [
'**/*.css'
],
outputFile: '/assets/app.css',
});
module.exports = mergeTrees([appTree, concatenated], { overwrite: true });
This will create a new app.css with all our concatenated CSS in /assets/app.css.However, this file not fingerprinted. Our assets directory now looks something like this:
/assets/app.css
/assets/app-<fingerprint>.css
So a - admittedly hacky - second step is to 1) get the filename of the fingerprinted app-<fingerprint>.css, 2) delete app-<fingerprint>.css and 3) rename app.css to app-<fingerprint>.css. This last step can be automated using Grunt or gulp.
Personally, I think SCSS would be the way to go. It is the simplest solution and there are other advantages to using SCSS besides importing things into one file (variables for repeated patterns, for example).
In addition, manually adding files allows the developer to configure exactly where each piece of code is included. I don't see that as a con, but I can understand the other point of view and I've definitely spent 5m trying to figure out why my styles weren't being applied until I realized it was because I didn't include a new style file.
Edit: There are some node-sass globbing solutions available that could probably be added if that is a big show stopper.

Theming sencha touch list

I want to change the color of the headers in a grouped list. For the moment I've got the default theme. I think I have to use something like "$list-header-bg-color" but :
WHERE can I use it ? I tried to write something like :
$list-header-bg-color = '#CCC'
directly at the end of the "sencha-touch.css" file but it doesn't work at all ... Somebody can explain me how does it works ? (with a little example please). Thanks in advance
First you need to install ruby
then install ruby gems
then install compass
then open your application *.scss file (should be in resources/sass/)
after the line
#import 'sencha-touch/default/all';
include your line
$list-header-bg-color = '#CCC'
Note that by default the value of this var is
$list-header-bg-color: transparentize(saturate($base-color, 10%), .25);
Maybe you can change the base-color to have a more "unified" look (depending on what you want to do ...)
then compile your scss file
compass compile
Now your theme should have been compiled to your app.css and your new color is good :)
For more detail check this article I wrote not long ago : sass-for-sencha-touch-2-windows-7
Sencha is using SASS for theming. So that line should go in the sencha-touch.scss file. Then you should compile that file with compass to get a css file. See this videos:
http://vimeo.com/26506883
http://vimeo.com/17879651
slides from presentation http://www.slideshare.net/senchainc/theming-sencha-touch
reference docs http://dev.sencha.com/deploy/touch/docs/theme/
Check this also http://www.sencha.com/blog/sencha-touch-theme-contest-winners-announced/