@culur/config-stylelint 1.3.8 → 1.4.0

package/dist/shareable-configs/none.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkA2NZOYLK_cjs = require('../chunk-A2NZOYLK.cjs');
-require('../chunk-MXOP2HB2.cjs');
+var chunkBT2UAWU5_cjs = require('../chunk-BT2UAWU5.cjs');
+require('../chunk-OJBMU5EQ.cjs');
 require('../chunk-5ZIVWI7Q.cjs');
 
 
 
-module.exports = chunkA2NZOYLK_cjs.none_default;
+module.exports = chunkBT2UAWU5_cjs.none_default;
 //# sourceMappingURL=none.cjs.map
 //# sourceMappingURL=none.cjs.map

package/dist/shareable-configs/none.js

@@ -1,5 +1,5 @@
-export { none_default as default } from '../chunk-UBTDEDPU.js';
-import '../chunk-UEUXXDU5.js';
+export { none_default as default } from '../chunk-K2R66Y7L.js';
+import '../chunk-7YJC5A7X.js';
 import '../chunk-KEXKKQVW.js';
 //# sourceMappingURL=none.js.map
 //# sourceMappingURL=none.js.map

package/dist/shareable-configs/sass-vue.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkOG7QOQGS_cjs = require('../chunk-OG7QOQGS.cjs');
-require('../chunk-MXOP2HB2.cjs');
+var chunkFCMONRWK_cjs = require('../chunk-FCMONRWK.cjs');
+require('../chunk-OJBMU5EQ.cjs');
 require('../chunk-5ZIVWI7Q.cjs');
 
 
 
-module.exports = chunkOG7QOQGS_cjs.sass_vue_default;
+module.exports = chunkFCMONRWK_cjs.sass_vue_default;
 //# sourceMappingURL=sass-vue.cjs.map
 //# sourceMappingURL=sass-vue.cjs.map

package/dist/shareable-configs/sass-vue.js

@@ -1,5 +1,5 @@
-export { sass_vue_default as default } from '../chunk-CHZLHGNT.js';
-import '../chunk-UEUXXDU5.js';
+export { sass_vue_default as default } from '../chunk-VI54LIUS.js';
+import '../chunk-7YJC5A7X.js';
 import '../chunk-KEXKKQVW.js';
 //# sourceMappingURL=sass-vue.js.map
 //# sourceMappingURL=sass-vue.js.map

package/dist/shareable-configs/sass.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunk44IJ2A3A_cjs = require('../chunk-44IJ2A3A.cjs');
-require('../chunk-MXOP2HB2.cjs');
+var chunkAHYV3TPN_cjs = require('../chunk-AHYV3TPN.cjs');
+require('../chunk-OJBMU5EQ.cjs');
 require('../chunk-5ZIVWI7Q.cjs');
 
 
 
-module.exports = chunk44IJ2A3A_cjs.sass_default;
+module.exports = chunkAHYV3TPN_cjs.sass_default;
 //# sourceMappingURL=sass.cjs.map
 //# sourceMappingURL=sass.cjs.map

package/dist/shareable-configs/sass.js

@@ -1,5 +1,5 @@
-export { sass_default as default } from '../chunk-2CTXRP5Z.js';
-import '../chunk-UEUXXDU5.js';
+export { sass_default as default } from '../chunk-GQ257A2K.js';
+import '../chunk-7YJC5A7X.js';
 import '../chunk-KEXKKQVW.js';
 //# sourceMappingURL=sass.js.map
 //# sourceMappingURL=sass.js.map

package/dist/shareable-configs/tailwind3-sass-vue.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var chunk5HZAPKJK_cjs = require('../chunk-5HZAPKJK.cjs');
+require('../chunk-OJBMU5EQ.cjs');
+require('../chunk-5ZIVWI7Q.cjs');
+
+
+
+module.exports = chunk5HZAPKJK_cjs.tailwind3_sass_vue_default;
+//# sourceMappingURL=tailwind3-sass-vue.cjs.map
+//# sourceMappingURL=tailwind3-sass-vue.cjs.map

