I'm trying to use TailwindCSS in my ember app and I ended up using this add-on to do this. But unfortunately some other add-ons require to include their 'scss' files to app styles. So I tried to add 'postcss-sass' to make it work. But it doesn't want to work with "#apply" command. Is it possible to use postcss and sass and #apply command at the moment?
My ember-cli-build.js:
postcssOptions: {
compile: {
extension: 'scss',
enabled: true,
parser: require('postcss-scss'),
plugins: [
{
module: require('#csstools/postcss-sass'),
options: {
includePaths: ['node_modules']
}
},
require('tailwindcss')('./app/tailwind/config.js'),
...isProduction ? [purgeCSS] : []
]
}
}
And I'm getting an error: UnhandledPromiseRejectionWarning: Error: Invalid mapping: {"generated":{"line":53,"column":-1},"source":"../../out-338-broccoli_merge_trees_full_application/app/styles/app.scss","original":{"line":52,"column":25},"name":null}
This is precisely where #apply appeared the first time.
It turned out the problem was with a missing semicolon in "app.scss". It worked fine when it was a plain css, and stopped working when I converted it to SASS.
Related
In my project, I used eslint-import-resolver-alias for imports like below in .eslintrc:
{
"settings":{
"alias": [
["pckg", "pckg/src"]
]
}
}
And I use as below in my .js files
import pckg from 'pckg'
But when I try to find the declaration using a Cmd+Click by clicking on 'pckg' in the import statement, WebStorm says that there is no declaration to go to. I realize that WebStorm is not able to understand the import alias resolver plugin, but is there anyway to make it work
You can try using webpack aliases instead: create a dummy webpack configuration file with aliases like
...
alias: {
'pckg': path.resolve(__dirname, './pckg/src'),
},
...
and specify a path to it in Settings | Languages & Frameworks | JavaScript | Webpack, or use a workaround from https://youtrack.jetbrains.com/issue/WEB-22717#focus=streamItem-27-1558931-0-0:
create a file config.js (you can use a different name if you like) in your project root dir
define your aliases there using the following syntax:
System.config({
"paths": {
"pckg/*": "./pckg/src/*"
}
});
I'm working on app with grunt and typedoc.
I need to prepare documentation using TypeDoc but I have a problem with one scenario.
I have to exclude a few files from documentation which are externals libs.
I can't put those files into exclude section because those files are relating with another. If I tried to exclude it (by put those files into exclude section) I had a errors - something like cannot find to xxx into yyy.ts - where xxx is my excluded element and yyy is related file with xxx. Those
related files are neccessary on this documentation so I can't exclude those too.
I read into TypeDoc documentation about excludeExternals. So I thought that if I set up this boolean as true then I can to define externalPattern to exclude my external files. It's works but only if I put the name of one file - no more.
Do You know how to do it?
It is my typedoc config into gruntfile.js (without excludeExternals options):
typedoc: {
build: {
options: {
module: 'commonjs',
out: '../Documentation/',
name: 'MyApp',
target: 'es5',
exclude: [
'node_modules',
'**/*.d.ts'
],
excludePrivate: true,
mode: 'file'
},
src: [
...some source...
]
}
}
This is list of external files which I have to exclude: A.ts, B.ts, C.ts, D.ts ...
And this is my typedoc config into gruntfile.js (with excludeExternals options):
typedoc: {
build: {
options: {
module: 'commonjs',
out: '../Documentation/',
name: 'MyApp',
target: 'es5',
exclude: [
'node_modules',
'**/*.d.ts'
],
excludeExternals: true,
externalPattern: '**/*/A.ts',
excludePrivate: true,
mode: 'file'
},
src: [
...some source...
]
}
}
This config is working well. I have got a documentation without A.ts file. So now I need to put a few files, so I tried to put on externalPattern something like: **/*/(A|B|C|D).ts but without success (because during recompiling of documentation I had error: Process terminated with code 3. 'B' is not recognized as an internal or external command, operable program or batch file.).
Any ideas?
I found the solution. If I want to exclude externals files using externalPattern I should to write pattern something like that:
externalPattern: "**/*/{A,B,C,D}.ts"
{ } = allows for a comma-separated list of "or" expressions
, = or
Useful for me was this comment from topic about regex in gruntfile.
According to this comment, the right syntax would be **/*/+(A|B|C|D).ts. Also, it looks like you are running into a problem with your shell trying to interpret the pipe characters, so try adding double quotes around the whole thing:
externalPattern: '"**/*/+(A|B|C|D).ts"'
I have a WinJS-UWP-Application, where I use TypeScript 2.5. I just upgraded from VS2015 to VS2017. When I want to debug my WinJS-UWP-Application the Breakpoints inside my .ts-Files are not noted, because the SourceMap isnt read properly. I didn't change any configuration of the project.
In the output I get this message:
SourceMap
ms-appx://8d7814f6-7286-4475-8ed8-be1c489c2253/js/main.js.map read
failed: The URI prefix is not recognized..
My CompilerOptions are:
"compilerOptions": {
"target": "es5",
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true
}
The min and target version of the application are: 10.0.14393.0
Do I need to setup anything else in VS2017?
EDIT:
Steps to reproduce:
Create a new UWP WinJS-App in VS 17 with Min and Target Version: 10.0.14393.0
Remove the js\main.js
Add a main.ts file in the js folder
Create a tslib folder and insert the winjs.d.ts inside [For example from DefinetlyTyped]
Add the following code inside the main.ts:
/// <reference path="../tslib/winjs.d.ts"/>
WinJS.UI.processAll().then(() => {
let div: HTMLDivElement = document.createElement("div");
let label: HTMLLabelElement = document.createElement("label");
label.textContent = "Hello from the TypeScript-Side";
div.appendChild(label);
document.body.appendChild(div);
});
Add a new tsconfig.json from the VS17 template.
Start the app with the AnyCPU Configuration
Expected result:
Inside the App you see the text:
Content goes here!
Hello from the TypeScript-Side
In the ouput you see these two messages:
'WWAHost.exe' (Script): Loaded 'Script Code (MSAppHost/3.0)'.
SourceMap ms-appx://32fb2864-03cf-4387-8a05-6c65a66c5a48/js/main.js.map read failed: The URI prefix is not recognized..
EDIT 2:
The content of the main.js.map:
{
"version": 3,
"file": "main.js",
"sourceRoot": "",
"sources": [ "main.ts" ],
"names": [],
"mappings": "AAAA,2CAA2C;AAE3C,KAAK,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC;IACvB,IAAI,GAAG,GAAmB,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACxD,IAAI,KAAK,GAAqB,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9D,KAAK,CAAC,WAAW,GAAG,gCAAgC,CAAC;IACrD,GAAG,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACvB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AACnC,CAAC,CAAC,CAAC"
}
EDIT3:
TypescriptBuild-Settings:
TypeScript version: 2.5
Compile on save: Yes
Allow implicit 'any' types: Yes
Keep comments in JavaScript output: Yes
Generate declaration files: No
Generate source maps: Yes
Specify root directory of source maps: $(MSBuildProjectDirectory)
Specify root directory of TypeScript files: $(MSBuildProjectDirectory)
Emit on error: No
If I delete the tsconfig.json, the source maps are created correctly. But i need the tsconfig.json for a few other options, so deleting it is not an option!
I found a workaround which fixes the problem for the moment. I don't know why this works, but if you add the line:
"mapRoot": "js/"
it works correctly.
This only works for the default directory setup!
In a traditional Ember app, I have something along the lines of this in my ember-cli-build.js:
//ember-cli-build.js
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
babel: {
includePolyfill: true,
ignore: ['my-ember-ui/models/myFile.js'] // <-- question is here
},
Is there an equivalent to this when using an Ember Engine (or addon)? I couldn't find anything within ember-cli-babel or ember-engines.
I understand that ember-cli-build.js is just for the dummy app when using an engine, so I wouldn't make the change there. I attempted similar to above in the index.js file, but did not have any luck. The file was not ignored by babel. I need a way to ignore a particular file. Thanks!
Well, adding new rules to Cli.build.js is ok depends on what you want to do. However, I may have another solution that you can give it a try.
Babel will look for a .babelrc in the current directory of the file being transpiled. If one does not exist, it will travel up the directory tree until it finds either a .babelrc, or a package.json with a "babel": {} hash within.(.babelrc files are serializable JSON).
{
"plugins": ["transform-react-jsx"],
"ignore": [
"foo.js",
"bar/**/*.js"
]
}
or
{
"name": "my-package",
"version": "1.0.0",
"babel": {
// my babel config here
}
}
There should be another way which seems ok to use. the following does work:
babel src --out-dir build --ignore "**/*.test.js" // or simply add your file
For more information, you can read Babel document
I' using the latest release version of webstorm (9.03) and most of my JavaScript files show up as invalid. I'm showing the code below.
'use strict';
function SpeakerDetailsController (speaker, CONFIG, $sce, $scope) {
this.speaker = speaker;
this.showSessions = CONFIG.showSessions === 'True';
$scope.someSafeContent = $sce.trustAsHtml("<i>Hello</i> <b>World!</b>");
}
SpeakerDetailsController.$inject = ['speaker', 'CONFIG', '$sce', '$scope'];
export default SpeakerDetailsController;
Please make sure to set JavaScript Language Version to 'ECMAScript 6' (or 'JSX Harmony') in Settings/Languages&Frameworks/JavaScript to get ES6 syntax correctly recognized.