Unexpected missing end-of-source newline - stylelint

I am getting the above error with stylint. How to fix any one help me?
my scss file:
#tailwind base;
#tailwind components;
#tailwind utilities;
/* end of import */
Error I am getting:
src/components/tabs/tabs.scss
15:16 ⚠ Unexpected missing end-of-source newline (no-missing-end-of-source-newline) [stylelint]
[vite:css] Unexpected missing end-of-source newline (no-missing-end-of-source-newline)
13 | }
14 |
15 | /* empty line */
| ^
stylelint config:
/* eslint-env node */
module.exports = {
extends: [
'stylelint-config-standard',
'stylelint-config-recess-order',
'stylelint-config-css-modules',
'stylelint-config-prettier',
// Uncomment out the below if you want to use scss
'stylelint-config-standard-scss',
'stylelint-config-recommended-scss',
],
plugins: ['stylelint-scss'],
ignoreFiles: [
'./node_modules/**/*.css',
'./dist/**/*.css',
'./coverage/**/*.css',
],
rules: {
'at-rule-no-unknown': [
true,
{
ignoreAtRules: [
'tailwind',
'apply',
'screen',
'variants',
'responsive',
],
},
],
'no-duplicate-selectors': null,
'no-empty-source': null,
'rule-empty-line-before': null,
'comment-empty-line-before': null,
'selector-pseudo-element-no-unknown': null,
'declaration-block-trailing-semicolon': null,
'no-descending-specificity': null,
'string-no-newline': null,
// Limit the number of universal selectors in a selector,
// to avoid very slow selectors
'selector-max-universal': 1,
'selector-class-pattern': null,
// --------
// SCSS rules
// --------
'scss/dollar-variable-colon-space-before': 'never',
'scss/dollar-variable-colon-space-after': 'always',
'scss/dollar-variable-no-missing-interpolation': true,
'scss/dollar-variable-pattern': /^[a-z-]+$/,
'scss/double-slash-comment-whitespace-inside': 'always',
'scss/operator-no-newline-before': true,
'scss/operator-no-unspaced': true,
'scss/selector-no-redundant-nesting-selector': true,
// Allow SCSS and CSS module keywords beginning with `#`
'scss/at-rule-no-unknown': null,
},
};

The no-missing-end-of-source-newline rule expects a newline at the end of the file. Add a newline to fix the problem:
#tailwind base;
#tailwind components;
#tailwind utilities;
/* end of import */
(Note the additional newline at the end.)
You should also extend Prettier's Stylelint configs last and there's no need to explicitly use postcss-scss or stylelint-config-recommended-scss as they are included in stylelint-config-standard-scss.
Your config should be:
module.exports = {
extends: [
'stylelint-config-standard-scss',
'stylelint-config-css-modules',
'stylelint-config-recess-order',
'stylelint-config-prettier-scss'
],
ignoreFiles: [
'./node_modules/**/*.css',
'./dist/**/*.css',
'./coverage/**/*.css',
],
rules: {
'at-rule-no-unknown': [
true,
{
ignoreAtRules: [
'tailwind',
'apply',
'screen',
'variants',
'responsive',
],
},
],
'no-duplicate-selectors': null,
'no-empty-source': null,
'rule-empty-line-before': null,
'comment-empty-line-before': null,
'selector-pseudo-element-no-unknown': null,
'declaration-block-trailing-semicolon': null,
'no-descending-specificity': null,
'string-no-newline': null,
// Limit the number of universal selectors in a selector,
// to avoid very slow selectors
'selector-max-universal': 1,
'selector-class-pattern': null,
// --------
// SCSS rules
// --------
'scss/dollar-variable-colon-space-before': 'never',
'scss/dollar-variable-colon-space-after': 'always',
'scss/dollar-variable-no-missing-interpolation': true,
'scss/dollar-variable-pattern': /^[a-z-]+$/,
'scss/double-slash-comment-whitespace-inside': 'always',
'scss/operator-no-newline-before': true,
'scss/operator-no-unspaced': true,
'scss/selector-no-redundant-nesting-selector': true,
// Allow SCSS and CSS module keywords beginning with `#`
'scss/at-rule-no-unknown': null,
},
};

Related

ReferenceError: Cannot access 'getRenderingRef' before initialization at stencilSubscription$1

