Formatting Markdown and CSS files using Prettier through ESLint? - css

Currently, I've got Prettier set up through ESLint using the following .eslintrc.json:
{
"extends": ["react-app", "plugin:prettier/recommended"]
}
This works fine for linting and formatting JavaScript files.
However, when I'm trying to run ESLint (and thus Prettier) on Markdown and CSS files, errors like the following occur:
/Users/willem-aart/Code/foo/bar.md
1:1 error Parsing error: Unexpected character '#'
> 1 | ## foobar
| ^
✖ 1 problem (1 error, 0 warnings)
It seems that ESLint cannot handle the file. On the other hand, Prettier – when run standalone – handles the file as expected.
Is it possible to format files other than JavaScript using Prettier through ESLint? Or am I better off using Prettier standalone?
I guess Prettier can be applied to a broader range of file formats than ESLint is intended for.

Related

How to use sass #use in stenciljs? Known issue?

In my component's scss file, I am trying to use other scss files.
I thus wrote the following as the first statements in my component's scss file (before anything else):
#use './_one.scss';
#use './_two.scss';
However, when I run the dev server, I get a very confusing error:
[ ERROR ] sass error: src/components/my_component/my_component.scss:1:86
#use rules must be written before any other rules.
L1: #use '_one.scss';
L2: #use '_two.scss';
Also worth mentioning: _one.scss and _two.scss both use _common.scss and have the following as first statement:
#use './_common.scss'
commenting this out in _one.scss and _two.scss doesn't change anything.
Is this a known incompatibility between sass and stenciljs? I tried to search for answers but to no avail. What am I missing here?
Help appreciated. Thanks!

SASS files conversion in blogdown (sam theme)

I am trying to build a website using blogdown, and the Hugo theme Sam.
This theme has SASS files that get converted into a minified css file.
When I change something in the SASS file, like for example the background color, it is not taken into account when using serve_site.
Is there a way to make this work using blogdown?
A way to reproduce the issue is:
Create an empty directory called for ex. test_sam, and set it as a working directory
then do:
library(blogdown)
new_site(theme = "victoriadrake/hugo-theme-sam")
Try to change something in test_sam/themes/hugo-theme-sam/assets/sass/style.sass, for example:
change
html
background-color: $dark-grey
to
html
background-color: $white
This doesn't produce any change.
Color variables (such as $white) are defined in test_sam/themes/hugo-theme-sam/assets/sass/_vars.sass
The odd thing is that if I change it to an undefined variable name like $yellow, I get the following error message:
Building sites … ERROR 2019/12/27 20:44:39 Transformation failed: SCSS
processing failed: file "stdin", line 11, col 23: Undefined variable:
"$yellow". Total in 197 ms Error: Error building site: logged 1
error(s)
which shows that blogdown does access the sass files to build the site.
I have very little knowledge about website building nor css, so maybe there is something quite obvious that I'm not getting.
Thanks for your help!
Although late to answer, I solved this issue with the same theme by setting the "blogdown.generator.server" option to TRUE.
options("blogdown.generator.server" = TRUE)
blogdown::serve_site()
Update: This actually seems to be a common issue with the Sam theme specifically. The theme uses some tools not included with Hugo, and you have to download them separately. It's addressed in the README.
Open Terminal and run:
npm install -g postcss-cli
npm install -g autoprefixer
After that, blogdown::serve_site() worked normally for me. It also fixed some plot rendering issues I was having.

Ruby Sass Compatibility Error IBM857 and UTF-8 [duplicate]

While trying to use grunt to convert my sass files into normal css files i get the warning:
Warning: Encoding::CompabilityError: incompatible character encodings: UTF-8 and CP850.
However when I run sass calling the file(s) everything works as it should even though no encoding is specified by me. My Gruntfile.js looks like this:
[...]
sass: {
main: {
files: {
'css/theme/default.css': 'css/theme/source/default.scss',
'css/theme/beige.css': 'css/theme/source/beige.scss',
'css/theme/night.css': 'css/theme/source/night.scss',
'css/theme/serif.css': 'css/theme/source/serif.scss',
'css/theme/simple.css': 'css/theme/source/simple.scss',
'css/theme/sky.css': 'css/theme/source/sky.scss',
'css/theme/moon.css': 'css/theme/source/moon.scss',
'css/theme/solarized.css': 'css/theme/source/solarized.scss',
}
}
}
[...]
which is a part of the Gruntfile.js I forked from the reveal.js on GitHub. I took a look at the grunt-contrib-sass on GitHub and tried to find the option to change the encoding manualy. However it apears that there is none (maybe I just overlooked it?).
I think a keypart of the problem is that I am using Windows 8 and not any Unix based OS.
So my question is:
How do i get rid of this warning? Or how do i fix the code to work properly?
Any help is appreciated.
I had this error when trying to use the command:
sass --watch global.scss:global.css --style compressed
And the cause was the most stupid cause ever... I had this folder: E:\Dropbox[Websites][External] Fundación Global\css and I run the command in there, and SASS returned this same error: Warning: Encoding::CompabilityError: incompatible character encodings: UTF-8 and CP850.
I just needed to take out the ó from the folder's path!
That simple and silly! Just changed this: ...Fundación Global\css for this ...Fundacion Global\css and I have SASS watching with no issues again.

How to get two packages to handle the same file extension

I would like to know how to get two packages to compile the same file extension.
I am writing a package that compiles .jsx by looking for certain strings and replacing them. Inside this plugin, I am using isobuild:compiler-plugin#1.0.0:
Plugin.registerCompiler({
extensions: ['jsx']
}, function () {
...
});
The problem is that I cannot use this with mdg's jsx package because that package is also trying to compile .jsx.
Meteor gives me:
While determining active plugins:
error: conflict: two packages included in the app (jsx and my-plugin) are both trying to handle *.jsx
Ideally, I would like jsx plugin to compile the .jsx files first, and then my plugin to compile them again. Any suggestions on how to achieve this? Or can someone point me to any other directions?

command line lessc reports random syntax errors

We are experiencing a bizarre random behavior of the LESS compiler at the Windows Command Line. We are getting inconsistent syntax error messages like we were missing variables or mixins declarations. The thing is, if we LESS compile the same file a second time, the compiler works just fine and we get our beautiful CSS file. The same files work just fine using the client side less.js while running our solution in Visual Studio.
Some more details:
LESS compiler (less#1.4.0-b4) at the Windows7 Command Line.
Here is what I type on command line:
lessc --include-path="site/Css" Css\results-imports.less > fileoutput.comb.css --yui-compress
results-imports.less has a list of less files that should be imported and compiled into css files, some of the less files have nested imports as well.
we get errors like: NameError: variable #brand-color-14 is undefined in C:\Css\loadmask.less. This is one of the imported less files #brand-color-14 is declared in one of the less files that should have been imported before loadmask.less

Resources