Polaris-react: css problem

[Ankitjasoliya]

./node_modules/@shopify/polaris/styles.css (./node_modules/css-loader??ref--7-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./node_modules/@shopify/polaris/styles.css)
Unclosed bracket (3803:37)

3801 | background-color:#c4cdd5;
3802 | background-color:var(--progress-upper, #c4cdd5);

3803 | background-image:linear-gradient(to right, transparent 0%, transparent 0%, transparent 100%, transparent 100% transparent;
| ^
3804 | background-image:linear-gradient(to right, var(--progress-lower, transparent) 0%, var(--progress-lower, transparent) var(--Polaris-RangeSlider-progress, 0%), var(--progress-upper, transparent) var(--Polaris-RangeSlider-progress, 100%), var(--progress-upper, transparent) 100%);
3805 | border:none;
3806 | border-radius:0.4rem; }

[fchienvuhoang]

maybe related #440

[solonaarmstrong-zz]

Hi @Ankitjasoliya. Would you be able to provide some more details about this error? Where are you seeing it? What steps can we take to reproduce it?

[Ankitjasoliya]

Hi solonaarmstrong,

Thanks for the reply

After Node Module Install I will load style.css throw error for (Unclosed bracket (3803:37)) in React Module

Thanks
Ankit

[solonaarmstrong-zz]

Which version of Polaris are you using? How are you importing the css?

These specifications in the issue template are helpful for us:

Specifications

• Are you using the React components? (Y/N):
• Polaris version number:
• Browser:
• Device:
• Operating System:

[Ankitjasoliya]

Which version of Polaris are you using? How are you importing the css?
1: version-2.11.0
2: import css : import '@shopify/polaris/styles.css';

These specifications in the issue template are helpful for us:

Specifications
Are you using the React components? (Y/N): Yes
Polaris version number: 2.11.0
Browser:chrome,firefox
Device:Windows PC
Operating System: Windows

[nerfologist]

I'm hitting the same problem now with an application created with create-react-app v2. How to replicate:

npx create-react-app cra2-polaris-bug
cd cra2-polaris-bug
yarn start # everything works fine

yarn add @shopify/polaris
# edit index.js to add the following import
import '@shopify/polaris/styles.css';

yarn start # it crashes

Here's the console listing of the error:

Failed to compile.

./node_modules/@shopify/polaris/styles.css (./node_modules/css-loader??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./node_modules/@shopify/polaris/styles.css)
Unclosed bracket (3792:37)

  3790 |     background-color:#c4cdd5;
  3791 |     background-color:var(--progress-upper, #c4cdd5);
> 3792 |     background-image:linear-gradient(to right, transparent 0%, transparent 0%, transparent 100%, transparent 100% transparent;
       |                                     ^
  3793 |     background-image:linear-gradient(to right, var(--progress-lower, transparent) 0%, var(--progress-lower, transparent) var(--Polaris-RangeSlider-progress, 0%), var(--progress-upper, transparent) var(--Polaris-RangeSlider-progress, 100%), var(--progress-upper, transparent) 100%);
  3794 |     border:none;
  3795 |     border-radius:0.4rem; }

[nerfologist]

Alternate attempt using node-sass and the .scss version of the polaris styles:

yarn add node-sass

# convert the import to the .scss version in index.js
import '@shopify/polaris/styles.scss';

The error is now

Failed to compile.

./node_modules/@shopify/polaris/styles.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!./node_modules/@shopify/polaris/styles.scss)
Unclosed bracket (6782:38)

  6780 |     background-color: #c4cdd5;
  6781 |     background-color: var(--progress-upper, #c4cdd5);
> 6782 |     background-image: linear-gradient(to right, transparent 0%, transparent 0%, transparent 100%, transparent 100% transparent;
       |                                      ^
  6783 |     background-image: linear-gradient(to right, var(--progress-lower, transparent) 0%, var(--progress-lower, transparent) var(--Polaris-RangeSlider-progress, 0%), var(--progress-upper, transparent) var(--Polaris-RangeSlider-progress, 100%), var(--progress-upper, transparent) 100%);
  6784 |     border: none;
  6785 |     border-radius: 0.4rem; }

[solonaarmstrong-zz]

@nerfologist Thank you for the details on how to reproduce. I see the problem now and we're working on a fix.

[CodeStrumpet]

I ran into this as well. My temporary workaround is to use node-sass as @nerfologist described and comment out the full @include range-track-selectors block in the file:

node_modules/@shopify/polaris/styles/components/RangeSlider/RangeSlider.scss.

[cdavid15]

We've hit this exact same issue now related to the upgrade of react-scripts to v2.0.4

[solonaarmstrong-zz]

Apologies for the issue. I have a fix and it will be released soon. I will post an update here.

[BPScott]

Hi there folks. After a morning of node_modules spelunking I think we have gotten to the bottom of this.

create-react-app v2 includes postcss-preset-env which is a neat little tool that transpiles some of your CSS for support in older browsers. Unfortunately the transform that it uses for custom-properties has a bug in it where it doesn't work if you have multiple custom properties inside a linear gradient. Guess what we have inside the RangeSlider? Yep, multiple custom-properties inside a linear gradient.

We believe we've discovered another way of expressing what we want to do that will correctly transpile in spite of the above bug.

Until we release a new version of Polaris, I suggest you disable the custom-properties transpilation by installing react-app-rewired and react-app-rewire-postcss. These two plugins will allow you to customize your postcss webpack config without ejecting. Your config-overrides.js would look something like this:

module.exports = config => {
  require('react-app-rewire-postcss')(config, {
    plugins: loader => [
      require('postcss-flexbugs-fixes'),
      require('postcss-preset-env')({
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 3,
        // This is the one line that is different from the built-in config
        features: { 'custom-properties': false}
      }),
    ]
  });

  return config;
};

[mbaumbach]

@solonaarmstrong @BPScott Any plans to release a point release of Polaris 2.12 with this fix?

[BPScott]

No plans on a 2.12 as we've been prepping for v3.0 which we're hoping to release within the next week

[mbaumbach]

Thanks for the update @BPScott, sounds good on the 3.0 release. (and good luck on it!)

[BPScott]

Looks like you don't need to wait on us. postcss-custom-properties has just released a new version that fixes the bug that triggered this. Update to postcss-custom-properties v8.0.9 (as per https://github.com/postcss/postcss-custom-properties/issues/150) and the problem should go away.

[jonathantneal]

I’m sorry I didn’t have more free time to look at the issue when it was reported. As mentioned, it’s been fixed in PostCSS Custom Properties and a new patch release is published. This was taken into PostCSS Preset Env and from that a new patch release is published.

[BPScott]

Not a problem @jonathantneal. We're all busy and deserving of downtime.

[mbaumbach]

I can confirm that latest postcss-custom-properties upgrade + Polaris work fine now. I'm running Create React App 2.1.1 and Polaris 2.12.1 without issue now.

If you're still having issues, you might need to delete your node_modules and (package|yarn).lock file. That will likely result in additional dependencies being upgraded though, so keep that mind.

Thanks for the update @BPScott.

[MeloWise5]

I am using polaris 4.6.1 with node.js 10.16.3
I am following this tutorial from shopify.
https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/build-your-user-interface-with-polaris

The code works fine until I add this line

import '@shopify/polaris/styles.css';

When I run the dev. I get the following error.

./node_modules/@shopify/polaris/styles.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
:root{
| --polaris-version-number:'4.6.1'; }

[mattsrobot]

I also get the following error:

[ error ] ./node_modules/@shopify/polaris/styles.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> :root{
|   --polaris-version-number:'4.7.0'; }

[fernandocastillo]

You have to use this plugin in order to use css files in nextjs:

https://github.com/zeit/next-plugins/tree/master/packages/next-css

Additionally add webpack (if is not currently added).

Finally create a next.config.js in your root folder:

const withCSS = require('@zeit/next-css');
const webpack = require('webpack');

module.exports = withCSS({
    webpack: (config)=>{
        //Additional example to use environment variables with webpack
        //const env = { API_KEY: apikey };
        //config.plugins.push(new webpack.DefinePlugin(env));
        return config;
    },
})