$popover-arrow-width SCSS variable in shards.css file

[hansy]

I kept receiving parsing errors when trying to import styles in a Node project. These lines might be the culprit:

shards-ui/dist/css/shards.css

Lines 3973 to 3979 in bab8f42

	.popover .arrow::before {
	border-width: calc($popover-arrow-width + 1px);
	}
	.popover .arrow::after {
	border-width: calc($popover-arrow-width + 1px);
	}

[hisk]

@hansy Can you please provide more details about your current setup? What version of Node are you using and what errors are you receiving?

[hansy]

Of course. Actually (I apologize), I'm using Nuxt v1.40, which is basically Vue.js.

Everything is the default configuration except that I included the use of the SASS preprocessor (yarn add node-sass sass-loader), and added a root .scss path to nuxt.config.js:

// nuxt.config.js

module.exports = {
  // ... default config
  css: [
    '@/assets/scss/index.scss',
  ],
}

My /assets/scss/index.scss is:

@import 'bootstrap/scss/bootstrap.scss';
@import 'shards-ui/dist/css/shards.min.css';

This fails with:

Module build failed: Error: Lexical error on line 1. Unrecognized text.
$popover-arrow-width
^
    at Parser.parseError (/Users/hansy/Dropbox/projects/project/landing/node_modules/postcss-calc/node_modules/reduce-css-calc/dist/parser.js:160:21)
    at Object.parseError (/Users/hansy/Dropbox/projects/project/landing/node_modules/postcss-calc/node_modules/reduce-css-calc/dist/parser.js:309:28)
    at Object.next (/Users/hansy/Dropbox/projects/project/landing/node_modules/postcss-calc/node_modules/reduce-css-calc/dist/parser.js:564:25)
    at Object.lex (/Users/hansy/Dropbox/projects/project/landing/node_modules/postcss-calc/node_modules/reduce-css-calc/dist/parser.js:574:22)
    at lex (/Users/hansy/Dropbox/projects/project/landing/node_modules/postcss-calc/node_modules/reduce-css-calc/dist/parser.js:196:27)
    at Parser.parse (/Users/hansy/Dropbox/projects/project/landing/node_modules/postcss-calc/node_modules/reduce-css-calc/dist/parser.js:209:26)
    at /Users/hansy/Dropbox/projects/project/landing/node_modules/postcss-calc/node_modules/reduce-css-calc/dist/index.js:35:30
    at walk (/Users/hansy/Dropbox/projects/project/landing/node_modules/postcss-value-parser/lib/walk.js:15:13)
    at ValueParser.walk (/Users/hansy/Dropbox/projects/project/landing/node_modules/postcss-value-parser/lib/index.js:18:5)
    at exports.default (/Users/hansy/Dropbox/projects/project/landing/node_modules/postcss-calc/node_modules/reduce-css-calc/dist/index.js:29:51)
    at transformValue (/Users/hansy/Dropbox/projects/project/landing/node_modules/postcss-calc/dist/lib/transform.js:24:45)
    at exports.default (/Users/hansy/Dropbox/projects/project/landing/node_modules/postcss-calc/dist/lib/transform.js:54:100)
    at /Users/hansy/Dropbox/projects/project/landing/node_modules/postcss-calc/dist/index.js:28:52
    at /Users/hansy/Dropbox/projects/project/landing/node_modules/postcss/lib/container.js:144:26
    at Rule.each (/Users/hansy/Dropbox/projects/project/landing/node_modules/postcss/lib/container.js:110:22)
    at Rule.walk (/Users/hansy/Dropbox/projects/project/landing/node_modules/postcss/lib/container.js:143:21)

 @ ./assets/scss/index.scss 4:14-200 13:3-17:5 14:22-208
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

Commenting out the shards import statement "resolves" the error.

[hisk]

@hansy Great find! The $popover-arrow-width is not interpolated properly in the dist Shards CSS files and therefore the css-loader cannot parse it as it's not valid CSS.

shards-ui/src/scss/_variables.scss

Line 759 in 3fe228e

$popover-arrow-outer-width: calc($popover-arrow-width + 1px) !default;

I'll push the fix for this bug in the 2.0.3 patch which will be published in the following days or Monday at the latest. Until then, a quick fix would be to recompile the shards.scss main file and override the $popover-arrow-width variable like so:

 $popover-arrow-outer-width: $popover-arrow-width + 1;

Sorry for the inconvenience and thank you for reporting this bug. 😃