I am using tailwindcss with postcss8 (it comes with tailwind) and there is a problem trying to parse a css from a node_modules package.
is there a way to exclude these css files from being processed by postcss?
this is the error I get:
ERROR in ./node_modules/#fullcalendar/common/main.css (./node_modules/#nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/#nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./node_modules/#fullcalendar/common/main.css)
Module build failed (from ./node_modules/#nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
ParserError: Syntax Error at line: 1, column 45
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#fullcalendar/common/main.css:633:3
at Parser.error (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:127:11)
at Parser.operator (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:162:20)
at Parser.parseTokens (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:245:14)
at Parser.loop (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:132:12)
at Parser.parse (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:51:17)
at parse (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-custom-properties/index.cjs.js:47:30)
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-custom-properties/index.cjs.js:333:24
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:72:18
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:55:18
at Rule.each (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:41:16)
at Rule.walk (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:52:17)
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:60:24
at Root.each (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:41:16)
at Root.walk (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:52:17)
at Root.walkDecls (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:70:19)
at transformProperties (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-custom-properties/index.cjs.js:330:8)
# ./node_modules/#fullcalendar/common/main.css 4:14-191
# ./node_modules/#fullcalendar/common/main.js
# ./node_modules/#fullcalendar/timegrid/main.js
# ./node_modules/babel-loader/lib??ref--2-0!./node_modules/#nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/global/Schedule.vue?vue&type=script&lang=js&
# ./components/global/Schedule.vue?vue&type=script&lang=js&
# ./components/global/Schedule.vue
# ./node_modules/.cache/nuxt/components/index.js
# ./node_modules/.cache/nuxt/components/plugin.js
# ./node_modules/.cache/nuxt/index.js
# ./node_modules/.cache/nuxt/client.js
# multi ./node_modules/#nuxt/components/lib/installComponents.js ./node_modules/.cache/nuxt/client.js
I also had this issue. However, this is how I solve it.
Add the following to your nuxt.config.js file.
build: {
postcss: {
plugins: {
/**
* do not remove the cssnano key.
* (https://github.com/fullcalendar/fullcalendar/issues/5503)
*/
cssnano: {
preset: [
'default',
{
calc: false,
},
],
},
},
},
transpile: [
/#fullcalendar.*/, // always need for fullcalenar
],
},
To learn more about it, read this processing css with postcss, calc/var problems.
I hope this helps you. If you have solved this, please share your solution so that the community can learn from it.
Related
I was wondering if there was a way to use #next/env to replace variables in codegen.yaml when i run yarn codegen:
graphql-codegen -r dotenv/config --config codegen.yml - this is codegen example to load dot env
graphql-codegen -r #next/env --config codegen.yml - this is what i want to achieve
When i call it, i get
${SERVER_API_URL}/graphql goes as undefined/graphql
My usecase is:
# .env
HOST=https
API_DOMAIN=example.com
SERVER_API_URL=$HOST://$API_DOMAIN
# codegen.yaml
schema: ${SERVER_API_URL}/graphql
Why use #next/env? it replaces variables in .env, i'm attaching documentation sample from next.js documentation:
Note: Next.js will automatically expand variables ($VAR) inside of
your .env* files. This allows you to reference other secrets, like so:
# .env
HOSTNAME=localhost
PORT=8080
HOST=http://$HOSTNAME:$PORT
If you are trying to use a variable with a $ in the actual value, it needs to be escaped like so: \$.
For example:
# .env
A=abc
# becomes "preabc"
WRONG=pre$A
# becomes "pre$A"
CORRECT=pre\$A
source: https://nextjs.org/docs/basic-features/environment-variables#loading-environment-variables
You can't use #next/env directly via -r flag. However you still have couple of alternatives. For example, you can address the required .env file directly:
DOTENV_CONFIG_PATH=./.env.local graphql-codegen --config codegen.yml -r dotenv/config
If you still want to use #next/env, you can convert your codegen.yml to codegen.js and import #next/env. For example, my original YML:
overwrite: true
schema:
- https://graphql.fauna.com/graphql:
headers:
Authorization: 'Bearer ${FAUNA_ADMIN_KEY}'
documents: null
generates:
src/generated/graphql.ts:
plugins:
- typescript
- typescript-operations
- typescript-graphql-request
./graphql.schema.json:
plugins:
- 'introspection'
I re-wrote it as JS:
const { loadEnvConfig } = require('#next/env')
loadEnvConfig(process.cwd())
module.exports = {
overwrite: true,
schema: {
'https://graphql.fauna.com/graphql': {
headers: {
Authorization: `Bearer ${process.env.FAUNA_ADMIN_KEY}`,
},
},
},
documents: null,
generates: {
'src/generated/graphql.ts': {
plugins: [
'typescript',
'typescript-operations',
'typescript-graphql-request',
],
},
'./graphql.schema.json': { plugins: ['introspection'] },
},
}
and then generated the code using graphql-codegen --config codegen.js.
Here is an issue on Github that helped me.
I am trying to run the command npm run build but it is not working. and I am getting the error below:
> typescript#1.0.0 build /Users/Prashant/Code/typescript
> webpack
Hash: c6dbd1eb3357da70ca81
Version: webpack 3.2.0
Time: 477ms
Asset Size Chunks Chunk Names
bundle.js 2.89 kB 0 [emitted] main
[0] ./src/index.js 51 bytes {0} [built]
[1] ./src/index.css 290 bytes {0} [built] [failed] [1 error]
ERROR in ./src/index.css
Module build failed: Unknown word (5:1)
3 | // load the styles
4 | var content = require("!!./index.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
| ^
6 | // Prepare cssTransformation
7 | var transform;
8 |
# ./src/index.js 1:0-22
My web pack config file(webpack.config.js) is:
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'css-loader',
'style-loader'
]
}
]
}
};
And my CSS file(index.css) is
body {
color:red;
}
and my js file index.js is below:
require("./index.css");
alert('this is my alert');
I am trying to run the file but it is not working I have checked all the spelling also try to add a lot of other CSS but it is not working, can you please help me how can I solve this issue?
The loaders are applied in reverse order. That means you're applying style-loader first and then pass its result to css-loader. The output of style-loader is JavaScript, which will insert the styles into a <style> tag, but css-loader expects CSS and fails to parse JavaScript as it is not valid CSS.
The correct rule is:
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
I was having the same problem and eventually found that there was a second module rule in the webpack config that was processing *.css files
I solved this by just creating style.css file from the same directory of my js file
I tried following this tutorial link on setting up backstop.js
https://joe-watkins.io/css-visual-regression-testing-with-grunt-backstopjs/
I followed all the instructions as required.
But I'm running into this error onscreen.
andy.cmwong#ONLM4800GR8LN32 /c/backstop_test
$ grunt backstop:reference
Running "backstop:reference" (backstop) task
[12:16:30] Using gulpfile c:\backstop_test\bower_components\backstopjs\gulpfile.js
[12:16:30] Starting 'clean'...
bitmaps_reference was cleaned.
[12:16:30] Starting 'bless'...
[12:16:30] Finished 'clean' after 9.82 ms
[12:16:30] Finished 'bless' after 15 ms
[12:16:30] Starting 'reference'...
[12:16:30] Starting 'init'...
[12:16:30] Finished 'init' after 73 μs
[12:16:30] Starting 'test'...
Generating reference files.
[12:16:30] Finished 'test' after 4.03 ms
reference has run.
[12:16:30] Finished 'reference' after 5.24 ms
Testing script failed with code: 1
Looks like an error occured. You may want to try running `$ gulp echo`. This will echo the requested test URL output to the console. You can check this output to verify that the file requested is inde
ed being received in the expected format.
cp: cannot stat `./bitmaps_reference': No such file or directory
ERROR: Error: Command failed: C:\Windows\system32\cmd.exe /s /c "cp -rf ./bitmaps_reference c:\backstop_test\tests"
cp: cannot stat `./bitmaps_reference': No such file or directory
Earlier, there was an additional error which states the gulp.run() is deprecated thus it suggested I need to use another npm module to execute tasks in sequence, which led me to this.
https://www.npmjs.com/package/run-sequence
And I managed to resolved it like so
//under bower_components/gulp/tasks/reference.js
var gulp = require('gulp');
var runSequence = require('run-sequence').use(gulp);
//FIRST CLEAN REFERENCE DIR. THEN TEST
gulp.task('reference', ['clean','bless'], function() {
//gulp.run('test');
runSequence('test');
console.log('reference has run.');
});
It works.
However, I'm still not able to complete the grunt/gulp tasks execution thus I'm really stuck with this.
I'm wondering has anybody tried following the tutorial link above and managed to succeed in getting backstopjs to work?
Your input on this is greatly appreciated.
UPDATE
I forgot to show you what my grunt config setup looks like.
........................
grunt.initConfig({
backstop: {
setup: {
options : {
backstop_path: './bower_components/backstopjs',
test_path: './tests',
setup: false,
configure: true
}
},
test: {
options : {
backstop_path: './bower_components/backstopjs',
test_path: './tests',
create_references: false,
run_tests: true
}
},
reference: {
options : {
backstop_path: '/bower_components/backstopjs',
test_path: './tests',
create_references: true,
run_tests: false
}
}
}
});
......................etc
My backstop.json file
{
"viewports": [
{
"name": "phone",
"width": 320,
"height": 480
},
{
"name": "tablet_v",
"width": 568,
"height": 1024
},
{
"name": "tablet_h",
"width": 1024,
"height": 768
}
],
"scenarios": [
{
"label": "http://getbootstrap.com",
"url": "http://getbootstrap.com",
"hideSelectors": [],
"removeSelectors": [
"#carbonads-container"
],
"selectors": [
"header",
"main",
"body .bs-docs-featurette:nth-of-type(1)",
"body .bs-docs-featurette:nth-of-type(2)",
"footer",
"body"
],
"readyEvent": null,
"delay": 500,
"misMatchThreshold" : 0.1
}
]
}
I managed to get it working last night when I got onto my Linux box(VMWare build), redo the backstopjs setup and successfully perform some test runs.
I did have my original suspicion that it was my Window OS environment that wasn't set up properly so I may have to reinstall npm/node/backstop etc, and have it resolved from there.
All good now.
Currently am switching between html-cov and json-cov in my gruntfile and running the command
grunt mochacov:all > coverage.html
(or)
grunt mochacov:all > coverage.json
Here is the json portion of config from my Gruntfile.js :
mochacov : {
options : {
reporter : 'json-cov',
//reporter : 'travis-cov',
require : ['should'],
timeout: 250000,
//quiet : true,
output : 'coverage.json',
},
all: ['test/test-*.js']
},
Is there anyway using which i can get both coverage.html and coverage.json in the output by default by specifying both html-cov and json-cov somehow?
Sadly, looks like by default grunt-mocha-cov doesn't support this, as the reporter only accepts a 'string' (per the docs).
Theoretically this should be possible with a grunt multitask.
I have found out the answer for the same :-
This is what we need to have in our Gruntfile.js
mochacov: {
jsoncoverage: {
options: {
reporter: 'json-cov',
//reporter : 'travis-cov',
require: ['should'],
timeout: 250000,
//quiet : true,
output: 'reports/coverage.json'
},
all: ['test/test-*.js']
},
htmlcoverage: {
options: {
reporter: 'html-cov',
//reporter : 'travis-cov',
require: ['should'],
timeout: 250000,
//quiet : true,
output: 'reports/coverage.html'
},
all: ['test/test-*.js']
}
}
//and then the following line needs to be there :
grunt.registerTask('mochacoverage', ['mochacov:jsoncoverage', 'mochacov:htmlcoverage']);
Then we can run it using grunt mochacoverage and it will do both html and json
I install grunt plugins grunt-template-jasmine-istanbul
npm install grunt-template-jasmine-istanbul --save-dev
and add to Gruntfile.js as following:
coverage: {
src: ['app/scripts/**/*.js'],
options: {
specs: ['test/**/*.js'],
template: require('grunt-template-jasmine-istanbul'),
templateOptions: {
coverage: 'test/coverage/coverage.json',
report: [
{type:'html',options: {dir: 'test/coverage/html'}},
{type:'text',options: {dir: 'test/coverage/text'}},
{type:'text'},
],
thresholds: {
lines: 75,
statements: 75,
branches: 75,
functions: 90
}
}
}
},
but when running test it shown following warning and no report in test/coverage folder:
my#computer:/share/angularjs-gs$ grunt test:coverage
Running "coverage" task
Warning: "dir" option is required. Use --force to continue.
Aborted due to warnings.
I've also created test/coverage/html and test/converage/text folder. I also view code from plugin's author but cannot find any solution: https://github.com/maenu/grunt-template-jasmine-istanbul-example/blob/connect/Gruntfile.js
I've found it, must wrap coverage object by jasmine, it maybe that coverage used as jasmine plugin but spec and src attribute seems being redundant.
jasmine: {
coverage: {
src: ['app/scripts/**/*.js'],
options: {
specs: ['test/**/*.js'],
template: require('grunt-template-jasmine-istanbul'),
templateOptions: {
coverage: 'test/coverage/coverage.json',
report: [
{type:'html',options: {dir: 'test/coverage/html'}},
{type:'text',options: {dir: 'test/coverage/text/'}},
{type:'text-summary'}
],
thresholds: {
lines: 75,
statements: 75,
branches: 75,
functions: 90
}
}
}