package/dist/shareable-configs/{tailwind-sass-vue.js.map → tailwind3-sass-vue.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"tailwind-sass-vue.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"tailwind3-sass-vue.cjs"}

package/dist/shareable-configs/tailwind3-sass-vue.js

@@ -0,0 +1,5 @@
+export { tailwind3_sass_vue_default as default } from '../chunk-VAAZVLQ7.js';
+import '../chunk-7YJC5A7X.js';
+import '../chunk-KEXKKQVW.js';
+//# sourceMappingURL=tailwind3-sass-vue.js.map
+//# sourceMappingURL=tailwind3-sass-vue.js.map

package/dist/shareable-configs/{tailwind-sass-vue.cjs.map → tailwind3-sass-vue.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"tailwind-sass-vue.cjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"tailwind3-sass-vue.js"}

package/dist/shareable-configs/tailwind3-sass.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var chunkWEHMG43L_cjs = require('../chunk-WEHMG43L.cjs');
+require('../chunk-OJBMU5EQ.cjs');
+require('../chunk-5ZIVWI7Q.cjs');
+
+
+
+module.exports = chunkWEHMG43L_cjs.tailwind3_sass_default;
+//# sourceMappingURL=tailwind3-sass.cjs.map
+//# sourceMappingURL=tailwind3-sass.cjs.map

package/dist/shareable-configs/tailwind3-sass.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"tailwind3-sass.cjs"}

package/dist/shareable-configs/tailwind3-sass.js

@@ -0,0 +1,5 @@
+export { tailwind3_sass_default as default } from '../chunk-ETSJ5CPB.js';
+import '../chunk-7YJC5A7X.js';
+import '../chunk-KEXKKQVW.js';
+//# sourceMappingURL=tailwind3-sass.js.map
+//# sourceMappingURL=tailwind3-sass.js.map

package/dist/shareable-configs/{tailwind-sass.cjs.map → tailwind3-sass.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"tailwind-sass.cjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"tailwind3-sass.js"}

package/dist/shareable-configs/tailwind3.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var chunk2L6F34NR_cjs = require('../chunk-2L6F34NR.cjs');
+require('../chunk-OJBMU5EQ.cjs');
+require('../chunk-5ZIVWI7Q.cjs');
+
+
+
+module.exports = chunk2L6F34NR_cjs.tailwind3_default;
+//# sourceMappingURL=tailwind3.cjs.map
+//# sourceMappingURL=tailwind3.cjs.map

package/dist/shareable-configs/{tailwind-sass.js.map → tailwind3.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"tailwind-sass.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"tailwind3.cjs"}

package/dist/shareable-configs/tailwind3.js

@@ -0,0 +1,5 @@
+export { tailwind3_default as default } from '../chunk-Q5FJF5TP.js';
+import '../chunk-7YJC5A7X.js';
+import '../chunk-KEXKKQVW.js';
+//# sourceMappingURL=tailwind3.js.map
+//# sourceMappingURL=tailwind3.js.map

package/dist/shareable-configs/{tailwind.cjs.map → tailwind3.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"tailwind.cjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"tailwind3.js"}

package/dist/shareable-configs/tailwind4-vue.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var chunkIRWIKWXE_cjs = require('../chunk-IRWIKWXE.cjs');
+require('../chunk-OJBMU5EQ.cjs');
+require('../chunk-5ZIVWI7Q.cjs');
+
+
+
+module.exports = chunkIRWIKWXE_cjs.tailwind4_vue_default;
+//# sourceMappingURL=tailwind4-vue.cjs.map
+//# sourceMappingURL=tailwind4-vue.cjs.map

package/dist/shareable-configs/tailwind4-vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"tailwind4-vue.cjs"}

package/dist/shareable-configs/tailwind4-vue.d.cts

@@ -0,0 +1,5 @@
+import * as node_modules_stylelint_types_stylelint from 'node_modules/stylelint/types/stylelint';
+
+declare const _default: node_modules_stylelint_types_stylelint.Config;
+
+export { _default as default };

package/dist/shareable-configs/tailwind4-vue.d.ts

@@ -0,0 +1,5 @@
+import * as node_modules_stylelint_types_stylelint from 'node_modules/stylelint/types/stylelint';
+
+declare const _default: node_modules_stylelint_types_stylelint.Config;
+
+export { _default as default };

package/dist/shareable-configs/tailwind4-vue.js

@@ -0,0 +1,5 @@
+export { tailwind4_vue_default as default } from '../chunk-RK6QB4CM.js';
+import '../chunk-7YJC5A7X.js';
+import '../chunk-KEXKKQVW.js';
+//# sourceMappingURL=tailwind4-vue.js.map
+//# sourceMappingURL=tailwind4-vue.js.map

package/dist/shareable-configs/tailwind4-vue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"tailwind4-vue.js"}

package/dist/shareable-configs/tailwind4.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var chunkNYHPFT42_cjs = require('../chunk-NYHPFT42.cjs');
+require('../chunk-OJBMU5EQ.cjs');
+require('../chunk-5ZIVWI7Q.cjs');
+
+
+
+module.exports = chunkNYHPFT42_cjs.tailwind4_default;
+//# sourceMappingURL=tailwind4.cjs.map
+//# sourceMappingURL=tailwind4.cjs.map

package/dist/shareable-configs/tailwind4.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"tailwind4.cjs"}

package/dist/shareable-configs/tailwind4.d.cts

@@ -0,0 +1,5 @@
+import * as node_modules_stylelint_types_stylelint from 'node_modules/stylelint/types/stylelint';
+
+declare const _default: node_modules_stylelint_types_stylelint.Config;
+
+export { _default as default };

package/dist/shareable-configs/tailwind4.d.ts

@@ -0,0 +1,5 @@
+import * as node_modules_stylelint_types_stylelint from 'node_modules/stylelint/types/stylelint';
+
+declare const _default: node_modules_stylelint_types_stylelint.Config;
+
+export { _default as default };

package/dist/shareable-configs/tailwind4.js

@@ -0,0 +1,5 @@
+export { tailwind4_default as default } from '../chunk-IOXNKZ3W.js';
+import '../chunk-7YJC5A7X.js';
+import '../chunk-KEXKKQVW.js';
+//# sourceMappingURL=tailwind4.js.map
+//# sourceMappingURL=tailwind4.js.map

package/dist/shareable-configs/{tailwind.js.map → tailwind4.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"tailwind.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"tailwind4.js"}

package/dist/shareable-configs/vue.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkZMJKJBWC_cjs = require('../chunk-ZMJKJBWC.cjs');
-require('../chunk-MXOP2HB2.cjs');
+var chunkPZP7E3HL_cjs = require('../chunk-PZP7E3HL.cjs');
+require('../chunk-OJBMU5EQ.cjs');
 require('../chunk-5ZIVWI7Q.cjs');
 
 
 
-module.exports = chunkZMJKJBWC_cjs.vue_default;
+module.exports = chunkPZP7E3HL_cjs.vue_default;
 //# sourceMappingURL=vue.cjs.map
 //# sourceMappingURL=vue.cjs.map

package/dist/shareable-configs/vue.js

@@ -1,5 +1,5 @@
-export { vue_default as default } from '../chunk-EVBVPEHS.js';
-import '../chunk-UEUXXDU5.js';
+export { vue_default as default } from '../chunk-P4T4OD2E.js';
+import '../chunk-7YJC5A7X.js';
 import '../chunk-KEXKKQVW.js';
 //# sourceMappingURL=vue.js.map
 //# sourceMappingURL=vue.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@culur/config-stylelint",
-  "version": "1.3.8",
+  "version": "1.4.0",
   "description": "Culur's stylelint configuration",
   "publishConfig": {
     "access": "public"
@@ -78,7 +78,7 @@
     "stylelint-order": "^6.0.4",
     "stylelint-scss": "^6.11.1",
     "stylelint-selector-bem-pattern": "^4.0.1",
-    "@culur/utils-packages": "1.1.3"
+    "@culur/utils-packages": "1.2.0"
   },
   "devDependencies": {
     "dedent": "^1.5.3",
@@ -86,9 +86,9 @@
     "postcss-html": "^1.8.0",
     "postcss-sass": "^0.5.0",
     "postcss-scss": "^4.0.9",
-    "@culur/config-tsup": "1.2.3",
+    "@culur/config-tsup": "1.2.4",
     "@culur/config-typescript": "1.1.1",
-    "@culur/config-vite": "1.1.5"
+    "@culur/config-vite": "1.1.6"
   },
   "peerDependencies": {
     "stylelint": ">=16.14.1"

package/src/configs/css.ts

@@ -4,6 +4,7 @@ import { atRuleNoDeprecated } from '~/rules/at-rule-no-deprecated';
 import { atRuleNoUnknownCSS } from '~/rules/at-rule-no-unknown';
 import { declarationBlockNoRedundantLonghandProperties } from '~/rules/declaration-block-no-redundant-longhand-properties';
 import { functionNoUnknown } from '~/rules/function-no-unknown';
+import { importNotationCSS } from '~/rules/import-notation';
 import { order } from '~/rules/order';
 import { selectorPseudoClassNoUnknown } from '~/rules/selector-pseudo-class-no-unknown';
 
@@ -11,10 +12,11 @@ export const configCss = (packages: Partial<Packages>): Config => ({
   extends: ['stylelint-config-standard', 'stylelint-config-clean-order'],
   plugins: ['stylelint-order', 'stylelint-selector-bem-pattern'],
   rules: {
-    ...atRuleNoUnknownCSS(packages),
     ...atRuleNoDeprecated(packages), // override this rule in `stylelint-config-standard`
+    ...atRuleNoUnknownCSS(packages),
     ...declarationBlockNoRedundantLonghandProperties,
     ...functionNoUnknown(packages),
+    ...importNotationCSS(packages),
     ...order(packages),
     ...selectorPseudoClassNoUnknown,
     'declaration-empty-line-before': null,

package/src/rules/at-rule-no-deprecated.ts

@@ -4,7 +4,7 @@ import { defineRule, defineRules } from '~/utils';
 // https://github.com/stylelint/stylelint/blob/16.14.1/lib/reference/atKeywords.mjs#L3
 
 export const atRuleNoDeprecatedRule = (packages: Partial<Packages>) =>
-  defineRule<boolean, { ignoreAtRules: (string | RegExp)[] }>([
+  defineRule<true, { ignoreAtRules: (string | RegExp)[] }>([
     true,
     { ignoreAtRules: packages.tailwind ? ['apply'] : [] },
   ]);

package/src/rules/at-rule-no-unknown.ts

@@ -1,24 +1,74 @@
 import type { Packages } from '@culur/utils-packages';
 import { defineRule, defineRules } from '~/utils';
 
-// https://tailwindcss.com/docs/functions-and-directives
-const directives = [
-  'tailwind',
-  'layer',
-  'apply',
-  'config',
-
-  // https://v2.tailwindcss.com/docs/functions-and-directives
-  // backwards compatible for v2
-  'variants',
-  'responsive',
-  'screen',
-];
+const getIgnoreAtRulesByTailwindVersion = (
+  tailwindVersion: false | number | undefined,
+) => {
+  switch (tailwindVersion) {
+    // https://tailwindcss-v0.netlify.app//docs/functions-and-directives
+    case 0:
+      return [
+        // Directives
+        'tailwind',
+        'apply',
+
+        'variants',
+        'responsive',
+        'screen',
+      ];
+
+    // https://v1.tailwindcss.com/docs/functions-and-directives
+    // https://v2.tailwindcss.com/docs/functions-and-directives
+    case 1:
+    case 2:
+      return [
+        // Directives
+        'tailwind',
+        'apply',
+        'layer', // new
+
+        'variants',
+        'responsive',
+        'screen',
+      ];
+
+    // https://v3.tailwindcss.com/docs/functions-and-directives
+    case 3:
+      return [
+        // Directives
+        'tailwind',
+        'layer',
+        'apply',
+        'config', // new
+      ];
+
+    // https://tailwindcss.com/docs/functions-and-directives
+    case 4:
+      return [
+        // Directives
+        'import',
+        'theme',
+        'source',
+        'utility',
+        'variant',
+        'custom-variant',
+        'apply',
+        'reference',
+
+        // Compatibility
+        'config',
+        'plugin',
+      ];
+
+    default:
+      return [];
+  }
+};
 
 export const atRuleNoUnknownRule = (packages: Partial<Packages>) =>
-  defineRule<boolean, { ignoreAtRules: (string | RegExp)[] }>([
+  defineRule<true, { ignoreAtRules: (string | RegExp)[] }>([
     true,
-    { ignoreAtRules: packages.tailwind ? directives : [] },
+    { ignoreAtRules: getIgnoreAtRulesByTailwindVersion(packages.tailwind) },
   ]);
 
 export const atRuleNoUnknownCSS = (packages: Partial<Packages>) =>

package/src/rules/function-no-unknown.ts

@@ -1,31 +1,56 @@
 import type { Packages } from '@culur/utils-packages';
 import { defineRule, defineRules } from '~/utils';
 
+const getIgnoreFunctionsByTailwindVersion = (
+  tailwindVersion: false | number | undefined,
+) => {
+  switch (tailwindVersion) {
+    // https://tailwindcss-v0.netlify.app//docs/functions-and-directives
+    case 0:
+      return ['config'];
+
+    // https://v1.tailwindcss.com/docs/functions-and-directives
+    case 1:
+      return ['theme'];
+
+    // https://v2.tailwindcss.com/docs/functions-and-directives
+    case 2:
+      return ['screen', 'theme'];
+
+    // https://v3.tailwindcss.com/docs/functions-and-directives
+    case 3:
+      return ['theme', 'screen'];
+
+    // https://tailwindcss.com/docs/functions-and-directives
+    case 4:
+      return ['--alpha', '--spacing', 'theme'];
+
+    default:
+      return [];
+  }
+};
+
+const getIgnoreFunctions = (packages: Partial<Packages>) => [
+  // https://tailwindcss.com
+  ...getIgnoreFunctionsByTailwindVersion(packages.tailwind),
+
+  // https://sass-lang.com/documentation/modules/list
+  // https://sass-lang.com/documentation/modules/math
+  // https://sass-lang.com/documentation/modules/color
+  ...(packages.sass //
+    ? [/^(list|math|color)\..+/]
+    : []),
+
+  // https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
+  ...(packages.vue //
+    ? ['v-bind']
+    : []),
+];
+
 export function functionNoUnknownRule(packages: Partial<Packages>) {
-  const ignoreFunctions = [
-    // https://tailwindcss.com/docs/functions-and-directives#functions
-    ...(packages.tailwind //
-      ? ['theme', 'screen']
-      : []),
-
-    // https://sass-lang.com/documentation/modules/list
-    // https://sass-lang.com/documentation/modules/math
-    // https://sass-lang.com/documentation/modules/color
-    ...(packages.sass //
-      ? [/^(list|math|color)\..+/]
-      : []),
-
-    // https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
-    ...(packages.vue //
-      ? ['v-bind']
-      : []),
-  ];
-
-  return defineRule<boolean, { ignoreFunctions: (string | RegExp)[] }>([
+  return defineRule<true, { ignoreFunctions: (string | RegExp)[] }>([
     true,
-    ignoreFunctions.length > 0 //
-      ? { ignoreFunctions }
-      : { ignoreFunctions: [] },
+    { ignoreFunctions: getIgnoreFunctions(packages) },
   ]);
 }
 

package/src/rules/import-notation.ts

@@ -0,0 +1,9 @@
+import type { Packages } from '@culur/utils-packages';
+import { defineRules, isInRange } from '~/utils';
+
+export const importNotationCSS = (packages: Partial<Packages>) =>
+  defineRules(
+    isInRange(packages.tailwind, 4) //
+      ? { 'import-notation': null }
+      : {},
+  );

package/src/rules/order.ts

@@ -1,5 +1,5 @@
 import type { Packages } from '@culur/utils-packages';
-import { defineRule, defineRules } from '~/utils';
+import { defineRule, defineRules, isInRange } from '~/utils';
 
 // https://github.com/hudochenkov/stylelint-order/blob/master/rules/order/README.md#options
 
@@ -30,50 +30,59 @@ interface SecondaryOptions {
   unspecified?: 'top' | 'bottom' | 'ignore';
 }
 
-const definePrimaryOption = (
-  ...options: (PrimaryOption[number] | false | undefined)[]
-) => options.filter((option): option is PrimaryOption[number] => !!option);
+const definePrimaryOption = (...options: (PrimaryOption[number] | false | undefined)[]) =>
+  options.filter((option): option is PrimaryOption[number] => !!option);
 
 export const orderRule = (packages: Partial<Packages>) =>
   defineRule<PrimaryOption, SecondaryOptions>([
     definePrimaryOption(
       //! import
-      packages.sass && { type: 'at-rule', name: 'use' }, //            scss:        @use 'path/path';
-      packages.sass && { type: 'at-rule', name: 'forward' }, //        scss:        @forward 'path/path';
-      packages.sass && { type: 'at-rule', name: 'import' }, //         scss:        @import 'path/path';
+      packages.sass /**********************************/ && { type: 'at-rule', name: 'use' }, //            scss:               @use 'path/path';
+      packages.sass /**********************************/ && { type: 'at-rule', name: 'forward' }, //        scss:               @forward 'path/path';
+      packages.sass /**********************************/ && { type: 'at-rule', name: 'import' }, //         scss:               @import 'path/path';
+      isInRange(packages.tailwind, 4) /****************/ && { type: 'at-rule', name: 'import' }, //         tailwind         4: @import "tailwindcss";
+      isInRange(packages.tailwind, 4) /****************/ && { type: 'at-rule', name: 'source' }, //         tailwind         4: @source "../node_modules/@culur/ui-lib";
+      isInRange(packages.tailwind, 4) /****************/ && { type: 'at-rule', name: 'reference' }, //      tailwind         4: @reference "../../app.css";
 
       //! root
-      packages.tailwind && { type: 'at-rule', name: 'config' }, //     tailwind v3: @config 'tailwind.custom.config.js'
-      packages.tailwind && { type: 'at-rule', name: 'tailwind' }, //   tailwind v3: @tailwind base;
-      packages.tailwind && { type: 'at-rule', name: 'layer' }, //      tailwind v3: @layer base {}
+      isInRange(packages.tailwind, 0, 1, 2, 3) /*******/ && { type: 'at-rule', name: 'tailwind' }, //       tailwind 0,1,2,3  : @tailwind base;
+      isInRange(packages.tailwind, 3, 4) /*************/ && { type: 'at-rule', name: 'config' }, //         tailwind       3,4: @config 'tailwind.custom.config.js'
+      isInRange(packages.tailwind, 4) /****************/ && { type: 'at-rule', name: 'plugin' }, //         tailwind         4: @plugin '@tailwindcss/typography'
+      isInRange(packages.tailwind, 1, 2, 3) /**********/ && { type: 'at-rule', name: 'layer' }, //          tailwind   1,2,3  : @layer base {}
 
       //! variables
-      'dollar-variables', //                                           css:         $variable: 10px;
-      'at-variables', //                                               css:         @variable: 10px;
-      { type: 'at-rule', hasBlock: false }, //                         css:         @variable: 10px;
-      'custom-properties', //                                          css:         --property: 10px;
+      'dollar-variables', //                                                                                css:                $variable: 10px;
+      'at-variables', //                                                                                    css:                @variable: 10px;
+      { type: 'at-rule', hasBlock: false }, //                                                              css:                @variable: 10px;
+      'custom-properties', //                                                                               css:                --property: 10px;
+
+      //! tailwind
+      isInRange(packages.tailwind, 4) /****************/ && { type: 'at-rule', name: 'theme' }, //          tailwind         4: @theme {}
+      isInRange(packages.tailwind, 4) /****************/ && { type: 'at-rule', name: 'custom-variant' }, // tailwind         4: @custom-variant pointer-coarse (@media (pointer: coarse));
 
       //! functions, methods
-      packages.sass && { type: 'at-rule', name: 'function' }, //       scss:        @function sum() {}
-      packages.sass && { type: 'at-rule', name: 'mixin' }, //          scss:        @mixin mixin-name {}
+      packages.sass /**********************************/ && { type: 'at-rule', name: 'function' }, //       scss:               @function sum() {}
+      packages.sass /**********************************/ && { type: 'at-rule', name: 'mixin' }, //          scss:               @mixin mixin-name {}
+      isInRange(packages.tailwind, 4) /****************/ && { type: 'at-rule', name: 'utility' }, //        tailwind         4: @utility tab-4 { tab-size: 4; }
 
       //! declarations
-      packages.sass && { type: 'at-rule', name: 'extend' }, //         scss:        @extend .class-name;
-      packages.sass && { type: 'at-rule', name: 'include' }, //        scss:        @include mixin-name;
-      packages.tailwind && { type: 'at-rule', name: 'apply' }, //      tailwind v3: @apply p-3;
-      'less-mixins', //                                                less:        .mixin();
-      'declarations', //                                               css:         display: block;
+      packages.sass /**********************************/ && { type: 'at-rule', name: 'extend' }, //         scss:               @extend .class-name;
+      packages.sass /**********************************/ && { type: 'at-rule', name: 'include' }, //        scss:               @include mixin-name;
+      isInRange(packages.tailwind, 0, 1, 2, 3, 4) /****/ && { type: 'at-rule', name: 'apply' }, //          tailwind 0,1,2,3,4: @apply p-3;
+      'less-mixins', //                                                                                     less:               .mixin();
+      'declarations', //                                                                                    css:                display: block;
 
       //! block rules
-      { type: 'rule', selector: /^&::[\w-]+/ }, //                     css:         &::after {}
-      'rules', //                                                      css:         child-component {}
+      { type: 'rule', selector: /^&::[\w-]+/ }, //                                                          css:                &::after {}
+      'rules', //                                                                                           css:                child-component {}
 
       //! blocks nested
-      packages.sass && { type: 'at-rule', name: 'at-root' }, //        scss:        @at-root selector { /* content */ }
-      packages.tailwind && { type: 'at-rule', name: 'responsive' }, // tailwind v2: @responsive {}
-      packages.tailwind && { type: 'at-rule', name: 'variants' }, //   tailwind v2: @variants hover {}
-      packages.tailwind && { type: 'at-rule', name: 'screen' }, //     tailwind v2: @screen sm {}
-      { type: 'at-rule', hasBlock: true }, //                          css:         @media () {}
+      packages.sass && { type: 'at-rule', name: 'at-root' }, //                                             scss:               @at-root selector { /* content */ }
+      isInRange(packages.tailwind, 0, 1, 2) /**********/ && { type: 'at-rule', name: 'responsive' }, //     tailwind 0,1,2    : @responsive {}
+      isInRange(packages.tailwind, 0, 1, 2) /**********/ && { type: 'at-rule', name: 'variants' }, //       tailwind 0,1,2    : @variants hover {}
+      isInRange(packages.tailwind, 0, 1, 2) /**********/ && { type: 'at-rule', name: 'screen' }, //         tailwind 0,1,2    : @screen sm {}
+      isInRange(packages.tailwind, 4) /****************/ && { type: 'at-rule', name: 'variants' }, //       tailwind         4: @variant dark {}
+      { type: 'at-rule', hasBlock: true }, //                                                               css:                @media () {}
     ),
     {
       unspecified: 'bottom',

package/src/shareable-configs/auto.ts

@@ -1,10 +1,10 @@
 import { defineHasPackages } from '@culur/utils-packages';
 import defineConfig from '~/factory';
 
-const { hasTailwind, hasSass, hasVue } = defineHasPackages();
+const { tailwindVersion, hasSass, hasVue } = defineHasPackages();
 
 export default defineConfig({
-  tailwind: hasTailwind(),
+  tailwind: tailwindVersion(),
   sass: hasSass(),
   vue: hasVue(),
 });