SyntaxError on build Unclosed string

sambedingfield commented 3 years ago

I've been trying out Windi CSS and Vue CLI 4, which has been working great with npm run serve but now I've come to build, I keep running into SyntaxError Unclosed string errors.

After trying to escape or remove the empty pseudo content:"";, I just run into similar errors, so something's not right 🤔

There's nothing helpful in the logs and npm run lint doesn't return any errors.

Any help much appreciated!

Here's my setup...

// package.json
{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --modern",
    "lint": "vue-cli-service lint",
    "report": "vue-cli-service build --modern --report --report-json"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@windicss/plugin-animations": "^1.0.9",
    "@windicss/plugin-question-mark": "^0.1.1",
    "@windicss/plugin-scrollbar": "^1.2.3",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.26.5",
    "sass-loader": "^10",
    "vue-cli-plugin-windicss": "^1.0.4",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/strongly-recommended",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "vue/max-attributes-per-line": 0,
      "vue/singleline-html-element-content-newline": 0,
      "vue/no-unused-vars": "off",
      "no-unused-vars": "off"
    },
    "globals": {
      "__webpack_public_path__": "writable"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 2%",
    "not dead",
    "last 2 versions",
    "not ie <= 11",
    "safari >= 10",
    "iOS >= 10"
  ]
}

// vue.config.js
module.exports = {
  productionSourceMap: false,
  css: {
    extract: false,
    loaderOptions: {
      postcss: {
        config: {
          path: __dirname
        }
      }
    }
  }
}

Additional notes:

SCSS syntax looks okay across the board.
SCSS is written within components using <style lang="scss">.
I was using Vue CLI 3 before installing vue-cli-plugin-windicss and before using Windi with no issues.

sambedingfield commented 3 years ago

Wow, that was a wild goose chase and completely unrelated to Windi or Vue CLI

🙃

After removing all the Windi @apply content- it exposed that Google font import as the last remaining syntax error. Turns out Webpack doesn't like those semicolons between font weights. https://github.com/webpack/webpack/issues/10873

This works fine during npm run serve and npm run lint but fails during npm run build

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

Fixed with using an alternative Google font URL (css instead of css2, removing wght@ and ; becomes ,)

@import url('https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700&display=swap');

(and a lot of swearing)

harlan-zw commented 3 years ago

Oh that's weird! Thanks for the issue and explanation @sambedingfield

Can I recommend you go with the css2 font but add the import in your HML instead of the CSS. HTML is preferred because you're adding an extra network step to fetch the fonts inside the CS, which will decrease the CLS and LCP performance metrics

sambedingfield commented 3 years ago

Good recommendation! Thanks.

Replaced @import with the standard Google <link> to src/public/index.html.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

windicss / vue-cli-plugin-windicss

SyntaxError on build Unclosed string #27