feat: add styled-jsx syntax parsing to stylelint (#466)

* chore: add styled jsx syntax * feat: add stylelint to check styled-jsx css in js * style: fix typo * refactor: use recommended approach for applying custom syntax
dhis2 · May 22, 2024 · 7da0346 · 7da0346
1 parent 32d0a7c
commit 7da0346
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 0 deletions.
diff --git a/config/stylelint.config.js b/config/stylelint.config.js
@@ -1,4 +1,7 @@
 module.exports = {
+    overrides: [
+        { files: '**/*.{js,jsx,ts,tsx}', customSyntax: 'postcss-styled-jsx' },
+    ],
     plugins: ['stylelint-use-logical'],
     rules: {
         'csstools/use-logical': [

diff --git a/package.json b/package.json
@@ -42,6 +42,9 @@
         "husky": "^7.0.2",
         "micromatch": "^4.0.4",
         "perfy": "^1.1.5",
+        "postcss": "^8.4.38",
+        "postcss-styled-jsx": "^1.0.1",
+        "postcss-syntax": "^0.36.2",
         "prettier": "^2.4.1",
         "semver": "^7.3.5",
         "stylelint": "^16.3.1",

diff --git a/src/commands/types/javascript.js b/src/commands/types/javascript.js
@@ -3,6 +3,7 @@ const { callback: runCb } = require('@dhis2/cli-helpers-engine').exec
 const { exit } = require('@dhis2/cli-helpers-engine')
 const { eslint } = require('../../tools/eslint.js')
 const { prettier } = require('../../tools/prettier.js')
+const { stylelint } = require('../../tools/stylelint.js')
 const { configured } = require('../../utils/config.js')
 const { selectFiles } = require('../../utils/files.js')
 const {
@@ -78,6 +79,17 @@ exports.handler = (argv, callback) => {
         log.log('No Prettier configuration found')
     }
 
+    if (configured('stylelint')) {
+        log.info('javascript > stylelint')
+        stylelint({
+            apply,
+            files: jsFiles,
+            callback: finalStatus,
+        })
+    } else {
+        log.log('No Stylelint configuration found')
+    }
+
     if (!callback) {
         log.debug(sayFilesChecked('javascript', jsFiles.length, apply))
         exit(finalStatus())

diff --git a/yarn.lock b/yarn.lock
@@ -4484,6 +4484,16 @@ postcss-selector-parser@^6.0.16:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
+postcss-styled-jsx@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-styled-jsx/-/postcss-styled-jsx-1.0.1.tgz#07c17ca3bc574a06627103bb5dd475006c2d0d9e"
+  integrity sha512-508Vg2A0pHQstRxz8eoNYiT+RiCZdgE4EqN0x8oiPIZ/a6pp5q2NYefL39RRG8ORlxDehLHU3u/EOpux0kuATQ==
+
+postcss-syntax@^0.36.2:
+  version "0.36.2"
+  resolved "https://registry.yarnpkg.com/postcss-syntax/-/postcss-syntax-0.36.2.tgz#f08578c7d95834574e5593a82dfbfa8afae3b51c"
+  integrity sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==
+
 postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"