npm - fast-ejs-builder - Versions diffs - 1.0.0 → 1.0.2 - Mend

fast-ejs-builder 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md CHANGED Viewed

@@ -44,10 +44,9 @@ npm install fast-ejs-builder --save-dev
    ```txt
    my-site/
-   ├── app/
-   │   ├── components/     # Reusable EJS components
-   │   ├── data/          # Global and local data files
-   │   └── pages/         # EJS templates
+   ├── components/     # Reusable EJS components
+   ├── data/          # Global and local data files
+   └── pages/         # EJS templates
    │       └── public/            # Static assets
    └── fast.ejs.json      # Configuration file
    ```
@@ -62,14 +61,15 @@ npm install fast-ejs-builder --save-dev
        "useIndexRouting": true
      },
      "components": {
-       "dir": "app/components"
+       "dir": "components",
+       "autoGenerate": false
      },
      "data": {
-       "dir": "app/data",
+       "dir": "data",
        "allow": "all"
      },
      "pages": {
-       "dir": "app/pages"
+       "dir": "pages"
      },
      "tailwind": {
        "output": "public/app.css",
@@ -128,18 +128,20 @@ The `fast.ejs.json` (occasionnally called _the FEJ_) file controls all aspects o
     "useIndexRouting": true
   },
   "components": {
-    "dir": "app/components"
+    "dir": "components",
+    "autoGenerate": false
   },
   "data": {
-    "dir": "app/data",
+    "dir": "data",
     "allow": "all"
   },
   "pages": {
-    "dir": "app/pages"
+    "dir": "pages"
   },
   "tailwind": {
     "output": "public/app.css",
     "imports": [
+      "public/style.css",
       "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
     ]
   }
@@ -152,11 +154,12 @@ The `fast.ejs.json` (occasionnally called _the FEJ_) file controls all aspects o
 - **`build.interval`**: Milliseconds between rebuilds in development mode
 - **`build.useIndexRouting`**: Generate `route/index.html` instead of `route.html`
 - **`components.dir`**: Directory containing reusable EJS components
+- **`components.autoGenerate`**: Generate missing components. Default is `false`
 - **`data.dir`**: Directory for global and page-specific data files
 - **`data.allow`**: Data file format (`"js"`, `"json"`, or `"all"`)
 - **`pages.dir`**: Directory containing your EJS page templates. **Here is where you should mainly work**.
 - **`tailwind.output`**: Path to generated Tailwind CSS file
-- **`tailwind.imports`**: Array of external CSS URLs to include
+- **`tailwind.imports`**: Array of external CSS URLs to include. Each `@layer` will be detected if specified.
 ## Usage Examples
@@ -165,7 +168,7 @@ The `fast.ejs.json` (occasionnally called _the FEJ_) file controls all aspects o
 Create EJS templates in your `pages.dir` directory:
 ```ejs
-<!-- app/pages/index.ejs -->
+<!-- pages/index.ejs -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -193,7 +196,7 @@ Create EJS templates in your `pages.dir` directory:
 Create reusable components in your `components.dir`:
 ```ejs
-<!-- app/components/header.ejs -->
+<!-- components/header.ejs -->
 <header class="bg-white shadow-sm">
   <nav class="container mx-auto px-4 py-4">
     <div class="flex items-center justify-between">
@@ -243,7 +246,7 @@ Fast EJS comes with default data that can't be overrided.
   In the previous example, we can access `"https://placehold.co/400"` by using `$0` (`0` for the first arg).
   ```ejs
-  <!--app/components/users/avatar.ejs-->
+  <!--components/users/avatar.ejs-->
   <img src="<%= $0 %>" class="w-10 aspect-square rounded-full"/>
   ```
@@ -258,15 +261,15 @@ Fast EJS comes with default data that can't be overrided.
   Returns the current route relative to the `pages.dir`. In this example, it will return `/home`
   ```ejs
-  <!--app/pages/home.ejs-->
+  <!--pages/home.ejs-->
   <%= $route %>
   ```
 - `$css` :\
   Automatically imports the relative path of generated tailwind css from `tailwind.output` inside a page. No need to manually write the css path and change everytime.\
   \
-  For example, inside `app/pages/users/profile.ejs`, it can return something like `../../public/app.css`\
-  while inside `app/pages/index.ejs`, it will return something like `./public/app.css`
+  For example, inside `pages/users/profile.ejs`, it can return something like `../../public/app.css`\
+  while inside `pages/index.ejs`, it will return something like `./public/app.css`
   ```ejs
   <%- $css %>
@@ -306,7 +309,7 @@ Fast EJS comes with default data that can't be overrided.
   Prints anything in the console during build. Use it to debug your pages or components
   ```ejs
-  <!--app/components/header.ejs-->
+  <!--components/header.ejs-->
   <%- $debug("Header component says hi !") %>
   ```
@@ -319,14 +322,15 @@ Fast EJS comes with default data that can't be overrided.
 #### 2. Using your own data
-Fill data files in `data.dir` (generated automatically if missing).
+Fill data files in `data.dir` (generated automatically if missing).\
+Remember that using js data allow you to use function, async function and getter as data.
 - **Global data** : Can be accessed inside every pages and components
 If `data.allow` is `all` or `js` (recommended)
 ```javascript
-// app/data/global.data.js
+// data/global.js
 module.exports = {
   siteName: "My Awesome Site",
   navItems: [
@@ -336,13 +340,16 @@ module.exports = {
   ],
   add: (a, b) => a + b,
   getUsers: async () => await db.getUsers(),
+  get randomBool() {
+    return Math.random() > 0.5;
+  },
 };
 ```
 If `data.allow` is `all` or `json`
 ```js
-// app/data/global.data.json
+// data/global.json
  {
   "siteName": "My Awesome Site",
   "navItems": [
@@ -356,18 +363,79 @@ If `data.allow` is `all` or `json`
 - **Local data** : Can be accessed only in the target page
 ```javascript
-// app/data/local.data.js
+// data/local.js
 module.exports = {
-  // for page "app/pages/users/profile.ejs"
+  // for page "pages/users/profile.ejs"
   "users/profile": {
     title: "Welcome to My Site",
     description: "This is a fast-ejs powered website with Tailwind CSS.",
   },
+  // dynamic routes
+  "user/$id": (params) => ({
+    id: params.id,
+    username: params.name,
+  }),
+  "blog/$id": ({ title, id }) => ({
+    id,
+    blogTitle: title,
+  }),
+};
+```
+- **Route params** : Params sent to dynamic routes. Should return an array of object
+```javascript
+// data/route.js
+module.exports = {
+  "user/$id": [{ id: "u1", name: "John Doe" }],
+  "blog/$id": () => {
+    const arr = [];
+    for (let i = 0; i < 5; i++) {
+      arr.push({ title: "Article " + i, id: i, isPremium: i % 2 == 0 });
+    }
+    return arr;
+  },
+  // or getter
+  get "blog/$id"() {
+    // ...
+  },
 };
 ```
 **Note that all JS data can be asynchronous, and each asynchronous data will affect the build time.**
+## Use cases
+You can use fast-ejs to build any static website. Just keep in mind that all pages are pre-built, not in runtime like front-end frameworks.\
+For example, if you want to create a blog, you have to use dynamic routes (ex: `articles/$id.ejs`) in order to generate each article page at once:
+```js
+// - Create "articles/$id.ejs" with the logic
+// - Inside "data/route.js", add all articles with their data
+module.exports = {
+  // ...,
+  "articles/$id": async () => {
+    const list = await db.getArticles();
+    return list.map((a) => ({ ...a, id: a._id })); // ensure "id" key
+  },
+};
+// - Add your view data inside "data/local.js"
+module.exports = {
+  // ...,
+  "articles/$id": (article /*represents the data from route.js*/) => {
+    const { name, date } = article;
+    return { name, date }; // if only name and date are used in the view
+  },
+};
+/** Then, when the build is done, route.js will generate files based on your list. And each files built with the corresponding data.
+ * /articles/1 (retrieve data "articles/$id" but with the article with id=1 )
+ * etc..
+ */
+```
 ## Commands
 - **`fast-ejs dev`**: Start development server with live reloading
@@ -380,7 +448,10 @@ Here is the real building flow :
 - Get the data inside `data.dir` that match the `data.allow`.
 - Scan the specified `pages.dir`.
   - All empty folder will be ignored
-  - If any `.ejs` file is found, render the html with the corresponding data and generate the right file inside `build.output` depending on `build.useIndexRouting`.
+  - If any `.ejs` file is found, search for used component inside `components.dir`.
+    - If a component is missing, it will be generated if `components.autoGenerate` is `true`
+    - If the file it is dynamic file (ex: $id.ejs), search for corresponding routes inside `data.dir/route.js(json)`
+  - Render the html with the corresponding data and generate the right file inside `build.output` depending on `build.useIndexRouting`.
   - For any other file, just copy it inside the `build.output`.
 - Generate the css with tailwind at `tailwind.output` along with `tailwind.imports` if specified.
 - Scan the `build.output` and clean all junk files and folders (files from previous build and empty folders).

package/core/index.js CHANGED Viewed

@@ -72,6 +72,7 @@ const _r = (pathname, json = true) => {
     const data = fs.readFileSync(_p(pathname), { encoding: "utf8" });
     return json ? JSON.parse(data) : data;
   }
+  return null;
 };
 const _d = (...messages) => {
   let obj = "";
@@ -89,9 +90,13 @@ const _cp = (i, o) => fs.copyFileSync(_p(i), _p(o));
 const _has = (obj, k) => Object.hasOwn(obj, k);
+const _v = async (v, ...args) =>
+  typeof v === "function" ? await v(...args) : v;
 module.exports = {
   _ce,
   _cp,
   _d,
   _ds,
   _e,
@@ -104,6 +109,7 @@ module.exports = {
   _rd,
   _tree,
   _name,
+  _v,
   _w,
   args,
   root,

package/core/lib.js CHANGED Viewed

@@ -1,4 +1,4 @@
-const { args, _r, _has, _ce, _d, _w, _md, _e, _p, _ds } = require(".");
+const { args, _r, _has, _ce, _d, _w, _md, _e, _p, _ds, _v } = require(".");
 const { $confirm, $input, $select, $number } = require("./prompter");
 const default_fej = require("../fast.ejs.json");
 const config = {
@@ -14,6 +14,7 @@ function getConfigFile() {
       if (v) return v;
     }
   }
+  return "fast.ejs.json";
 }
 function smartMerge(target = {}, source = {}) {
@@ -45,7 +46,7 @@ function smartMerge(target = {}, source = {}) {
 }
 async function getConfig() {
-  const file = getConfigFile() || "fast.ejs.json";
+  const file = getConfigFile();
   if (!_ce(file, "Config file")) {
     const auto = await $confirm("Do you want to use default settings ?", true);
@@ -62,6 +63,10 @@ async function getConfig() {
         "In which folder are your components ?",
         config.components.dir,
       );
+      config.components.autoGenerate = await $input(
+        "Auto generate missing components ?",
+        config.components.autoGenerate,
+      );
       config.build.output = await $input(
         "Where do you want to output ?",
@@ -116,8 +121,9 @@ function generateBaseDirs() {
 }
 async function getDatas() {
-  const globalDataPath = (type) => `${config.data.dir}/global.data.${type}`;
-  const localDataPath = (type) => `${config.data.dir}/local.data.${type}`;
+  const globalDataPath = (type) => `${config.data.dir}/global.${type}`;
+  const localDataPath = (type) => `${config.data.dir}/local.${type}`;
+  const routeDataPath = (type) => `${config.data.dir}/route.${type}`;
   const globalJs = globalDataPath("js");
   const globalJson = globalDataPath("json");
@@ -125,6 +131,9 @@ async function getDatas() {
   const localJs = localDataPath("js");
   const localJson = localDataPath("json");
+  const routeJs = routeDataPath("js");
+  const routeJson = routeDataPath("json");
   const templates = {
     globalJS: `
 module.exports = async () => ({
@@ -138,9 +147,24 @@ module.exports = () => ({
   index: {
     title: process.env.APP_NAME,
   },
-  about: {}, // about.ejs,
   "contact/menu": {}, // contact/menu.ejs
+  "blog/$id": (params) => ({
+    blogId: params.id,
+  }), // blog/$id.ejs
+  "article/$name": ({ name }) => ({
+    name,
+  }), // blog/$id.ejs
 });
+`,
+    routeJS: `
+module.exports = {
+  "blog/$id": [
+    { id: 123, title: "Article 1" },
+    { id: 456, title: "Article 2", isPremium: true },
+  ],
+};
 `,
   };
@@ -150,14 +174,13 @@ module.exports = () => ({
     const resolved = require.resolve(_p(path));
     delete require.cache[resolved];
     const v = require(resolved);
-    return typeof v == "function" ? await v(default_data_args) : v;
+    return await _v(v, default_data_args);
   };
   const getGlobalJSData = async () => {
     if (_e(globalJs)) {
       return await parseJSDate(globalJs);
     } else {
-      _d(`Global file '${globalJs}' not found. It will be generated`);
       _w(globalJs, templates.globalJS.trim());
       return {};
     }
@@ -167,18 +190,24 @@ module.exports = () => ({
     if (_e(localJs)) {
       return await parseJSDate(localJs);
     } else {
-      _d(`Local file '${localJs}' not found. It will be generated`);
       _w(localJs, templates.localJS.trim());
       return {};
     }
   };
+  const getRouteJSData = async () => {
+    if (_e(routeJs)) {
+      return await parseJSDate(routeJs);
+    } else {
+      _w(routeJs, templates.routeJS.trim());
+      return {};
+    }
+  };
   const getGlobalJSONData = () => {
     if (_e(globalJson)) {
       return _r(globalJson);
     } else {
-      _d(`Global file '${globalJson}' not found. It will be generated`);
-      _w(globalJson, {});
       return {};
     }
   };
@@ -187,31 +216,40 @@ module.exports = () => ({
     if (_e(localJson)) {
       return _r(localJson);
     } else {
-      _d(`Local file '${localJson}' not found. It will be generated`);
-      _w(localJson, { index: { title: "HomePage" }, about: {} });
       return {};
     }
   };
-  let globalData = {},
-    localData = {};
+  const getRouteJSONData = () => {
+    if (_e(routeJson)) {
+      return _r(routeJson);
+    } else {
+      return {};
+    }
+  };
+  let globalData = {},
+    localData = {},
+    routeData = {};
   switch (config.data.allow) {
     case "js":
       globalData = await getGlobalJSData();
       localData = await getLocalJSData();
+      routeData = await getRouteJSData();
       break;
     case "json":
       globalData = getGlobalJSONData();
       localData = getLocalJSONData();
+      routeData = getRouteJSONData();
       break;
     default:
       globalData = { ...getGlobalJSONData(), ...(await getGlobalJSData()) };
       localData = { ...getLocalJSONData(), ...(await getLocalJSData()) };
+      routeData = { ...getRouteJSONData(), ...(await getRouteJSData()) };
       break;
   }
-  return { globalData, localData };
+  return { globalData, localData, routeData };
 }
 const configTailwindOutput = () => {

package/fast.ejs.json CHANGED Viewed

@@ -6,14 +6,15 @@
     "useIndexRouting": true
   },
   "components": {
-    "dir": "app/components"
+    "dir": "components",
+    "autoGenerate": false
   },
   "data": {
     "allow": "all",
-    "dir": "app/data"
+    "dir": "data"
   },
   "pages": {
-    "dir": "app/pages"
+    "dir": "pages"
   },
   "tailwind": {
     "imports": [],

package/fast.ejs.schema.json CHANGED Viewed

@@ -31,9 +31,14 @@
     "components": {
       "properties": {
         "dir": {
-          "default": "app/components",
+          "default": "components",
           "description": "The folder containing your EJS components",
           "type": "string"
+        },
+        "autoGenerate": {
+          "default": false,
+          "description": "Automatically generate missing components when they are referenced",
+          "type": "boolean"
         }
       },
       "required": ["dir"],
@@ -42,8 +47,8 @@
     "data": {
       "properties": {
         "dir": {
-          "default": "app/data",
-          "description": "The folder containing global and local data files (global.data.js/json, local.data.js/json)",
+          "default": "data",
+          "description": "The folder containing global and local data files (global.js/json, local.js/json, route.js/json)",
           "type": "string"
         },
         "allow": {
@@ -56,11 +61,10 @@
       "required": ["dir"],
       "additionalProperties": false
     },
     "pages": {
       "properties": {
         "dir": {
-          "default": "app/pages",
+          "default": "pages",
           "description": "The folder containing your EJS templates",
           "type": "string"
         }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "fast-ejs-builder",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Fast-EJS is a simple and fast tool to pre-render EJS templates into static HTML files with clean conventions and flexible data handling.",
   "keywords": [
     "tailwind",

package/src/build-dev.js CHANGED Viewed

@@ -1,7 +1,7 @@
 const { args, _d, _p } = require("../core");
 const ejsbuild = require("../src/build");
 const nodemon = require("nodemon");
-const { config, getConfig } = require("../core/lib");
+const { config, getConfig, getConfigFile } = require("../core/lib");
 async function ejsbuild_dev() {
   await getConfig();
@@ -10,7 +10,9 @@ async function ejsbuild_dev() {
     config.pages.dir,
     config.components.dir,
     config.data.dir,
+    getConfigFile(),
     ".env",
+    "tailwind.config.js",
   ];
   _d("Watching :", toWatch.map((d) => `'${d}'`).join(", "));

package/src/build.js CHANGED Viewed

@@ -18,6 +18,7 @@ const {
   _w,
   _ds,
   _cp,
+  _v,
 } = require("../core");
 const {
   getConfig,
@@ -40,7 +41,7 @@ async function ejsbuild(code = 0) {
   const start = new Date();
   generateBaseDirs();
-  const { globalData, localData } = await getDatas();
+  const { globalData, localData, routeData } = await getDatas();
   /** @param {File } file */
   function getOutputName(file) {
@@ -61,6 +62,13 @@ async function ejsbuild(code = 0) {
     return { normalized, original };
   }
+  const params_regex = /\$([a-zA-Z_]\w*)\b/g;
+  function fillParams(s = "", p = {}) {
+    return s.replace(params_regex, (_, key) => {
+      return p[key] ?? `$${key}`;
+    });
+  }
   // generate tailwind file only if detected any view
   if (
     _tree(config.pages.dir).filter((f) => !f.isDir && f.ext == "ejs").length > 0
@@ -74,7 +82,7 @@ async function ejsbuild(code = 0) {
   const built = [];
   /** @param {File } file */
-  async function writeFile(file) {
+  async function writeFile(file, templatePath, templateData) {
     const outputName = getOutputName(file);
     const hasConflict = !!allOutputNames.find(
       (f) => f.original == outputName.normalized,
@@ -91,16 +99,57 @@ async function ejsbuild(code = 0) {
       return;
     }
     output += ".html";
+    const routeParams = outputName.original.match(params_regex) ?? [];
+    const hasParams = routeParams.length > 0;
+    const local =
+      localData[outputName.original] ?? localData[`/${outputName.original}`];
+    if (hasParams) {
+      const routes = await _v(
+        routeData[outputName.original] ?? routeData[`/${outputName.original}`],
+      );
+      if (typeof routes == "object") {
+        const params = Array.isArray(routes) ? routes : [routes];
+        for (let p of params) {
+          const fill = (s) => fillParams(s, p);
+          const pf = {
+            name: fill(file.name),
+            fullpath: fill(file.fullpath),
+            path: fill(file.path),
+            isDir: file.isDir,
+            ext: file.ext,
+          };
+          const notFoundParams = [
+            ...(pf.fullpath.matchAll(params_regex) ?? []),
+          ].map((m) => m[1]);
+          if (notFoundParams.length > 0) {
+            _d(
+              `\x1b[31m${notFoundParams.map((p) => `'${p}'`).join(", ")} not found for route '${outputName.original}'`,
+            );
+            continue;
+          }
+          writeFile(pf, file.fullpath, await _v(local, p));
+        }
+      }
+      return;
+    }
     try {
       const data = {
         ...globalData,
-        ...(localData[outputName.original] ?? {}),
+        ...((await _v(local, {})) ?? {}),
+        ...(templateData ?? {}),
       };
       const getComponent = (component, ...args) => {
         if (!component.endsWith(".ejs")) component += ".ejs";
         const content = _r(`${config.components.dir}/${component}`, false);
-        if (!content) throw new Error("Component not found.");
+        if (content == null) throw new Error("Component not found.");
         const component_data = {};
         for (let i in args) {
           component_data[`$${i}`] = args[i];
@@ -108,6 +157,18 @@ async function ejsbuild(code = 0) {
         return { content, component_data };
       };
+      const handleComponentError = (component, error) => {
+        if (config.components.autoGenerate) {
+          _md(config.components.dir + `/${component}`, false);
+          _w(config.components.dir + `/${component}.ejs`, "", false);
+          _ds(`Missing component '${component}' generated.`);
+        } else {
+          _d(`\x1b[31mFailed to build component '${component}'`);
+          console.log("\x1b[31m", error.message, "\x1b[0m");
+        }
+      };
       // NOTE - Reserved keywords
       const context = (d = {}) =>
         new Proxy(d, {
@@ -134,8 +195,7 @@ async function ejsbuild(code = 0) {
             );
             return comp_render;
           } catch (error) {
-            _d(`\x1b[31mFailed to build component '${component}'`);
-            console.log("\x1b[31m", error.message, "\x1b[0m");
+            handleComponentError(component, error);
           }
         },
         $async: async (component, ...args) => {
@@ -155,8 +215,7 @@ async function ejsbuild(code = 0) {
             );
             return comp_render;
           } catch (error) {
-            _d(`\x1b[31mFailed to build component '${component}'`);
-            console.log("\x1b[31m", error.message, "\x1b[0m");
+            handleComponentError(component, error);
           }
         },
         $env: (k) => process.env[k],
@@ -187,8 +246,9 @@ async function ejsbuild(code = 0) {
           return new Date();
         },
       };
+      // const fileContent = _r(file.fullpath, false);
       const out = await ejs.renderFile(
-        file.fullpath,
+        templatePath ?? file.fullpath,
         context({
           ...data,
           ...defaultData,

package/src/tailwind.js CHANGED Viewed

@@ -3,7 +3,7 @@ const path = require("path");
 const postcss = require("postcss");
 const tailwindcss = require("tailwindcss");
 const autoprefixer = require("autoprefixer");
-const { _p, _e, _w, _js, _ce } = require("../core");
+const { _p, _e, _w, _js, _ce, _r } = require("../core");
 const { config, configTailwindOutput } = require("../core/lib");
 const twConfigPath = "tailwind.config.js";
@@ -41,6 +41,24 @@ function mergeTailwindConfig(base, user) {
   };
 }
+function extractLayers(path) {
+  const css = _r(path, false);
+  if (!css) return {};
+  const regex = /@layer\s+([a-zA-Z0-9_-]+)\s*\{([\s\S]*?\})\s*\}/g;
+  const result = {};
+  let match;
+  while ((match = regex.exec(css)) !== null) {
+    const name = match[1];
+    const content = match[2].trim();
+    result[name] ??= [];
+    result[name].push(content);
+  }
+  return result;
+}
 async function buildTailwind() {
   const inputCss = path.join(__dirname, "../templates/tailwind.css");
   const outputCss = configTailwindOutput();
@@ -83,13 +101,34 @@ module.exports = ${_js(baseConfig)};
   let css = fs.readFileSync(inputCss, "utf8");
   const tailwindOutput = path.dirname(configTailwindOutput());
   let imported = "";
+  const layers = {};
   for (let style of config.tailwind.imports) {
+    const uri_regex = /^https?:\/\/[^\s/$.?#].[^\s]*$/i;
+    if (uri_regex.test(style)) {
+      imported += `@import "${style}";\n`;
+      continue;
+    }
     const style_path = _p(`${config.build.output}/${style}`);
     const relative_path = path.relative(tailwindOutput, style_path);
     imported += `@import "./${relative_path}";\n`;
+    const lay = extractLayers(`${config.pages.dir}/${style}`);
+    for (let k in lay) {
+      layers[k] ??= "";
+      layers[k] += `${lay[k]}\n`;
+    }
   }
   css = `${imported}\n${css}`;
+  for (let k in layers) {
+    css += `
+@layer ${k} {
+    ${layers[k]?.trim()}
+}
+`;
+  }
   const result = await postcss([
     tailwindcss(finalConfig),
     autoprefixer(),