How can I change indentation from 2 spaces to 4 spaces in output CSS files when using Sass? I'm using expanded style. I don't know anything about Ruby, but I have tried to read every rb file in /Library/Ruby/Gems/1.8/gems/sass-3.2.1/ on my computer.
sass-3.2.3/lib/sass/tree/visitors/to_css.rb has a number of hard-coded double-space strings (' ') that are used for indentation. If you replace them all with four-space strings it will compile your css as you stated.
The right way to change the sass indenting is to go to rubygems/gems/sass-3.x.x/lib/sass/tree/visitors/to_css.rb (or anywhere your to_css.rb file is), and edit this:
tab_str = ' ' * (#tabs + node.tabs)
Since this is the referenced question regarding sass indentation and as of now (DEC 2019), the accepted answer is outdated; I add this answer.
According to sass documentation, amongst its options, it accepts two options called indentType and indentWidth to control indentation behavior.
The default is using 4 spaces which can be changed to 1 tab like this:
function css() {
return gulp
.src("./scss/**/*.scss")
.pipe(plumber())
.pipe(sass({
outputStyle: "expanded",
includePaths: "./node_modules",
indentType: "tab",
indentWidth: 1
}))
.on("error", sass.logError)
.pipe(autoprefixer({
cascade: false
}))
.pipe(header(banner, {
pkg: pkg
}))
.pipe(gulp.dest("./css"))
.pipe(rename({
suffix: ".min"
}))
.pipe(cleanCSS())
.pipe(gulp.dest("./css"))
.pipe(browsersync.stream());
}
Related
I've recently upgraded to neovim 0.5.0, and I've been experimenting at replacing older syntax and indenting plugins with treesitter. I'm having some problems getting things to work correctly when editing YAML files.
I have the following in my init.lua file:
local ts = require 'nvim-treesitter.configs'
ts.setup {ensure_installed = 'maintained',
highlight = {
enable = true,
additional_vim_regex_highlighting = false,
},
indent = {
enable = true,
disable = {"python", }
},
}
Running :checkhealth reports
health#nvim_treesitter#check
========================================================================
[...]
## Parser/Features H L F I J
[...]
- yaml ✓ ✓ ✓ ✓ ✓
But when I create a YAML file, for example...
- hosts: foo<RETURN>
...then the cursor ends up at column 0 on the following line, rather
than indented as required. This behaviors persists for the rest of the
file: regardless of the YAML syntax, the cursor always goes to column 0
on return
I know that treesitter indent support is considered "experimental". Is
this just broken right now, or do I have something misconfigured?
Looks like the YAML parser's indentations are pretty rudimentary: https://github.com/nvim-treesitter/nvim-treesitter/blob/master/queries/yaml/indents.scm
You may have a better development experience by just disabling tree-sitter indentation for just yaml and using the default Vim regex indentation instead.
In your nvim-treesitter config
require('nvim-treesitter.configs').setup {
indent = {
enable = true,
disable = { 'yaml' }
}
}
I'm using the Angular starter kit
and I'm trying to get tslint to autofix all my lint problems with the --fix flag.
I'm running the script:
npm run tslint --fix src/**/*.ts
It just generates the same error that I'm already being told about in tslint and not autofixing it:
console output:
ERROR: src/app/app-routing.module.ts[10, 5]: comment must start with a space
ERROR: src/app/app-routing.module.ts[2, 20]: Too many spaces before 'from'
Am I missing something that allows it to implement the changes?
My versions are:
"tslint": "^5.6.0"
"codelyzer": "^3.1.2"
Question: How can I get tslint to implement autofix to my lint errors?
Unfortunately, not all linting violations are auto-fixable. You can see which rules are auto-fixable here by looking for the Has Fixer tag.
My guess is that "comment must start with a space" is governed by the comment-format rule, which is not auto-fixable.
I'm not sure which rule is causing your second error, but it is most likely also not auto-fixable.
Here's a snippet you can run tslint --fix against to verify that some violations are fixed, and others are not.
//no var keyword (comment does not start with space)
var x: string = 'x';
console.log(x);
// array-type
let y: String[] = [];
console.log(y);
// ban-single-arg-parens
['1', '2'].filter((arg) => {
console.log(arg);
});
// semicolon
let z: string = ''
console.log(z);
// no unused variable
let a: string = '';
// trailing comma
let list = ['1', '2', ];
// missing trailing comma
let obj = [
1,
2
];
Rules to include when linting the above file:
"semicolon": [true, "always"],
"trailing-comma": [true, {"multiline": "always", "singleline": "never"}],
"array-type": [true, "array-generic"],
"arrow-parens": [true, "ban-single-arg-parens"],
It's tempting to think that all whitespace errors would be auto-fixable, and perhaps they should be. Sadly, they're not.
Update library tslint and codelyzer to latest.
and then use this command:
tslint --fix src/**/*.ts -t verbose without using npm run
after complete, it will show to you the unfixable problems so you have to fix it manually.
You can also add it to scripts in package.json like this:
"lint-fix": "tslint --fix src/**/*.ts -t verbose"
So I am using webpack, babel, and mocha here. When I have code like this:
import userImage from '../../images/user.png';
and I build with webpack, userImage results in a string to the path of the file since I am using the file loader for images (requirements call for me not to embed images) however when I try to run my mocha tests using:
./node_modules/.bin/babel-node ./node_modules/.bin/babel-istanbul cover ./node_modules/.bin/_mocha
I get a syntax error:
SyntaxError: /repositories/react-seed/web/app/images/user.png: Unexpected character '�' (1:0)
> 1 | �PNG
| ^
2 |
3 |
I also get this error when removing istanbul. So it seems like it is trying to load the actually image file however can parse it as JavaScript since it is not.
Anyone know a way around this issue?
You can use the --compilers option which allows you to customize the nodejs require system in order to let it understand png files. So :
mocha --compilers png:./mochacfg.js
Or create a file 'test/mocha.opts' containing (better for your needs):
--compilers png:./mochacfg.js
With ./mochacfg.js:
require.extensions['.png'] = function(){ return null; }
This ignores png files (should be ok if you do nothing special with them).
If you want to do something with the image data:
var fs = require('fs');
require.extensions['.png'] = function(module, filepath) {
var src = fs.readFileSync(filepath).toString ('base64');
return module._compile('module.exports = "data:image/png;base64,' + src + '";');
}
Its quite late to answer this question but just for knowledge sharing purpose, I am answering another approach to do this.
Create a test-config.js file and use it while running the mocha test cases.
var jsdom = require('jsdom').jsdom;
process.env.NODE_ENV = 'test';
// -------------------------------
// Disable webpack-specific features for tests since
// Mocha doesn't know what to do with them.
['.css', '.scss', '.png', '.jpg'].forEach(ext => {
require.extensions[ext] = () => null;
});
and inside package.json use this test command to run the test cases
"test": "mocha ./test/test-setup.js './test/**/*.spec.js' --compilers js:babel-core/register",
I hope it helps someone.
I have 4 space indentation in my coffee files and when I am compiling those I am getting errors:
CoffeeLint: YourFile.coffee compilation failed: CoffeeLint: Line contains inconsistent indentation; context: Expected 2 got 4
I found that http://www.coffeelint.org/ actually provides option to configure indentation and in Web Essentials menu there is option to edit Global CofeeLint settings. So I changed that option to be:
"indentation": {
"name": "indentation",
"value": 4,
"level": "error"
}
(changed value from 2 to 4)
But it makes no difference I even tried to change level from error to ignore still no success. I even tried to restart VS and Windows, What I am doing wrong?
Update 1.
As requested in comments here is code I have:
if 1
0
And also screenshot of it with View White Space ON:
If you are using coffeelint and you want to change the indentation value to 2 spaces then you must edit the coffeelint/lib/coffeelint.js file and change the value of the "value" to 2 as follows:
module.exports = Indentation = (function() {
Indentation.prototype.rule = {
name: 'indentation',
value: 2,
level: 'error',
message: 'Line contains inconsistent indentation',
description: "This rule imposes a standard number of spaces to be used for\nindentation. Since whitespace is significant in CoffeeScript, it's\ncritical that a project chooses a standard indentation format and\nstays consistent. Other roads lead to darkness. <pre> <code>#\nEnabling this option will prevent this ugly\n# but otherwise valid CoffeeScript.\ntwoSpaces = () ->\n fourSpaces = () ->\n eightSpaces = () ->\n 'this is valid CoffeeScript'\n\n</code>\n</pre>\nTwo space indentation is enabled by default."
};
The file you edited is probably a generated file that is of no consequence.
I'm running into an issue of which I think is due to the way SASS (SCSS in my case) compiles. I'm trying to get this code to compile: (it's a very hacky way to simulate :before and :after pseudo elements in IE6/7)
.x-tool-collapse-top {
*zoom: expression(
this.runtimeStyle.zoom="1",
this.appendChild( document.createElement("small") ).className="after",
this.insertBefore( document.createElement("small"), this.firstChild ).className="before"
);
}
.x-tool-collapse-top .after,
.x-tool-collapse-top:after {
#include extjsimagereplace;
content: '\e6be';
*zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
But it's choking. It's likely due to the , and ( which aren't valid, but I'm not finding anything to just say SASS: just leave this alone and don't try and compile it.