Migrate from Gulp to Parcel build system, first draft, Ref: DEV-439

Author: ronilaukkarinen

.browserslistrc

@@ -1,12 +1,6 @@
-last 1 edge version
-last 1 safari version
-last 1 chrome version
-last 1 firefox version
-not firefox > 90
+# Browsers supported by air-light theme
+> 0.5%
+last 2 versions
+Firefox ESR
 not dead
-not ie > 0
-not ucandroid > 0
-not firefoxandroid > 0
-not samsung > 0
-not op_mob > 0
-> 1% in FI
+not IE 11

.github/workflows/js.yml

@@ -23,4 +23,5 @@ jobs:
     - name: Install packages and test JS
       run: |
         npm i
-        npx eslint -c .eslintrc.js js/src/
+        npm run lint
+        npm run js

.github/workflows/styles.yml

@@ -25,16 +25,16 @@ jobs:
 
     - name: Run stylelint
       run: |
-        npx stylelint . --max-warnings 0 --config .stylelintrc
+        npx stylelint sass/**/*.scss --max-warnings 0
 
-    - name: Run gulp task devstyles
+    - name: Build development styles with Parcel
       run: |
         # Make the command visible
-        echo "Running npx gulp devstyles..."
-        npx gulp devstyles
+        echo "Running npm run devstyles..."
+        npm run devstyles
 
         # Capture the output
-        output=$(npx gulp devstyles 2>&1)
+        output=$(npm run devstyles 2>&1)
 
         # Save it to a temporary file
         echo "$output" > output.txt

.gitignore

@@ -1,3 +1,4 @@
+.parcel-cache
 vendor/
 templates/
 content/

.husky/pre-commit

@@ -126,22 +126,22 @@ if [ ! -d ".github/workflows" ]; then
 fi
 echo "${GREEN}${CHECK} OK${NC}"
 
-printf "  ${ARROW} Checking for gulpfile.js... "
-if [ ! -f "gulpfile.js" ]; then
+printf "  ${ARROW} Checking for parcel in package.json... "
+if [ -f "package.json" ] && ! npm list parcel >/dev/null 2>&1; then
     echo "${RED}${CROSS} FAILED${NC}"
-    echo "    ${RED}gulpfile.js is missing from root directory${NC}"
-    echo "    ${YELLOW}Please ensure Gulp is properly set up${NC}"
+    echo "    ${RED}Parcel is not installed${NC}"
+    echo "    ${YELLOW}Please install Parcel:${NC}"
+    echo "    ${BLUE}nvm use${NC}"
+    echo "    ${BLUE}npm install parcel --save-dev${NC}"
     exit 1
 fi
 echo "${GREEN}${CHECK} OK${NC}"
 
-printf "  ${ARROW} Checking for gulp in package.json... "
-if [ -f "package.json" ] && ! npm list gulp >/dev/null 2>&1; then
+printf "  ${ARROW} Checking for parcel config files... "
+if [ ! -f ".parcelrc" ] && [ ! -f ".parcelrc.watch" ]; then
     echo "${RED}${CROSS} FAILED${NC}"
-    echo "    ${RED}Gulp is not installed${NC}"
-    echo "    ${YELLOW}Please install Gulp:${NC}"
-    echo "    ${BLUE}nvm use${NC}"
-    echo "    ${BLUE}npm install gulp --save-dev${NC}"
+    echo "    ${RED}Parcel configuration files are missing${NC}"
+    echo "    ${YELLOW}Please ensure Parcel is properly configured${NC}"
     exit 1
 fi
 echo "${GREEN}${CHECK} OK${NC}"

.parcelrc

@@ -0,0 +1,9 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.{sass,scss}": ["@parcel/transformer-sass"]
+  },
+  "optimizers": {
+    "*.css": ["@parcel/optimizer-css"]
+  }
+}

.parcelrc.watch

@@ -0,0 +1,11 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.{sass,scss}": ["@parcel/transformer-sass"],
+    "*.{woff,woff2,ttf,otf}": ["@parcel/transformer-raw"]
+  },
+  "optimizers": {
+    "*.css": [],
+    "*.js": []
+  }
+}

.postcssrc

@@ -0,0 +1,17 @@
+{
+  "plugins": {
+    "postcss-calc": {},
+    "cssnano": {
+      "preset": [
+        "cssnano-preset-advanced",
+        {
+          "discardUnused": false,
+          "reduceInitial": false,
+          "discardComments": {
+            "removeAll": true
+          }
+        }
+      ]
+    }
+  }
+}

.postcssrc.dev

@@ -0,0 +1,3 @@
+{
+  "plugins": {}
+}

.sassrc

@@ -0,0 +1,8 @@
+{
+  "includePaths": [
+    "sass",
+    "node_modules"
+  ],
+  "quietDeps": true,
+  "silenceDeprecations": ["legacy-js-api", "import"]
+}