I two projects, one with React (v17.0.2) and the other with Next.js (v11.1.0) In both I
have implemented ESlint with Prettier and Stylelint.
My problem is that in React project everything is working smoothly and fine, however in Next.js project, stylelint is not linting component.modules.scss files (but other.css files are).
In React, scss files are in ./src/assets/scss/*
in Next.js scss files are in ./styles/*
These are the config files content:
.eslintrc.json
{
"settings": {
"react": {
"version": "detect"
}
},
"plugins": [
"react",
"react-hooks",
"jsx-a11y",
"only-warn",
"prettier"
],
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 2021,
"ecmaFeature": {
"jsx": true,
"modules": true
}
},
"env": {
"browser": true,
"jest": true,
"es2021": true,
"node": true
},
"parser": "babel-eslint",
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:prettier/recommended",
"next"
],
"rules": {
"camelcase": "off",
"react/prop-types": "off",
"react/jsx-curly-newline": ["off", "consistent"],
"react/jsx-handler-names": "off",
"react/display-name": ["off"],
"prettier/prettier": "error",
"arrow-body-style": "off",
"prefer-arrow-callback": "off"
}
}
.prettierrc
{
"singleQuote": true,
"trailingComma": "all",
"parser": "flow",
"semi": false,
"useTabs": false,
"editor.formatOnSave": true,
"stylelintIntegration": true
}
.stylelintrc.json
{
"extends": "stylelint-config-sass-guidelines",
"plugins": [
"stylelint-scss"
],
"rules": {
"at-rule-no-unknown": null,
"scss/at-rule-no-unknown": true,
"indentation": 2,
"number-leading-zero": null,
"max-nesting-depth": 10
}
}
Any help please? Thanks
I found what was wrong;
Need to add this in .vscode/settings.json
"stylelint.validate": ["css", "scss", ".module.scss"]
.module.scss was not considered as .scss, so adding it to the config made everything works
Related
Upgrading from babel to SWC. I deleted the .babelrc file but now the path aliases are no longer recognized in my project. Tried to restore this with a .swrc
.swrc
{
"jsc": {
"target": "ES2017",
"baseUrl": ".",
"paths": {
"#components/*": ["./components/*"]
}
}
}
tsconfig.json
{
"compilerOptions": {
"target": "ES2017",
"lib": ["es6", "dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "ESNEXT",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"baseUrl": ".",
"paths": {
"#components/*": ["./components/*"],
}
},
"exclude": ["node_modules", "**/*.stories.tsx"],
"include": ["**/*.ts", "**/*.tsx", "next-env.d.ts", "next.config.js"]
}
14:24 Error: Unable to resolve path to module '#components/NavBar'
.eslintrc.json
{
"root": true,
"parser": "#typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:jsx-a11y/recommended",
"plugin:react-hooks/recommended"
],
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"plugins": [
"#typescript-eslint", "react", "prettier"
],
"rules": {
"prefer-const": "off",
"import/extensions": "off",
"jsx-a11y/anchor-is-valid": "off",
"import/no-cycle": [0, { "ignoreExternal": true }],
"prettier/prettier": ["error", { "endOfLine": "auto" }],
"react/prop-types": "off",
"react-hooks/exhaustive-deps": "off",
"react/no-unescaped-entities": "off",
"react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx"] }],
"react/jsx-props-no-spreading": ["error", { "html": "ignore", "custom": "ignore", "exceptions": [""] }],
// needed because of https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-use-before-define.md#how-to-use & https://stackoverflow.com/questions/63818415/react-was-used-before-it-was-defined
"no-use-before-define": "off",
"#typescript-eslint/no-use-before-define": [
"error",
{ "functions": false, "classes": false, "variables": true }
],
"#typescript-eslint/ban-ts-comment": "off",
"#typescript-eslint/no-explicit-any": "off"
},
"settings": {
"import/resolver": {
"babel-module": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}
old .babelrc
{
"presets": ["next/babel"],
"plugins": [
[
"module-resolver",
{
"root": ["./"],
"alias": {
"#components": "./components",
"#api": "./api",
"#models": "./models",
"#screens": "./screens",
"#hooks": "./hooks",
"#services": "./services",
"#constants": "./constants",
"#context": "./context",
"#queries": "./queries",
"#data": "./data",
"#typeDefs": "./types",
"#generated": "./generated",
"#utils": "./utils",
"#pages": "./pages",
"#public": "./public"
}
}
]
]
}
Was able to solve this with a few tweaks.
Remove the import/resolver section of .eslintrc.json
Extend next in eslint.
I've made a small npm package that exports a single component. The component is styled using SCSS modules, and bundled together using Rollup. It all seemed to work fine, but once I imported it into a NextJS project I noticed that the styles aren't being applied to the SSR'd document sent down from NextJS (they do eventually get applied, but there is a blip where the component is un-styled).
This is my first time creating an npm package and my first time using Rollup, and I'm having a tough time figuring out how to fix this issue. Maybe I need to not bundle the CSS into the .js files and instruct users to import the css files themselves? I was trying to avoid having that extra step, though. Perhaps using CSS-in-JS could solve the issue, but I'd rather not add a dependency for that if I can avoid it.
Any pointers would be much appreciated!
My Rollup config looks like this:
const config = [
{
input: "src/lib/index.ts",
output: [
{
file: pkg.main,
format: "cjs",
sourcemap: true,
},
{
file: pkg.module,
format: "esm",
sourcemap: true,
},
],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
url(),
svgr(),
typescript({ tsconfig: "./tsconfig.json", rootDir: "src/lib" }),
postcss({
modules: true,
}),
terser(),
bundleSize(),
visualizer(),
],
},
{
input: "dist/esm/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
plugins: [
dts(),
del({ hook: "buildEnd", targets: ["dist/cjs/types", "dist/esm/types"] }),
],
},
];
And I'm not sure if it's relevant, but my tsconfig looks like this:
{
"compilerOptions": {
"target": "es5",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"jsx": "react",
"module": "ESNext",
"declaration": true,
"declarationDir": "types",
"sourceMap": true,
"outDir": "dist",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"removeComments": true,
"plugins": [{ "name": "typescript-plugin-css-modules" }]
},
"include": ["src/lib/customModules.d.ts", "src/**/*"]
}
Update 1/2/22: I downgraded to version 11.1.2 (same version as another app of mine which didn't have this issue) and the issue no longer appears. While this allows me to move forward, I more or less circumvented the issue than resolved it. I'll leave this open and hopefully a true fix can be discovered.
Original Post:
I need my Angular 13.0.0 app to run offline (no Internet) and in a war with embedded tomcat. The initial page is a login page and the HTML and Javascript (compiled TS) seem to work fine as logging in reaches the back end successfully and the home page loads. Upon commenting out my styles.scss file and running online, I'm seeing the exact issue. In addition, running offline via Angular CLI does not produce this issue.
I can literally leave the executable war running and disable my wifi to go from having CSS to not having it. The opposite is also true. Based on that, the issue appears to be completely in the front end.
I've done this with other applications but older versions (11.1.2 and 10.0.0-rc.6 and not using embedded containers) this issue doesn't occur. I've reviewed the angular.json files from those applications and I don't see any glaring differences. Did something change in the newer versions of Angular? Otherwise, there’s something I may be missing due to the container being embedded.
The entire app is missing CSS but to keep it simple here is how my login page looks:
Offline:
Online:
Here is my angular.json:
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"cli": {
"analytics": false
},
"version": 1,
"newProjectRoot": "projects",
"projects": {
"client": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "../src/main/resources/static",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"development": {
"sourceMap": true,
"optimization": false
},
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "20mb",
"maximumError": "25mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "20mb",
"maximumError": "25mb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "client:build:development"
},
"configurations": {
"production": {
"browserTarget": "client:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "client:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.scss"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"client-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "client:serve"
},
"configurations": {
"production": {
"devServerTarget": "client:serve:production"
}
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "client"
}
And my client build.gradle file:
plugins {
id "com.github.node-gradle.node" version "3.1.1"
}
node {
version = '17.0.1'
npmVersion = '8.1.0'
download = true
workDir = file("${project.buildDir}/node")
nodeModulesDir = file("${project.projectDir}")
}
task buildClient(type: NpmTask) {
group = 'build'
description = 'Compile client side assets for production'
args = ['run', 'build:prod']
}
buildClient.dependsOn(npm_install)
And finally, my main build.gradle file (there are only two):
buildscript {
ext {
springBootVersion = '2.4.3'
}
dependencies {
classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
}
}
plugins {
id 'org.springframework.boot' version "${springBootVersion}"
id 'io.spring.dependency-management' version '1.0.11.RELEASE'
id 'java'
}
apply plugin: 'war'
group = 'com.group.'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'
repositories {
mavenCentral()
}
task deleteStaticFolder(type: Delete) {
def dirName = "src/main/resources/static"
file( dirName ).list().each{
f ->
delete "${dirName}/${f}"
}
}
processResources.dependsOn('client:buildClient')
println 'Using build.gradle'
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-data-rest'
// https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-data-jpa
implementation group: 'org.springframework.boot', name: 'spring-boot-starter-data-jpa', version: '2.3.9.RELEASE'
implementation 'org.springframework.boot:spring-boot-starter-web'
implementation 'org.springframework.boot:spring-boot-starter-data-jdbc'
// https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-tomcat
implementation group: 'org.springframework.boot', name: 'spring-boot-starter-tomcat', version: '2.5.6'
compileOnly 'org.projectlombok:lombok'
implementation 'com.microsoft.sqlserver:mssql-jdbc'
annotationProcessor 'org.projectlombok:lombok'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
// https://mvnrepository.com/artifact/com.fasterxml.jackson.dataformat/jackson-dataformat-csv
implementation group: 'com.fasterxml.jackson.dataformat', name: 'jackson-dataformat-csv', version: '2.13.0'
// https://mvnrepository.com/artifact/com.jcraft/jsch
implementation group: 'com.jcraft', name: 'jsch', version: '0.1.55'
// https://mvnrepository.com/artifact/com.unboundid/unboundid-ldapsdk
implementation group: 'com.unboundid', name: 'unboundid-ldapsdk', version: '5.1.4'
// https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-websocket
implementation group: 'org.springframework.boot', name: 'spring-boot-starter-websocket', version: '2.5.6'
}
test {
useJUnitPlatform()
}
I've spent way too much time on this and I'm out of ideas. Things I’ve tried:
Update 12/28/21 - created a simple CSS class (changing the background color) in styles.scss and referenced it in the login component template. With an Internet connection, the class was applied, without a connection it was not.
Different things in the angular.json related to architect/build/configurations/production`
Commenting out the RequestFilter class in my spring boot code
Cleared browser cache to make sure online/offline comparisons are accurate
Network tab:
Offline:
Online:
Console:
Offline:
Online:
The missing theme console warning is suspicious but as it appears even when the CSS is working I am not convinced it's related.
Finally, the Roboto font error is also present in the console for my other apps but doesn't impact their CSS so again I don't believe is causing my CSS to be MIA.
Thank you in advance!
I'm using Sublime Text 3, and CSS Linter.
In my settings I've put the ignore rule, and currently there is only the "outline-none" rule, I'd like to include all the rules which refer to IE6 and IE7 based errors.
Is there a list what are the IE6 and IE7 rules so that I can put them in the ignore array?
My CSSLint.sublime-settings look like this:
// CSSLint rules you wish to ignore. Must be an array. Leave blank to include all default rules.
{
"ignore": ["outline-none"]
}
To answer my own question, in the end I figured how to do what I need:
{
"user": {
"debug": false,
"delay": 0.25,
"error_color": "D02000",
"gutter_theme": "Packages/SublimeLinter/gutter-themes/Danish Royalty/Danish Royalty.gutter-theme",
"gutter_theme_excludes": [],
"lint_mode": "background",
"linters": {
"csslint": {
"#disable": false,
"args": [],
"box-sizing": false,
"errors": "",
"excludes": [],
"ignore": [
"outline-none",
"box-sizing",
"ids",
"adjoining-classes",
"floats",
"qualified-headings",
"unique-headings",
"important",
"universal-selector",
"box-model",
"font-faces",
"font-sizes"
],
"warnings": ""
},
"eslint": {
"#disable": true,
"args": [],
"excludes": []
},
"jscs": {
"#disable": true,
"args": [],
"excludes": []
},
"jshint": {
"#disable": false,
"args": [],
"excludes": [],
"ignore": [
"newcap"
],
"newcap": false,
"tab_size": 4
},
"jslint": {
"#disable": true,
"args": [],
"excludes": [],
"ignore": [
"newcap"
],
"newcap": false
},
"php": {
"#disable": false,
"args": [],
"excludes": []
}
},
"mark_style": "outline",
"no_column_highlights_line": false,
"passive_warnings": false,
"paths": {
"linux": [],
"osx": [],
"windows": []
},
"python_paths": {
"linux": [],
"osx": [],
"windows": []
},
"rc_search_limit": 3,
"shell_timeout": 10,
"show_errors_on_save": false,
"show_marks_in_minimap": true,
"syntax_map": {
"html (django)": "html",
"html (rails)": "html",
"html 5": "html",
"php": "html",
"python django": "python"
},
"warning_color": "D02000",
"wrap_find": true
}
}
Just go to Preferences > Package Settings > SublimeLinter > Settings - User and paste the above in the opened file.
These are the options that I found not to be of practical importance, so I just ignored them.
Hope it helps :)
I'm new to bower and grunt and I just started my first project with the below bower dependancies:
bower.json
{
"name": "test",
"version": "0.0.0",
"authors": [
""
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"bootstrap-rtl": "~0.9.1",
"jquery-ui-bootstrap": "~0.2.5",
"jquery-ui": "~1.10.3",
"jquery": "~2.0.3"
},
"exportsOverride": {
"*": {
"js": "**/*.js",
"css": "**/*.css"
}
}
}
Gruntfile.js
module.exports = function(grunt) {
// Configuration goes here
grunt.initConfig({
bower: {
install: {
options: {
targetDir: './lib',
layout: 'byType',
install: true,
verbose: false,
cleanTargetDir: false,
cleanBowerDir: false,
bowerOptions: {}
}
}
}
//--end
});
// Load plugins here
grunt.loadNpmTasks('grunt-bower-task');
// Define your tasks here
grunt.registerTask('default', ['bower']);
};
I noticed that bower_components/bootstrap-rtl/ contains another Gruntfile.js.
Is there away to call bower_components/bootstrap-rtl/Gruntfile.js from my Gruntfile.js before the bower:install?
You can use --gruntfile to determine the location of the Gruntfile.
Check out the CLI source code for more info.
Example use:
grunt jshint --gruntfile bower_components/bootstrap-rtl/Gruntfile.js
You could also use grunt-grunt, which I just wrote for this kind of scenario.
You configure it like this:
grunt.initConfig({
grunt: {
boots: {
gruntfile: 'bower_components/bootstrap-rtl/Gruntfile.js',
tasks: ['some', 'tasks']
}
}
});
Then you could just set up an alias, such as below:
grunt.registerTask('build', ['grunt:boots', 'compile']);
Hope it works for you.