Build Fails with SCSS Related Errors

Do you want to request a feature or report a bug? Report a bug.

What is the current behaviour? preact build / npm run build command currently fails using “template” project

If the current behaviour is a bug, please provide the steps to reproduce. using npm for package manager, all other project init options set to default using CLI. Here is my package.json:

{
  "private": true,
  "name": "rest-countries-api-preact",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "build": "preact build",
    "serve": "sirv build --port 8080 --cors --single",
    "dev": "preact watch",
    "lint": "eslint src",
    "test": "jest"
  },
  "eslintConfig": {
    "extends": "preact",
    "ignorePatterns": [
      "build/"
    ]
  },
  "devDependencies": {
    "enzyme": "^3.10.0",
    "enzyme-adapter-preact-pure": "^2.0.0",
    "eslint": "^6.0.1",
    "eslint-config-preact": "^1.1.0",
    "jest": "^24.9.0",
    "jest-preset-preact": "^1.0.0",
    "node-sass": "^4.14.1",
    "preact-cli": "^3.0.0",
    "sass-loader": "^10.0.2",
    "sirv-cli": "1.0.3"
  },
  "dependencies": {
    "bulma": "^0.9.0",
    "preact": "^10.3.2",
    "preact-render-to-string": "^5.1.4",
    "preact-router": "^3.2.1"
  },
  "jest": {
    "preset": "jest-preset-preact",
    "setupFiles": [
      "<rootDir>/tests/__mocks__/browserMocks.js",
      "<rootDir>/tests/__mocks__/setupTests.js"
    ]
  }
}

What is the expected behaviour? For the project to be built for production successfully

If this is a feature request, what is motivation or use case for changing the behaviour? N/A

Please mention other relevant information.

× ERROR   Error: undefined:2:86: property missing ':'

  - index.js:62 error
    [npm]/[preact-cli]/[css]/lib/parse/index.js:62:15

  - index.js:224 declaration
    [npm]/[preact-cli]/[css]/lib/parse/index.js:224:33

  - index.js:253 declarations
    [npm]/[preact-cli]/[css]/lib/parse/index.js:253:19

  - index.js:561 rule
    [npm]/[preact-cli]/[css]/lib/parse/index.js:561:21

  - index.js:118 rules
    [npm]/[preact-cli]/[css]/lib/parse/index.js:118:70

  - index.js:81 stylesheet
    [npm]/[preact-cli]/[css]/lib/parse/index.js:81:21

  - index.js:565 Object.module.exports [as parse]
    [npm]/[preact-cli]/[css]/lib/parse/index.js:565:20

  - critters.js:35 parseStylesheet
    [npm]/[preact-cli]/[critters-webpack-plugin]/dist/critters.js:35:16

  - critters.js:440 Critters.<anonymous>
    [npm]/[preact-cli]/[critters-webpack-plugin]/dist/critters.js:440:19

  - new Promise

  - critters.js:424 Critters.processStyle
    [npm]/[preact-cli]/[critters-webpack-plugin]/dist/critters.js:424:12

  - critters.js:233
    [npm]/[preact-cli]/[critters-webpack-plugin]/dist/critters.js:233:76

  - Array.map

  - critters.js:233 Critters.$If_3
    [npm]/[preact-cli]/[critters-webpack-plugin]/dist/critters.js:233:39

  - critters.js:223 Critters.<anonymous>
    [npm]/[preact-cli]/[critters-webpack-plugin]/dist/critters.js:223:34


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! rest-countries-api-preact@0.0.0 build: `preact build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the rest-countries-api-preact@0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Please paste the results of preact info here.

Environment Info:
  System:
    OS: Windows 10 10.0.18363
    CPU: (12) x64 AMD Ryzen 5 1600 Six-Core Processor
  Binaries:
    Node: 12.16.1 - C:\Program Files\nodejs\node.EXE
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.18362.449.0)
  npmPackages:
    preact: ^10.3.2 => 10.4.8
    preact-cli: ^3.0.0 => 3.0.1
    preact-render-to-string: ^5.1.4 => 5.1.10
    preact-router: ^3.2.1 => 3.2.1

[Plumpernickel]

Thanks @RyanChristian4427, that was the culprit. Here is the actual import, it’s a google fonts URL:

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;600;800&display=swap');

[rschristian]

I’ll try to track down the exact source, but in the meantime, it seems this issue is due to that font import. Commenting it out gets rid of the error.