1 reply
3 replies
Hello,
I created a css minifier that works off of the commandline using a tutorial at DO last year. It has been brought to my attention that when the css files are combined and ran through using the following command that custom properties completely disappear.
example:
:root {
/* Site Colors are HSL values */
--black: 0, 0%, 0%;
}There is no reference to --black inside the output of the following command so we get black not defined errors in chrome css tab
The Command:
postcss --config /var/www/minify.server/html/postcss-config.json --use postcss-cssnext --use cssnano --no-map --output /tmp/AE6ED53C-2303-4260-B4FD463925159A22-output.txt /tmp/AE6ED53C-2303-4260-B4FD463925159A22.txtHere is postcss.config.js (Which now that I am typing this I do not think it is used via the command unless it is auto-included)
module.exports = {
plugins: [
require('cssnano')({
preset: 'default',
}),
postcssCustomProperties({
preserve: true
})
],
};Here is package.json
{
"devDependencies": {
"cssnano": "^5.0.15",
"postcss": "^8.4.5",
"postcss-cli": "^9.1.0",
"postcss-cssnext": "^3.1.1",
"postcss-custom-properties": "^12.1.8",
"postcss-import": "^14.0.2"
}
}Here is postcss.config.json
{
"use": ["postcss-cssnext", "cssnano"]
}I am a bit over my head here and would appreciate some guidance on why the custom properties disappear and what I need to look into to get the custom properties back.
I have seen a few posts mention: postcss-custom-properties and postcss-preset-env but I am not 100% if those would solve the problem I am having.
Thank You.
3 replies
Hello! I want to use postcss to compile scss to css at my React project. Currently getting the error: CssSyntaxError: postcss-advanced-variables: C:....\node_modules\bootstrap\scss_functions.scss: Could not resolve the variable... I attach error from terminal (with package.json script underlined) and config file.
Could you please help me, what is happenning? Thanks in advance!
dead" when i try to build my project.My question is how to fix this error without having to navigate into /node_module/thepackage/package.json and delete browserlist field
1 reply
7 replies
@layer would be appreciated: https://github.com/postcss/postcss-import/pull/496#issuecomment-1214216740
1 reply
TLDR: I'm trying to use postcss-scss to resolve a SyntaxError related to // backslash comments, but it doesn't seem to be working.
Here's my postcss.config.js
module.exports = {
syntax: 'postcss-scss',
plugins: [
require('tailwindcss'),
require('autoprefixer'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}When I run yarn run tailwindcss -i ./app/assets/packs/styles/application.scss -o ./tailwind-output.css, I get the following error:
/Users/me/Workspace/project/node_modules/postcss/lib/input.js:148
result = new CssSyntaxError(
^
CssSyntaxError: /Users/me/Workspace/project/app/assets/packs/styles/application.scss:8:1: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parserThe line it's referring to is a // comment.
2 replies
tailwind doesn't look at it. I just added a bunch of non-sense code that would produce an error and it wasnt reported
--postcss option on the command line and point directly to the config file
hey, I'm trying to write a custom plugin to rename any class, but I can't see any changes when I'm looking at the result.css property. This is my code:
const postcss = require('postcss');
const selectorParser = require('postcss-selector-parser');
const cssContent = readFileSync(cssFileName, 'utf-8');
const transform = (selectors) => {
selectors.walkClasses((node) => {
node.value = `foo_${node.value}`
})
};
const selectorProcessor = selectorParser(transform);
const postCssPlugin = () => ({
postcssPlugin: 'bar',
Rule (rule) {
selectorProcessor.processSync(rule);
},
});
postCssPlugin.postcss = true;
const result = postcss([postCssPlugin()]).process(cssContent, { from: undefined }).css;Does anyone knows why my plugin does nothing?
3 replies
Does anyone know how to solve this problem? italia/design-react-kit#862, I'm facing the same issue
Anyone can help me? I'm still stuck here
1 reply
Hi, for last 2 days I'm struggling with Storybook, trying to run the PostCss plugins the same way as I do in webpack. I've found very little comments about this.
This one seems to be close to what I need, but sadly, it doesn't work as well https://github.com/storybookjs/addon-postcss/issues/27#issuecomment-1015781423
Has any of you experienced similar problems?
package.json
...
"@storybook/addon-postcss": "^2.0.0",
"@storybook/builder-webpack5": "^6.5.13",
"@storybook/preset-scss": "^1.0.3",
...
"postcss": "^8.4.18",
"postcss-loader": "^7.0.1",
"postcss-preset-env": "^7.8.2",
...
"sass": "^1.32.5",
"sass-loader": "^13.1.0",
...
"webpack": "^5.17.0",
...postcss.config.js
const postcssGenerateBreakpoints = require('./styles/global/config/breakpoints.postcss') // custom plugin
const postcssPresetEnv = require('postcss-preset-env')
module.exports = {
plugins: [
postcssGenerateBreakpoints,
postcssPresetEnv({
autoprefixer: { grid: 'no-autoplace' },
features: {
'focus-within-pseudo-class': false
}
})
]
}.storybook/main.js
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const postcssGenerateBreakpoints = require('../styles/global/config/breakpoints.postcss')
const postcssPresetEnv = require('postcss-preset-env')
module.exports = {
"stories": ["../app/**/*.stories.@(js|jsx|ts|tsx|mdx)", "../styles/**/*.stories.@(mdx)"],
"addons": [
"@storybook/preset-scss",
// TODO - This doesn't work :( the plugins aren't loaded
{
name: '@storybook/addon-postcss',
options: {
postcssLoaderOptions: {
implementation: require('postcss'),
postcssOptions: {
plugins: [
postcssGenerateBreakpoints,
postcssPresetEnv({
autoprefixer: { grid: 'no-autoplace' },
features: {
'focus-within-pseudo-class': false
}
})
],
},
},
cssLoaderOptions: { importLoaders: 2 },
},
},
"@storybook/addon-links",
"@storybook/addon-essentials"
],
core: {
builder: "webpack5"
},
webpackFinal: async (config) => {
config.resolve.plugins = [
...(config.resolve.plugins || []),
new TsconfigPathsPlugin({
extensions: config.resolve.extensions,
}),
];
return config;
}
};Thank you! 🙏
2 replies
Hey guys,
I've got a Meteor ReactJS project.
I'm running https://atmospherejs.com/juliancwirko/postcss
So inside my package.json I have
"devDependencies": {
"autoprefixer": "^10.4.13",
"postcss": "^8.4.19",
"postcss-easy-import": "^4.0.0",
"postcss-load-config": "^4.0.1"
},
"postcss": {
"plugins": {
"postcss-easy-import": {},
"postcss-meteor-root-url": {},
"autoprefixer": {}
}
},My page is at
example.com/foo/bar
and I need the image (in the compiled CSS) to say.foo { background-image: url(../../images/icons/error.svg) !important; }
The most basic thing ever right? Go to the root URL then images.
But nomatter what I put in the .scss (any of these)
.foo { background-image: url(../../images/icons/error.svg) !important; }
.foo { background-image: url('../../images/icons/error.svg') !important; }
.foo { background-image: url("../../images/icons/error.svg") !important; }
.foo { background-image: url("/../../images/icons/error.svg") !important; }
.foo { background-image: url(/../../images/icons/error.svg) !important; }
.foo { background-image: url(../../../../../../../../../../images/icons/error.svg) !important; }
.foo { background-image: url("../../../../../../../../../../images/icons/error.svg") !important; }
It always gets compiled as.foo { background-image: url("images/icons/error.svg") !important; }
And even in my plugin, if I do this
Declaration: {
'background-image': (decl, postcss) => decl.value = 'url(dog.svg)'
}That works, it comes out in the browser as.foo { background-image: url("dog.svg") !important; }
But if I do thisdecl.value = 'url(../images/icons/dog.svg)';
It comes out in the browser as.foo { background-image: url("images/icons/dog.svg") !important; }
I've tried setting my plugin postcss-meteor-root-url as the last plugin in package.json
"postcss": {
"plugins": {
"postcss-easy-import": {},
"autoprefixer": {},
"postcss-meteor-root-url": {}
}
},===================================
Obviously if I can make it work without a plugin, with the fastest most efficient compilation possible that is preferable.
I'm more than happy to make my plugin correct the relative paths.
The problem I'm having is postcss destroys the relative path prefix ../ regardless of my plugins returned value, and it's making postcss completely unusable.
Any help will be much appreciated.
===================
PS.1:
By the way, can I somehow specify the path to my local (not public) plugin?
Do I need to specify how to find my plugin somehow inside package.json?
Currently I put my plugin at server/imports/postcss-meteor-root-url and them I symlinked to that dir from inside node_modules
(just temporarily while testing my plugin and postcss finds and runs my plugin fine)
Of course npm destroys my symlink any time NPM adds/removes etc any package, so the symlink from inside node_modules is obviously not a permanent solution.
========================
PS.2: I'd probably prefer to use my own plugin rather than using the complicated postcss-url plugin.
But in an attempt to get it working, I have tried installing postcss-url (without changing my .scss) and it didn't have any noticable effect whatsoever.
Maybe I'm doing it wrong.
I tried running postcss-url without any options, and I also tried putting these options inside the package.json postcss.plugins object, like this
"postcss": {
"plugins": {
"postcss-easy-import": {},
"autoprefixer": {},
}
},========================
Anyway, any help will be much appreciated!!!
Hmm, I found this page where people thought (totally unrelated) postcss-loader was changing the URL paths.
webpack-contrib/postcss-loader#500
And people were saying it's not that, it's some minifier.
So I did this
$ meteor remove standard-minifier-css
Changes to your project's package version selections:
minifier-css removed from your project
standard-minifier-css removed from your project
standard-minifier-css: removed dependencyAnd magically it's working now... but now the image has been inline'd into the CSS, which I don't want.
Haha, anyway, just sharing the update. I'm still investigating.
standard-minifier-css was solving something, but then postcss isn't running at all.Because running postcss is one of the functions of
standard-minifier-css So I've had to re-add standard-minifier-css so the problem is back.https://docs.meteor.com/packages/standard-minifier-css.html
images/ and not // and then it replaces the /images with https://example.com/images/ and postcss or the minifier or whatever doesn't butcher that absolute URL.