autoprefixer breaks trying to parse node-sass sourcemap - source-maps

Here's my directory structure:
_build/
|- postcss.config.js
_src/
|- sass/
|-main.scss
css/
|-main.css
|-main.css.map
package.json
I'm trying to rewrite my workflow using NPM scripts.
I want to:
convert all .scss files > css > autoprefix > minify > output to the css/ folder with sourcemaps.
I'm stuck on the autoprefix stage now.
Here's my package.json
{
"name": "workflow",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build:css": "node-sass --source-map true ./_src/sass/ -o ./css",
"build:autoprefix-css": "postcss --config ./_build/ -m -r ./css"
},
"license": "ISC",
"browserslist": [
"IE 11",
"last 3 versions",
"not IE < 11"
],
"devDependencies": {
"autoprefixer": "^9.3.1",
"node-sass": "^4.10.0",
"postcss": "^7.0.5",
"postcss-cli": "^6.0.1"
}
}
And here's postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
node-sass is correctly outputting main.css and main.css.map. But autoprefixer is giving the error:
CssSyntaxError: D:\workflow\css\main.css.map:3:20: Missed semicolon
1 | {
2 | "version": 3,
> 3 | "file": "main.css",
| ^
4 | "sources": [
5 | "../_src/sass/main.scss",
I've tried using the --no-map option for autoprefixer but it doesn't have any effect. It seems as though autoprefixer is treating the .map file as if it were .css?
One important requirement is that the script work with multiple separate .scss files. Some projects specify separate stylesheets, so I can't hardcode a single main.scss > main.css pipeline. I need to automatically take all the .scss files in _src/sass/ and output a .css file with sourcemap for each one.
Any ideas?

Thanks to RyanZim at postcss-cli for finding the problem. When passing a directory to postcss you need to glob specifically for just .css files, not the entire directory. The order you pass the input/output to postcss seems to make a difference too.
Adding the glob and moving the directory option to the front of command, ie changing:
"build:autoprefix-css": "postcss --config ./_build/ -m -r ./css"
to
"build:autoprefix-css": "postcss -r ./css/*.css --config ./_build/ -m"
fixes the issue.

Related

Yarn does not see workspaces

I have the following configuration in a root workspace. The strange thing is that for backend it works, but for frontend - doesn't, no matter how I rename this
{
"private": true,
"name": "root",
"workspaces": [
"packages/frontend",
"packages/backend"
],
"scripts": {
"client": "yarn workspace frontend start",
"client-test": "yarn workspace frontend test",
"server": "yarn workspace backend start",
"start": "conc --kill-others-on-fail \"yarn client\" \"yarn server\""
},
"devDependencies": {
"concurrently": "^7.6.0"
}
}
And it always says: $ yarn workspace frontend test
error Unknown workspace "frontend".
info Visit https://yarnpkg.com/en/docs/cli/workspace for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I tried to start from all directories, nothing works
The thing is that it does not matter how folders are called inside of "packages", the important thing is that package.json of each workspace should be called correspondingly:
{
"name": "frontend",
"version": "1.0.0",
"private": true,
...
}

Why is Tailwind's build command not working?

I'm a beginner and just learning Tailwind, so I made a project and pushed it to GitHub. Unfortunately, I added style.css to my git ignore file and it wasn't pushed to GitHub. Tailwind works in my HTML files and also in my src/style.css file, and this should compress into public/style.css. This is no problem, I thought.
I don't have the project on my hard drive, so I cloned the repo from GitHub and tried to build it again, to automatically create a style.css file. However, when I try to build with the command below, it's throwing this error:
npm run build -p
What is the issue, and what should I do now ?
My package file:
{
"name": "project-1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "tailwindcss -i ./src/tailwind.css -o ./public/style.css -w",
"build-p" : "postcss ./src/tailwind.css -o ./public/style.css -w"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.4.0",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.6"
}
}
You are missing the npx infront of your build command as tailwindcss is not an executable.
Add npx at the start of your build command in your package.json to resolve this issue.
Here an example based on your provided screenshot:
{
"name": "project-1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "npx tailwindcss -i ./src/tailwind.css -o ./public/style.css --watch",
"build-p": "postcss ./src/tailwind.css -o ./public/style.css --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.4.0",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.6"
}
}
The executable's name for local installations is actually tailwind, not tailwindcss:
"scripts": {
"build": "tailwind -i ./src/tailwind.css -o ./public/style.css -w",
^^--- replaced tailwindcss with tailwind
The code above assumes you have tailwindcss in your dependencies, e.g.:
"devDependencies": {
"tailwindcss": "^3.2.1"
and have installed them (npm install).

Error in Opening Electron App in Mac:"file:///Applications/../Contents/Resources/app.asar/dist/index.html"

I have build the electron app for mac but when I ran it , it is giving the below error
"Not allowed to load local resource: file:///Applications/e-admin.app/Contents/Resources/app.asar/dist/index.html".
Here are the steps I did.
1) electron-builder build --mac
It created the following files are dist folder.
a) e-admin-0.0.0.dmg , e-admin-0.0.0-mac.zip,index.html and a mac folder
b) in mac folder I could see mac/e-admin.app/Contents/Resources/app.asar file( not the folder)
2) I double clicked and installed the e-admin-0.0.0.dmg and moved to application folder.
3) Opened the app.
Do I have to do any thing with app.asar file?(unpack or some thing?) or any etc procedure to make it work?
my package.json
{
"name": "e-admin",
"version": "0.0.0",
"scripts": {
"postinstall": "electron-builder install-app-deps",
"ng": "ng",
"start": "npm-run-all -p electron:serve ng:serve",
"build": "npm run electron:serve-tsc && ng build",
"build:dev": "npm run build -- -c dev",
"build:prod": "npm run build -- -c production",
"ng:serve": "ng serve",
"ng:serve:web": "ng serve -c web -o",
"electron:serve-tsc": "tsc -p tsconfig-serve.json",
"electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:serve-tsc && electron . --serve",
"electron:local": "npm run build:prod && electron .",
"electron:linux": "npm run build:prod && electron-builder build --linux",
"electron:windows": "npm run build:prod && electron-builder build --windows",
"electron:mac": "npm run build:prod && electron-builder build --mac",
"test": "ng test",
"e2e": "npm run build:prod && cross-env TS_NODE_PROJECT='e2e/tsconfig.e2e.json' mocha --timeout 300000 --require ts-node/register e2e/**/*.e2e.ts",
"version": "conventional-changelog -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md",
"lint": "ng lint"
},
"main": "main.js",
"private": true,
"dependencies": {...}
and angular.josn file
"projects": {
"eAdmin": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
....
main.ts contains
if (serve) {
require('electron-reload')(__dirname, {
electron: require(`${__dirname}/node_modules/electron`)
});
win.loadURL('http://localhost:4200');
} else {
win.loadURL(url.format({
pathname: path.join(__dirname, 'dist/index.html'),
protocol: 'file:',
slashes: true
}));
}
After muiltple trial and error, The following changes worked for me
1) index.html
`<base href="/">`
to
<base href="./">
2) in main.ts, change the directory name dist to something else
from :
win.loadURL(url.format({
pathname: path.join(__dirname, 'dist/index.html'),
protocol: 'file:',
slashes: true
}));
To:
win.loadURL(url.format({
pathname: path.join(__dirname, 'angular_build/index.html'),
protocol: 'file:',
slashes: true
}));
3) Angular.js
"outputPath": "dist/",
to
"outputPath": "angular_build/",
Although I have seen suggesions to change step 2 & 3 , I was quite skepitcal.
Looks like dist directlory some how does not work and have to change to some thing like as mentioned above

