Skip to content
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.

Sign up for GitHub

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

Stylelint Update package.json for ECMAScript modules and enhance Stylelint configdev #62

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Stylelint Update package.json for ECMAScript modules and enhance Stylelint configdev #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bb63a97
Create sample.css
cr-ruhanmuzaffar Dec 12, 2024
57cf402
Create stylelint.config.js
cr-ruhanmuzaffar Dec 12, 2024
4fd7330
Update package.json
cr-ruhanmuzaffar Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"name": "test_repo_1",
"version": "1.0.0",
"type":"module",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Migration to ESM Required for Some Files

The codebase contains mixed module systems that need attention:

  • scripts/checkovPolicyScrapper.js and detekt.js use CommonJS (require)
  • stylelint.config.js already uses ESM (export default)

These files need to be updated to maintain consistency with the new "type": "module" setting:

  • scripts/checkovPolicyScrapper.js:

    import fs from 'fs';
import path from 'path';

  • detekt.js:

    import { access, constants, readFile, writeFile } from "node:fs/promises";
import { join } from "node:path";
🔗 Analysis chain

Verify Compatibility with ECMAScript Modules

The addition of "type": "module" in package.json indicates that the project is using ECMAScript modules (ESM). This affects how Node.js interprets .js files, treating them as ESM modules by default. If your project contains CommonJS modules (using require and module.exports), this change may cause compatibility issues.

Ensure that all .js files in your project are updated to use ESM syntax (e.g., import, export) or consider potential impacts. Run the following script to check for require and module.exports usage:

This script searches for CommonJS patterns that may need to be updated to ESM syntax.

Let me check the actual content of these files to better understand their context and usage.

Let me check if there are any other JavaScript files in the project to ensure we have a complete picture.

Let me check the content of the remaining JavaScript file we haven't seen yet.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Search for CommonJS syntax in .js files.

# Find occurrences of 'require' or 'module.exports' in .js files.
rg 'require\(|module\.exports' --glob '*.js'

Length of output: 305

Script:

#!/bin/bash
# Get content of the files that use CommonJS
echo "=== checkovPolicyScrapper.js ==="
cat scripts/checkovPolicyScrapper.js
echo -e "\n=== detekt.js ==="
cat detekt.js

Length of output: 5283

Script:

#!/bin/bash
# Find all JavaScript files in the project
echo "=== All JavaScript files ==="
fd -e js

# Check if there are any ESM imports in JS files
echo -e "\n=== Files with ESM imports ==="
rg 'import .* from' --glob '*.js'

Length of output: 253

Script:

#!/bin/bash
# Get content of stylelint.config.js
echo "=== stylelint.config.js ==="
cat stylelint.config.js

Length of output: 4268

"description": "For testing",
"main": "index.js",
"scripts": {
Expand Down
40 changes: 40 additions & 0 deletions sample.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/* Example CSS with intentional errors */

/* 1. Improper indentation and inconsistent spacing */
body {
color: #ffffff; /* Extra spaces before and after value, uppercase hex */
background-color: #000000; /* Missing space after colon */
font-size: 12px; /* Improper indentation */
}

/* 2. Using IDs in selectors (often discouraged) */
#main-content {
padding: 10px; /* Missing space after colon, no space before unit could be allowed or not depending on config */
border: solid 1px red; /* Extra spaces and no zero before unit for clarity */
}

/* 3. Vendor prefixes that might be unnecessary or incorrectly placed */
.button {
-webkit-border-radius: 5px; /* Might be flagged if unnecessary */
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Remove unnecessary vendor prefix -webkit-border-radius

Vendor prefixes for border-radius are generally unnecessary in modern browsers. Additionally, your Stylelint configuration prohibits vendor prefixes ("property-no-vendor-prefix": [true]).

Apply this diff to remove the vendor-prefixed property:

-    -webkit-border-radius: 5px; /* Might be flagged if unnecessary */
     border-radius: 5px;

Committable suggestion skipped: line range outside the PR's diff.

border-radius: 5px;

margin: 0.5rem; /* Extra space before colon */
line-height: 0.9; /* Missing leading zero before decimal value (.9 instead of 0.9) */
}

/* 4. Use of !important (often discouraged) */
.alert {
color: red !important; /* Use of !important */
}

/* 5. Property with a likely misspelling or non-standard property (stylelint may flag unknown properties) */
.footer {
colr: blue; /* 'colr' is not a valid CSS property */
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix invalid CSS property colr

The property colr is not a valid CSS property. It appears to be a typo and should be color.

Apply the following diff to correct the property name:

-    colr: blue; /* 'colr' is not a valid CSS property */
+    color: blue; /* Corrected property name */
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
colr: blue; /* 'colr' is not a valid CSS property */
color: blue; /* Corrected property name */
🧰 Tools
🪛 Biome (1.9.4)

[error] 32-32: Unknown property is not allowed.

See CSS Specifications and browser specific properties for more details.
To resolve this issue, replace the unknown property with a valid CSS property.

(lint/correctness/noUnknownProperty)

}

/* 6. Trailing whitespace at the end of line below might cause a warning */
.header {
color: green;
}

