I have a file using scss with css-modules like so:
import styles from './Login.scss';
The webpack build works fine but i'm getting a flow error: Required Module Not Found
In my .flowconfig I have
[ignore]
.*/node_modules/fbjs/.*
.*/app/main.js
.*/app/dist/.*
.*/release/.*
.*/git/.*
[include]
[libs]
[options]
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable
esproposal.export_star_as=enable
module.name_mapper.extension='css' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
module.name_mapper.extension='styl' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
module.name_mapper.extension='png' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
module.name_mapper.extension='jpg' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
I've also seen https://github.com/facebook/flow/issues/338 but it doesn't really have any solution.
Has anyone found a workaround for this issue?
A better solution for this error is to use the css-modules-flow-types webpack plugin to generate flow types for your CSS modules.
Flow doesn't know about the scss extension, so you need to add the following to your .flowconfig, in the [options] section:
; Extensions
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json
module.file_ext=.css
module.file_ext=.scss
You should also add *.scss.flow to your .gitignore. These files shouldn't be checked in because they are automatically generated during the webpack build.
added all the file types I wanted flow to recognize in .flowconfig file
[options]
module.file_ext=.js
module.file_ext=.json
module.file_ext=.jsx
module.file_ext=.css
module.file_ext=.scss
This error can be fixed by assigning .scss files to an empty module. I just npm installed empty and added this to the .flowconfig :
module.name_mapper.extension='scss' -> 'empty/object'
We can use module.name_mapper.extension to replace types for imported module on Object
module.name_mapper.extension - Specify a file extension to match, and a replacement module name,
separated by a ->.
add option to .flowconfig file
// .flowconfig
[options]
module.name_mapper.extension='scss' -> '<PROJECT_ROOT>/flowconfig.mock-module.js'
create new file
// flowconfig.mock-module.js
export default Object;
Related
I’m working with Dart 2 and AngularDart 5.
⚠ I searched online about my question, but I didn’t find a satisfactory answer.
❔ Can somebody explain all the steps I need to include and to work with SCSS style files within my AngularDart application?
I started with quickstart application that you can find here.
Thank you!
Add a dev dependency to your pubspec.yaml for sass_builder:
^2.0.0.
Run pub get to download the new dependencies.
Create a sass file ex: lib/app_component.scss and add some styles to it.
Add a the compiled css stylesheet to your the #Component annotation in lib/app_component.dart:
styleUrls: const ['app_component.css'],
The css file will be generated by sass_builder during the build process.
If you are using angluar_components. One could simply turn it on:
Create a build.yaml file with the following content :
targets:
$default:
builders:
angular_components|scss_builder:
enabled: True
Use the following convention for the styleUrl annotations:
styleUrls: const ['app_component.scss.css']
Write your sass in the *.scss files.
With newest versions:
Surprise: In styleUrls are in a different CSS filename (not with the .scss.css extension, just .css; e.g. app_component.css, but the styles are in app_component.scss).
Surprise: In app_component.scss, import without lib in the path:
#import 'package:angular_components/app_layout/mixins';
I am using this command:
pub run build_runner serve --verbose
See with package info:
https://github.com/dart-lang/angular_components/issues/374#issuecomment-636344237
I am trying to include a .d.ts file in my npm package for my (non-TypeScript) library.
I have the following in my package.json:
"typings": "./src/iter.d.ts",
But no matter what I put in ./src/iter.d.ts, whenever I try to use it in Visual Studio, I always get a "Cannot find module 'iterjs'" message.
To reproduce, create a new TypeScript app in VS (I'm using 2015 with TS 1.8.4), do an npm install iterjs, and add the following to app.ts:
import iter from 'iterjs';
I've tried modifying the local copy of iter.d.ts (under node_modules) in a desperate attempt to get anything working at all; my local copy currently has only the following content:
export declare function bob(object: Object, property: string): boolean;
export default bob;
I can verify that Visual Studio is finding and reading the iter.d.ts file (I can see it being read in Process Monitor every time VS opens app.ts); however, there's apprently something in the .d.ts file it doesn't like. I have read about a dozen blog posts, gone through the Handbook, and a half-dozen TypeScript issues on the subject, and have tried about 20 different ways of exporting anything from the .d.ts file, but VS always just gives the same error (Cannot find module 'iterjs').
Node-like resolution of .d.ts files in NPM packages only works for type definitions in proper external module format. The .d.ts in your repository is in ambient module format, to convert it to the correct format remove declare module "iter" and prefix every symbol you wish to export with export declare, oh, and replace export = iter with export default iter. You can find additional info at https://github.com/Microsoft/TypeScript/wiki/Typings-for-npm-packages
My scss has the following structure:
Nested directory view:
style
sass
components
_somecomponent.scss
_someothercomponent.scss
style.scss
style.css
Collapsed directory view:
style/style.css
style/sass/style.scss
style/sass/components/_somecomponent.scss
style/sass/components/_someothercomponent.scss
style.scss includes _somecomponent.scss and _someothercomponent.scss, and is supposed to generate style.css. It does all of this correctly, but the output file is not in the correct directory. Currently it outputs to style/sass/style.css.
Webstorm is configured with the following parameters:
Program: /usr/bin/sass
Arguments: --no-cache --update $FileName$:$FileNameWithoutExtension$.css
Working directory: $FileDir$
Output path: $FileParentDir$\$FileNameWithoutExtension$.css
The phpstorm tag has been added because it shares the same file watcher with webstorm. I am using Mac OS X, with the latest Webstorm 9.x.
How do I fix the output path?
Please change the Arguments field accordingly:
Program: /usr/bin/sass
Arguments: --no-cache --update $FileName$:$FileParentDir$/$FileNameWithoutExtension$.css
Working directory: $FileDir$
Output path: $FileParentDir$/$FileNameWithoutExtension$.css
The 'Output paths to refresh' option doesn't tell the compiler where to put the generated files - you have to set the program arguments accordingly; 'Output paths' is used by IDE to synchronize its file system with external changes - you need to make sure that the pattern specified there matches the actual compiler output so that the IDE knows where to look for generated files.
So you need to modify BOTH 'Arguments' and 'Output path to refresh' options to have the generated files created in non-default location.
I'm using Sublime Text as a text editor.
There's a jsFormat for formatting javascript files but I can't find one for JSX.
How you guys deal with formatting JSX?
Update 4
Check prettier, not that configurable as esformatter, but currently used to format some big projects (like React itself)
Update 3
Check sublime jsfmt. If you add esformatter-jsx to the config and install the package inside the forlder for sublime-jsfmt. You will be able to format JSX files directly from Sublime. Here is a guide for that
Update 2
from the command line you can also use esbeautifier. It is a wrapper around esformatter that accept a list of globs to format
# install the dependencies globally
npm i -g esbeautifier
# beautify the files under src/ and specs/ both .js and .jsx
esbeautifier src/**/*.js* specs/**/*.js*
Update
So I ended up doing a plugin for esformatter to enable the formatting of JSX files:
https://www.npmjs.com/package/esformatter-jsx
Here is a live demo on requirebin
It should be somehow feasible to call esformatter from Sublime passing the current file as the argument. In any case to use it from the command line you can follow these instructions:
From the command line it can be used like this:
# install the dependencies globally
npm i -g esformatter esformatter-jsx
# call it (this will print to stdout)
esformatter --plugins=esformatter-jsx ./path/to/your/file
# to actually modify the file
esformatter --plugins=esformatter-jsx ./path/to/your/file > ./path/to/your/file
# to specify a config file (where you can also specify the plugins)
# check esformatter for more info about the configuration options
esformatter -c ./path/to/.esformatter ./path/to/your/file > ./path/to/your/file
==== old answer below ===
So if what you're looking is just to make your jsx files to be formatted while allowing the jsx syntax (basically beautify all the javascript syntax and ignore jsx tags, meaning leave them as is), this is what I'm doing using esformatter
// needed for grunt.file.expand
var grunt = require('grunt');
// use it with care, I haven't check if there
// isn't any side effect from using proxyquire to
// inject esprima-fb into the esformatter
// but this type of dependency replacement
// seems to be very fragile... if rocambole deps change
// this will certainly break, same is true for esformatter
// use it with care
var proxyquire = require('proxyquire');
var rocambole = proxyquire('rocambole', {
'esprima': require('esprima-fb')
});
var esformatter = proxyquire('esformatter', {
rocambole: rocambole
});
// path to your esformatter configuration
var cfg = grunt.file.readJSON('./esformatter.json');
// expand the files from the glob
var files = grunt.file.expand('./js/**/*.jsx');
// do the actual formatting
files.forEach(function (fIn) {
console.log('formatting', fIn);
var output = esformatter.format(grunt.file.read(fIn), cfg);
grunt.file.write(fIn, output);
});
I would actually like that esformatter use a version of rocambole that use esprima-fb instead of esprima, to avoid proxyquire.
There is a setting in the HTML-CSS-JS Prettify plugin that allows you to ignore xml syntax in the js/jsx file. That way it doesn't mess up the jsx code.
The setting is: "e4x": true in the "js" section of the settings file
Preferences > Package Settings > HTML\CSS\JS Prettify > Set Prettify Preferences
This does not work well if you have self closing tags eg. tags ending in />
You can install a JsPrettier package for Sublime 2 & 3. It's a fairly new JavaScript formatter (at the time of writing this: Feb-2017). It supports most of the latest developments like: ES2017, JSX, and Flow.
Quickstart
Install prettier globally using terminal: $ npm install -g prettier
In Sublime go to Tools -> Command Palette... -> Package Control: Install Package, type the word JsPrettier, then select it to complete the installation.
Format your file using context menu inside the editor or bind it to a keyboard shortcut: { "keys": ["super+b"], "command": "js_prettier" }
Links:
https://github.com/jonlabelle/SublimeJsPrettier
https://github.com/jlongster/prettier
To add to what #Shoobah said:
There is a setting in the HTML-CSS-JS Prettify plugin that allows you
to ignore xml syntax in the js/jsx file. That way it doesn't mess up
the jsx code. The setting is: "e4x": true in the "js" section of the
settings file
Go to: Preferences > Package Settings > HTML\CSS\JS Prettify > Set
Prettify Preferences
Go to "js" section:
Add "jsx" to the "allowed_file_extension", and then change "e4x" to "true"
the answer in the internet that always told you set 'e4x' to true,
but sometimes, we have to set option of 'format_on_save_extensions' then add 'jsx' in array
modify jsFormat.sublime-settings
{
"e4x": true,
"format_on_save": true,
"format_on_save_extensions": ["js", "json", "jsx"]
}
Using Sublime's Package Installer, install Babel. Then:
Open a .jsx file.
Select View from the menu,
Then Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel).
Not specifically for Sublime Text, but there is a beautifier in JavaScript for React JSX.
http://prettydiff.com/?m=beautify claims to support JSX at:
http://prettydiff.com/guide/react_jsx.xhtml
Is there a way to configure SASS FileWatcher so it builds a Minified CSS?
I currently configured SASS + YUI Compressor to accomplish this but I would like to do this with pure SASS if possible.
Here are the screenshots of both configurations:
SASS
YUI Compressor CSS
Thanks in advance.
Probably the fastest way to achieve this is to use the compressed option, mentioned in the previous comments, as an argument. The quickest way to configure this in PHPStorm is as follows:
Go to File > Settings
Inside Project Settings select File Watchers
You should already have an SCSS watcher created here (if you have the SCSS watch plugin enabled, PHPStorm prompts you to create a watcher when opening a new .scss file.) Otherwise, enable it (more info about that in this section of the official documentation,) and then create the new watcher pressing the "+" symbol.
Double click the watcher name to access its configuration.
In the Arguments line make sure to add the --style compressed argument
Click OK and you're done
This image shows how that configuration should look:
From that point on, your .css output files will be compressed.
The correct answer is --style=compressed
menu File -> Settings -> Tools - File watchers
add scss and in argument add --style=compressed
If you are using sassc under Linux (Arch) you could use as Arguments:
-t compressed -m auto $FileNameWithoutExtension$.scss $FileNameWithoutExtension$.min.css
For me, --style compressed, --style compressed and --style=compressed don't work.
I had to add the option -x as an argument.
Like here:
If you want more details this post the following post is where I found this solution: https://stackoverflow.com/a/25579991/9861577.