I'm using stenciljs to build my project via prerendering. However, the hydration happens below error.
package.json
"build": "stencil build --prerender --config stencil.config.ts",
output
[ ERROR ] Hydrate Error
ReferenceError: Cannot access 'getRenderingRef' before initialization at stencilSubscription$1
(C:\Users\aleung\Desktop\project\dist\hydrate\index.js:4996:5) at createStore$2
(C:\Users\aleung\Desktop\project\dist\hydrate\index.js:5138:13) at createRouter
(C:\Users\aleung\Desktop\project\dist\hydrate\index.js:5148:42) at hydrateAppClosure
(C:\Users\aleung\Desktop\project\dist\hydrate\index.js:5529:1) at hydrateFactory
(C:\Users\aleung\Desktop\project\dist\hydrate\index.js:34029:3) at render
(C:\Users\aleung\Desktop\project\dist\hydrate\index.js:34296:9) at
C:\Users\aleung\Desktop\project\dist\hydrate\index.js:34228:62 at new Promise (<anonymous>) at
Object.hydrateDocument (C:\Users\aleung\Desktop\project\dist\hydrate\index.js:34220:33) at prerenderWorker
(C:\Users\aleung\Desktop\project\node_modules\#stencil\core\compiler\stencil.js:9988:46)
stencil.config.ts
import { Config } from '#stencil/core';
import nodePolyfills from 'rollup-plugin-node-polyfills';
export const config: Config = {
namespace: 'project',
globalStyle: 'src/global/app.css',
globalScript: 'src/global/app.ts',
taskQueue: 'async',
outputTargets: [
{
type: 'www',
// comment the following line to disable service workers in production
serviceWorker: null,
baseUrl: 'https://myapp.local/',
},
],
plugins: [],
rollupPlugins: {
after: [nodePolyfills()],
},
devServer: {
reloadStrategy: 'pageReload',
openBrowser: false,
},
};
I expect the hydrate can be generated.
According to the docs, your output target needs a prerenderConfig property:
outputTargets: [
{
type: 'www',
// comment the following line to disable service workers in production
serviceWorker: null,
baseUrl: 'https://myapp.local/',
prerenderConfig: './prerender.config.ts'
},
],
And that file needs to export a PrerenderConfig not Config:
import { PrerenderConfig } from '#stencil/core';
export const config: PrerenderConfig = {
...
};
See https://stenciljs.com/docs/prerender-config

Error: `severity` property of a stylelint warning must be either 'error' or 'warning', but it was 'ignore' (string)

VSCode-Stylelint showing meaningless error:
Error: severity property of a stylelint warning must be either 'error' or 'warning', but it was 'ignore' (string). at stylelintWarningToVscodeDiagnostic (/Users/xxx/.vscode/extensions/shinnn.stylelint-0.51.0/node_modules/stylelint-warning-to-vscode-diagnostic/index.js:40:9) at Array.map () at processResults (/Users/xxxs/shinnn.stylelint-0.51.0/node_modules/stylelint-vscode/index.js:59:18) at stylelintVSCode (/Users/xxx/.vscode/extensions/shinnn.stylelint-0.51.0/node_modules/stylelint-vscode/index.js:144:9)
My .stylelintrc.js
module.exports = {
defaultSeverity: 'warning',
extends: [
'stylelint-config-standard',
'stylelint-config-css-modules',
'stylelint-config-rational-order',
'stylelint-config-prettier',
],
plugins: ['stylelint-order', 'stylelint-declaration-block-no-ignored-properties'],
rules: {
'no-descending-specificity': null,
'plugin/declaration-block-no-ignored-properties': true,
'declaration-empty-line-before': null,
'length-zero-no-unit': null,
'function-whitespace-after': null,
},
};
There is something wrong with the newer Version of 'stylelint-config-rational-order'.
If you set it to Version 0.0.4 it works.
There is already an Issue created on Github:
https://github.com/constverum/stylelint-config-rational-order/issues/16

How to set up rollup with karma and babel?

I try to set up rollup with karma and babel for test.
I face two problems.
First, it cause error Uncaught TypeError about default.
Uncaught TypeError: Cannot use 'in' operator to search for 'default' in undefined
Second, it doesn't find external dependency.
Treating 'chai' as external dependency
What's wrong in my settings?
rollup conf
import babel from "rollup-plugin-babel";
import babelrc from "babelrc-rollup";
import istanbul from "rollup-plugin-istanbul";
import nodeResolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import builtins from "rollup-plugin-node-builtins";
import globals from "rollup-plugin-node-globals";
// import uglify from 'rollup-plugin-uglify'
let pkg = require('./package.json');
let external = Object.keys(pkg.dependencies);
export default {
entry: 'src/index.js',
plugins: [
babel(babelrc()),
istanbul({
exclude: ['test/**/*', 'node_modules/**/*']
}),
globals(),
builtins(),
nodeResolve({
module: true,
jsnext: true,
main: true,
browser: true,
extensions: ['.js']
}),
commonjs({
include: 'node_modules/**'
}),
//uglify(),
],
external: external,
targets: [
{
dest: pkg.main,
format: 'umd',
moduleName: 'sketchbook',
sourceMap: true
},
{
dest: pkg.module,
format: 'es',
sourceMap: true
}
]
};
karma conf
module.exports = function (config) {
config.set({
files: [
// Watch src files for changes but
// don't load them into the browser.
{pattern: 'src/**/*.js', included: false},
'test/**/*.spec.js',
],
browsers: ['Chrome'],
preprocessors: {
'src/**/*.js': ['rollup'],
'test/**/*.spec.js': ['rollup'],
},
rollupPreprocessor: {
plugins: [
require('rollup-plugin-buble')(),
],
format: 'umd', // Helps prevent naming collisions.
moduleName: 'sketchbook', // Required for 'iife' format.
sourceMap: 'inline', // Sensible for testing.
},
customPreprocessors: {
// Clones the base preprocessor, but overwrites
// its options with those defined below.
rollupBabel: {
base: 'rollup',
options: {
// In this case, to use
// a different transpiler:
plugins: [
require('rollup-plugin-babel')(),
],
}
}
}
// frameworks: ['mocha'],
// client: {
// mocha: {
// opts: 'test/mocha.opts'
//
// // // change Karma's debug.html to the mocha web reporter
// // reporter: 'html',
// //
// // // require specific files after Mocha is initialized
// // require: [require.resolve('bdd-lazy-var/bdd_lazy_var_global')],
// //
// // // custom ui, defined in required file above
// // ui: 'bdd-lazy-var/global',
// }
// }
});
};
source

How to debug single Karma test using WebStorm

I am trying to debug single test using Karma and WebStorm.
I found that this can be done,
when I do not use coverage reporter and run karma.config with --
reporter progress, but this is not working
changing it into fit in unit test.
How to debug single Karma test using WebStorm?
karma.config
module.exports = function(config) {
var testWebpackConfig = require('./webpack.test.js')({env: 'test'});
var configuration = {
htmlReporter: {
outputFile: 'tests/reports/units.html',
// Optional
pageTitle: 'Unit Tests',
subPageTitle: 'A sample project description',
groupSuites: true,
useCompactStyle: true,
useLegacyStyle: true
},
// base path that will be used to resolve all patterns (e.g. files, exclude)
basePath: '',
/*
* Frameworks to use
*
* available frameworks: https://npmjs.org/browse/keyword/karma-adapter
*/
frameworks: ['jasmine'],
// list of files to exclude
exclude: [ ],
/*
* list of files / patterns to load in the browser
*
* we are building the test environment in ./spec-bundle.js
*/
files: [ { pattern: './config/spec-bundle.js', watched: false } ],
/*
* preprocess matching files before serving them to the browser
* available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
*/
preprocessors: { './config/spec-bundle.js': ['coverage', 'webpack', 'sourcemap'] },
// Webpack Config at ./webpack.test.js
webpack: testWebpackConfig,
// coverageReporter: {
// type: 'in-memory'
// },
remapCoverageReporter: {
'text-summary': null,
json: './coverage/coverage.json',
html: './coverage/html'
},
// Webpack please don't spam the console when running in karma!
webpackMiddleware: { stats: 'errors-only'},
/*
* test results reporter to use
*
* possible values: 'dots', 'progress'
* available reporters: https://npmjs.org/browse/keyword/karma-reporter
*/
// CHANGE !!!
reporters: [ 'progress' ],
//reporters: [ 'mocha', 'coverage', 'remap-coverage', 'progress', 'html' ],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
/*
* level of logging
* possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
*/
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
/*
* start these browsers
* available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
*/
browsers: [
'Chrome'
],
customLaunchers: {
ChromeTravisCi: {
base: 'Chrome',
flags: ['--no-sandbox']
}
},
/*
* Continuous Integration mode
* if true, Karma captures browsers, runs the tests and exits
*/
singleRun: process.env.TRAVIS ? true : false
};
if (process.env.TRAVIS){
configuration.browsers = ['PhantomJS'];
}
config.set(configuration);
};
'Focused' specs/suits work for me (WebStorm 2016.3 EAP) - only fdescribe/fit suits/tests results are shown in Test runner console.
If you miss a possibility to run individual karma tests/suits, please follow WEB-13173 for updates. See also https://github.com/karma-runner/karma/issues/1235

SystemJS and KarmaJS: TypeError: System.import is not a function

I am trying to get my project working with Karma and SystemJS. I am using the karma-systemjs plugin with karma.
I keep getting the error below about System.import.
I believe it is because SystemJS is not being loaded by the time the karma-systemjs plugin runs. Please tell me what I am doing wrong.
Project structure
SystemJS configuration (system.conf.js)
System.config({
baseUrl: '',
defaultJSExtensions: true,
map: {
'jquery': 'vendor/kendo/js/jquery.min.js',
'angular': 'vendor/kendo/js/angular.js',
'kendo': 'vendor/kendo/js/kendo.all.min.js',
'angular-mocks': 'vendor/bower_components/angular-mocks/angular-mocks.js',
'angular-ui-router': 'vendor/bower_components/angular-ui-router/release/angular-ui-router.min.js',
'angular-toastr': 'vendor/bower_components/angular-toastr/dist/angular-toastr.tpls.min.js',
'angular-local-storage': 'vendor/bower_components/angular-local-storage/dist/angular-local-storage.min.js'
},
paths: {
'systemjs': 'vendor/bower_components/system.js/dist/system.js',
'system-polyfills': 'vendor/bower_components/system.js/dist/system-polyfills.js'
},
meta: {
'vendor/kendo/js/jquery.min.js': {
format: 'global',
exports: '$'
},
'vendor/kendo/js/angular.js': {
format: 'global',
deps: [
'vendor/kendo/js/jquery.min.js'
],
exports: 'angular'
},
'vendor/kendo/js/kendo.all.min.js': {
format: 'global',
deps: [
'vendor/kendo/js/angular.js'
],
exports: 'kendo'
},
'vendor/bower_components/angular-ui-router/release/angular-ui-router.min.js': {
format: 'global',
deps: [
'vendor/kendo/js/angular.js'
]
},
'vendor/bower_components/angular-mocks/angular-mocks.js': {
format: 'global',
deps: [
'vendor/kendo/js/angular.js'
],
exports: 'angular.mock'
},
'vendor/bower_components/angular-toastr/dist/angular-toastr.tpls.min.js': {
format: 'global',
deps: [
'vendor/kendo/js/angular.js'
]
},
'vendor/bower_components/angular-local-storage/dist/angular-local-storage.min': {
format: 'global',
deps: [
'vendor/kendo/js/angular.js'
]
}
}
});
Promise.all([
System.import('kendo'),
System.import('angular-mocks'),
System.import('angular-ui-router'),
System.import('angular-toastr'),
System.import('angular-local-storage')
]).then(function () {
System.import('angular')
.then(function (angular) {
System.import('ng/app/app.module')
.then(function (app) {
angular.bootstrap(document, ['s9.app']);
}, function (err) {
console.log(err);
});
}, function (err) {
console.log(err);
});
});
//# sourceMappingURL=system.conf.js.map
karma.conf.js
// Karma configuration
var configure = function (config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '.',
transpiler: null,
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['systemjs', 'jasmine'],
systemjs: {
// Path to your SystemJS configuration file
configFile: 'system.conf.js',
// Patterns for files that you want Karma to make available, but not loaded until a module
// requests them. eg. Third-party libraries.
serveFiles: [
'vendor/kendo/js/**/*.js',
'vendor/bower_components/**/*.js',
'ng/**/*.js',
'test/**/*Spec.js'
],
config: {
paths: {
'systemjs': 'vendor/bower_components/system.js/dist/system.js',
'system-polyfills': 'vendor/bower_components/system.js/dist/system-polyfills.js'
}
}
},
// list of files / patterns to load in the browser
files: [
{pattern: 'vendor/kendo/js/**/*.js', included: false},
{pattern: 'vendor/bower_components/**/*.js', included: false},
{pattern: 'ng/**/*.js', included: false},
{pattern: 'test/**/*Spec.js', included: false}
],
// list of files to exclude
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_DEBUG,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
});
};
module.exports = configure;
//# sourceMappingURL=karma.conf.js.map
Error
I fixed this by moving the bootstrap code out of the config code. Apparently when using the karma-systemjs plugin System.import is not available yet when this is called (although it is at normal runtime).
What I did: I moved the bootstrap code (i.e. Promise.all([....) into into a separate file called bootstrap.js (name is not important) and then in my index.html I added them in this order:
Also from this link (the karma system js plugin author says): https://github.com/rolaveric/karma-systemjs/issues/71
I see the problem. It's because you've got your bootstrapping code
(eg. System.import() calls) inside your SystemJS config file -
system.conf.js karma-systemjs expects just a simple System.config()
call that it can then intercept to find out where your transpiler and
polyfills are. It does this by evaluating your config file with a fake
System object which simply records whatever is passed to
System.config(). This fake object has no System.import() method, which
causes your error.
I'd recommend moving your bootstrapping code into a separate file (I
personally put it in a script tag with my HTML). Otherwise you'll run
into similar problems if you try to use systemjs-builder, and you
probably don't want angular.bootstrap() to be called at the start of
your unit tests.