Invalid CSS in #230 #3
Comments
|
Hey, thank you for checking it out! Postcss-calc has an error in its parser that's being worked on. You can see details here: The "fix" is to disabled postcss's calc parsing until their bug is fixed, per this comment here: The package.json diff looks something like this: If you still run into trouble after that, please let me know. Thanks again! |
|
Hi @James0x57. |
|
Hello @HZooly, The work around will be to avoid minification of the augmented-ui CSS file until postcss is fixed. I am not familiar with GatsbyJS and wasn't able to find information on customizing that aspect of the build process, but if you have a repo/branch I can check out, and steps to reproduce the issue, I will try to create a work around. (and please feel free to open a new issue with a link to that project if you have it) Thank you, |
|
Thanks for your fast answer! In a Gatsby page, I imported CSS of Augmented UI : With
module.exports = () => ({
plugins: [
require('tailwindcss'),
require('cssnano')({
preset: [
'default', {
calc: false
}
]
})
],
})
{
"name": "...",
"cssnano": {
"preset": [
"default",
{
"calc": false
}
]
}
}I tried to override cssnano config with const defaultPreset = require('cssnano-preset-default');
module.exports = defaultPreset({
calc: false
});But nothing of these actions made build work. |
|
I am having the same issue, I have tried many things. Did anyone figure this out? |
|
@galipmedia For React you have to copy the This avoids the buggy parsing in the Post CSS ecosystem. You can read more about using the public folder here: https://create-react-app.dev/docs/using-the-public-folder/ You can read more about the Post CSS bug here (issue has been open for about 1 year): postcss/postcss-calc#77 You can read more about the cssnano bug here (solved, but there hasn't been a release in over a year): cssnano/cssnano#822 |
|
@James0x57 thanks, that's what I ended up doing. |
|
We managed to overcome this in Gatsby by modifying the WebpackConfig in In the root dir, make a file called exports.onCreateWebpackConfig = ({ actions, stage, getConfig }) => {
// only run on build-javascript stage
if (stage === 'build-javascript') {
// get current webpack config
const config = getConfig()
// find the minimizer
const minimizer = config.optimization.minimizer.findIndex(_ => _.constructor.name === 'CssMinimizerPlugin')
// if it doesn't exist, return
if (minimizer === -1) return console.log('⚠️ - Could not find CSS minimizer')
// disable the calc option
config.optimization.minimizer[minimizer].options.minimizerOptions.preset[1].calc = false
// replace the webpack config with the modified object
actions.replaceWebpackConfig(config)
}
}ref: gatsby/src/utils/webpack.config.js#L743 Appologies for digging up an old issue, I hope this helps someone! |
Love augmented-ui so far. However, I'm using it in a Heroku build (React) and I'm getting a parsing error. Deployment to Netlify and AWS produced the same error.
Line 230:
--aug-_TOriginX: calc(var(--aug-t-origin-x, calc(var(--aug-_TlJoinRX, 0px) / 2 + var(--aug-_TrJoinLX, 100%) / 2)) + var(--aug-t-offset, 0px));Heroku Log:
...n-x, calc(var(--aug-_TlJoinRX, 0px)/2 + var(--aug-_TrJoinLX, 100%)/2)) + var(--... ----------------------------------------------------------------------------^ Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN"(For the sake of clarity due to formatting of that code snippet: the log is referencing the second parentheses after the last 2 on line 230).
There are similar lines with deeply nested calc() statements that create the same issue (i.e. 249, 268, 287, 584, 628).
The text was updated successfully, but these errors were encountered: