syntax error

[alibaba]

syntax error

[MarcM0]

Now that I think about it, I'm not sure this UI change was intentional,

It seems than index.css has a syntax error (I get this message when I run "npm run build")

[akai]

Yes, the beta version has a new UI. If you want to change the style, you can use the less variable. see https://chatui.io/docs/customize-theme

[akai]

Now that I think about it, I'm not sure this UI change was intentional,

It seems than index.css has a syntax error (I get this message when I run "npm run build")

Which version is this?

[MarcM0]

Yes, the beta version has a new UI. If you want to change the style, you can use the less variable. see https://chatui.io/docs/customize-theme

Yes but the problem is, the text on primary buttons is gray-1 which means that for any darker brand colour, I would have to set gray-1 = #fff for the buttons to be legible, which would probably cause alot of other stuff to break

[MarcM0]

Now that I think about it, I'm not sure this UI change was intentional,

It seems than index.css has a syntax error (I get this message when I run "npm run build")

Which version is this?

I've tried both 1.0.0-beta.5 and 1.0.0-beta.4 and it happened on both. I have not tried the other betas

[akai]

Yes, the beta version has a new UI. If you want to change the style, you can use the less variable. see https://chatui.io/docs/customize-theme

Yes but the problem is, the text on primary buttons is gray-1 which means that for any darker brand colour, I would have to set gray-1 = #fff for the buttons to be legible, which would probably cause alot of other stuff to break

I mean you can modify the less variable, like:

@btn-primary-color: #fff;

[akai]

Now that I think about it, I'm not sure this UI change was intentional,

It seems than index.css has a syntax error (I get this message when I run "npm run build")

This seems to be a problem with the postcss plugin, see：facebook/create-react-app#10095

or you can import less file:

import '@chatui/core/es/styles/index.less';

[MarcM0]

Now that I think about it, I'm not sure this UI change was intentional,

It seems than index.css has a syntax error (I get this message when I run "npm run build")

This seems to be a problem with the postcss plugin, see：facebook/create-react-app#10095

or you can import less file:

import '@chatui/core/es/styles/index.less';

the less file doesn't get rid of the error (and it can't replace index.css as far as I can tell). As for the postcss solutions, I don't think npm has an equivalent for resolutions.
edit: I found a way to do resolutions but it still didn't fix the problem

[MarcM0]

just to be clear, I don't get this error in 0.3.3

[akai]

Can you show me the package.json file? the 0.3.3 and beta project

[MarcM0]

[image]

[akai]

v1.0.0-beta.5 has this line of code causing the error:

.ScrollView--fullWidth{margin:0 calc(var(--gutter)*-1)}

You can upgrade postcss-custom-properties to solve

    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
+  },
+  "resolutions": {
+    "postcss-custom-properties": "^11.0.0"
+  },
+  "devDependencies": {
+    "postcss-custom-properties": "^11.0.0"
  }

and npm i

[MarcM0]

I still get the same error when I npm run build, I even tried npm ci after the npm i

[akai]

I used create-react-app to build a new project. The same error occurred at the beginning, but after upgrading postcss-custom-properties, it worked. You can try to delete node_modules and try again

[akai]

or you can import the less file, by https://stackoverflow.com/questions/63386654/using-less-css-with-the-latest-create-react-app or https://dev.to/joefstack/how-to-setup-less-with-react-without-ejecting-1nej

[MarcM0]

I went with the less method, I also had to install less-plugin-import-node-modules to import from chatui into my own less file so I could change the button colour.

[franva]

postcss-custom-properties

Hi @akai What is the solution section in the package.json?
I searched and found it's just for yarn.
Do I have to use yarn to solve this issue?