Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@glideapps/prettier-plugin-glide-tailwind

Package Overview
Dependencies
Maintainers
8
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 4.2.1 to 4.2.2

4

lib/parsers/typescript.js

@@ -18,9 +18,5 @@ "use strict";

const attributeNames = options.twJsxClassAttributes.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);
// running these will cause a double sort and mess up formatting.
// functionCalls(twClassesSorter, node, functionNames);
// functionTemplates(twClassesSorter, node, functionNames);
return node;

@@ -27,0 +23,0 @@ });

9

lib/utils/support.d.ts

@@ -0,9 +1,6 @@

export declare const GLIDE_PLAYER_PREFIX = "gp-";
export declare const WORD_WRAP_COLUMN = 120;
export declare const NUM_OF_SPACES = 4;
export declare function getIndentationAmount(columnNumber: number): string;
export declare function getTWGroups(input: string): string[];
export declare function breakupSection(section: string, maxLineLength: number, indentedNewLine: 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;
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
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.breakupSection = exports.getTWGroups = exports.getIndentationAmount = void 0;
exports.breakupSection = exports.getTWGroups = exports.getIndentationAmount = exports.NUM_OF_SPACES = exports.WORD_WRAP_COLUMN = exports.GLIDE_PLAYER_PREFIX = void 0;
exports.GLIDE_PLAYER_PREFIX = "gp-";
exports.WORD_WRAP_COLUMN = 120;
exports.NUM_OF_SPACES = 4;
function getIndentationAmount(columnNumber) {

@@ -51,7 +54,1 @@ let resultString = "";

exports.breakupSection = breakupSection;
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\-]+:\(([^\)]*)\)/;
{
"name": "@glideapps/prettier-plugin-glide-tailwind",
"version": "4.2.1",
"version": "4.2.2",
"description": "Formatting and sorting for glide tailwind classes",

@@ -5,0 +5,0 @@ "author": "Original author - Ari Seyhun | Modified by Bry Nguyen",

@@ -1,5 +0,3 @@

[![npm version](https://badge.fury.io/js/prettier-plugin-tailwind.svg)](https://badge.fury.io/js/prettier-plugin-tailwind)
<p align="center">
<img src="https://raw.githubusercontent.com/Acidic9/prettier-plugin-tailwind/master/banner.png">
<img src="https://i.imgur.com/lq4gw9K.jpeg">
</p>

@@ -10,3 +8,3 @@

<div align="center">
Sort tailwind classes with Prettier.
Format long tailwind classes with Prettier plugin
</div>

@@ -18,6 +16,4 @@

- HTML
- CSS (@apply directive)
- ReactJS (JSX, TSX)
- VueJS
- [twin.macro](https://github.com/ben-rogerson/twin.macro)

@@ -28,3 +24,5 @@

```html
<div class="z-50 z-10 container text-left md:text-center justify-center">...</div>
<div
tw="px-4 font-normal text-center w-32 h-32 object-cover mb-2 gp-sm:text-base gp-lg:text-lg gp-xl:(text-xl text-right)"
></div>
```

@@ -35,3 +33,7 @@

```html
<div class="container justify-center text-left z-10 z-50 md:text-center">...</div>
<div
tw="px-4 font-normal text-center text-s mw-32 h-32 object-cover mb-2
gp-lg:text-lg
gp-xl:(text-xl text-right)"
></div>
```

@@ -41,6 +43,8 @@

## Installation VSCode
## Installation
Install Prettier and the plugin into your project locally:
**Glide engineers, please install this in /app**
```bash

@@ -50,17 +54,17 @@ npm install --save-dev @glideapps/prettier-plugin-glide-tailwind

**Other IDE's are supported.**
## Testing locally
Note: Prettier 2.0.0 or greater is required as a peer dependency.
First thing to do is make sure you have modified the:
## Prettier Options
- `SET_CONFIG_PATH`
- `NODE_CONFIG_PATH`
that are found in `src/utils/testing-envs.ts`
These options can be set in your `.prettierrc` file to change the behavious of this plugin.
```bash
yarn install
yarn build
yarn package
npm run test
```
- [**`twConfig`**](OPTIONS.md#twconfig) - Path to tailwind config relative to the root of the project.
- [**`twPluginsOrder`**](OPTIONS.md#twpluginsorder) - Comma separated order of tailwind plugins to sort classes by.
- [**`twClassesPosition`**](OPTIONS.md#twclassesposition) - Position of component and utility classes.
- [**`twUnknownClassesPosition`**](OPTIONS.md#twunknownclassesposition) - Position of unknown classes.
- [**`twJsxClassAttributes`**](OPTIONS.md#twjsxclassattributes) - Comma separated list of JSX attributes to sort tailwind classes in.
- [**`twSortFunctions`**](OPTIONS.md#twsortfunctions) - Comma separated list of function names to sort classes in arguments.
More details can be found in [OPTIONS.md](OPTIONS.md)
results will be saved to `test_formatted.tsx`
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc