search

canonical / vanilla-framework

From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.
https://vanillaframework.io
GNU Lesser General Public License v3.0
838 stars 167 forks source link

JisonLexerError: Lexical error on line 1: Unrecognized text (postcss-loader & Nuxt) #4620

Closed Sebastix closed 1 year ago

Sebastix commented 1 year ago

Hi all! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch vanilla-framework@3.9.0 for the project I'm working on.

The work is in a Nuxt project (my own website), this is my package.json:

  "name": "",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt && watch-css",
    "build": "nuxt build && build-css",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "watch-css": "yarn build-css && sass --load-path=node_modules -w assets:dist --style=compressed",
    "build-css": "sass -w --load-path=node_modules assets:dist --style=compressed"
  },
  "dependencies": {
    "@nuxtjs/pwa": "^3.3.5",
    "core-js": "^3.25.3",
    "nuxt": "^2.15.8",
    "nuxt-matomo": "^1.2.4",
    "nuxt-social-meta": "^1.0.0",
    "patch-package": "^6.5.0",
    "v-click-outside": "^3.2.0",
    "vanilla-framework": "^3.9",
    "vue": "^2.7.10",
    "vue-server-renderer": "^2.7.10",
    "vue-template-compiler": "^2.7.10"
  },
  "devDependencies": {
    "sass": "^1.56",
    "sass-loader": "^10.4"
  }
}

I ran into this error when the command npm run generate is executed:

ERROR in ./assets/scss/site.scss (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./assets/scss/site.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
JisonLexerError: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: 0.765625 - $default-icon-size
^.............^
    at /Users/sebastix/Transporter/Sebastix.nl/sebastix/sebastix.nl/nuxt/assets/scss/site.scss:1:293445
    at Object.parseError (/Users/sebastix/Transporter/Sebastix.nl/sebastix/sebastix.nl/nuxt/node_modules/postcss-calc/dist/parser.js:1200:15)
    at Object.lexer_parseError [as parseError] (/Users/sebastix/Transporter/Sebastix.nl/sebastix/sebastix.nl/nuxt/node_modules/postcss-calc/dist/parser.js:2333:44)
    at Object.lexer_next [as next] (/Users/sebastix/Transporter/Sebastix.nl/sebastix/sebastix.nl/nuxt/node_modules/postcss-calc/dist/parser.js:3328:22)
    at Object.lexer_fastLex [as fastLex] (/Users/sebastix/Transporter/Sebastix.nl/sebastix/sebastix.nl/nuxt/node_modules/postcss-calc/dist/parser.js:3403:18)
    at fastLex (/Users/sebastix/Transporter/Sebastix.nl/sebastix/sebastix.nl/nuxt/node_modules/postcss-calc/dist/parser.js:1603:27)
    at Parser.parse (/Users/sebastix/Transporter/Sebastix.nl/sebastix/sebastix.nl/nuxt/node_modules/postcss-calc/dist/parser.js:1677:30)
    at /Users/sebastix/Transporter/Sebastix.nl/sebastix/sebastix.nl/nuxt/node_modules/postcss-calc/dist/lib/transform.js:33:30
    at walk (/Users/sebastix/Transporter/Sebastix.nl/sebastix/sebastix.nl/nuxt/node_modules/postcss-value-parser/lib/walk.js:7:16)
    at ValueParser.walk (/Users/sebastix/Transporter/Sebastix.nl/sebastix/sebastix.nl/nuxt/node_modules/postcss-value-parser/lib/index.js:18:3)
    at transformValue (/Users/sebastix/Transporter/Sebastix.nl/sebastix/sebastix.nl/nuxt/node_modules/postcss-calc/dist/lib/transform.js:24:50)
    at _default (/Users/sebastix/Transporter/Sebastix.nl/sebastix/sebastix.nl/nuxt/node_modules/postcss-calc/dist/lib/transform.js:66:100)
    at /Users/sebastix/Transporter/Sebastix.nl/sebastix/sebastix.nl/nuxt/node_modules/postcss-calc/dist/index.js:27:32
    at /Users/sebastix/Transporter/Sebastix.nl/sebastix/sebastix.nl/nuxt/node_modules/postcss/lib/container.js:139:18
    at Rule.each (/Users/sebastix/Transporter/Sebastix.nl/sebastix/sebastix.nl/nuxt/node_modules/postcss/lib/container.js:105:16)
    at Rule.walk (/Users/sebastix/Transporter/Sebastix.nl/sebastix/sebastix.nl/nuxt/node_modules/postcss/lib/container.js:135:17)
    at /Users/sebastix/Transporter/Sebastix.nl/sebastix/sebastix.nl/nuxt/node_modules/postcss/lib/container.js:152:24
    at Root.each (/Users/sebastix/Transporter/Sebastix.nl/sebastix/sebastix.nl/nuxt/node_modules/postcss/lib/container.js:105:16)
    at Root.walk (/Users/sebastix/Transporter/Sebastix.nl/sebastix/sebastix.nl/nuxt/node_modules/postcss/lib/container.js:135:17)
    at /Users/sebastix/Transporter/Sebastix.nl/sebastix/sebastix.nl/nuxt/node_modules/postcss-calc/dist/index.js:23:9
    at initializePlugin (/Users/sebastix/Transporter/Sebastix.nl/sebastix/sebastix.nl/nuxt/node_modules/cssnano/dist/index.js:31:51)
 @ ./assets/scss/site.scss 4:14-224
 @ ./node_modules/.cache/nuxt/App.js
 @ ./node_modules/.cache/nuxt/index.js
 @ ./node_modules/.cache/nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./node_modules/.cache/nuxt/client.js

 FATAL  Nuxt build error                                                                                                                                                                                                           10:24:20

  at WebpackBundler.webpackCompile (node_modules/@nuxt/webpack/dist/webpack.js:2127:21)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:2076:5)
  at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:327:5)
  at async ensureBuild (node_modules/@nuxt/cli/dist/cli-generate.js:145:3)
  at async Object.run (node_modules/@nuxt/cli/dist/cli-generate.js:283:7)
  at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-index.js:413:7)

   ╭─────────────────────────────╮
   │                             │
   │   ✖ Nuxt Fatal Error        │
   │                             │
   │   Error: Nuxt build error   │
   │                             │
   ╰─────────────────────────────╯

