@vijayhardaha/dev-config 2.1.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vijayhardaha/dev-config",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Reusable development configurations for Next.js + TypeScript projects",
   "scripts": {
     "lint": "eslint .",
@@ -51,6 +51,7 @@
     "./commitlint": "./src/commitlint/index.js",
     "./stylelint": "./src/stylelint/index.js",
     "./next-sitemap": "./src/next-sitemap/index.js",
+    "./gulp-smacss": "./src/gulp-smacss/index.js",
     "./tsconfig": "./src/tsconfig/index.json",
     "./jsconfig": "./src/jsconfig/index.json"
   },
@@ -66,30 +67,30 @@
   ],
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@commitlint/cli": "^21.0.2",
-    "@commitlint/config-conventional": "^21.0.2",
-    "@commitlint/types": "^21.0.1",
-    "@typescript-eslint/parser": "^8.61.0",
-    "@typescript-eslint/eslint-plugin": "^8.61.0",
-    "@vitest/coverage-v8": "^4.1.8",
-    "eslint": "^10.4.1",
+    "@commitlint/cli": "^21.1.0",
+    "@commitlint/config-conventional": "^21.1.0",
+    "@commitlint/types": "^21.1.0",
+    "@typescript-eslint/parser": "^8.62.0",
+    "@typescript-eslint/eslint-plugin": "^8.62.0",
+    "@vitest/coverage-v8": "^4.1.9",
+    "eslint": "^10.5.0",
     "eslint-config-next": "^16.2.9",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-import-x": "^4.16.2",
-    "eslint-plugin-jsdoc": "^63.0.2",
+    "eslint-plugin-import-x": "^4.17.0",
+    "eslint-plugin-jsdoc": "^63.0.7",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.5.6",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "globals": "^17.6.0",
+    "globals": "^17.7.0",
     "husky": "^9.1.7",
     "next": "^16.2.9",
     "prettier": "^3.8.4",
     "@prettier/plugin-xml": "^3.4.2",
     "release-it": "^20.2.0",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.61.0",
