Skip to content

Commit

Permalink
feat: preparing for release
Browse files Browse the repository at this point in the history
  • Loading branch information
aminmokhtari94 committed Oct 30, 2023
1 parent 4384016 commit 0dbd92d
Show file tree
Hide file tree
Showing 7 changed files with 140 additions and 59 deletions.
53 changes: 22 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,57 +1,50 @@
<!--
Get your module up and running quickly.
Find and replace all on all files (CMD+SHIFT+F):
- Name: My Module
- Package name: my-module
- Description: My new Nuxt module
-->

# My Module
# NuxtJs RTLCSS Module

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]

My new Nuxt module for doing amazing things.
NuxtJs RTLCSS Module to build Cascading Style Sheets (CSS) with Left-To-Right (LTR) and Right-To-Left (RTL) rules using RTLCSS PostCss Plugin

- [&nbsp;Release Notes](/CHANGELOG.md)
<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
<!-- - [📖 &nbsp;Documentation](https://example.com) -->
<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/nuxt-rtlcss?file=playground%2Fapp.vue) -->
<!-- - [📖 &nbsp;Documentation](https://example.com) -->

## Features

<!-- Highlight some of the features your module provide here -->
-&nbsp;Foo
-&nbsp;Auto RTL All Styles
- 🚠 &nbsp;Bar
- 🌲 &nbsp;Baz

## Quick Setup

1. Add `my-module` dependency to your project
1. Add `nuxt-rtlcss` dependency to your project

```bash
# Using pnpm
pnpm add -D my-module
pnpm add -D nuxt-rtlcss

# Using yarn
yarn add --dev my-module
yarn add --dev nuxt-rtlcss

# Using npm
npm install --save-dev my-module
npm install --save-dev nuxt-rtlcss
```

2. Add `my-module` to the `modules` section of `nuxt.config.ts`
2. Add `nuxt-rtlcss` to the `modules` section of `nuxt.config.ts`

```js
export default defineNuxtConfig({
modules: [
'my-module'
]
})
// @nuxtjs/tailwindcss or any styled base module
"nuxt-rtlcss",
],
});
```

> ⚠️ make sure load `nuxt-rtlcss` module end of `modules` list.
That's it! You can now use My Module in your Nuxt app ✨

## Development
Expand Down Expand Up @@ -81,14 +74,12 @@ npm run release
```

<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/my-module

[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/my-module

[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/my-module

[npm-version-src]: https://img.shields.io/npm/v/nuxt-rtlcss/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/nuxt-rtlcss
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-rtlcss.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/nuxt-rtlcss
[license-src]: https://img.shields.io/npm/l/nuxt-rtlcss.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/nuxt-rtlcss
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com
26 changes: 22 additions & 4 deletions playground/app.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,26 @@
<template>
<div>
Nuxt module playground!
<div>RTLCSS Nuxt module playground!</div>
<div style="border: 3px solid #222">
<div class="test">
i'm auto rtl
</div>
</div>
<div
dir="rtl"
style="border: 3px solid #222"
>
<div class="test">
i'm auto rtl
</div>
</div>
</template>

<script setup>
</script>
<script setup></script>
<style>
.test {
height: 100px;
width: 100px;
background-color: #ccc;
margin-left: 10px;
}
</style>
2 changes: 1 addition & 1 deletion playground/nuxt.config.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export default defineNuxtConfig({
modules: ['../src/module'],
myModule: {},
rtlcss: {},
devtools: { enabled: true }
})
33 changes: 29 additions & 4 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

35 changes: 21 additions & 14 deletions src/module.ts
Original file line number Diff line number Diff line change
@@ -1,19 +1,26 @@
import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
import { defineNuxtModule, getNuxtVersion, installModule } from "@nuxt/kit";
import type { RTLCSSModuleOptions } from "./types";

// Module options TypeScript interface definition
export interface ModuleOptions {}

export default defineNuxtModule<ModuleOptions>({
export default defineNuxtModule<RTLCSSModuleOptions>({
meta: {
name: 'my-module',
configKey: 'myModule'
name: "rtlcss",
configKey: "rtlcss",
},
// Default configuration options of the Nuxt module
defaults: {},
setup (options, nuxt) {
const resolver = createResolver(import.meta.url)
defaults: { mode: "override" },
async setup(options, nuxt) {
// Setup postcss plugin
const postcssOptions =
nuxt.options.postcss /* nuxt 3 */ /* @ts-ignore */ ||
nuxt.options.build.postcss
.postcssOptions /* older nuxt3 */ /* @ts-ignore */ ||
(nuxt.options.build.postcss as any);
postcssOptions.plugins = postcssOptions.plugins || {};
postcssOptions.plugins["postcss-rtlcss"] = options || {};

// Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
addPlugin(resolver.resolve('./runtime/plugin'))
}
})
// install postcss8 module on nuxt < 2.16
if (parseFloat(getNuxtVersion()) < 2.16) {
await installModule("@nuxt/postcss8");
}
},
});
5 changes: 0 additions & 5 deletions src/runtime/plugin.ts

This file was deleted.

45 changes: 45 additions & 0 deletions src/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
declare enum Mode {
combined = "combined",
override = "override",
diff = "diff",
}
declare enum Source {
ltr = "ltr",
rtl = "rtl",
}
declare enum Autorename {
disabled = "disabled",
flexible = "flexible",
strict = "strict",
}
type ModeValues = keyof typeof Mode;
type SourceValues = keyof typeof Source;
type AutorenameValues = keyof typeof Autorename;
type strings = string | string[];
interface PluginStringMap {
name?: string;
search: strings;
replace: strings;
}
type PrefixSelectorTransformer = (
prefix: string,
selector: string,
) => string | void;
export interface RTLCSSModuleOptions {
mode?: ModeValues;
ltrPrefix?: strings;
rtlPrefix?: strings;
bothPrefix?: strings;
prefixSelectorTransformer?: PrefixSelectorTransformer;
safeBothPrefix?: boolean;
ignorePrefixedRules?: boolean;
source?: SourceValues;
processUrls?: boolean;
processKeyFrames?: boolean;
processEnv?: boolean;
useCalc?: boolean;
stringMap?: PluginStringMap[];
autoRename?: AutorenameValues;
greedy?: boolean;
aliases?: Record<string, string>;
}

0 comments on commit 0dbd92d

Please sign in to comment.