How to set a .rc file conditionally

I am using babel and have a .babelrc file for its configuration:
{
"stage": 0,
"ignore": [
"node_modules",
"bower_components",
"testing",
"test"
]
}
However, when I'm developing locally, having this .babelrc file disallows me from running Babel's CLI babel-node in the testing folder (see: babel-node no longer working in different directory )
That said, when I push to Heroku, I need this configuration because I need to make sure the testing folder isn't compiled.
How can I conditionally set a .babelrc file that doesn't involve me having to remember to switch it back to the production version everytime I want to push to Heroku?
You can set conditional things using the env option in your .babelrc
from their docs:
{
"stage": 0,
"env": {
"development": {
"ignore": [
"node_modules",
"bower_components",
"testing",
"test"
]
}
}
}
Then, in your package.json
"scripts": {
"start": "NODE_ENV=production node index.js",
"dev": "NODE_ENV=development node index.js"
}
it checks BABEL_ENV, then NODE_ENV

Gruntjs: why compiled scss to empty file? using grunt-contrib-sass plugin

I am trying to compile scss file using the grunt-contrib-sass plugin (with grunt v0.4.0). The compiled result is an empty css file. Below are the base.scss, Gruntfile.js and package.json files.
base.scss
$color: #000;
header{
color: $color;
}
Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// Metadata.
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: { style: "expanded", trace: true },
files: { "base.css": "base.scss" }
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
// Default task.
grunt.registerTask("default", [""]);
grunt.registerTask("sass--",["sass"]);
};
package.json
{
"name": "my_grunt",
"version": "1.0.0",
"description": "New to Grunt",
"main": "index.js",
"scripts": {
"test": "test"
},
"repository": {
"type": "git",
"url": "none"
},
"keywords": [
"none"
],
"author": "none",
"license": "BSD",
"devDependencies": {
"grunt-contrib-sass": "~0.2.2"
}
}
Result:
Either I run the sass command "grunt sass" or "grunt sass--", the result is just an empty css file without any errors.
Your help is greatly appreciated
Niusaul
If you haven't installed Grunt globally, you'll either do that or add Grunt as a dependency. Otherwise Grunt won't work.
To install Grunt globally run npm install -g grunt-cli in your Terminal or add as a "devDependency":
"devDependencies": {
"grunt": "0.4.x",
"grunt-contrib-sass": "0.7.x",
}
Edit:
While searching on Google about this problem, I stumpled upon a reported bug on Github from the same user where his problem is solved. Just for everyone who may experienced the same problem, this was his solution:
The error is caused by the manual config that I've set in the Command
Processor (Windows registry), from which I've added an autorun to
change the default command prompt.

Resources