/* 7. Missing newline at end of file */
138 changes: 138 additions & 0 deletions stylelint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
/** @type {import('stylelint').Config} */
export default {
Comment on lines +1 to +2
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Switch to CommonJS Export for Stylelint Configuration

The stylelint.config.js file uses ES Module syntax with export default, but Stylelint expects the configuration to be exported using CommonJS syntax. This may cause Stylelint to not recognize the configuration.

Apply this diff to change the export to CommonJS format:

-/** @type {import('stylelint').Config} */
-export default {
+/** @type {import('stylelint').Config} */
+module.exports = {

This change ensures compatibility with Stylelint by using the expected module export format.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
/** @type {import('stylelint').Config} */
export default {
/** @type {import('stylelint').Config} */
module.exports = {

rules: {
"alpha-value-notation": [
"percentage",
{
exceptProperties: [
"opacity",
"fill-opacity",
"flood-opacity",
"stop-opacity",
"stroke-opacity",
],
},
],
"at-rule-empty-line-before": [
"always",
{
except: ["blockless-after-same-name-blockless", "first-nested"],
ignore: ["after-comment"],
},
],
"at-rule-no-vendor-prefix": [true],
"color-function-notation": ["modern"],
"color-hex-length": ["short"],
"comment-empty-line-before": [
"always",
{
except: ["first-nested"],
ignore: ["stylelint-commands"],
},
],
"comment-whitespace-inside": ["always"],
"custom-property-empty-line-before": [
"always",
{
except: ["after-custom-property", "first-nested"],
ignore: ["after-comment", "inside-single-line-block"],
},
],
"custom-media-pattern": ["^([a-z][a-z0-9]*)(-[a-z0-9]+)*$", {}],
"custom-property-pattern": ["^([a-z][a-z0-9]*)(-[a-z0-9]+)*$", {}],
"declaration-block-no-redundant-longhand-properties": [true],
"declaration-block-single-line-max-declarations": [1],
"declaration-empty-line-before": [
"always",
{
except: ["after-declaration", "first-nested"],
ignore: ["after-comment", "inside-single-line-block"],
},
],
"font-family-name-quotes": ["always-where-recommended"],
"function-name-case": ["lower"],
"function-url-quotes": ["always"],
"hue-degree-notation": ["angle"],
"import-notation": ["url"],
"keyframe-selector-notation": [
"percentage-unless-within-keyword-only-block",
],
"keyframes-name-pattern": ["^([a-z][a-z0-9]*)(-[a-z0-9]+)*$", {}],
"length-zero-no-unit": [
true,
{
ignore: ["custom-properties"],
},
],
"lightness-notation": ["percentage"],
"media-feature-name-no-vendor-prefix": [true],
"media-feature-range-notation": ["context"],
"number-max-precision": [4],
"property-no-vendor-prefix": [true],
"rule-empty-line-before": [
"always-multi-line",
{
except: ["first-nested"],
ignore: ["after-comment"],
},
],
"selector-attribute-quotes": ["always"],
"selector-class-pattern": ["^([a-z][a-z0-9]*)(-[a-z0-9]+)*$", {}],
"selector-id-pattern": ["^([a-z][a-z0-9]*)(-[a-z0-9]+)*$", {}],
"selector-no-vendor-prefix": [true],
"selector-not-notation": ["complex"],
"selector-pseudo-element-colon-notation": ["double"],
"selector-type-case": ["lower"],
"shorthand-property-no-redundant-values": [true],
"value-keyword-case": ["lower"],
"value-no-vendor-prefix": [
true,
{
ignoreValues: ["box", "inline-box"],
},
],
"annotation-no-unknown": [true],
"at-rule-no-unknown": [true],
"block-no-empty": [true],
"color-no-invalid-hex": [true],
"comment-no-empty": [true],
"custom-property-no-missing-var-function": [true],
"declaration-block-no-duplicate-custom-properties": [true],
"declaration-block-no-duplicate-properties": [
true,
{
ignore: ["consecutive-duplicates-with-different-syntaxes"],
},
],
"declaration-block-no-shorthand-property-overrides": [true],
"font-family-no-duplicate-names": [true],
"font-family-no-missing-generic-family-keyword": [true],
"function-calc-no-unspaced-operator": [true],
"function-linear-gradient-no-nonstandard-direction": [true],
"function-no-unknown": [true],
"keyframe-block-no-duplicate-selectors": [true],
"keyframe-declaration-no-important": [true],
"media-feature-name-no-unknown": [true],
"media-query-no-invalid": [true],
"named-grid-areas-no-invalid": [true],
"no-descending-specificity": [true],
"no-duplicate-at-import-rules": [true],
"no-duplicate-selectors": [true],
"no-empty-source": [true],
"no-invalid-double-slash-comments": [true],
"no-invalid-position-at-import-rule": [true],
"no-irregular-whitespace": [true],
"property-no-unknown": [true],
"selector-anb-no-unmatchable": [true],
"selector-pseudo-class-no-unknown": [true],
"selector-pseudo-element-no-unknown": [true],
"selector-type-no-unknown": [
true,
{
ignore: ["custom-elements"],
},
],
"string-no-newline": [true],
"unit-no-unknown": [true],
},
}