We Keep Coding

Underscores.me CLI Commands

I use underscores.me as a starter template for any new theme I create. Previously I just used dart-sass to compile my scss files into css. However, I'm starting a new project and would like to use the package.json file included with underscores (Sassified and with Woo Commerce), but I'm a bit confused about the included CLI commands that are in the package.json.
The following scripts are taken from the generated package.json file:
"scripts": {
"watch": "node-sass sass/ -o ./ --source-map true --output-style expanded --indent-type tab --indent-width 1 -w",
"compile:css": "node-sass sass/ -o ./ && stylelint '*.css' --fix || true && stylelint '*.css' --fix",
"compile:rtl": "rtlcss style.css style-rtl.css",
"lint:scss": "wp-scripts lint-style 'sass/**/*.scss'",
"lint:js": "wp-scripts lint-js 'js/*.js'",
"bundle": "dir-archiver --src . --dest ../_s.zip --exclude .DS_Store .stylelintrc.json .eslintrc .git .gitattributes .github .gitignore README.md composer.json composer.lock node_modules vendor package-lock.json package.json .travis.yml phpcs.xml.dist sass style.css.map yarn.lock"
}
Here are my questions:
What is the main difference between "watch" and "compile:css"? If one watches Sass files for changes and then compiles to CSS, how is this any different from compile:css? Should they both be running?
Are these all scripts that should be running simultaneously during dev/coding? Or, are some supposed to be run only at specific times, such as "bundle" when I need to recompile certain files like JavaScript to compile a production version?
If these are not meant to all be running simultaneously, such as the "bundle" command, when is the ideal time to run this script and once it's run should I stop it or simply let it keep running in the background?
Would I only use "compile:rtl" if using languages written from right-to-left?
Since the linting commands check for errors in SCSS and JS, should those be run simultaneously during development as well, or only when you go to check work prior to deploying to production?
So assuming I do not need to compile:rtl, how would one use the remaining 5 scripts most effectively and efficiently?

SCSS not working within a REACT app specifically