In site.scss I'm importing the vanilla-framework assets:

@import 'vanilla-framework';
@include vanilla;

No errors occur when I use the command npm run dev

I'm not sure this is a vanilla-framework issue or maybe a postcss-loader issue.

Here is the diff that solved my problem:

diff --git a/node_modules/vanilla-framework/scss/_patterns_table-sortable.scss b/node_modules/vanilla-framework/scss/_patterns_table-sortable.scss
index bf79750..2ffb909 100644
--- a/node_modules/vanilla-framework/scss/_patterns_table-sortable.scss
+++ b/node_modules/vanilla-framework/scss/_patterns_table-sortable.scss
@@ -15,7 +15,7 @@
     display: inline-block;
     margin-left: $sp-x-small;
     // table heading text is smaller than the icon, so we need to compensate with negative top margin
-    margin-top: calc(#{map-get($font-sizes, x-small)}rem - $default-icon-size);
+    margin-top: calc(#{map-get($font-sizes, x-small)}rem - #{$default-icon-size});
     vertical-align: calc($vertical-offset + 0.5 * $cap-height - 0.5 * $default-icon-size);
   }

This issue body was partially generated by patch-package.

bartaz commented 1 year ago

Thanks for the report.

As far as I understand the interpolation #{} is not needed for sass itself. But it seems that something else in your build pipeline may not support the same.

Unfortunately I don't know Vue/Nuxt ecosystem enough to know what it may be.

Once you fix it - does it fully work? I believe we may have similar code (values without interpolation inside calc) in many places in the code.

Sebastix commented 1 year ago

With the patch, it fully works.

My knowledge of Nuxt/Vuejs is quite basic, so me neither can say it has something to do with the framework.

bartaz commented 1 year ago

We will not be looking into that at this point. If there are any more issues around that feel free to reopen or report separately.