New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.
Already on GitHub?
Sign in
to your account
Closed
1ike opened this issue
Apr 9, 2017
· 4 comments
Comments
In simple example it work as sample from readme
"cat style.css | postcss -u cssnano > output.css"
and also as
"cat style.css | postcss -u cssnano -o output.css
With more complex string
"postcss -u autoprefixer < style.css | postcss -u cssnano > style.css"
catch error «Input Error: Did not receive any STDIN».
But "postcss -u autoprefixer < style.css | postcss -u cssnano -o style.css"
still working.
Features:
- STDOUT working (
"postcss -u autoprefixer < style.css"
show printout); - switch places for autoprefixer and cssnano does not matter;
- windows or ubuntu does not matter.
- "postcss -u autoprefixer < style.css | postcss -u cssnano > style.css" + "cat style.css | postcss -u autoprefixer | postcss -u cssnano -o style.css"
Why not simply cat style.css | postcss -u autoprefixer -u cssnano -o style.css
? 😛
You are not writing to STOUT and pipe the result from the first run to the next
@discodanser If you’re trying to edit your file in place, just use the --replace
(-r
) option:
postcss style.css -u autoprefixer cssnano -r
michael-ciniawsky, RyanZim
Thnx, that is much better.
Before that I used separately
postcss style.css -u autoprefixer -r
postcss style.css -u cssnano -r
But it was not cool of course.
Question appeared when I found answer from SO. And wonder why it does not work for me.
@discodanser That SO thread was written before postcss-cli v3 was released.
Going to close this out since it seems this is a usage issue.
Содержание
- Fix Cannot find module postcss-html/extract error #76
- Comments
- Gulp > Error: Cannot find module ‘postcss’ #77
- Comments
- Execution Failure with «npm run serve» — Cannot Find Module «postcss» #3990
- Comments
- Version
- Reproduction link
- Environment info
- Steps to reproduce
- What is expected?
- What is actually happening?
- Footer
- «Plugin error: Cannot find module». Can’t get CLI options to work for me. #149
- Comments
- Error: Cannot find module ‘postcss-flexbugs-fixes’ after upgrading to 9.3.4 #11783
- Comments
- Describe the bug
- To Reproduce
- Expected behavior
Open a markdown file (empty or with content) and receive an error.
What code is needed to reproduce the bug?
Just a markdown file.
What stylelint configuration is needed to reproduce the bug?
Looking at the trace, I don’t think it matters, but I can provide my stylelint config if needed.
Which version of stylelint are you using?
How are you running stylelint: CLI, PostCSS plugin, Node.js API?
What did you expect to happen?
With the old shinnn VSCode plugin, and version 11.0 of stylelint, I had no errors.
What actually happened (e.g. what warnings or errors did you get)?
VSCode reports the following error:
Edit: Might this issue make more sense in the extension’s repository?
The text was updated successfully, but these errors were encountered:
Edit: Might this issue make more sense in the extension’s repository?
Yes, I’ll transfer the issue as I can’t replicate the problem using the CLI.
I’m unable to reproduce this locally. Are you still having the issue with the latest versions of stylelint and the extension?
I’ll check when I have access to that laptop again, next week.
I have the same issue in Markdown and SCSS files, with latest stylelint and stylelint vscode plugin:
stylelint 13.2.1
stylelint vscode 0.83.0
vscode 1.43.0
When saving Markdown files:
When saving SCSS files:
When I do npm install:
When I do npm list postcss:
I solved the issue by rm node_modules package-lock.json && npm install . After that, some postcss packages are installed and updated. I don’t know why.
I had tried that and it didn’t work for me. I could try again when I get back. It seemed to be an issue with guocong3000’s not maintained (recently) postcss-markdown, if I remember.
It seemed to be an issue with guocong3000’s not maintained (recently) postcss-markdown, if I remember.
If it is, then we can address that in our fork.
I had to downgrade to v0.70.0 to fix the problem. It looks like v0.71.0 and later are affected. Removing node_modules and package-lock.json , and running npm i did not fix the problem.
I am still getting this error. Any update on this?
Sorry for late reply.
(I’m currently busy with another job and can’t contribute much to this project.)
I can’t reproduce this issue. Would you share your repository to reproduce the this problem?
(Also include the lock file.)
I just tried to reproduce it on a new project without any success. But I managed to solve it in one of my projects.
Here is what I did:
- Uninstall prettier-stylelint
npm rm prettier-stylelint
Don’t know why I installed this, but this package seems to install an older version of postcss-html . - rm -rf node_modules package-lock.json && npm install just like @guoyunhe described.
After that the error message for Markdown files and Vue files is gone.
Источник
Gulp > Error: Cannot find module ‘postcss’ #77
Gulp > Error: Cannot find module ‘postcss’
.
schmendrick:site marc$ gulp
[16:11:09] Using gulpfile
/Sites/NYCompost/site/gulpfile.js
[16:11:09] Starting ‘clean’.
[16:11:09] Finished ‘clean’ after 12 ms
[16:11:09] Starting ‘default’.
[16:11:09] Starting ‘styles’.
[16:11:14] ‘styles’ errored after 4.49 s
[16:11:14] Error: Cannot find module ‘postcss’
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:278:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (/Users/marc/Sites/NYCompost/site/node_modules/gulp-autoprefixer/node_modules/autoprefixer-core/lib/autoprefixer.js:6:13)
at Object. (/Users/marc/Sites/NYCompost/site/node_modules/gulp-autoprefixer/node_modules/autoprefixer-core/lib/autoprefixer.js:111:4)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
[16:11:14] ‘default’ errored after 4.5 s
[16:11:14] Error: [object Object]
at formatError (/usr/local/lib/node_modules/gulp/bin/gulp.js:169:10)
at Gulp. (/usr/local/lib/node_modules/gulp/bin/gulp.js:195:15)
at Gulp.emit (events.js:129:20)
at Gulp.Orchestrator._emitTaskDone (/Users/marc/Sites/NYCompost/site/node_modules/gulp/node_modules/orchestrator/index.js:264:8)
at /Users/marc/Sites/NYCompost/site/node_modules/gulp/node_modules/orchestrator/index.js:275:23
at finish (/Users/marc/Sites/NYCompost/site/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:21:8)
at cb (/Users/marc/Sites/NYCompost/site/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:29:3)
at finish (/Users/marc/Sites/NYCompost/site/node_modules/run-sequence/index.js:38:5)
at Gulp.onError (/Users/marc/Sites/NYCompost/site/node_modules/run-sequence/index.js:45:4)
at Gulp.emit (events.js:129:20)
[16:11:15] gulp-ruby-sass: directory
[16:11:18] gulp-ruby-sass: write components.css
write components.css.map
[16:11:22] gulp-ruby-sass: write main.css
write main.css.map
The text was updated successfully, but these errors were encountered:
I believe it might be because of your other issue #76.
Hey @mashcode did you manage to get it working?
Hey @mashcode did you manage to get it working?
I wish. I’m using the generator to scaffold three to four small Jekyll projects. The good news? I’ll be knee deep and fix it
�
Reply to this email directly or view it on GitHub.
This does look like an all-day npm installation issue isn’t it? Try re-running npm install yourself, does that result in anything?
Yes, this is just a broken npm install , try running it again.
Источник
Execution Failure with «npm run serve» — Cannot Find Module «postcss» #3990
Version
Reproduction link
Environment info
Steps to reproduce
- Create a new project with vue create myApp.
- Selected default preset.
- cd into the project directory.
- Run npm run serve => Error:
What is expected?
Expected CLI to start local dev server
What is actually happening?
Getting this error whenever I try to run npm run serve
I’ve uninstalled and reinstalled the @vue/cli as well as tried deleting and recreating the project directory.
I have done no customization to this project. It should work as it has every time in the past.
The text was updated successfully, but these errors were encountered:
Can’t reproduce with the provided reproduction repository.
Thanks for trying @sodatea . After deleting and reinstalling the «node_modules» folder of an older project and running the local server I got the same error.
I couldn’t find any help on the net related to my issue but I remembered installing the «@vue/cli-service-global» a short while ago. I uninstalled that as well as uninstalled and reinstalled Node and the Vue CLI then created a new project and it all seems to be working now. Didn’t pinpoint whether it was vue-service-global or Node, or both (as I removed them at the same time), but it’s working again!
© 2023 GitHub, Inc.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Источник
«Plugin error: Cannot find module». Can’t get CLI options to work for me. #149
I’ve gone through many different combinations of config and terminal commands and I’m not able to get PostCSS CLI to work. I’ve tried these commands:
postcss -c config/postcss.config.js -u postcss-cssnext —dir dist/css src/client/css/*.css
postcss -u postcss-cssnext —dir dist/css src/client/css/*.css
Any ideas ? I’m a bit frustrated — between PostCSS, PostCSS-CLI, and other plugin pages they each suggest different config and methods, none of which have worked for me.
The text was updated successfully, but these errors were encountered:
Either use postcss.config.js or -u both together doesn’t/shouldn’t work 🙂
postcss.config.js
Which module isn’t found ? This normally indicates a dependency (e.g plugin) is missing 😛
Thanks for the info!
OK, I tried the -c and -u options each separately, and still get errors.
When I run postcss -c postcss.config.js , I get the error:
✖ Input Error: Did not receive any STDIN
When I run postcss -u postcss-postcssnext , I get the error:
✖ Plugin Error: Cannot find module ‘postcss-postcssnext’
Since postcss-postcssnext is in my package.json.devDependencies , I’m not sure how else to register the plugin with PostCSS ?
✖ Input Error: Did not receive any STDIN
File I/O needs to be exclusively provided via CLI only, (not in postcss.config.js )
You only need -c|—config if you store the config in a ‘nested’ folder e.g .config [or have multiple ones]
postcss.config.js lookup always starts from dirname(file) and uses the first config found, stops at os.homedir() (Config Cascade). It’s recommended to simply place the config in ‘./’ and forget about it 🙂
✖ Plugin Error: Cannot find module ‘postcss-postcssnext’
‘postcss-postcssnext’ should be ‘postcss-cssnext’ ? Could you with another plugin e.g postcss-nested and see if this is a bug (prepend of postcss- etc) ?
Thanks very much for your detailed response! I was able to get it working because of your guide :). Regarding your last line, I don’t think it is a bug, rather a typo.
I used this command
postcss src/client/css/*.css —dir dist/css —config config/postcss.config.js
with this config
However I do get a warning about autoprefixer duplicates? I didn’t think any of the above plugins also included autoprefixer :
Warning: postcss-cssnext found a duplicate plugin (‘autoprefixer’) in your postcss plugins. This might be inefficient. You should remove ‘autoprefixer’ from your postcss plugin list since it’s already included by postcss-cssnext.
Very happy this is working now :). One last question, when is it necessary to apply the —use flag? From my reading I saw that some plugins (like cssnext ) just run automatically in order, and others need to be invoked with a —use flag. Is this correct, if not how is this applied ?
Источник
Error: Cannot find module ‘postcss-flexbugs-fixes’ after upgrading to 9.3.4 #11783
Describe the bug
next build fails with the error in the title after updating to 9.3.4 with a custom PostCSS config following the current documentation
To Reproduce
Steps to reproduce the behavior, please provide code snippets or a repository:
- Create a postcss.config.js with the contents specified here
- Update to 9.3.4
- No more builds!
Expected behavior
Documentation needs to be updated with the correct «base» PostCSS config for 9.3.4. I know you apparently removed postcss-flexbugs-fixes , but I have no idea what else might have changed.
The text was updated successfully, but these errors were encountered:
You need to install these dependencies yourself, otherwise you’re relying on an implicit dependency from Next.js. We might need to update the docs to make this more clear.
These aren’t MY dependencies, they’re yours. I wouldn’t have them in this file if you didn’t tell me to.
The moment you reference a dependency in your application configuration like postcss.config.js it’s a dependency of your project.
Definitely can be mentioned in the docs that you have to install it, but you can’t reference internal npm dependencies of other dependencies (like next.js) in a safe way as dependencies can change at any time.
An example would be (generic node.js example), you add fs-extra to your project and then import rimraf without adding it to your dependencies.
If you want to rely on Next.js configuring postcss you don’t add postcss.config.js, otherwise it’s up to you as a user to configure it and add the correct dependencies.
postcss-flexbug-fixes was not removed from Next.js for example.
That’s fair, but the documentation should also be updated when you change something like this. If a user right now goes and follows the advice in your docs, their application will break!
Again, the ideal solution would be to offer a way of extending or importing your base config.
Источник
There is an error with this repository’s Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.
Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.
Hello.
I have a directory, like assets/styles/
, with .pcss
files.
But also I have assets/styles/functions/
directory with .js
files for postcss-functions
.
And I use PostCSS like this:
postcss assets/styles/ -d public/styles/ --base assets/styles/ --ext=css
But I’m getting the error:
CssSyntaxError: /home/alex/Projects/ruby/test/foo_bar/assets/styles/functions/inputs-with-types.js:2:2: Unknown word
1 | function inputsWithTypes(...types) {
> 2 | return types.map(type => `input[type="${type}"]`).join(', ')
| ^
3 | }
4 |
So, I want to exclude this sub-directory from processing or exclude .js
files.
I had installed postcss-cli on location direction.
npm i -D --save-dev postcss-cli
But when I use the postcss.
It was said command not found.
There are popular UX issue:
- User install
postcss-cli
, but forgot to installpostcss
postcss-cli
takes oldpostcss 6
orpostcss 7
from the deep dependencies- User have
true is not a PostCSS plugin
without a good explanation
@RyanZim we can solve this problem by checking PostCSS version in postcss-cli
:
if (parseInt(postcss().version) < 8) { throw new Error('Please install postcss or update it') }
When I try to to prefix a css using the command postcss --use autoprefixer -b 'last 10 versions' style.concat.css -o css/style.prefix.css
, it throws following error.
TypeError: path.replace is not a function
at module.exports (G:sass_course_projectsNatours_Media_Queriesnode_modulesslashindex.js:10:14)
at Array.map (<anonymous>)
at G:sass_course_projectsNatours_Media_Queriesnode_modulespostcss-cliindex.js:66:28
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! natours@1.0.0 prefix:css: `postcss --use autoprefixer -b 'last 10 versions' style.concat.css -o css/style.prefix.css` npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the natours@1.0.0 prefix:css script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in:
npm ERR! C:UsersACERAppDataRoamingnpm-cache_logs2020-12-03T11_27_52_699Z-debug.log
given below is the debug log file content
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'prefix:css'
1 verbose cli ]
2 info using npm@6.14.8
3 info using node@v12.19.0
4 verbose run-script [ 'prefix:css' ]
5 info lifecycle natours@1.0.0~prefix:css: natours@1.0.0
6 verbose lifecycle natours@1.0.0~prefix:css: unsafe-perm in lifecycle true
7 verbose lifecycle natours@1.0.0~prefix:css: PATH: C:Program Filesnodejsnode_modulesnpmnode_modulesnpm-lifecyclenode-gyp-bin;G:sass_course_projectsNatours_Media_Queriesnode_modules.bin;C:Program Files (x86)InteliCLS Client;C:Program FilesInteliCLS Client;C:Windowssystem32;C:Windows;C:WindowsSystem32Wbem;C:WindowsSystem32WindowsPowerShellv1.0;C:Program Files (x86)IntelIntel(R) Management Engine ComponentsDAL;C:Program FilesIntelIntel(R) Management Engine ComponentsDAL;C:Program Files (x86)IntelIntel(R) Management Engine ComponentsIPT;C:Program FilesIntelIntel(R) Management Engine ComponentsIPT;C:Program Files (x86)NVIDIA CorporationPhysXCommon;C:ProgramDataComposerSetupbin;C:Program FilesGitcmd;C:Program Filesnodejs;C:WINDOWSsystem32;C:WINDOWS;C:WINDOWSSystem32Wbem;C:WINDOWSSystem32WindowsPowerShellv1.0;C:WINDOWSSystem32OpenSSH;G:xampp_PHP5php;G:xamppphp;C:UsersACERAppDataLocalMicrosoftWindowsApps;;C:UsersACERAppDataLocalProgramsMicrosoft VS Codebin;C:UsersACERAppDataRoamingComposervendorbin;C:UsersACERAppDataRoamingnpm
8 verbose lifecycle natours@1.0.0~prefix:css: CWD: G:sass_course_projectsNatours_Media_Queries
9 silly lifecycle natours@1.0.0~prefix:css: Args: [
9 silly lifecycle '/d /s /c',
9 silly lifecycle "postcss --use autoprefixer -b 'last 10 versions' style.concat.css -o css/style.prefix.css"
9 silly lifecycle ]
10 silly lifecycle natours@1.0.0~prefix:css: Returned: code: 1 signal: null
11 info lifecycle natours@1.0.0~prefix:css: Failed to exec prefix:css script
12 verbose stack Error: natours@1.0.0 prefix:css: `postcss --use autoprefixer -b 'last 10 versions' style.concat.css -o css/style.prefix.css`
12 verbose stack Exit status 1
12 verbose stack at EventEmitter.<anonymous> (C:Program Filesnodejsnode_modulesnpmnode_modulesnpm-lifecycleindex.js:332:16)
12 verbose stack at EventEmitter.emit (events.js:314:20)
12 verbose stack at ChildProcess.<anonymous> (C:Program Filesnodejsnode_modulesnpmnode_modulesnpm-lifecyclelibspawn.js:55:14)
12 verbose stack at ChildProcess.emit (events.js:314:20)
12 verbose stack at maybeClose (internal/child_process.js:1021:16)
12 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
13 verbose pkgid natours@1.0.0
14 verbose cwd G:sass_course_projectsNatours_Media_Queries
15 verbose Windows_NT 10.0.19042
16 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "prefix:css"
17 verbose node v12.19.0
18 verbose npm v6.14.8
19 error code ELIFECYCLE
20 error errno 1
21 error natours@1.0.0 prefix:css: `postcss --use autoprefixer -b 'last 10 versions' style.concat.css -o css/style.prefix.css`
21 error Exit status 1
22 error Failed at the natours@1.0.0 prefix:css script.
22 error This is probably not a problem with npm. There is likely additional logging output above.
23 verbose exit [ 1, true ]
src/css/test.css
postcss.config.js
module.exports = { plugins: [ require('autoprefixer'), ], };
Running ./node_modules/.bin/postcss src/css/test.css --output src/css/test.output.css
gets me src/css/test.output.css
.
However, switching to this:
module.exports = { plugins: [ require('postcss-import'), require('autoprefixer'), ], };
or this:
const tailwindcss = require('tailwindcss'); // Note: I'm not even using it, just importing the plugin. module.exports = { plugins: [ require('autoprefixer'), ], };
Gets me src/css/test.output.css
AND an identical src/css/index.css
.
./node_modules/.bin/postcss --version
both 8.2.0 and 7.1.2, node --version
is v15.0.1. autoprefixer is 9.8.6, postcss-import is 12.0.1, tailwindcss is 1.9.6.
I have no idea what might be happening. Is there any other info that I can provide?
We updated cosmiconfig
and the only breaking change is Node.js >= 10 (which is not a breaking change for this project, since PostCSS 8.0 was already limited Node.js to >= 10).
You can release postcss-load-config
as a patch release.
Hello, Sorry for asking things in a issue board, but i cant resist any more. I try now to sience about 8 hours, to make postcss working.
My package.json:
{
"scripts": {
"postcss": "postcss --config postcss.json"
},
"devDependencies": {
"autoprefixer": "^7.1.6",
"bootstrap-sass": "^3.3.7",
"cssnano": "^3.10.0",
"node-sass": "^4.5.0",
"postcss": "^6.0.13",
"postcss-cli": "^4.1.1",
"postcss-colormin": "^2.2.2",
}
}
My postcss.json:
{
"use": [
"autoprefixer"
],
"input": "public_html/css/",
"output": "public_html/css/min/*.css",
"local-plugins": true,
"watch": false
}
With this i get a Error when i run «npm run postcss»:
Input Error: Did not receive any STDIN
Okay, Looks like that the —config param dont work. so i tryed to input the files direct in the script:
«postcss»: «postcss public_html/css/**/*.css —base —dir public_html/css/min/»
But what ever i try, i cant make that he collect my 4 css files and keep the folder structure:
public_html/css/style.css
public_html/css/folder/xxx.csss
public_html/css/folder/xxx.csss
public_html/css/folder/xxx.csss
I find here: https://github.com/postcss/postcss-cli in the «Options List» the —base option. So i try it with —base —dir because the documentations says: «Use together with —dir for keeping directory structure.» but when i use them together i get following errors again:
Input Error: Must use —dir or —replace with multiple input files
Im verry short to get mad
Please Help me!
Hello,
I use postcss.config.js
and it works fine.
I try to use npx postcss my-file-input.css -o output/directory --config my.config.js
, but I have the message below.
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
Between this two use cases, just the name of config file has changed.
Do I use --config
correctly ?
Thanks for your answer.
Regards
1 test failed [21:00:18]
error › invalid --config
/home/ryan/postcss-cli/test/error.js:44
43: .then(({ err, code }) => {
44: t.is(code, 1, 'expected non-zero error code')
45: t.regex(err, /ENOENT: no such file or directory/)
Actual:
0
Expected:
1
expected non-zero error code
Attn: @michael-ciniawsky
I suspect this has something to do with the latest patch version of cosmiconfig, will investigate later if no one else beats me to it.
Hi,
I have a problem on the above subject. I’m using postcss-cli
together with autoprefixer
and cssnano
.
I run this script:
"css-prefix": "postcss dist/mdtoast.css -u autoprefixer -o dist/mdtoast.css"
And I get this error:
Error: [object Object] is not a PostCSS plugin at Processor.normalize (C:Projectspluginstoastnode_modulespostcsslibprocessor.js:168:15) at new Processor (C:Projectspluginstoastnode_modulespostcsslibprocessor.js:52:25) at postcss (C:Projectspluginstoastnode_modulespostcsslibpostcss.js:55:10) at C:Projectspluginstoastnode_modulespostcss-cliindex.js:216:14
This error is only for autoprefixer
, there’s no problem with cssnano
I’ve installed PostCSS and Autoprefixer like this because I want to prefix my .css
files:
I’ve tried postcss-cli and postcss-cli-simple but both not working:
npm install postcss-cli-simple autoprefixer -g
npm install postcss-cli autoprefixer -g
After a successful install, I moved into the folder where both libs where installed in:
cd /usr/local/bin
Now I’ve called postcss with the correct --use
option to prefix my .css
file but the generated file looks exactly like the source — no prefixes — nothing. I’ve tried out everything and also postcss-cli
but the result is all the same…
Source menu.css
:
#home {
display: flex;
transition: 1s;
}
Target file test.css
:
#home {
display: flex;
transition: 1s;
}
Command which should prefix the content:
postcss --use autoprefixer -o /Applications/MAMP/htdocs/wp-content/plugins/test/assets/css/admin/test.css /Applications/MAMP/htdocs/wp-content/plugins/test/assets/css/admin/menu.css
I’m getting no errors and the files get’s successfully generated but the content is untouched. Any ideas?..
Thanks!
Say I want to ensure that users are running a given postcss version from a Bash script, or say, ensuring everyone is running a version higher than 6. Normally you would do this by running <binary> --version
and parsing the output. However, that’s impossible (or much tougher, anyway) with postcss because this is the output that you get.
$ postcss --version
/|
// //
// //
//___*___*___//
//--*---------*--//
/|| * * ||/
// ||* v7.1.1 *|| //
// || * * || //
//_____||___*_________*___||_____//
I could write something that says «look for the fourth token in the sixth line» or something but that’s extremely brittle. I also tried piping the output just to see if it would print something sane, but no, that also prints out version pyramid.
$ postcss --version | cat
/|
// //
// //
//___*___*___//
//--*---------*--//
/|| * * ||/
// ||* v7.1.1 *|| //
// || * * || //
//_____||___*_________*___||_____//
This is also frustrating to blind programmers with screen readers. I suggest you paste this output into Text Edit and then turn on VoiceOver for Mac… the output is roughly:
slash vertical bar forward slash slash slash slash slash slash slash slash slash slash slash underscore underscore underscore asterisk underscore underscore underscore asterisk underscore underscore underscore slash slash
and I’m only done with line 3. The version number will eventually print out on line 6.
I understand that it is amusing to print the version string in this way but please consider that users besides humans with working eyesight exist.
If result.dts
has contents, please output a .d.ts
file adjacent to the CSS file.
if (result.dts) { tasks.push(fs.outputFile(options.to + '.d.ts', result.dts)); }
Hi, I wanted to use this tool so I could pass a dynamic value to set as an option for a plugin, but I can’t see how that’s possible? Can I not add additional arbitrary properties to the ctx
? Maybe I’m missing something obvious, seems like a simple use case.
For example, I want to specify on the cli an arbitrary string value to use as an option for postcss-replace
.
question
I created a monorepo project and i want to set all package with the same postcss.config , the catalog of project as follow:
so , i put a postcss.config in root directory. And in each package package.json , i set the cli command as follow:
but it’s not work. After testing, i find «—config» as if can only set the directory in below directory , but not upward.
babel can set the config directory use «—root-mode upward» to find the config file in upward directory,
I wish this cli can provide the same command to work , or improve the command «—config» to fixed my question
thanks.
When trying to do anything with postcss-cli 7.1.1, it fails with Unexpected token {
. This happens even if the input file is empty, so the problem is not with the input. 7.1.0 seems to work correctly.
Assumed we have a folder structure like this
postcss src/**/*.css [OPTIONS]
only process files in /src/style, but not process files in /src/toast/style.
postcss version v4.1.0
postcss style.css --o style.min.css
generates a seperate style.min.css.map in the output folder if there´s the line /*# sourceMappingURL=style.css.map */ in the input file style.css.
If this line is removed or if the referenced file style.css.map is missing, no style.min.css.map is generated.
Is there a way to keep the line and the file but disable the generation of the map file (‘—no-map’ doesn´t seem to work)?
postcss.config.js:
module.exports = {
plugins: [
require('cssnano')({
preset: 'default',
}),
],
};
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 | 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 | 'use strict' const fs = require('fs-promise') const path = require('path') const ora = require('ora') const stdin = require('get-stdin') const read = require('read-cache') const chalk = require('chalk') const globber = require('globby') const chokidar = require('chokidar') const postcss = require('postcss') const postcssrc = require('postcss-load-config') const reporter = require('postcss-reporter/lib/formatter')() const depGraph = require('./lib/depGraph') const logo = ` /|\ // // // // //___*___*___// //--*---------*--// /|| * * ||/ // ||* *|| // // || * * || // //_____||___*_________*___||_____// ` const version = () => { const cli = require('./package.json').version return chalk.bold.red(` /|\ // // // // //___*___*___// //--*---------*--// /|| * * ||/ // ||* v${cli} *|| // // || * * || // //_____||___*_________*___||_____// `) } const argv = require('yargs') .usage( `${chalk.bold.red(logo)} Usage: $0 [input.css] [OPTIONS] [--output|-o output.css] [--watch]` ) .option('o', { alias: 'output', desc: 'Output file', type: 'string' }) .option('d', { alias: 'dir', desc: 'Output directory', type: 'string' }) .option('r', { alias: 'replace', desc: 'Replace (overwrite) the input file', type: 'boolean' }) .option('u', { alias: 'use', desc: 'List of postcss plugins to use', type: 'array' }) .option('p', { alias: 'parser', desc: 'Custom postcss parser', type: 'string' }) .option('t', { alias: 'stringifier', desc: 'Custom postcss stringifier', type: 'string' }) .option('s', { alias: 'syntax', desc: 'Custom postcss syntax', type: 'string' }) .option('w', { alias: 'watch', desc: 'Watch files for changes and recompile as needed', type: 'boolean' }) .option('poll', { desc: 'Use polling for file watching', type: 'boolean' }) .option('x', { alias: 'ext', desc: 'Override the output file extension', type: 'string', coerce (ext) { if (ext.indexOf('.') !== 0) return '.' + ext return ext } }) .option('e', { alias: 'env', desc: 'A shortcut for setting NODE_ENV', type: 'string' }) .option('b', { alias: 'base', desc: 'Mirror the directory structure relative to this path in the output directory, this only works together with --dir', type: 'string' }) .option('c', { alias: 'config', desc: 'Set a custom path to look for a config file', type: 'string' }) .alias('m', 'map') .describe('m', 'Create an external sourcemap') .describe('no-map', 'Disable the default inline sourcemaps') .version(version).alias('v', 'version') .help('h').alias('h', 'help') .example('$0 input.css -o output.css', 'Basic usage') .example('cat input.css | $0 -u autoprefixer > output.css', 'Piping input & output') .epilog( `If no input files are passed, it reads from stdin. If neither -o, --dir, or --replace is passed, it writes to stdout. If there are multiple input files, the --dir or --replace option must be passed. For more details, please see https://github.com/postcss/postcss-cli` ) .argv let dir = argv.dir let input = argv._ let output = argv.output Iif (argv.map) argv.map = { inline: false } const spinner = ora() let config = { options: { map: argv.map !== undefined ? argv.map : { inline: true }, parser: argv.parser ? require(argv.parser) : undefined, syntax: argv.syntax ? require(argv.syntax) : undefined, stringifier: argv.stringifier ? require(argv.stringifier) : undefined }, plugins: argv.use ? argv.use.map((plugin) => { try { return require(plugin)() } catch (e) { error(`Plugin Error: Cannot find module '${plugin}'`) } }) : [] } Iif (argv.env) process.env.NODE_ENV = argv.env Iif (argv.config) argv.config = path.resolve(argv.config) Promise.resolve() .then(() => { Iif (input && input.length) return globber(input) Iif (argv.replace || argv.dir) error('Input Error: Cannot use --dir or --replace when reading from stdin') Iif (argv.watch) { error('Input Error: Cannot run in watch mode when reading from stdin') } return ['stdin'] }) .then((i) => { Iif (!i || !i.length) { error('Input Error: You must pass a valid list of files to parse') } Iif (i.length > 1 && !argv.dir && !argv.replace) { error('Input Error: Must use --dir or --replace with multiple input files') } Iif (i[0] !== 'stdin') i = i.map(i => path.resolve(i)) input = i return files(input) }) .then((results) => { Iif (argv.watch) { const watcher = chokidar.watch( input.concat(dependencies(results)), { usePolling: argv.poll } ) if (config.file) watcher.add(config.file) watcher .on('ready', (file) => console.warn(chalk.bold.cyan('Waiting for file changes...'))) .on('change', (file) => { let recompile = [] if (~input.indexOf(file)) recompile.push(file) recompile = recompile.concat( depGraph.dependantsOf(file).filter(file => ~input.indexOf(file)) ) if (!recompile.length) recompile = input return files(recompile) .then((results) => watcher.add(dependencies(results))) .then(() => console.warn(chalk.bold.cyan('Waiting for file changes...'))) .catch(error) }) } }) .catch(error) function rc (ctx, path) { if (argv.use) return Promise.resolve() return postcssrc(ctx, path) .then((rc) => { if (rc.options.from || rc.options.to) { error('Config Error: Can not set from or to options in config file, use CLI arguments instead') } config = rc }) .catch((err) => { if (err.message.indexOf('No PostCSS Config found') === -1) throw err }) } function files (files) { Iif (typeof files === 'string') files = [ files ] return Promise.all(files.map((file) => { Eif (file === 'stdin') { return stdin() .then((content) => { Eif (!content) return error('Input Error: Did not receive any STDIN') return css(content, 'stdin') }) } return read(file) .then((content) => css(content, file)) })) } function css (css, file) { const ctx = { options: config.options } if (file !== 'stdin') { ctx.file = { dirname: path.dirname(file), basename: path.basename(file), extname: path.extname(file) } if (!argv.config) argv.config = path.dirname(file) } const relativePath = file !== 'stdin' ? path.relative(path.resolve(), file) : file if (!argv.config) argv.config = process.cwd() const time = process.hrtime() spinner.text = `Processing ${relativePath}` spinner.start() return rc(ctx, argv.config) .then(() => { let options = config.options if (file === 'stdin' && output) file = output // TODO: Unit test this options.from = file === 'stdin' ? path.join(process.cwd(), 'stdin') : file if (output || dir || argv.replace) { options.to = output || (argv.replace ? file : path.join(dir, argv.base ? file.replace(path.resolve(argv.base), '') : path.basename(file))) if (argv.ext) { options.to = options.to .replace(path.extname(options.to), argv.ext) } options.to = path.resolve(options.to) } if (!options.to && config.options.map && !config.options.map.inline) { spinner.fail() error('Output Error: Cannot output external sourcemaps when writing to STDOUT') } return postcss(config.plugins) .process(css, options) .then((result) => { const tasks = [] if (options.to) { tasks.push(fs.outputFile(options.to, result.css)) if (result.map) { tasks.push( fs.outputFile( options.to .replace( path.extname(options.to), path.extname(options.to) + '.map' ), result.map ) ) } } else { spinner.text = chalk.bold.green( `Finished ${relativePath} (${Math.round(process.hrtime(time)[1] / 1e6)}ms)` ) spinner.succeed() return process.stdout.write(result.css, 'utf8') } return Promise.all(tasks) .then(() => { spinner.text = chalk.bold.green( `Finished ${relativePath} (${Math.round(process.hrtime(time)[1] / 1e6)}ms)` ) if (result.warnings().length) { spinner.fail() console.warn(reporter(result)) } else spinner.succeed() return result }) }) }).catch((err) => { spinner.fail() throw err }) } function dependencies (results) { if (!Array.isArray(results)) results = [ results ] const messages = [] results.forEach((result) => { if (result.messages <= 0) return result.messages .filter((msg) => msg.type === 'dependency' ? msg : '') .map(depGraph.add) .forEach((dependency) => messages.push(dependency.file)) }) return messages } function error (err) { Eif (typeof err === 'string') { spinner.fail(chalk.bold.red(err)) } else if (err.name === 'CssSyntaxError') { console.error('n') spinner.text = spinner.text.replace('Processing ', '') spinner.fail(chalk.bold.red(`Syntax Error: ${spinner.text}`)) if (err.file) { err.message = err.message.substr(err.file.length + 1) } else { err.message = err.message.replace('<css input>:', '') } err.message = err.message.replace(/:s/, '] ') console.error('n', chalk.bold.red(`[${err.message}`)) console.error('n', err.showSourceCode(), 'nn') if (argv.watch) return } else { console.error(err) } process.exit(1) } |