@web-baseline/nuxt-css-layer 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Web baseline
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,54 @@
+# Nuxt CSS layer (@web-baseline/nuxt-css-layer)
+
+[![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]
+
+_✨ Use css cascade layers in Nuxt ✨_
+
+- [✨  Release Notes](/CHANGELOG.md)
+
+**English** | [简体中文](./README.zh-CN.md)
+
+## Features
+
+- Add cascading layers to CSS files ( By [@web-baseline/postcss-wrap-up-layer](https://github.com/web-baseline/postcss-wrap-up-layer) )
+- Allow adding cascading layer to style blocks in Vue SFC ( By [@web-baseline/vite-plugin-vue-style-layer](https://github.com/web-baseline/vite-plugin-vue-style-layer) )
+- CSS cascading layer sorting
+
+## Quick Setup
+
+Install the module to your Nuxt application with one command:
+
+```bash
+npx nuxi module add @web-baseline/nuxt-css-layer
+```
+
+That's it! You can now use css cascade layers in your Nuxt app ✨
+
+
+### Options
+
+| Option             | Description                                                                                                      | Type                              | Default     |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
+| sfc                | Is SFC processing enabled                                                                                        | `boolean`                         | `true`      |
+| sfcIncludes        | SFC files (refer to [`@web-baseline/vite-plugin-vue-style-layer`](https://github.com/web-baseline/vite-plugin-vue-style-layer/tree/main?tab=readme-ov-file#options))                            | --                                | --          |
+| rules              | CSS file rules (refer to [`@web-baseline/postcss-wrap-up-layer`](https://github.com/web-baseline/postcss-wrap-up-layer?tab=readme-ov-file#options-type))                          | --                                | --          |
+| ignoreOnlyComments | Ignore files that only contain comments (refer to [`@web-baseline/postcss-wrap-up-layer`](https://github.com/web-baseline/postcss-wrap-up-layer?tab=readme-ov-file#options-type)) | --                                | --          |
+| cssLayerOrder      | Cascade layer sorting                                                                                            | `string \| string[] \| undefined` | `undefined` |
+
+
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/@web-baseline/nuxt-css-layer/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/@web-baseline/nuxt-css-layer
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/@web-baseline/nuxt-css-layer.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npmjs.com/package/@web-baseline/nuxt-css-layer
+
+[license-src]: https://img.shields.io/npm/l/@web-baseline/nuxt-css-layer.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/@web-baseline/nuxt-css-layer
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/README.zh-CN.md

@@ -0,0 +1,54 @@
+# Nuxt CSS layer (@web-baseline/nuxt-css-layer)
+
+[![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]
+
+_✨ 在 Nuxt 中使用 CSS 级联层 ✨_
+
+- [✨  Release Notes](/CHANGELOG.md)
+
+[English](./README.md) | **简体中文**
+
+## 特性
+
+- 为 CSS 文件添加级联层（使用 [@web-baseline/postcss-wrap-up-layer](https://github.com/web-baseline/postcss-wrap-up-layer)）
+- 允许 Vue SFC 的 `<style>` 块设置 CSS 级联层 （使用 [@web-baseline/vite-plugin-vue-style-layer](https://github.com/web-baseline/postcss-wrap-up-layer/blob/main/README.zh-CN.md)）
+- CSS 级联层排序
+
+## 快速开始
+
+使用一个命令将模块安装到 Nuxt 应用程序中：
+
+```bash
+npx nuxi module add @web-baseline/nuxt-css-layer
+```
+
+就是这样！现在，您可以在 Nuxt 应用程序中使用 CSS 级联层 ✨
+
+
+### 配置
+
+| 配置项             | 描述                                                                                                                                                                              | 类型                              | 默认值      |
+| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
+| sfc                | 是否开启单文件组件处理                                                                                                                                                            | `boolean`                         | `true`      |
+| sfcIncludes        | 单文件组件处理包含的文件（参考[`@web-baseline/vite-plugin-vue-style-layer`](https://github.com/web-baseline/vite-plugin-vue-style-layer/tree/main?tab=readme-ov-file#options)）   | --                                | --          |
+| rules              | CSS文件处理规则（参考[`@web-baseline/postcss-wrap-up-layer`](https://github.com/web-baseline/postcss-wrap-up-layer/blob/main/README.zh-CN.md#%E9%80%89%E9%A1%B9%E7%B1%BB%E5%9E%8B)）                                                                                                                      | --                                | --          |
+| ignoreOnlyComments | 是否忽略仅包含注释的文件（参考[`@web-baseline/postcss-wrap-up-layer`](https://github.com/web-baseline/postcss-wrap-up-layer/blob/main/README.zh-CN.md#%E9%80%89%E9%A1%B9%E7%B1%BB%E5%9E%8B)）                                                                                                             | --                                | --          |
+| cssLayerOrder      | 级联层排序                                                                                                                                                                        | `string \| string[] \| undefined` | `undefined` |
+
+
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/@web-baseline/nuxt-css-layer/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/@web-baseline/nuxt-css-layer
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/@web-baseline/nuxt-css-layer.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npmjs.com/package/@web-baseline/nuxt-css-layer
+
+[license-src]: https://img.shields.io/npm/l/@web-baseline/nuxt-css-layer.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/@web-baseline/nuxt-css-layer
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -0,0 +1,14 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { PluginOptions as PluginOptions$1 } from '@web-baseline/postcss-wrap-up-layer';
+import { PluginOptions } from '@web-baseline/vite-plugin-vue-style-layer';
+
+interface ModuleOptions {
+    sfc: boolean;
+    sfcIncludes?: PluginOptions['includes'];
+    rules: PluginOptions$1['rules'];
+    ignoreOnlyComments?: PluginOptions$1['ignoreOnlyComments'];
+    cssLayerOrder?: string | string[];
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+
+export { type ModuleOptions, _default as default };

package/dist/module.d.ts

@@ -0,0 +1,14 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { PluginOptions as PluginOptions$1 } from '@web-baseline/postcss-wrap-up-layer';
+import { PluginOptions } from '@web-baseline/vite-plugin-vue-style-layer';
+
+interface ModuleOptions {
+    sfc: boolean;
+    sfcIncludes?: PluginOptions['includes'];
+    rules: PluginOptions$1['rules'];
+    ignoreOnlyComments?: PluginOptions$1['ignoreOnlyComments'];
+    cssLayerOrder?: string | string[];
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+
+export { type ModuleOptions, _default as default };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "nuxt-css-layer",
+  "configKey": "cssLayer",
+  "version": "0.1.0",
+  "builder": {
+    "@nuxt/module-builder": "0.6.0",
+    "unbuild": "2.0.0"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,57 @@
+import { defineNuxtModule, addVitePlugin, addTemplate, addServerPlugin } from '@nuxt/kit';
+import WrapUpLayer from '@web-baseline/postcss-wrap-up-layer';
+import VueStyleLayer from '@web-baseline/vite-plugin-vue-style-layer';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "nuxt-css-layer",
+    configKey: "cssLayer"
+  },
+  defaults: {
+    sfc: true,
+    rules: []
+  },
+  setup(options) {
+    if (options.rules.length > 0) {
+      addVitePlugin({
+        name: "vite-plugin-nuxt-css-layer--postcss",
+        config: () => ({
+          css: {
+            postcss: {
+              plugins: [
+                WrapUpLayer({
+                  rules: options.rules,
+                  ignoreOnlyComments: options.ignoreOnlyComments
+                })
+              ]
+            }
+          }
+        })
+      });
+    }
+    if (options.sfc) {
+      addVitePlugin(VueStyleLayer({
+        includes: options.sfcIncludes
+      }));
+    }
+    if (options.cssLayerOrder) {
+      const plugin = addTemplate({
+        filename: "nuxt-css-layer/css-layers.ts",
+        getContents: () => `import { defineNitroPlugin } from 'nitropack/runtime';
+
+export const layers = ${Array.isArray(options.cssLayerOrder) ? JSON.stringify(options.cssLayerOrder) : JSON.stringify(options.cssLayerOrder.split(",").map((layer) => layer.trim()).filter((layer) => layer.length > 0))};
+
+export default defineNitroPlugin((nitro) => {
+  nitro.hooks.hook('render:html', (html) => {
+    html.head.unshift(\`<style>@layer \${layers.join(', ')};</style>\`);
+  });
+});
+`,
+        write: true
+      });
+      addServerPlugin(plugin.dst);
+    }
+  }
+});
+
+export { module as default };

package/dist/types.d.mts

@@ -0,0 +1,16 @@
+
+import type { ModuleOptions } from './module.js'
+
+
+declare module '@nuxt/schema' {
+  interface NuxtConfig { ['cssLayer']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['cssLayer']?: ModuleOptions }
+}
+
+declare module 'nuxt/schema' {
+  interface NuxtConfig { ['cssLayer']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['cssLayer']?: ModuleOptions }
+}
+
+
+export type { ModuleOptions, default } from './module.js'

package/dist/types.d.ts

@@ -0,0 +1,16 @@
+
+import type { ModuleOptions } from './module'
+
+
+declare module '@nuxt/schema' {
+  interface NuxtConfig { ['cssLayer']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['cssLayer']?: ModuleOptions }
+}
+
+declare module 'nuxt/schema' {
+  interface NuxtConfig { ['cssLayer']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['cssLayer']?: ModuleOptions }
+}
+
+
+export type { ModuleOptions, default } from './module'

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@web-baseline/nuxt-css-layer",
+  "version": "0.1.0",
+  "description": "Use css cascade layers in Nuxt",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "css",
+    "css cascade layer",
+    "vue",
+    "nuxt",
+    "nuxt-module"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "release": "npm run build && changelogen --release && npm publish && git push --follow-tags",
+    "build": "npm run dev:prepare && npm run lint && npm run test && npm run prepack",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+  },
+  "author": "TM-SunnyDay <sunnyday@chongying.studio> (https://github.com/TM-SunnyDay/)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/web-baseline/nuxt-css-layer"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^3.11.2",
+    "@web-baseline/postcss-wrap-up-layer": "^0.1.0",
+    "@web-baseline/vite-plugin-vue-style-layer": "^0.1.0"
+  },
+  "devDependencies": {
+    "@element-plus/nuxt": "^1.0.9",
+    "@nuxt/devtools": "^1.2.0",
+    "@nuxt/eslint-config": "^0.3.10",
+    "@nuxt/module-builder": "^0.6.0",
+    "@nuxt/schema": "^3.11.2",
+    "@nuxt/test-utils": "^3.12.1",
+    "@types/node": "^20.12.11",
+    "changelogen": "^0.5.5",
+    "element-plus": "^2.7.3",
+    "eslint": "^9.2.0",
+    "nuxt": "^3.12.2",
+    "typescript": "latest",
+    "vitest": "^1.6.0",
+    "vue-tsc": "^2.0.16"
+  }
+}