I've never used LESS before, but seeing as there is a transformer for it available in Dart, I've decided to throw it in the mix.
pubspec.yaml:
dependencies:
less_dart: any
transformers:
- less_dart:
entry_point: web/alm.less
I've removed the styles.css entry in my index.html and replaced it with alm.less:
<link rel="stylesheet" href="alm.less">
Inside alm.less, if I do:
* /deep/ core-toolbar .core-selected {
background-color: #FF5252;
color: #F5F5F5;
}
I can see the colour changing, but if I do this:
#darkPrimaryColor: #E64A19;
* /deep/ core-toolbar .core-selected {
background-color: #darkPrimaryColor;
color: #F5F5F5;
}
that background-color switches back to its default and ignores my #darkPrimaryColor;
Looking at the output of pub build, it places that LESS file directly into index.html without parsing the #darkPrimaryColor;
According to https://pub.dartlang.org/packages/less_dart, I'm supposed to import two dart files, they don't say where exactly, so I've included them in my main-app.dart:
import 'package:polymer/polymer.dart';
import 'package:less_dart/less.dart';
import 'package:less_dart/transformer.dart';
#CustomTag('main-app')
class MainApp extends PolymerElement {
...
}
Main App is loaded as follows in index.html:
<body unresolved>
<main-app class="default"></main-app>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
Those two includes causes the following errors, so I've removed them again:
The requested built-in library is not available on Dartium.'package:less_dart/less.dart': error: line 4 pos 1: library handler failed
import 'dart:io';
^: package:less_dart/less.dart
Update:
So removing the .pub and doing pub get and pub cache repair doesn't do much different.
I've done a pub serve from the command line to see what it outputs:
pub serve
Loading source assets...
Loading polymer and less_dart transformers...
Serving falm web on http://localhost:8080
[Info from less-dart] command: lessc --no-color web/alm.less > web/alm.css
[Info from less-dart] lessc transformation completed in 0.0s
[Warning from ImportInliner on falm|web/index.html]:
line 28, column 3 of web/index.html: Failed to inline stylesheet: Could not find asset falm|web/alm.css.
null. See http://goo.gl/5HPeuP#polymer_26 for details.
<link rel="stylesheet" href="alm.css">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Update
For the record, I'm using dart sdk 1.8.3 and OSX 10.10.1 Yosemite, don't know if this will help.
Update
Got it working, pretty neat plugin once it's working!
So inside my transformers I had to move less_dart to be the first transformer, otherwise the polymer transformer is trying to pickup alm.css which has not been generated yet.
I was also missing "build_mode: dart"
dependencies:
...
less_dart: ">=0.1.3 <0.2.0"
transformers:
- less_dart:
entry_point: web/alm.less
build_mode: dart
- polymer:
entry_points: web/index.html
- ...
Jan, thanks to try less_dart.
less_dart is a compiler/transformer in the server side. It reads your web/alm.less file and generates web/alm.css.
So, your html file must declare: <link rel="stylesheet" href="alm.css">
(For use href="alm.less" you would need the original javascript implementation (see http://lesscss.org), which support browser transformation).
Your next question: Where is the alm.css file generated?
By default, the transformer use the option: 'build_mode: less'. It reads web/alm.less and writes alm.css in the same directory: web/alm.css.
I suppose your browser is using 'build/web/index.html', so, you need the alm.css in the same directory. For that you need the transformer option: 'build_mode: dart'.
dependencies:
less_dart: any
transformers:
- less_dart:
entry_point: web/alm.less
build_mode: dart
The less_dart package has two components:
less compiler (less.dart)
less transformer (transformer.dart)
The compiler could be used directly throw the command line (lessc is in the bin directory):
pub run lessc web/alm.less web/alm.css
Or in your Dart program:
import 'package:less_dart/less.dart';
...
List<String> args = [];
Less less = new Less();
args.add('-no-color');
args.add('file.less');
args.add('file.css');
less.transform(args);
As Resumen, you must add build_mode: dart to the transformer configuration and search build/web/alm.css
I'm pretty sure you don't need to add
import 'package:less_dart/less.dart';
import 'package:less_dart/transformer.dart';
when you use the transformer. This is for situations where you want to invoke the CSS generation from your own Dart code (when you don't use the transformer).
I'm also pretty sure you need to import the alm.css file not the alm.less file.
Check that you don't exclude css files in your .gitignore file (see http://dartbug.com/20110)
Check that your packages directory contains the less_dart symlink.
Delete the .pub directory and run pub cache repair to remove potentially stale cache and repair the package cache.
Related
I have seen boost-build / bjam: execute a script post install (make 'install' a dependency of executing a script) where there is a recommendation for using notfile. Then I found the https://www.boost.org/build/doc/html/bbv2/builtins/raw.html page with a basic example, where I've added the import notfile:
import notfile;
notfile echo_something : #echo ;
actions echo
{
echo "something"
}
And I've tried this snippet in a Jamroot file of a project. If I do not have the import notfile, then it fails with:
...
Jamroot:57: in modules.load
ERROR: rule "notfile" unknown in module "Jamfile</home/USER/src/myproject>".
/usr/share/boost-build/src/build/project.jam:372: in load-jamfile
/usr/share/boost-build/src/build/project.jam:64: in load
/usr/share/boost-build/src/build/project.jam:142: in project.find
/usr/share/boost-build/src/build-system.jam:618: in load
/usr/share/boost-build/src/kernel/modules.jam:295: in import
/usr/share/boost-build/src/kernel/bootstrap.jam:139: in boost-build
/usr/share/boost-build/boost-build.jam:8: in module scope
If I have the import notfile; then it fails with:
Jamroot:56: Unescaped special character in argument notfile;
/usr/share/boost-build/src/kernel/modules.jam:258: in modules.import from module modules
error: When loading multiple modules, no specific rules or renaming is allowed
/usr/share/boost-build/src/build/project.jam:1121: in import from module Jamfile</home/USER/src/myproject>
Jamroot:62: in modules.load from module Jamfile</home/USER/src/myproject>
/usr/share/boost-build/src/build/project.jam:372: in load-jamfile from module project
/usr/share/boost-build/src/build/project.jam:64: in load from module project
/usr/share/boost-build/src/build/project.jam:142: in project.find from module project
/usr/share/boost-build/src/build-system.jam:618: in load from module build-system
/usr/share/boost-build/src/kernel/modules.jam:295: in import from module modules
/usr/share/boost-build/src/kernel/bootstrap.jam:139: in boost-build from module
/usr/share/boost-build/boost-build.jam:8: in module scope from module
How can I get this to work?
Just noticed the "Jamroot:56: Unescaped special character in argument notfile" while writing the question which finally made sense (errors like "error: When loading multiple modules, no specific rules or renaming is allowed" are completely misleading and useless) - and I realized, I had written:
import notfile;
... that is, with semicolon directly after the word - it seems, here space is required; so with this change:
import notfile ;
... things start working again.
I'm getting the below error while writing the test case against my home page, which contains the landing image.
FAIL src/test/unit/pages/home.test.tsx
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
/Users/xys/Documents/work/working/project-code/client/src/asset/images/landing/landing.png:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){�PNG
SyntaxError: Invalid or unexpected token
> 1 | import LandingImage from '~/asset/images/landing/landing.png';
| ^
2 |
3 | const Images = {
4 | LandingImage
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1796:14)
at Object.<anonymous> (src/asset/index.tsx:1:1)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 1.012 s
Ran all test suites related to changed files.
I have tried the below-suggested solution in jest.config.js file but unable to resolve this.
"\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/client/src/tests/unit/fileMock.js",
Also, I tried all the solutions suggested in the below site.
Importing images breaks jest test
If you try to import an image (binary file), please try this within your package.json file:
"jest": {
"moduleNameMapper": {
"\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/client/src/tests/unit/fileMock.js",
}
}
get more information in jest docs here: https://jestjs.io/docs/code-transformation
As far as I know, Deno lock files can only be created when using a TypeScript (or JavaScript) file with all the imports on it — usually from a deps.ts file.
I would like to be able to use (the unstable yet) import maps and also generate that lock file based on it.
Is it possible to generate that lock file from an import_map.json file? If it's not possible, is there any other way to use a deps.ts file, for instance, an be able to map the dependencies in order to import them without using (the infamous) ./.. everywhere?
Moreover, looks like using the paths feature on a tsconfig.json file wouldn't do since I don't have any idea how to refer to any module on it.
You cannot directly generate a lock file based on an import map yet. But you can pass the entry file of your program along with the import map to generate a lock file.
Here's an example.
log.ts:
import { green } from "colors";
console.log(`Status: ${green("OK")}`);
deps.json (import map):
{
"imports": {
"colors": "https://deno.land/std#0.88.0/fmt/colors.ts"
}
}
Now run the following command to generate a lock file.
deno cache --import-map=deps.json --unstable --lock=lock.json --lock-write log.ts
The content of lock.json might look like below.
{
"https://deno.land/std#0.88.0/fmt/colors.ts": "db22b314a2ae9430ae7460ce005e0a7130e23ae1c999157e3bb77cf55800f7e4"
}
Another solution that works very closely or better since it actually scans through all the dependencies the project uses is to run: deno test --no-run --import-map import-map.json --lock lock.json --lock-write.
IntelliJ IDEA started highlighting errors in some of my import statements that worked previously. This is not unexpected as net.corda.finance is still in the "incubating" stage.
I am working in Java.
Corda Release: 3.3
Noticed this change on github: https://github.com/corda/corda/pull/4700
So I made what I thought are the necessary changes...
//Old
//import static net.corda.finance.utils.StateSumming.sumCashBy;
//New
import static net.corda.finance.contracts.utils.StateSumming.sumCashBy;
...but I'm still getting an error. I am sure I must be overlooking something simple.
#Kid101 put me on the right track by trying StateSumming.sumCashBy(contractState)
Once I did that IntelliJ recognized I needed to add:
net.corda:corda-finance:3.3-corda
...to the classpath. If I allowed IntelliJ to add it from the context menu the error reappeared every time gradle refreshed. So I added:
cordaCompile "$corda_release_group:corda-finance:$corda_release_version"
...to the build.gradle file under the dependencies section. No more errors with my import statement:
import net.corda.finance.utils.StateSumming;
...and no issues calling the sumCashBy method.
The change you mention is in Corda master branch, In CashTests.kt you can see how sumCashBy is imported, import net.corda.finance.contracts.utils.sumCashBy.
In corda/release-V4-branchpoint import is still net.corda.finance.utils.sumCashBy i.e. the change has not made in yet to V4.
Try to build the project again.
If using Java, try: StateSumming.sumCashBy(contractState)
You should import a dependency package.
You add below to build.gradle and refresh your IntelliJ project.
dependencies {
....
cordaCompile "$corda_core_release_group:corda-finance-contracts:$corda_core_release_version"
...
I want to use an npm package, namely react-date-picker in my Meteor 1.4 project using React. The react-date-picker package comes with some css that must be included in order to render correctly. I need to tell meteor to load node_modules/react-date-picker/index.css and include it with the rest of its css, but I'm at a loss on how to do this. Others have suggested that you can simply import the css from within the .jsx component like this
import 'react-date-picker/index.css'
but doing so results in a crashing server that chokes on the first line of the css (as it appears to be parsed as a standard javascript file)
(function (exports, require, module, __filename, __dirname) { .react-date-field {
^
) SyntaxError: Unexpected token .
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Module.Mp.load (/Users/gsferrer/.meteor/packages/babel-compiler/.6.9.1.7f3rvr++os+web.browser+web.cordova/npm/node_modules/reify/node/runtime.js:16:23)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at npmRequire (/Users/gsferrer/Projects/xxx/.meteor/local/build/programs/server/npm-require.js:129:10)
at Module.Mp.useNode (packages/modules-runtime/modules-runtime.js:69:1)
=> Exited with code: 1
=> Your application is crashing. Waiting for file change.
So what is the preferred method to import css from node_modules using Meteor with React?
As you say, it appears to be parsed as JS. However, importing a CSS this way is correct and usually works, so there must be something weird going on... So I'm going to try a wild guess: Try renaming the file from index.css to something else, like react-date-picker.css. It could be that the "index" name is triggering the JS interpretation.
I have been stuck for days on this issue too (I am new to the node.js/Meteor/React/JavaScript world). I needed to import a CSS file in node_modules/react-datagrid/index.css
My working solution (applied to a tiny application that should make it easy to understand; I only display a datagrid using hard-coded data) is available on my GitHub repository (commit 902c92c). The application is called "reactDataGrid", it is a subfolder of the repository, you just need to run "meteor" within that folder.
The key steps in my case were:
npm install webpack --save-dev to install web pack for the project
to create a .babelrc file with the content described here (and copied below). I believe this helps webpack parse the JSX syntax of react.
.babelrc
{
"presets": [
[
"es2015",
{
"modules": false
}
],
"react"
]
}
add require('react-datagrid/index.css') statement inside my client/main.jsx file, that tells webpack to include that CSS file in the dependency tree of my app. This is actually an instruction described in the README of the zippyui/react-datagrid GitHub repository. (Unfortunately stackoverflow limits to two links in my post, so I cannot link it here anymore)
I cannot guarantee that this is the preferred method of doing it, but I can say that it works for me. I hope it helps.
Best,
Kevin