@glideapps/prettier-plugin-glide-tailwind - npm Package Compare versions

Comparing version 3.0.2 to 3.1.0

lib/node-formatters/jsx-attributes.js

 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const group_names_sorter_1 = __importDefault(require("../utils/group-names-sorter"));
-const support_1 = __importStar(require("../utils/support"));
+const support_1 = require("../utils/support");
 // Formats JSX attributes
-//   eg: `<div className="container w-full"></div>`
+//   eg: <p tw="flex pt-24 text-lg gp-xl:(text-xl text-align-end) gp-2xl:(text-xl text-align-end)">
 function jsxAttributes(twClassesSorter, node, attributeNames) {
@@ -37,23 +14,22 @@ if (node &&
         (node.value.type === "StringLiteral" || node.value.type === "Literal")) {
-        const indentString = support_1.default(node.loc.start.column);
+        const indentString = support_1.getIndentationAmount(node.name.loc.start.column);
         const indentedNewLine = `\n${indentString}`;
         const rawValue = node.value.value;
-        const groups = [];
-        // const newValue = twClassesSorter.sortClasslist(node.value.value);
-        const normalClasses = twClassesSorter.sortClasslist(rawValue.replace(support_1.TW_MARCO_EXP, str => {
-            const groupNames = str
-                .match(support_1.TW_MARCO_GROUP_NAMES_EXP)
-                .map(groupName => groupName.substr(0, groupName.length - 1))
-                .sort(group_names_sorter_1.default());
-            const content = twClassesSorter.sortClasslist(str.match(support_1.TW_MARCO_GROUP_CONTENT_EXP)[1]).join(" ");
-            groups.push({
-                names: groupNames,
-                content,
-            });
-            return "";
-        }));
+        // console.log(rawValue === "justify-center flex text-text-dark gp-xl:(mt-28)" ? node.value.loc.start.column : "");
+        const mediaGroups = [];
+        const normalClasses = [];
+        const arrayOfValues = support_1.getTWGroups(rawValue);
+        // seperate the values in which are media to indent on
+        for (let value of arrayOfValues) {
+            // this is our prefix for
+            if (value.startsWith("gp-")) {
+                mediaGroups.push(value.trim());
+            }
+            else {
+                normalClasses.push(value.trim());
+            }
+        }
         const restructuredClasses = normalClasses.join(" ");
-        const restructuredGroups = groups.map(({ names, content }) => `${names}:(${content})`);
-        const indentedGroups = restructuredGroups.join(`${indentedNewLine}`);
-        const newValue = ` ${restructuredClasses} ${indentedNewLine}${indentedGroups}`.trim();
+        const indentedGroups = mediaGroups.join(`${indentedNewLine}`);
+        const newValue = `${indentedNewLine}${restructuredClasses}${indentedNewLine}${indentedGroups}`.trim();
         node.value.value = newValue;
@@ -60,0 +36,0 @@ node.value.extra = Object.assign(Object.assign({}, (node.value.extra || {})), { rawValue: newValue, raw: `"${newValue}"` });

lib/node-formatters/twin.js

 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const group_names_sorter_1 = __importDefault(require("../utils/group-names-sorter"));
-const support_1 = __importStar(require("../utils/support"));
+const support_1 = require("../utils/support");
 // Formats Twin macro
-//   eg: `tw\`container w-full sm:(w-1/2)\``
+//   eg css={[tw`block max-w-xs mx-auto gp-xl:(ml-auto mr-0) gp-2xl:(ml-auto mr-0)`]}
 function twin(twClassesSorter, node) {
@@ -39,28 +16,22 @@ if (node &&
                 const rawValue = q.value.raw;
-                const groups = [];
                 // grabs line of code, column then divides by fixed value of 4, where 4 is number of spaces
                 // the additional +1 is to indent it below the child
-                const indentString = support_1.default(node.loc.start.column - 7);
+                const indentString = support_1.getIndentationAmount(node.loc.start.column);
                 const indentedNewLine = `\n${indentString}`;
-                // This will sort through tw definitions with this type of format:
-                //      css={[ tw`block mx-auto`]},
-                const normalClasses = twClassesSorter.sortClasslist(rawValue.replace(support_1.TW_MARCO_EXP, str => {
-                    const groupNames = str
-                        .match(support_1.TW_MARCO_GROUP_NAMES_EXP)
-                        .map(groupName => groupName.substr(0, groupName.length - 1))
-                        .sort(group_names_sorter_1.default());
-                    const content = twClassesSorter
-                        .sortClasslist(str.match(support_1.TW_MARCO_GROUP_CONTENT_EXP)[1])
-                        .join(" ");
-                    groups.push({
-                        names: groupNames,
-                        content,
-                    });
-                    return "";
-                }));
+                const mediaGroups = [];
+                const normalClasses = [];
+                const arrayOfValues = support_1.getTWGroups(rawValue);
+                // seperate the values in which are media to indent on
+                for (let value of arrayOfValues) {
+                    // this is our prefix for
+                    if (value.startsWith("gp-")) {
+                        mediaGroups.push(value.trim());
+                    }
+                    else {
+                        normalClasses.push(value.trim());
+                    }
+                }
                 const restructuredClasses = normalClasses.join(" ");
-                // groups.sort(groupNamesSorter<{ names: string[] }>(val => val.names[0]));
-                const restructuredGroups = groups.map(({ names, content }) => `${names}:(${content})`);
-                const indentedGroups = restructuredGroups.join(`${indentedNewLine}`);
-                const finalStr = `${restructuredClasses.length > 20 ? indentedNewLine : ""}${restructuredClasses}${indentedNewLine}${indentedGroups}`.trim();
+                const indentedGroups = mediaGroups.join(`${indentedNewLine}`);
+                const finalStr = `${indentedNewLine}${restructuredClasses}${indentedNewLine}${indentedGroups}`.trim();
                 q.value.raw = finalStr;
@@ -67,0 +38,0 @@ if (q.value.cooked) {

lib/options.js

@@ -19,3 +19,3 @@ "use strict";
         category: "Global",
-        default: "components-first",
+        default: "as-is",
         description: 'Position of component and utility classes; "components-first" | "components-last" | "as-is"',
@@ -38,5 +38,5 @@ },
         category: "Global",
-        default: "clsx,classNames,cx",
+        default: "tw,className,cx",
         description: "Comma separated list of function names to sort classes in arguments.",
     },
 };

lib/parsers/index.js

@@ -10,2 +10,3 @@ "use strict";
 const typescript_1 = __importDefault(require("./typescript"));
+//For glide's purposes, it will only ever use typescript sorter
 exports.default = (twClassesSorter) => ({
@@ -12,0 +13,0 @@ html: html_1.default(twClassesSorter),

lib/parsers/typescript.js

@@ -11,4 +11,2 @@ "use strict";
 const twin_1 = __importDefault(require("../node-formatters/twin"));
-const function_calls_1 = __importDefault(require("../node-formatters/function-calls"));
-const function_templates_1 = __importDefault(require("../node-formatters/function-templates"));
 exports.default = (twClassesSorter) => (Object.assign(Object.assign({}, parser_typescript_1.default.parsers.typescript), { parse(text, parsers, options) {
@@ -21,8 +19,9 @@ const ast = parser_typescript_1.default.parsers.typescript.parse(text, parsers, options);
         const attributeNames = options.twJsxClassAttributes.split(",");
-        const functionNames = options.twSortFunctions.split(",");
+        // const functionNames`: string[] = options.twSortFunctions.split(",");
         const result = loop_nodes_1.default(ast, node => {
             jsx_attributes_1.default(twClassesSorter, node, attributeNames);
             twin_1.default(twClassesSorter, node);
-            function_calls_1.default(twClassesSorter, node, functionNames);
-            function_templates_1.default(twClassesSorter, node, functionNames);
+            // running these will cause a double sort and mess up formatting.
+            // functionCalls(twClassesSorter, node, functionNames);
+            // functionTemplates(twClassesSorter, node, functionNames);
             return node;
@@ -29,0 +28,0 @@ });

lib/utils/support.d.ts

@@ -1,4 +0,8 @@
-export default function getIndentationAmount(columnNumber: number): string;
+export declare function getIndentationAmount(columnNumber: number): string;
+export declare function getTWGroups(input: string): string[];
+export declare const GLIDE_PLAYER_PREFIX = "gp-";
+export declare const WORD_WRAP_COLUMN = 120;
+export declare const NUM_OF_SPACES = 4;
 export declare const TW_MARCO_EXP: RegExp;
 export declare const TW_MARCO_GROUP_NAMES_EXP: RegExp;
 export declare const TW_MARCO_GROUP_CONTENT_EXP: RegExp;

lib/utils/support.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TW_MARCO_GROUP_CONTENT_EXP = exports.TW_MARCO_GROUP_NAMES_EXP = exports.TW_MARCO_EXP = void 0;
+exports.TW_MARCO_GROUP_CONTENT_EXP = exports.TW_MARCO_GROUP_NAMES_EXP = exports.TW_MARCO_EXP = exports.NUM_OF_SPACES = exports.WORD_WRAP_COLUMN = exports.GLIDE_PLAYER_PREFIX = exports.getTWGroups = exports.getIndentationAmount = void 0;
 function getIndentationAmount(columnNumber) {
-    const amountToIndent = Math.floor((columnNumber + 2) / 4) + 1;
+    // TODO: Smarter things to do here would be to grab the ENV value from the editor indent
+    const amountToIndent = Math.floor(columnNumber / exports.NUM_OF_SPACES);
     let resultString = "";
     for (let i = 0; i < amountToIndent; i++) {
-        // TODO: Smarter things to do here would be to grab the ENV value from the editor indent
         resultString += "\t";
@@ -13,5 +13,29 @@ }
 }
-exports.default = getIndentationAmount;
+exports.getIndentationAmount = getIndentationAmount;
+function getTWGroups(input) {
+    input = input.trim();
+    const r = [];
+    let start = 0;
+    let depth = 0;
+    for (let current = 0; current <= input.length; current++) {
+        const curChar = input[current];
+        if ((depth === 0 && /\s/.test(curChar)) || current === input.length) {
+            r.push(input.substring(start, current));
+            start = ++current;
+        }
+        if (curChar === "(") {
+            depth++;
+        }
+        else if (curChar === ")") {
+            depth = Math.max(0, depth - 1);
+        }
+    }
+    return r;
+}
+exports.getTWGroups = getTWGroups;
+exports.GLIDE_PLAYER_PREFIX = "gp-";
+exports.WORD_WRAP_COLUMN = 120;
+exports.NUM_OF_SPACES = 4;
 exports.TW_MARCO_EXP = /(?:[\w\-]+:)*\([^\)]*\)/g;
 exports.TW_MARCO_GROUP_NAMES_EXP = /([\w\-]+:)/g;
 exports.TW_MARCO_GROUP_CONTENT_EXP = /[\w\-]+:\(([^\)]*)\)/;

notes.md

@@ -54,1 +54,24 @@ # Notes
 ```
+
+```javascript
+// after sort -
+const restructuredNormalClasses =
+    "height[400px] filter blur-0 relative flex flex-col items-center justify-center mb-2 not-first:mt-2 text-text-dark overflow-hidden";
+
+const restructuredgroups = "[ 'first,not-first,gp-md:(first:rounded-b-xl not-first:rounded-xl)' ]";
+```
+
+```javascript
+const original =
+    "flex justify-center text-text-dark text-center pt-24 text-lg gp-xl:(text-xl text-align[end]) gp-2xl:(text-xl text-align[end])";
+const getTWGroups = [
+    "flex",
+    "justify-center",
+    "text-text-dark",
+    "text-center",
+    "pt-24",
+    "text-lg",
+    "gp-xl:(text-xl text-align[end])",
+    "gp-2xl:(text-xl text-align[end])",
+];
+```

OPTIONS.md

@@ -31,3 +31,3 @@ # Prettier Options
 
-_Default: `"container,position,zIndex,inset,display,flex,flexDirection,flexGrow,flexShrink,flexWrap,gap,gridAutoFlow,gridColumn,gridColumnEnd,gridColumnStart,gridRow,gridRowEnd,gridRowStart,gridTemplateColumns,gridTemplateRows,alignContent,alignItems,alignSelf,justifyContent,justifyItems,justifySelf,verticalAlign,placeContent,placeItems,placeSelf,float,clear,order,tableLayout,margin,padding,width,minWidth,maxWidth,height,maxHeight,minHeight,textAlign,textColor,textDecoration,textOpacity,wordBreak,whitespace,fontFamily,fontSize,fontSmoothing,fontStyle,fontVariantNumeric,fontWeight,letterSpacing,lineHeight,backgroundColor,backgroundImage,backgroundSize,backgroundPosition,backgroundRepeat,backgroundAttachment,backgroundClip,backgroundOpacity,borderWidth,borderStyle,borderColor,borderOpacity,borderRadius,borderCollapse,placeholderColor,placeholderOpacity,outline,fill,stroke,strokeWidth,boxShadow,gradientColorStops,opacity,visibility,accessibility,appearance,boxSizing,cursor,pointerEvents,userSelect,divideColor,divideOpacity,divideStyle,divideWidth,listStylePosition,listStyleType,objectFit,objectPosition,overflow,overscrollBehavior,transform,transformOrigin,translate,textTransform,resize,rotate,scale,skew,space,animation,transitionProperty,transitionDuration,transitionDelay,transitionTimingFunction,preflight"`_
+_Default: `"container,position,zIndex,inset,display,flex,flexDirection,flexGrow,flexShrink,flexWrap,gap,gridAutoFlow,gridColumn,gridColumnEnd,gridColumnStart,gridRow,gridRowEnd,gridRowStart,gridTemplateColumns,gridTemplateRows,alignContent,alignItems,alignSelf,justifyContent,justifyItems,justifySelf,verticalAlign,placeContent,placeItems,placeSelf,float,clear,order,tableLayout,margin,padding,width,minWidth,maxWidth,height,maxHeight,minHeight,textAlign,textColor,textDecoration,textOpacity,wordBreak,whitespace,fontFamily,fontSize,fontSmoothing,fontStyle,fontVariantNumeric,fontWeight,letterSpacing,lineHeight,backgroundColor,backgroundImage,backgroundSize,backgroundPosition,backgroundRepeat,backgroundAttachment,backgroundClip,backgroundOpacity,borderWidth,borderStyle,borderColor,borderOpacity,borderRadius,borderCollapse,placeholderColor,placeholderOpacity,outline,fill,stroke,strokeWidth,boxShadow,gradientColorStops,opacity,visibility,accessibility,appearance,boxSizing,cursor,pointerEvents,userSelect,divideColor,divideOpacity,divideStyle,divideWidth,listStylePosition,listStyleType,objectFit,objectPosition,overflow,overscrollBehavior,transform,transformOrigin,translate,textTransform,resize,rotate,scale,skew,space,animation,transitionProperty,transitionDuration,transitionDelay,transitionTimingFunction,preflight,text"`_
 
@@ -44,3 +44,3 @@ _Example: `"container,position,inset"`_
 
-_Default: `"components-first"`_
+_Default: `"as-is"`_
 
@@ -47,0 +47,0 @@ ### twUnknownClassesPosition

package.json

 {
     "name": "@glideapps/prettier-plugin-glide-tailwind",
-    "version": "3.0.2",
+    "version": "3.1.0",
     "description": "Formatting and sorting for glide tailwind classes",
@@ -5,0 +5,0 @@ "author": "Original author - Ari Seyhun | Modified by Bry Nguyen",

prettierrc-mock-file.json

@@ -20,4 +20,4 @@ {
     "useTabs": false,
-    "twClassesPosition": "components-last",
-    "twUnknownClassesPosition": "start"
+    "twClassesPosition": "as-is",
+    "twUnknownClassesPosition": "end"
 }

test.jsx

@@ -19,5 +19,8 @@ /*
 
+const TEST_FILE = "test_unformatted.tsx"
+// const TEST_FILE = "test_unformatted_complex.tsx"
 
+
 const unformatted = fs.readFileSync(
-    `${__dirname}/test_unformatted.tsx`,
+    `${__dirname}/${TEST_FILE}`,
     'utf8'
@@ -24,0 +27,0 @@ )

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

82393

increased by5.16%

Number of package files

48

increased by2.13%

Lines of code

1053

increased by9.92%

No dependency changes