-    "vitest": "^4.1.8"
+    "typescript-eslint": "^8.62.0",
+    "vitest": "^4.1.9"
   },
   "peerDependencies": {
     "@commitlint/cli": ">=21",

package/src/gulp-smacss/index.js

@@ -0,0 +1,267 @@
+// ── Positioning ──
+const positioning = [
+  'position',
+  'z-index',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'inset',
+  'inset-block',
+  'inset-inline',
+  'inset-block-start',
+  'inset-block-end',
+  'inset-inline-start',
+  'inset-inline-end',
+];
+
+// ── Display & visibility ──
+const displayVisibility = ['display', 'visibility', 'opacity'];
+
+// ── Float & clear ──
+const floatClear = ['float', 'clear'];
+
+// ── Flex & grid ──
+const flexGrid = [
+  'flex',
+  'flex-grow',
+  'flex-shrink',
+  'flex-basis',
+  'flex-flow', // shorthand for flex-direction + flex-wrap
+  'flex-direction',
+  'flex-wrap',
+  'justify-content',
+  'align-items',
+  'align-self',
+  'align-content',
+  'place-items',
+  'place-content',
+  'place-self',
+  'order',
+  'gap',
+  'row-gap',
+  'column-gap',
+  'grid',
+  'grid-template',
+  'grid-template-columns',
+  'grid-template-rows',
+  'grid-template-areas',
+  'grid-area',
+  'grid-column',
+  'grid-row',
+  'grid-auto-flow',
+  'grid-auto-columns',
+  'grid-auto-rows',
+];
+
+// ── Box model ──
+const boxModel = [
+  'columns',
+  'column-width',
+  'column-count',
+  'column-rule',
+  'column-span',
+  'column-fill',
+  'width',
+  'min-width',
+  'max-width',
+  'height',
+  'min-height',
+  'max-height',
+  'aspect-ratio',
+  'margin',
+  'margin-top',
+  'margin-right',
+  'margin-bottom',
+  'margin-left',
+  'margin-block',
+  'margin-inline',
+  'padding',
+  'padding-top',
+  'padding-right',
+  'padding-bottom',
+  'padding-left',
+  'padding-block',
+  'padding-inline',
+  'overflow',
+  'overflow-x',
+  'overflow-y',
+  'box-sizing',
+];
+
+// ── Border ──
+const border = [
+  'border',
+  'border-top',
+  'border-right',
+  'border-bottom',
+  'border-left',
+  'border-color',
+  'border-style',
+  'border-width',
+  'border-radius',
+  'border-image',
+  'border-image-source',
+  'border-image-slice',
+  'border-image-width',
+  'border-image-outset',
+  'border-image-repeat',
+  'outline',
+  'outline-color',
+  'outline-style',
+  'outline-width',
+  'box-shadow',
+];
+
+// ── Table ──
+const table = ['border-collapse', 'border-spacing', 'table-layout', 'caption-side', 'empty-cells'];
+
+// ── Background ──
+const background = [
+  'background',
+  'background-color',
+  'background-image',
+  'background-repeat',
+  'background-position',
+  'background-size',
+  'background-clip',
+  'background-origin',
+  'background-attachment',
+  'background-blend-mode',
+];
+
+// ── Text & typography ──
+const textTypography = [
+  'color',
+  'font',
+  'font-family',
+  'font-size',
+  'font-style',
+  'font-weight',
+  'font-variant',
+  'font-variant-caps',
+  'font-variant-ligatures',
+  'font-variant-numeric',
+  'font-variant-east-asian',
+  'font-kerning',
+  'font-feature-settings',
+  'font-optical-sizing',
+  'font-stretch',
+  'line-height',
+  'letter-spacing',
+  'word-spacing',
+  'text-align',
+  'text-align-last',
+  'text-justify',
+  'text-indent',
+  'text-transform',
+  'text-decoration',
+  'text-decoration-color',
+  'text-decoration-style',
+  'text-decoration-thickness',
+  'text-underline-offset',
+  'text-underline-position',
+  'text-shadow',
+  'text-overflow',
+  'white-space',
+  'word-break',
+  'overflow-wrap',
+  'word-wrap', // legacy alias for overflow-wrap
+  'hyphens',
+  'tab-size',
+  'vertical-align',
+  'direction',
+  'writing-mode',
+  'text-orientation',
+  'text-rendering',
+];
+
+// ── Lists, counters & quotes ──
+const listsCounters = [
+  'list-style',
+  'list-style-type',
+  'list-style-position',
+  'list-style-image',
+  'content',
+  'quotes',
+  'counter-reset',
+  'counter-increment',
+  'counter-set',
+];
+
+// ── Transform & animation ──
+const transformAnimation = [
+  'transform',
+  'transform-origin',
+  'transform-style',
+  'perspective',
+  'perspective-origin',
+  'backface-visibility',
+  'transition',
+  'transition-property',
+  'transition-duration',
+  'transition-timing-function',
+  'transition-delay',
+  'animation',
+  'animation-name',
+  'animation-duration',
+  'animation-timing-function',
+  'animation-delay',
+  'animation-iteration-count',
+  'animation-direction',
+  'animation-fill-mode',
+  'animation-play-state',
+  'filter',
+  'backdrop-filter',
+  'mix-blend-mode',
+  'isolation',
+];
+
+// ── Cursor & pointer ──
+const cursorPointer = ['cursor', 'pointer-events', 'user-select'];
+
+// ── Scroll ──
+const scroll = [
+  'scroll-behavior',
+  'scroll-snap-type',
+  'scroll-snap-align',
+  'scroll-snap-stop',
+  'scroll-margin',
+  'scroll-padding',
+  'overscroll-behavior',
+];
+
+// ── Other ──
+const other = [
+  'clip-path',
+  'clip',
+  'object-fit',
+  'object-position',
+  'resize',
+  'appearance',
+  'accent-color',
+  'caret-color',
+  'color-scheme',
+  'contain',
+  'container',
+  'container-type',
+  'container-name',
+];
+
+// ── Final merged order (SMACSS) ──
+export const smacssOrder = [
+  ...positioning,
+  ...displayVisibility,
+  ...floatClear,
+  ...flexGrid,
+  ...boxModel,
+  ...border,
+  ...table,
+  ...background,
+  ...textTypography,
+  ...listsCounters,
+  ...transformAnimation,
+  ...cursorPointer,
+  ...scroll,
+  ...other,
+];

package/src/gulp-smacss/index.test.js

@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest';
+
+// Test suite for the gulp-smacss module.
+describe('gulp-smacss/index.js', () => {
+  it('should export smacssOrder array', async () => {
+    const module = await import('./index.js');
+
+    expect(Array.isArray(module.smacssOrder)).toBe(true);
+  });
+
+  it('should include expected SMACSS properties in the order', async () => {
+    const module = await import('./index.js');
+
+    expect(module.smacssOrder).toContain('position');
+    expect(module.smacssOrder).toContain('display');
+    expect(module.smacssOrder).toContain('margin');
+    expect(module.smacssOrder).toContain('border');
+    expect(module.smacssOrder).toContain('color');
+  });
+});