I'm pretty sure its my folders filepath for my compile Sass script, but I've been at this one a few hours now, so I'm hoping you can help... (maybe there's a setup setting IDK about?...
Two similar projects - 1 Vanilla, 1 React.
1. On both I have node, NPM and node-sass installed; via: npm i --save-dev node-sass
2. I've got livesass compiler going. On vanilla it works as expected. On the React project live-sass-compiler keeps on crashing (it is working long enough for me to test it though) and when i run in the terminal: npm run compile:sass the terminal turns into a node, never compiles, and also seems to get stuck in this state.
Please help!
NOW FOR THE DIFFERENCES:
==========Filepaths==========
(Filepath is indicated by "./", multiple files indicated by array syntax.
Vanilla (root):
index.html (stylesheet href="./STYLES/SCSS/index.css")
index.js
./STYLES/ [index.css, index.css.map, index.scss]
package.json (script: "compile:sass": "node-sass STYLES/SCSS/index.scss STYLES/output.css -w")
Works great!
REACT (root):
./public/index.html (stylesheet href="../src/STYLES/CSS/index.css")
./src/index.js
.src/STYLES/ [index.scss, (desired css output)]
package.json (script: "compile:sass": "node-sass src/STYLES/index.scss src/STYLES/CSS/index.css -w")
in both of them, inside the node-modules folder, I have installed:
"devDependencies": {"node-sass": "^7.0.1"}

Hey, I figured it out! - I got rid of live-sass-compiler (it's depreciated). - I also removed the "script: "compile:sass": "node-s..."" as it's no longer required. Compilation will happen natively every time you save the file.
TO USE WITH REACT:
Terminal:
npm install -D sass
sass —watch scss:css
1. add an .env file to the root. Inside type: “SASS_PATH=src/STYLES/SCSS”
(this allowed relative paths to be ignored on previous versions. I haven't gotten this to work but everything else seems to work. It may be depreciated... IDK.)
2. include the filepath import to the JS page you’d like the CSS to live under:
(example (for APP-WIDE Changes): index.js: import './STYLES/index.scss’ //imports to the app component
3. to import another file from index.scss:
Within the index.scss file:
#use './SCSS/_unorganized.scss'; // ("#import" will soon be depreciated, instead use #use)
Hope this saves someone else some time!

Parcel - Unexpected token name «_28», expected punc «,»

I am using Color JavaScript Library in my Code, And I Am Using Parcel JS for bundling my Code.
When I Am Running Parcel JS For Development Using This Command -
parcel public/index.html
Everything Works Fine.
But When I Build My Code For Production Using This Command -
parcel build public/index.html --public-url ./ --target browser
I Get This Error -
> neusprite#0.0.1 build
> parcel build public/index.html --public-url ./ --target browser
🚨 /home/aditya/Documents/Codes/NeuSprite/node_modules/color/index.js: Unexpected token name «_28», expected punc «,»
at Z.get (/home/aditya/Documents/Codes/NeuSprite/node_modules/terser/dist/bundle.min.js:1:525)
at Object.errorToJson (/home/aditya/Documents/Codes/NeuSprite/node_modules/#parcel/utils/src/errorUtils.js:9:20)
at Pipeline.process (/home/aditya/Documents/Codes/NeuSprite/node_modules/parcel-bundler/src/Pipeline.js:29:26)
at async Object.run (/home/aditya/Documents/Codes/NeuSprite/node_modules/parcel-bundler/src/worker.js:15:12)
at async Child.handleRequest (/home/aditya/Documents/Codes/NeuSprite/node_modules/#parcel/workers/src/child.js:60:26)
One thing to note is that when i use this following option --no-minify like this parcel build public/index.html --public-url ./ --target browser --no-minify it Just Works Fine.
On StackoverFlow I Found this Answer
UglifyJs does not support ES6. The error is very likely the method shorthand syntax.
But On The Parcel JS Documentation They Have Mentioned that they Use Terser
Parcel uses terser to minify JavaScript, cssnano for CSS, htmlnano for HTML, and svgo for SVG. If needed, you can configure these tools using a .terserrc, .cssnanorc, .htmlnanorc, or svgo.config.json config file. See the docs for JavaScript, CSS, HTML, and SVG for more details.
And Terser Clearly Mentions It is Suitable For ES6+ On Their GitHub Page.
A JavaScript parser and mangler/compressor toolkit for ES6+.
Then Why I Am I getting This Error?

Vue JS Module not found (datepicker)

I am pretty new to vue.js - I only started using it today and naturally I have run into an error I cannot seem to resolve.
I am using the v-md-date-range-picker module:
(https://ly525.github.io/material-vue-daterange-picker/#quick-start.
The instructions tell me to do the following:
1
npm install --save v-md-date-range-picker
2
<template>
<v-md-date-range-picker></v-md-date-range-picker>
</template>
3
<script>
import Vue from 'vue';
import VMdDateRangePicker from "v-md-date-range-picker";
import "v-md-date-range-picker/dist/v-md-date-range-picker.css";
Vue.use(VMdDateRangePicker);
</script>
So, I ran the command in terminal in my project folder, added the 2 bit of code to my HelloWorld.vue page and then added the code from step 3 into the main.js.
When I have a look in my package.json file, I see:
"dependencies": {
"core-js": "^2.6.5",
"v-md-date-range-picker": "^2.6.0",
"vue": "^2.6.10"
},
However, I get the error:
Module not found: Error: Can't resolve 'v-md-date-range-picker/dist/v-md-date-range-picker.css' in '/Users/James/Documents/projects/vue-test/src'
am I missing something blatantly obvious here?
Edit:
I tried the response in the comments below which did not work.
On the main page of the module, I followed the instructions. However, going through the pages I found the same instructions with some extra text:
I assume that you have a working bundler setup e.g. generated by the vue-cli thats capable of loading SASS stylesheets and Vue.js SFC (Single File Components).
I am going to go out on a limb here and say I do not have a working bundler. I went into the node_modules folder, found that module and looked inside. There was no dist folder. Just .scss files etc..
So, I assume that I somehow need to build this project first.
How do I do that?
I thought running it in the browser would have done this on the fly but it clearly has not.
Edit 2:
After some googling around I found the command:
$ npm run build.
Which gives me this error:
This dependency is not found, To install it, you can run: npm install --save v-md-date-range-picker/dist/v-md-date-range-picker.css
So, I run that command and then I get the error:
Could not install from "v-md-date-range-picker/dist/v-md-date-range-picker.css" as it does not contain a package.json file.

Check if you can find this in the webpack.base.conf.js inside the build folder. If not add it.
module: {
rules: [
{
test: /\.css$/,
loader: ['style-loader', 'css-loader'], // Note that the order is very important
},
Run npm install style-loader css-loader --save before adding it to the file if it isn't there.
To Address your question
Run the command: npm install sass-loader --save
Then add an import for every SCSS file in the module.
This is not the most optimal solution, but that package looks broken to me and this is merely a workaround.
I will take time to try out the library myself and try to provide a fix for it.

Create v-md-date-range-picker.css in v-md-date-range-picker/dist/ and copy css from
md-date-range-picker.min.css
and refresh your page. For some reason css file is not being created when we install md-date-range-picker.min

mocha equivalent to webpack's resolve root

I'm writing some mocha tests that load code that have paths like this:
import MyStore from "stores/MyStore"
This works fine in the web browser because we are using the webpack-dev-server which in turn reads this entry from webpack.config.js: config.resolve.root: [path.resolve(__dirname, "./app")] so it knows to find ./app/stores/MyStore.
This path does not work when running it from mocha --compilers js:babel/register. I'm trying to locate a package or configuration that I may use for this. It would save us from having to change may code references and of course keep our imports more portable.
Not sure if it matters, we use iojs. If this really can't be done it would be fine just to update the paths. Thank you...

How about including your app directory in $NODE_PATH:
env NODE_PATH=$NODE_PATH:$PWD/app mocha ...

Here's a cross-platform method. First install cross-env:
npm install cross-env --save-dev
then in your package.json:
"scripts": {
...
"test": "cross-env NODE_PATH=./app mocha ..."
}

In windows, I had to do this:
set NODE_PATH=%CD%/app&& mocha...
for some reason, adding a space after 'app' would cause it not to work