@component-hook/create-app 1.1.0 → 1.1.2

package/README.md

@@ -3,7 +3,7 @@
 Scaffolding a basic `typescript` project.
 
 > **Compatibility Note:**
-> Requires [Node.js](https://nodejs.org/en/) version 18+, 20+. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.
+> Requires [Node.js](https://nodejs.org/en/) version 20+. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.
 
 <p>
   <a href="https://npm-stat.com/charts.html?package=@component-hook/create-app">
@@ -44,39 +44,63 @@ Currently supported template presets include:
 
 - `vue`
 
-## Project Default Setup
-
-- [Vite](https://cn.vite.dev/)
-- [TypeScript](https://www.typescriptlang.org/)
-- [Axios](https://github.com/axios/axios)
-- [TailwindcSS](https://tailwindcss.com/)
-- [PostCSS](https://postcss.org/) w/ `postcss-nesting` plugin
-- [Cssnano](https://cssnano.github.io/cssnano/) for minimizing production CSS
-- [Postcss-pxtorem](https://www.npmjs.com/package/postcss-pxtorem) generates rem units from pixel units
-- [Vite-plugin-svg-icons](https://github.com/vbenjs/vite-plugin-svg-icons) generate svg sprite map
-- [Eslint](https://eslint.org/)
-  - [@component-hook/eslint-plugin](https://www.npmjs.com/package/@component-hook/eslint-plugin?activeTab=readme)
-- [Prettier](https://prettier.io/)
-- [Husky](https://www.npmjs.com/package/husky) to improves commits
-  - if encounter npx: command not found, can execute `ln -s $(which npx) /usr/local/bin/npx` in zsh
-  - [commitlint](https://commitlint.js.org/#/) checks if your commit messages meet the conventional commit format
-  - [lint-staged](https://github.com/okonet/lint-staged) filter files checked by pre commit lint
-- Alias `@` to `<project_root>/src`
-- Mock use [msw](https://mswjs.io/)
-  - `npx msw init ./public`
-- Unit test use [Vitest](https://vitest.dev/) + [Testing Library](https://testing-library.com/)
-  - [jsdom](https://www.npmjs.com/package/jsdom)
-  - [@vitest/coverage-v8](https://vitest.dev/guide/coverage.html)
-  - [@testing-library/jest-dom](https://testing-library.com/docs/ecosystem-jest-dom/)
-  - [@testing-library/user-event](https://testing-library.com/docs/ecosystem-user-event/)
-- E2E test use [playwright](https://playwright.dev/)
-- [Rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer) visualize and analyze your Rollup bundle to see which modules are taking up space
-- Predefined and fully typed global variables:
-  - `VITE_APP_VERSION` is read from `package.json` version at build time
-  - `VITE_APP_BUILD_EPOCH` is populated as `new Date().getTime()` at build time
-- Github workflows (default)
-  - ci - on workflow call and dispatch
-  - deploy - on push main branch
-  - preview - on pull request
-- Gitlab CI (use `--gitlab` command create project)
-  - run tests - on branches, merge request and manual
+## Project Features Overview
+
+This project leverages modern frontend practices and tooling, covering development experience, code quality, testing, and deployment.
+
+### Development Experience
+
+- **Written in TypeScript**: Provides type safety and better maintainability.
+- **Styled with Tailwind CSS**: Utility-first CSS framework for fast and consistent UI styling.
+- **SVG Support**: Integrated [`vite-plugin-svg-icons`](https://github.com/vbenjs/vite-plugin-svg-icons) to use SVGs as Vue components.
+
+### API & Mocking
+
+- Handles HTTP requests using `axios`.
+- Uses `msw` (Mock Service Worker) for mocking APIs, enabling smooth local development and testing.
+
+### Code Quality
+
+- Enforces consistent code style with `ESLint` and `Prettier`.
+- Enhanced with:
+  - `husky`: For Git hooks.
+  - `lint-staged`: Only runs linters on staged files.
+  - `commitlint`: Ensures commit messages follow conventional format.
+
+### Testing
+
+- Unit testing with `Vitest` + `Testing Library`.
+- End-to-end (E2E) testing using `Playwright`.
+
+### Optimization
+
+- Minifies CSS with `cssnano`.
+- Converts px to rem using `postcss-pxtorem` for responsive design.
+- Uses `rollup-plugin-visualizer` to analyze bundle sizes.
+
+### CI / CD
+
+- Integrated `GitHub Actions` and `GitLab CI` for automated testing and deployment.
+
+### Project Structure & Conventions
+
+- The project root alias `@` points to the `src` directory (`<project_root>/src`).
+- ESLint uses a custom plugin: [`@component-hook/eslint-plugin`](https://www.npmjs.com/package/@component-hook/eslint-plugin).
+
+### Tip: Solving `npx: command not found`
+
+If you encounter `npx: command not found`, run the following command to create a symbolic link:
+
+```bash
+ln -s $(which npx) /usr/local/bin/npx
+```
+
+### Predefined Global Variables
+
+These variables are injected at build time and are fully typed:
+
+| Variable Name          | Description                                  |
+| ---------------------- | -------------------------------------------- |
+| `VITE_APP_VERSION`     | Read from `package.json` version             |
+| `VITE_APP_BUILD_EPOCH` | Timestamp generated at build time            |
+| `VITE_APP_MOCK`        | Indicates whether the mock environment is on |

package/dist/index.js

@@ -1,28 +1,29 @@
 // src/index.ts
-import path2 from "node:path";
-import { fileURLToPath } from "node:url";
-import { readdir, readFile, writeFile } from "node:fs/promises";
-import minimist from "minimist";
-import colors2 from "picocolors";
-import { copy, ensureDirSync } from "fs-extra/esm";
+import { readdirSync as readdirSync2, statSync } from "fs";
+import { readdir, readFile, writeFile } from "fs/promises";
+import path2 from "path";
+import { fileURLToPath } from "url";
 import artTemplate from "art-template";
+import { copy, ensureDirSync } from "fs-extra/esm";
+import minimist from "minimist";
 import ora from "ora";
+import colors2 from "picocolors";
+
+// src/constants.ts
+var DEFAULT_PROJECT_NAME = "basic-project";
+var TEMPLATES = ["vue"];
+var GITHUB_ACTIONS = "GitHub Actions";
+var GITLAB_CI = "GitLab CI";
 
 // src/prompts.ts
-import { existsSync as existsSync2 } from "node:fs";
-import prompts from "prompts";
+import { existsSync as existsSync2 } from "fs";
 import colors from "picocolors";
+import prompts from "prompts";
 
 // src/utils.ts
-import path from "node:path";
-import { existsSync, readdirSync } from "node:fs";
+import { existsSync, readdirSync } from "fs";
+import path from "path";
 import { remove } from "fs-extra/esm";
-
-// src/config.ts
-var DEFAULT_PROJECT_NAME = "basic-project";
-var TEMPLATES = ["vue"];
-
-// src/utils.ts
 function formatTargetDir(targetDir) {
   if (!targetDir) return targetDir;
   targetDir = targetDir.trim();
@@ -46,6 +47,9 @@ function isValidPackageName(projectName) {
 function toValidPackageName(projectName) {
   return projectName.trim().toLowerCase().replaceAll(/\s+/g, "-").replace(/^[._]/, "").replaceAll(/[^a-z\d\-~]+/g, "-");
 }
+function toUpperCasePackageName(projectName) {
+  return projectName.split("-").map((str) => `${str[0].toUpperCase()}${str.slice(1)}`).join(" ");
+}
 function getPkgManagerInfo() {
   const userAgent = process.env.npm_config_user_agent;
   if (!userAgent) return;
@@ -108,7 +112,7 @@ function operationPrompts({ targetDir, template }) {
     type: (_, { projectName: nameAnswer }) => {
       return isValidPackageName(getProjectName(nameAnswer)) ? null : "text";
     },
-    name: "projectName",
+    name: "packageName",
     message: styleTitle("Package name:"),
     initial: (_, { projectName: nameAnswer }) => toValidPackageName(getProjectName(nameAnswer)),
     validate: (name) => {
@@ -154,7 +158,7 @@ Available templates:
   ${colors2.green("vue")}
 `;
 async function copyTemplateFolder(root, templateDir, packageName) {
-  const isGitlab = argv.lab || argv.gitlab;
+  const isGitlab = argv.l || argv.gitlab;
   const [files, pkgJson] = await Promise.all([
     readdir(templateDir),
     readFile(path2.join(templateDir, "package.json"), "utf-8")
@@ -172,11 +176,24 @@ async function copyTemplateFolder(root, templateDir, packageName) {
     }
     const templatePath = path2.join(templateDir, file);
     if (file.endsWith(".art")) {
-      const name = packageName.split("-").map((str) => `${str[0].toUpperCase()}${str.slice(1)}`).join(" ");
-      const renderedResult = artTemplate(templatePath, { projectName: name });
-      return writeFile(targetPath.replace(".art", ""), renderedResult);
+      const isScript = file.endsWith(".js.art") || file.endsWith(".ts.art");
+      const name = isScript ? packageName : toUpperCasePackageName(packageName);
+      const replacedPath = targetPath.replace(".art", "");
+      const renderedResult = artTemplate(templatePath, {
+        projectName: name,
+        gitRepository: isGitlab ? GITLAB_CI : GITHUB_ACTIONS
+      });
+      ensureDirSync(path2.dirname(replacedPath));
+      return writeFile(replacedPath, renderedResult);
+    }
+    if (statSync(templatePath).isDirectory()) {
+      const subFiles = readdirSync2(templatePath);
+      const rewriteOrCopySubFilePromises = subFiles.map((subFile) => rewriteOrCopyFile(path2.join(file, subFile)));
+      return Promise.all(rewriteOrCopySubFilePromises).then(() => {
+      });
+    } else {
+      return copy(templatePath, targetPath);
     }
-    return copy(templatePath, targetPath);
   };
   pkg.name = packageName;
   return Promise.all([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@component-hook/create-app",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Scaffolding a basic typescript project",
   "type": "module",
   "license": "MIT",
@@ -14,7 +14,7 @@
     "dist"
   ],
   "engines": {
-    "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+    "node": ">=20.19.3"
   },
   "repository": {
     "type": "git",

package/template-vue/.browserslistrc

@@ -0,0 +1,10 @@
+# Click this link to view browser coverage https://browsersl.ist/#q=%3E+1.5%25%0Aios+%3E%3D+12%0Achrome+%3E%3D+49%0Anot+ie+%3C%3D+11%0Alast+2+versions%0Anot+dead
+
+# Browsers that support
+
+> 1.5%
+ios >= 12
+chrome >= 49
+not ie <= 11
+last 2 versions
+not dead

package/template-vue/.github/workflows/preview.yml

@@ -1,4 +1,4 @@
-name: Prewiew Pull Request
+name: Preview Pull Request
 
 on:
   pull_request:

package/template-vue/.husky/commit-msg

@@ -1,3 +1 @@
-#!/bin/sh
-
 npx --no -- commitlint --edit ${1}

package/template-vue/.husky/pre-commit

@@ -1,3 +1 @@
-#!/bin/sh
-
 npx lint-staged

package/template-vue/README.md.art

@@ -1,49 +1,26 @@
 # {{projectName}}
 
+This project is built with [vue3](https://vuejs.org/) + [vite](https://vite.dev/), using [pnpm](https://pnpm.io/) for package management and [pinia](https://pinia.vuejs.org/) for state management.
+
 ## Features
 
-- Vue 3
-- Pnpm 9
-- Vite 5
-- [Pinia](https://pinia.vuejs.org/) store
-  - [pinia-plugin-persistedstate](https://www.npmjs.com/package/pinia-plugin-persistedstate)
-- Routing using [vue-router 4](https://router.vuejs.org/)
-- TypeScript 5
-- Axios
-- Tailwind CSS 3
-- Vue-i18n 9
-- PostCSS 8 w/ `postcss-nesting` plugin
-- [Cssnano](https://cssnano.github.io/cssnano/) for minimizing production CSS
-- [Postcss-pxtorem](https://www.npmjs.com/package/postcss-pxtorem) generates rem units from pixel units
-- [Vite-plugin-svg-icons](https://github.com/vbenjs/vite-plugin-svg-icons) generate svg sprite map
-- [Unplugin-vue-components](https://www.npmjs.com/package/unplugin-vue-components) auto importing for common components
-- Eslint
-  - [@component-hook/eslint-plugin](https://www.npmjs.com/package/@component-hook/eslint-plugin?activeTab=readme)
-- Prettier
-- [Husky](https://www.npmjs.com/package/husky) to improves commits
-  - if encounter npx: command not found, can execute `ln -s $(which npx) /usr/local/bin/npx` in zsh
-  - [commitlint](https://commitlint.js.org/#/) checks if your commit messages meet the conventional commit format
-  - [lint-staged](https://github.com/okonet/lint-staged) filter files checked by pre commit lint
-- Alias `@` to `<project_root>/src`
-- Mock use [msw](https://mswjs.io/)
-  - `npx msw init ./public`
-- Unit test use [Vitest](https://vitest.dev/) + [Testing Library](https://testing-library.com/)
-  - [jsdom](https://www.npmjs.com/package/jsdom)
-  - [@vitest/coverage-v8](https://vitest.dev/guide/coverage.html)
-  - [@testing-library/jest-dom](https://testing-library.com/docs/ecosystem-jest-dom/)
-  - [@testing-library/vue](https://testing-library.com/docs/vue-testing-library/intro/)
-  - [@testing-library/user-event](https://testing-library.com/docs/ecosystem-user-event/)
-- E2E test use [playwright](https://playwright.dev/)
-- [Rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer) visualize and analyze your Rollup bundle to see which modules are taking up space
+- **Development Experience**: Written in [typeScript](https://www.typescriptlang.org/), styled with [tailwindcss](https://tailwindcss.com/), and structured with [vue-router](https://router.vuejs.org/), and [vue-i18n](https://vue-i18n.intlify.dev/). Supports SVGs ([vite-plugin-svg-icons](https://github.com/vbenjs/vite-plugin-svg-icons)).
+- **API & Mocking**: Handles requests with [axios](https://axios-http.com/docs/intro) and mocks APIs using [msw](https://mswjs.io/).
+- **Code Quality**: Enforces standards with [eslint](https://eslint.org/) and [prettier](https://prettier.io/), with [husky](https://www.npmjs.com/package/husky), [commitlint](https://commitlint.js.org/#/), and [lint-staged](https://github.com/okonet/lint-staged) for commit validation.
+- **Testing**: Uses [vitest](https://vitest.dev/) + [testing-library](https://testing-library.com/) for unit testing and [playwright](https://playwright.dev/) for E2E testing.
+- **Optimization**: Compresses CSS with [cssnano](https://cssnano.github.io/cssnano/) , converts units with [postcss-pxtorem](https://www.npmjs.com/package/postcss-pxtorem), and analyzes assets with [rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer).
+- **CI/CD**: Integrates `{{gitRepository}}` for automated testing and deployment.
+
+## Code Features / Opinions
+
+- Project root aliased as `@` to `<project_root>/src`
+- Store persistedstate use [pinia-plugin-persistedstate](https://www.npmjs.com/package/pinia-plugin-persistedstate)
+- ESlint plugin use [@component-hook/eslint-plugin](https://www.npmjs.com/package/@component-hook/eslint-plugin?activeTab=readme)
+- if encounter npx: command not found, can execute `ln -s $(which npx) /usr/local/bin/npx` in zsh
 - Predefined and fully typed global variables:
   - `VITE_APP_VERSION` is read from `package.json` version at build time
   - `VITE_APP_BUILD_EPOCH` is populated as `new Date().getTime()` at build time
-- Github workflows
-  - ci - on workflow call and dispatch
-  - deploy - on push main branch
-  - preview - on pull request
-- Gitlab CI
-  - run tests - on branches, merge request and manual
+  - `VITE_APP_MOCK` is use mock environment
 
 ## Project Files
 
@@ -51,33 +28,34 @@
 src/
 ├── __tests__/
 │   ├── __mocks__/
-│   ├── setup/
-│   │   └── unitTest.ts
 │   ├── e2e/*
 │   └── unit/*
-├── apis/*
 ├── assets/*
-│   └── images/
-│       └── svgIcons
+│   └── svg-icons
 │          └── vue.svg
 ├── components/
-│   ├── common/
-│   │   └── SvgIcon.vue
-│   └── indexPage/
-│       └── HelloWorld.vue
-├── configs/*
+│   └── common
+│       ├── svg-icon/
+│       │   ├── src
+│       │   │   └── index.vue
+│       │   └── index.ts
+│       └── index.ts
+├── constants/*
 ├── hooks/*
 ├── locales/
 │   ├── en-US.json
 │   └── zh-CN.json
 ├── mocks/
 │   ├── handlers/*
-│   │   ├── apis/*
+│   │   ├── modules/*
 │   │   └── index.ts
 │   │── browser.ts
 │   └── server.ts
 ├── pages/
-│   └── IndexPage.vue
+│   └── home/
+│       ├── components
+│       │   └── HelloWorld.vue
+│       └── index.vue
 ├── plugins/
 │   └── i18n.ts
 ├── router/
@@ -88,10 +66,11 @@ src/
 │   └── index.ts
 ├── styles/
 │   ├── common/
-|   │   ├── all.postcss
-|   │   └── button.postcss
-│   ├── index.postcss
-│   └── tailwind.postcss
+|   │   ├── all.css
+|   │   └── button.css
+│   ├── base.css
+│   ├── index.css
+│   └── tailwind.css
 ├── types/*
 ├── utils/*
 ├── App.vue

package/template-vue/_gitignore

@@ -25,9 +25,6 @@ dist-ssr
 *.sln
 *.sw?
 
-# Component auto import
-/src/components.d.ts
-
 # Test reports
 coverage
 /test-results/

package/template-vue/index.html.art

@@ -20,6 +20,8 @@
       src="/src/main.ts"
     ></script>
     <noscript>
+      <h1>Opinionated, production ready template for Vite and Vue 3</h1>
+
       <p>This site requires JavaScript to work.</p>
     </noscript>
   </body>

package/template-vue/lint-staged.config.js

@@ -1,3 +1,5 @@
+/** @type {import('lint-staged').Configuration} */
+
 export default {
   '*.{ts,vue}': () => 'pnpm typecheck',
   '*.{ts,js,vue}': () => 'pnpm lint',

package/template-vue/package.json

@@ -1,9 +1,9 @@
 {
   "name": "vue-starter",
   "version": "0.0.0",
-  "license": "MIT",
+  "private": true,
   "type": "module",
-  "packageManager": "pnpm@10.6.3",
+  "packageManager": "pnpm@10.12.4",
   "scripts": {
     "dev": "vite",
     "dev:mock": "MOCK=true vite",
@@ -18,56 +18,50 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "axios": "^1.8.3",
-    "pinia": "^3.0.1",
-    "pinia-plugin-persistedstate": "^4.2.0",
-    "vue": "^3.5.13",
-    "vue-i18n": "^11.1.2",
-    "vue-router": "^4.5.0"
+    "axios": "^1.10.0",
+    "pinia": "^3.0.3",
+    "pinia-plugin-persistedstate": "^4.3.0",
+    "vue": "^3.5.17",
+    "vue-i18n": "^11.1.7",
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
-    "@component-hook/eslint-plugin": "1.0.1",
-    "@intlify/unplugin-vue-i18n": "^6.0.3",
-    "@playwright/test": "^1.51.0",
+    "@component-hook/eslint-plugin": "1.1.1",
+    "@intlify/unplugin-vue-i18n": "^6.0.8",
+    "@playwright/test": "^1.53.1",
+    "@tailwindcss/vite": "^4.1.11",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.6.1",
     "@testing-library/vue": "^8.1.0",
-    "@tsconfig/node22": "22.0.0",
-    "@types/node": "^22.13.10",
-    "@vitejs/plugin-vue": "^5.2.2",
-    "@vitest/coverage-v8": "^2.1.9",
+    "@tsconfig/node22": "^22.0.2",
+    "@types/node": "^22.15.33",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
     "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.21",
-    "cssnano": "^7.0.6",
-    "eslint": "^9.22.0",
-    "jsdom": "^26.0.0",
-    "msw": "^2.7.3",
-    "postcss": "^8.5.3",
-    "postcss-import": "^16.1.0",
-    "postcss-nesting": "^13.0.1",
+    "cssnano": "^7.0.7",
+    "eslint": "^9.29.0",
+    "jsdom": "^26.1.0",
+    "msw": "^2.10.2",
+    "postcss": "^8.5.6",
+    "postcss-preset-env": "^10.2.4",
     "postcss-pxtorem": "^6.1.0",
-    "prettier": "^3.5.3",
-    "rollup-plugin-visualizer": "^5.14.0",
-    "tailwindcss": "^3.4.17",
-    "typescript": "^5.8.2",
-    "unplugin-vue-components": "^0.28.0",
-    "vite": "^5.4.14",
+    "prettier": "^3.6.2",
+    "rollup-plugin-visualizer": "^6.0.3",
+    "tailwindcss": "^4.1.11",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vitest": "^2.1.9",
-    "vue-tsc": "^2.2.8"
+    "vitest": "^3.2.4",
+    "vue-tsc": "^2.2.10"
   },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ],
   "msw": {
     "workerDirectory": "public"
   },
   "optionalDependencies": {
-    "@commitlint/cli": "^19.8.0",
-    "@commitlint/config-conventional": "^19.8.0",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
     "husky": "^9.1.7",
-    "lint-staged": "^15.5.0"
+    "lint-staged": "^16.1.2"
   }
 }

package/template-vue/playwright.config.ts

@@ -24,37 +24,26 @@ export default defineConfig({
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: {
+        browserName: 'chromium',
+        ...devices['Macbook Pro'],
+      },
     },
 
     {
       name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      use: {
+        browserName: 'firefox',
+        ...devices['Macbook 11'],
+      },
     },
 
     {
       name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+      use: {
+        browserName: 'webkit',
+        ...devices['iPhone SE'],
+      },
     },
-
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
   ],
 });

package/template-vue/postcss.config.js

@@ -1,14 +1,17 @@
+import autoprefixer from 'autoprefixer';
+import cssnano from 'cssnano';
+import postcssPresetEnv from 'postcss-preset-env';
+import postcssPxtorem from 'postcss-pxtorem';
+
 export default {
-  plugins: {
-    'postcss-import': {},
-    'tailwindcss/nesting': {},
-    'postcss-nesting': {},
-    tailwindcss: {},
-    autoprefixer: {},
-    'postcss-pxtorem': {
+  plugins: [
+    autoprefixer(),
+    postcssPxtorem({
       rootValue: 16,
       propList: ['*'],
-    },
-    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
-  },
+      selectorBlackList: ['norem'],
+    }),
+    postcssPresetEnv({ stage: 3 }),
+    ...(process.env.NODE_ENV === 'production' ? [cssnano({ preset: 'default' })] : []),
+  ],
 };