From f8105d0cbd538b1959fd417b8b14459508014f73 Mon Sep 17 00:00:00 2001 From: Neil Date: Sat, 27 Aug 2022 16:57:08 +0800 Subject: [PATCH] feat: `attributify` support --- README.md | 39 ++- package.json | 5 +- packages/preset-applet/package.json | 6 +- packages/preset-rem-to-rpx/package.json | 2 +- .../README.md | 37 +-- .../build.config.ts | 0 .../package.json | 8 +- packages/transformer-applet/src/compile.ts | 37 +++ packages/transformer-applet/src/index.ts | 79 ++++++ packages/transformer-applet/src/types.ts | 18 ++ packages/transformer-attributify/README.md | 16 ++ .../transformer-attributify/build.config.ts | 16 ++ packages/transformer-attributify/package.json | 43 ++++ packages/transformer-attributify/src/index.ts | 121 +++++++++ .../transformer-rename-class/src/index.ts | 158 ------------ packages/unocss-applet/README.md | 39 ++- packages/unocss-applet/build.config.ts | 3 +- packages/unocss-applet/package.json | 11 +- packages/unocss-applet/src/index.ts | 3 +- .../unocss-applet/src/transformer-applet.ts | 1 + .../src/transformer-attributify.ts | 1 + .../src/transformer-rename-class.ts | 1 - playground/package.json | 1 + playground/src/pages.json | 5 +- playground/src/pages/index/index.vue | 23 +- playground/unocss.config.ts | 48 +++- pnpm-lock.yaml | 234 ++++++++++-------- test/fixtures/attributify.vue | 34 +++ test/fixtures/rules.vue | 22 +- test/transformer-applet.test.ts | 89 +++++++ ...est.ts => transformer-attributify.test.ts} | 56 ++--- tsconfig.json | 3 +- 32 files changed, 776 insertions(+), 383 deletions(-) rename packages/{transformer-rename-class => transformer-applet}/README.md (62%) rename packages/{transformer-rename-class => transformer-applet}/build.config.ts (100%) rename packages/{transformer-rename-class => transformer-applet}/package.json (82%) create mode 100644 packages/transformer-applet/src/compile.ts create mode 100644 packages/transformer-applet/src/index.ts create mode 100644 packages/transformer-applet/src/types.ts create mode 100644 packages/transformer-attributify/README.md create mode 100644 packages/transformer-attributify/build.config.ts create mode 100644 packages/transformer-attributify/package.json create mode 100644 packages/transformer-attributify/src/index.ts delete mode 100644 packages/transformer-rename-class/src/index.ts create mode 100644 packages/unocss-applet/src/transformer-applet.ts create mode 100644 packages/unocss-applet/src/transformer-attributify.ts delete mode 100644 packages/unocss-applet/src/transformer-rename-class.ts create mode 100644 test/fixtures/attributify.vue create mode 100644 test/transformer-applet.test.ts rename test/{transformer-rename-class.test.ts => transformer-attributify.test.ts} (62%) diff --git a/README.md b/README.md index f7096ae..cd57ca9 100644 --- a/README.md +++ b/README.md @@ -13,17 +13,46 @@ pnpm add unocss-applet -D # with pnpm ## Usage ```ts -import { defineConfig } from 'unocss' +import { + defineConfig, + presetAttributify, + presetIcons, + presetUno, + transformerDirectives, + transformerVariantGroup, +} from 'unocss' -import { presetApplet, presetRemToRpx, transformerRenameClass } from 'unocss-applet' +import { + presetApplet, + presetRemToRpx, + transformerApplet, + transformerAttributify, +} from 'unocss-applet' + +const presets = [] +const transformers = [] + +if (process.env.UNI_PLATFORM === 'h5') { + presets.push(presetUno()) + presets.push(presetAttributify()) +} +else { + presets.push(presetApplet()) + presets.push(presetRemToRpx()) + + transformers.push(transformerApplet()) + transformers.push(transformerAttributify()) +} export default defineConfig({ presets: [ - presetApplet(), - presetRemToRpx(), + presetIcons(), + ...presets, ], transformers: [ - transformerRenameClass(), + transformerDirectives(), + transformerVariantGroup(), + ...transformers, ], }) ``` diff --git a/package.json b/package.json index 7d50af2..e5c6dff 100644 --- a/package.json +++ b/package.json @@ -23,14 +23,15 @@ "@types/node": "^18.7.2", "@unocss-applet/preset-applet": "workspace:*", "@unocss-applet/preset-rem-to-rpx": "workspace:*", - "@unocss-applet/transformer-rename-class": "workspace:*", + "@unocss-applet/transformer-applet": "workspace:*", + "@unocss-applet/transformer-attributify": "workspace:*", "bumpp": "^8.2.1", "eslint": "^8.21.0", "esno": "^0.16.3", "rimraf": "^3.0.2", "typescript": "^4.7.4", "unbuild": "^0.8.8", - "unocss": "^0.45.7", + "unocss": "^0.45.13", "unocss-applet": "workspace:*", "vite": "^2.9.15", "vitest": "^0.21.1" diff --git a/packages/preset-applet/package.json b/packages/preset-applet/package.json index 3ffeb81..73987de 100644 --- a/packages/preset-applet/package.json +++ b/packages/preset-applet/package.json @@ -54,8 +54,8 @@ "stub": "unbuild --stub" }, "dependencies": { - "@unocss/core": "0.45.7", - "@unocss/preset-mini": "0.45.7", - "@unocss/preset-wind": "0.45.7" + "@unocss/core": "0.45.13", + "@unocss/preset-mini": "0.45.13", + "@unocss/preset-wind": "0.45.13" } } diff --git a/packages/preset-rem-to-rpx/package.json b/packages/preset-rem-to-rpx/package.json index 77947a7..3501d4c 100644 --- a/packages/preset-rem-to-rpx/package.json +++ b/packages/preset-rem-to-rpx/package.json @@ -37,6 +37,6 @@ "stub": "unbuild --stub" }, "dependencies": { - "@unocss/core": "^0.45.7" + "@unocss/core": "^0.45.13" } } diff --git a/packages/transformer-rename-class/README.md b/packages/transformer-applet/README.md similarity index 62% rename from packages/transformer-rename-class/README.md rename to packages/transformer-applet/README.md index ad89949..c5e2540 100644 --- a/packages/transformer-rename-class/README.md +++ b/packages/transformer-applet/README.md @@ -1,13 +1,13 @@ -# @unocss-applet/transformer-rename-class +# @unocss-applet/transformer-applet Coverts class selector name to hash. ## Instal ```bash -npm i @unocss-applet/transformer-rename-class --save-dev # with npm -yarn add @unocss-applet/transformer-rename-class -D # with yarn -pnpm add @unocss-applet/transformer-rename-class -D # with pnpm +npm i @unocss-applet/transformer-applet --save-dev # with npm +yarn add @unocss-applet/transformer-applet -D # with yarn +pnpm add @unocss-applet/transformer-applet -D # with pnpm ``` ## Usage @@ -17,19 +17,19 @@ pnpm add @unocss-applet/transformer-rename-class -D # with pnpm ```ts import { defineConfig } from 'unocss' -import transformerRenameClass from '@unocss-applet/transformer-rename-class' +import transformerApplet from '@unocss-applet/transformer-applet' export default defineConfig({ // ... transformers: [ - transformerRenameClass(), + transformerApplet(), ], }) ``` ## Type Declarations ```ts -export interface RenameClassOptions { +export interface TransformerAppletOptions { /** * Prefix for compile class name * @default 'uno-' @@ -46,29 +46,6 @@ export interface RenameClassOptions { * @default 'applet_shortcuts' */ layer?: string - - /** - * Enable rename class, only build applet should be true - * e.g. In uniapp `enableRename: !(process.env.UNI_PLATFORM === 'h5')` to disable rename class in h5 - * @default true - */ - enableRename?: boolean - - /** - * Separators to expand. - * - * ``` - * foo-(bar baz) -> foo-bar foo-baz - * ^ - * separator - * ``` - * - * You may set it to `[':']` for strictness. - * - * @default [':', '-'] - * @see https://github.com/unocss/unocss/pull/1231 - */ - separators?: (':' | '-')[] } ``` diff --git a/packages/transformer-rename-class/build.config.ts b/packages/transformer-applet/build.config.ts similarity index 100% rename from packages/transformer-rename-class/build.config.ts rename to packages/transformer-applet/build.config.ts diff --git a/packages/transformer-rename-class/package.json b/packages/transformer-applet/package.json similarity index 82% rename from packages/transformer-rename-class/package.json rename to packages/transformer-applet/package.json index ff4d91e..4ddb86b 100644 --- a/packages/transformer-rename-class/package.json +++ b/packages/transformer-applet/package.json @@ -1,16 +1,16 @@ { - "name": "@unocss-applet/transformer-rename-class", + "name": "@unocss-applet/transformer-applet", "type": "module", "version": "0.1.2", "packageManager": "pnpm@7.2.1", "description": "", "author": "Neil Lee ", "license": "MIT", - "homepage": "https://github.com/unocss-applet/unocss-applet/tree/main/packages/transformer-rename-class#readme", + "homepage": "https://github.com/unocss-applet/unocss-applet/tree/main/packages/transformer-applet#readme", "repository": { "type": "git", "url": "git+https://github.com/unocss-applet/unocss-applet.git", - "directory": "packages/transformer-rename-class" + "directory": "packages/transformer-applet" }, "bugs": "https://github.com/unocss-applet/unocss-applet/issues", "keywords": [ @@ -35,7 +35,7 @@ "stub": "unbuild --stub" }, "dependencies": { - "@unocss/core": "^0.45.7" + "@unocss/core": "^0.45.13" }, "devDependencies": { "magic-string": "^0.26.2" diff --git a/packages/transformer-applet/src/compile.ts b/packages/transformer-applet/src/compile.ts new file mode 100644 index 0000000..01db3fb --- /dev/null +++ b/packages/transformer-applet/src/compile.ts @@ -0,0 +1,37 @@ +import type { UnocssPluginContext } from 'unocss' +import type { TransformerAppletOptions } from './types' + +export async function compileApplet(body: string, ctx: UnocssPluginContext, options: TransformerAppletOptions = {}): Promise { + const { + classPrefix = 'uno-', + hashFn = hash, + layer = 'applet_shortcuts', + } = options + + const { uno, tokens } = ctx + const replacements = [] + const result = await Promise.all(body.split(/\s+/).filter(Boolean).map(async i => [i, !!await uno.parseToken(i)] as const)) + const known = result.filter(([, matched]) => matched).map(([i]) => i) + const unknown = result.filter(([, matched]) => !matched).map(([i]) => i) + replacements.push(...unknown) + body = known.join(' ') + if (body) { + const hash = hashFn(body) + const className = `${classPrefix}${hash}` + replacements.unshift(className) + uno.config.shortcuts.push([className, body, { layer }]) + tokens.add(className) + } + return replacements +} + +export function hash(str: string) { + let i; let l + let hval = 0x811C9DC5 + + for (i = 0, l = str.length; i < l; i++) { + hval ^= str.charCodeAt(i) + hval += (hval << 1) + (hval << 4) + (hval << 7) + (hval << 8) + (hval << 24) + } + return (`00000${(hval >>> 0).toString(36)}`).slice(-6) +} diff --git a/packages/transformer-applet/src/index.ts b/packages/transformer-applet/src/index.ts new file mode 100644 index 0000000..86f0758 --- /dev/null +++ b/packages/transformer-applet/src/index.ts @@ -0,0 +1,79 @@ +import type { SourceCodeTransformer } from 'unocss' +import MagicString from 'magic-string' +import type { TransformerAppletOptions } from './types' +import { compileApplet } from './compile' + +export default function transformerApplet(options: TransformerAppletOptions = {}): SourceCodeTransformer { + // Regular expression of characters to be escaped + const charReg = /[.:%!#()[\/\],]/ + + const classRE = /:?(hover-)?class=\".*?\"/g + const string1RE = /([']).*?(['])/g + const string2RE = /([\`]).*?([\`])/g + + return { + name: 'transformer-applet', + enforce: 'pre', + async transform(s, _, ctx) { + const code = new MagicString(s.toString()) + // process class + const classMatches = [...code.original.matchAll(classRE)] + for (const match of classMatches) { + // skip `... ? ... : ...` + if (/\?.*:/g.test(match[0])) + continue + + // skip `... : ...` + if (/{.+:.+}/g.test(match[0])) + continue + + const start = match.index! + const matchSplit = match[0].split('class=') + + const body = matchSplit[1].slice(1, -1) + + if (charReg.test(body)) { + const replacements = await compileApplet(body, ctx, options) + code.overwrite(start, start + match[0].length, `${matchSplit[0]}class="${replacements.join(' ')}"`) + } + } + + // process string1 + const string1Matches = [...code.original.matchAll(string1RE)] + for (const match of string1Matches) { + // There may be no need + // https://tailwindcss.com/docs/background-image#arbitrary-values + // skip all the image formats in HTML for bg-[url('...')] + if (/\.(png|jpg|jpeg|gif|svg)/g.test(match[0])) + continue + // skip http(s):// + if (/http(s)?:\/\//g.test(match[0])) + continue + + const start = match.index! + const body = match[0].slice(1, -1) + if (charReg.test(body)) { + const replacements = await compileApplet(body, ctx, options) + code.overwrite(start, start + match[0].length, `'${replacements.join(' ')}'`) + } + } + + // process string2 + const string2Matches = [...code.original.matchAll(string2RE)] + for (const match of string2Matches) { + // skip `${...}` + if (/\$\{.*\}/g.test(match[0])) + continue + + const start = match.index! + const body = match[0].slice(1, -1) + if (charReg.test(body)) { + const replacements = await compileApplet(body, ctx, options) + code.overwrite(start, start + match[0].length, `'${replacements.join(' ')}'`) + } + } + s.overwrite(0, s.original.length, code.toString()) + }, + } +} + diff --git a/packages/transformer-applet/src/types.ts b/packages/transformer-applet/src/types.ts new file mode 100644 index 0000000..29a83e5 --- /dev/null +++ b/packages/transformer-applet/src/types.ts @@ -0,0 +1,18 @@ +export interface TransformerAppletOptions { + /** + * Prefix for compile class name + * @default 'uno-' + */ + classPrefix?: string + + /** + * Hash function + */ + hashFn?: (str: string) => string + + /** + * The layer name of generated rules + * @default 'applet_shortcuts' + */ + layer?: string +} diff --git a/packages/transformer-attributify/README.md b/packages/transformer-attributify/README.md new file mode 100644 index 0000000..58b4252 --- /dev/null +++ b/packages/transformer-attributify/README.md @@ -0,0 +1,16 @@ +# @unocss-applet/transformer-attributify + +Attributify Mode for [UnoCSS](https://github.com/unocss/unocss). + +## Instal + +```bash +npm i @unocss-applet/transformer-attributify --save-dev # with npm +yarn add @unocss-applet/transformer-attributify -D # with yarn +pnpm add @unocss-applet/transformer-attributify -D # with pnpm +``` + + +## License + +MIT License © 2022-PRESENT [Neil Lee](https://github.com/zguolee) diff --git a/packages/transformer-attributify/build.config.ts b/packages/transformer-attributify/build.config.ts new file mode 100644 index 0000000..5bea573 --- /dev/null +++ b/packages/transformer-attributify/build.config.ts @@ -0,0 +1,16 @@ +import { defineBuildConfig } from 'unbuild' + +export default defineBuildConfig({ + entries: [ + 'src/index', + ], + clean: true, + declaration: true, + externals: [ + 'magic-string', + 'unocss', + ], + rollup: { + emitCJS: true, + }, +}) diff --git a/packages/transformer-attributify/package.json b/packages/transformer-attributify/package.json new file mode 100644 index 0000000..b0b7937 --- /dev/null +++ b/packages/transformer-attributify/package.json @@ -0,0 +1,43 @@ +{ + "name": "@unocss-applet/transformer-attributify", + "type": "module", + "version": "0.1.2", + "packageManager": "pnpm@7.2.1", + "description": "", + "author": "Neil Lee ", + "license": "MIT", + "homepage": "https://github.com/unocss-applet/unocss-applet/tree/main/packages/transformer-attributify#readme", + "repository": { + "type": "git", + "url": "git+https://github.com/unocss-applet/unocss-applet.git", + "directory": "packages/transformer-attributify" + }, + "bugs": "https://github.com/unocss-applet/unocss-applet/issues", + "keywords": [ + "unocss", + "unocss-transformer" + ], + "sideEffects": false, + "exports": { + ".": { + "require": "./dist/index.cjs", + "import": "./dist/index.mjs" + } + }, + "main": "./dist/index.cjs", + "module": "./dist/index.mjs", + "types": "./dist/index.d.ts", + "files": [ + "dist" + ], + "scripts": { + "build": "unbuild", + "stub": "unbuild --stub" + }, + "dependencies": { + "@unocss/core": "^0.45.13" + }, + "devDependencies": { + "magic-string": "^0.26.2" + } +} diff --git a/packages/transformer-attributify/src/index.ts b/packages/transformer-attributify/src/index.ts new file mode 100644 index 0000000..166ddd7 --- /dev/null +++ b/packages/transformer-attributify/src/index.ts @@ -0,0 +1,121 @@ +import MagicString from 'magic-string' +import type { SourceCodeTransformer } from 'unocss' +import { isValidSelector } from 'unocss' + +export interface TransformerAttributifyOptions { + + /** + * @default 'un-' + */ + prefix?: string + + /** + * Only match for prefixed attributes + * + * @default false + */ + prefixedOnly?: boolean + + /** + * Support matching non-valued attributes + * + * For example + * ```html + *
+ * ``` + * + * @default true + */ + nonValuedAttribute?: boolean + + /** + * A list of attributes to be ignored from extracting. + */ + ignoreAttributes?: string[] + + /** + * Non-valued attributes will also match if the actual value represented in DOM is `true`. + * This option exists for supporting frameworks that encodes non-valued attributes as `true`. + * Enabling this option will break rules that ends with `true`. + * + * @default false + */ + trueToNonValued?: boolean +} + +const strippedPrefixes = [ + 'v-bind:', + ':', +] + +const splitterRE = /[\s'"`;]+/g +const elementRE = /<\w(?=.*>)[\w:\.$-]*\s((?:['"`\{].*?['"`\}]|.*?)*?)>/gs +const valuedAttributeRE = /([?]|(?!\d|-{2}|-\d)[a-zA-Z0-9\u00A0-\uFFFF-_:!%-]+)(?:={?(["'])([^\2]*?)\2}?)?/g + +export const defaultIgnoreAttributes = ['placeholder', 'setup', 'lang', 'scoped'] + +export default function transformerAttributify(options: TransformerAttributifyOptions = {}): SourceCodeTransformer { + const ignoreAttributes = options?.ignoreAttributes ?? defaultIgnoreAttributes + const nonValuedAttribute = options?.nonValuedAttribute ?? true + const prefix = options.prefix ?? 'un-' + const prefixedOnly = options.prefixedOnly ?? false + + return { + name: 'transformer-attributify', + enforce: 'pre', + async transform(s, _) { + const code = new MagicString(s.toString()) + Array.from(code.original.matchAll(elementRE)) + .forEach((match) => { + const start = match.index! + let matchStrTemp = match[0] + let existsClass = '' + const attrSelectors: string[] = [] + + const valuedAttributes = Array.from((match[1] || '').matchAll(valuedAttributeRE)) + + valuedAttributes.forEach(([matchStr, name, _, content]) => { + let _name = prefixedOnly ? name.replace(prefix, '') : name + + if (!ignoreAttributes.includes(_name)) { + for (const prefix of strippedPrefixes) { + if (_name.startsWith(prefix)) { + _name = _name.slice(prefix.length) + break + } + } + if (!content) { + if (isValidSelector(_name) && nonValuedAttribute !== false) { + attrSelectors.push(_name) + matchStrTemp = matchStrTemp.replace(` ${_name}`, '') + } + return + } + + if (['class', 'className'].includes(_name)) { + if (!name.includes(':')) + existsClass = content + } + else { + attrSelectors.push(...content + .split(splitterRE) + .filter(Boolean) + .map(v => v === '~' ? _name : `${_name}-${v}`)) + matchStrTemp = matchStrTemp.replace(` ${matchStr}`, '') + } + } + }) + if (attrSelectors.length) { + if (!existsClass) { + code.overwrite(start, start + match[0].length, `${matchStrTemp.slice(0, -1)} class="${attrSelectors.join(' ')}"${matchStrTemp.slice(-1)}`) + } + else { + matchStrTemp = matchStrTemp.replace(existsClass, `${existsClass} ${attrSelectors.join(' ')}`) + code.overwrite(start, start + match[0].length, matchStrTemp) + } + } + }) + s.overwrite(0, s.original.length, code.toString()) + }, + } +} diff --git a/packages/transformer-rename-class/src/index.ts b/packages/transformer-rename-class/src/index.ts deleted file mode 100644 index 97df085..0000000 --- a/packages/transformer-rename-class/src/index.ts +++ /dev/null @@ -1,158 +0,0 @@ -import type { SourceCodeTransformer, UnocssPluginContext } from 'unocss' -import { expandVariantGroup } from '@unocss/core' - -export interface RenameClassOptions { - /** - * Prefix for compile class name - * @default 'uno-' - */ - classPrefix?: string - - /** - * Hash function - */ - hashFn?: (str: string) => string - - /** - * The layer name of generated rules - * @default 'applet_shortcuts' - */ - layer?: string - - /** - * Enable rename class, only build applet should be true - * e.g. In uniapp `enableRename: !(process.env.UNI_PLATFORM === 'h5')` to disable rename class in h5 - * @default true - */ - enableRename?: boolean - - /** - * Separators to expand. - * - * ``` - * foo-(bar baz) -> foo-bar foo-baz - * ^ - * separator - * ``` - * - * You may set it to `[':']` for strictness. - * - * @default [':', '-'] - * @see https://github.com/unocss/unocss/pull/1231 - */ - separators?: (':' | '-')[] -} - -export default function transformerRenameClass(options: RenameClassOptions = {}): SourceCodeTransformer { - const { - classPrefix = 'uno-', - hashFn = hash, - layer = 'applet_shortcuts', - enableRename = true, - } = options - - // Regular expression of characters to be escaped - const charReg = /[.:%!#()[\/\],]/ - - const classRE = /:?(hover-)?class=\".*?\"/g - const string1RE = /([']).*?(['])/g - const string2RE = /([\`]).*?([\`])/g - - return { - name: 'rename-class', - enforce: 'pre', - async transform(s, _, ctx) { - if (!enableRename) { - // https://github.com/unocss/unocss/tree/main/packages/transformer-variant-group - expandVariantGroup(s, options.separators) - } - else { - // process class - const classMatches = [...s.original.matchAll(classRE)] - for (const match of classMatches) { - // skip `... ? ... : ...` - if (/\?.*:/g.test(match[0])) - continue - - // skip `... : ...` - if (/{.+:.+}/g.test(match[0])) - continue - - const start = match.index! - const matchSplit = match[0].split('class=') - - const body = expandVariantGroup(matchSplit[1].slice(1, -1), options.separators) - - if (charReg.test(body)) { - const replacements = await compileApplet(body, ctx) - s.overwrite(start, start + match[0].length, `${matchSplit[0]}class="${replacements.join(' ')}"`) - } - } - - // process string1 - const string1Matches = [...s.original.matchAll(string1RE)] - for (const match of string1Matches) { - // There may be no need - // https://tailwindcss.com/docs/background-image#arbitrary-values - // skip all the image formats in HTML for bg-[url('...')] - if (/\.(png|jpg|jpeg|gif|svg)/g.test(match[0])) - continue - // skip http(s):// - if (/http(s)?:\/\//g.test(match[0])) - continue - - const start = match.index! - const body = match[0].slice(1, -1) - if (charReg.test(body)) { - const replacements = await compileApplet(body, ctx) - s.overwrite(start, start + match[0].length, `'${replacements.join(' ')}'`) - } - } - - // process string2 - const string2Matches = [...s.original.matchAll(string2RE)] - for (const match of string2Matches) { - // skip `${...}` - if (/\$\{.*\}/g.test(match[0])) - continue - - const start = match.index! - const body = match[0].slice(1, -1) - if (charReg.test(body)) { - const replacements = await compileApplet(body, ctx) - s.overwrite(start, start + match[0].length, `'${replacements.join(' ')}'`) - } - } - } - }, - } - - async function compileApplet(body: string, ctx: UnocssPluginContext): Promise { - const { uno, tokens } = ctx - const replacements = [] - const result = await Promise.all(body.split(/\s+/).filter(Boolean).map(async i => [i, !!await uno.parseToken(i)] as const)) - const known = result.filter(([, matched]) => matched).map(([i]) => i) - const unknown = result.filter(([, matched]) => !matched).map(([i]) => i) - replacements.push(...unknown) - body = known.join(' ') - if (body) { - const hash = hashFn(body) - const className = `${classPrefix}${hash}` - replacements.unshift(className) - uno.config.shortcuts.push([className, body, { layer }]) - tokens.add(className) - } - return replacements - } -} - -function hash(str: string) { - let i; let l - let hval = 0x811C9DC5 - - for (i = 0, l = str.length; i < l; i++) { - hval ^= str.charCodeAt(i) - hval += (hval << 1) + (hval << 4) + (hval << 7) + (hval << 8) + (hval << 24) - } - return (`00000${(hval >>> 0).toString(36)}`).slice(-6) -} diff --git a/packages/unocss-applet/README.md b/packages/unocss-applet/README.md index f7096ae..cd57ca9 100644 --- a/packages/unocss-applet/README.md +++ b/packages/unocss-applet/README.md @@ -13,17 +13,46 @@ pnpm add unocss-applet -D # with pnpm ## Usage ```ts -import { defineConfig } from 'unocss' +import { + defineConfig, + presetAttributify, + presetIcons, + presetUno, + transformerDirectives, + transformerVariantGroup, +} from 'unocss' -import { presetApplet, presetRemToRpx, transformerRenameClass } from 'unocss-applet' +import { + presetApplet, + presetRemToRpx, + transformerApplet, + transformerAttributify, +} from 'unocss-applet' + +const presets = [] +const transformers = [] + +if (process.env.UNI_PLATFORM === 'h5') { + presets.push(presetUno()) + presets.push(presetAttributify()) +} +else { + presets.push(presetApplet()) + presets.push(presetRemToRpx()) + + transformers.push(transformerApplet()) + transformers.push(transformerAttributify()) +} export default defineConfig({ presets: [ - presetApplet(), - presetRemToRpx(), + presetIcons(), + ...presets, ], transformers: [ - transformerRenameClass(), + transformerDirectives(), + transformerVariantGroup(), + ...transformers, ], }) ``` diff --git a/packages/unocss-applet/build.config.ts b/packages/unocss-applet/build.config.ts index 6610178..b294520 100644 --- a/packages/unocss-applet/build.config.ts +++ b/packages/unocss-applet/build.config.ts @@ -5,7 +5,8 @@ export default defineBuildConfig({ 'src/index', 'src/preset-applet', 'src/preset-rem-to-rpx', - 'src/transformer-rename-class', + 'src/transformer-applet', + 'src/transformer-attributify', ], declaration: true, clean: true, diff --git a/packages/unocss-applet/package.json b/packages/unocss-applet/package.json index c08dee3..8e709df 100644 --- a/packages/unocss-applet/package.json +++ b/packages/unocss-applet/package.json @@ -38,10 +38,10 @@ "require": "./dist/preset-rem-to-rpx.cjs", "import": "./dist/preset-rem-to-rpx.mjs" }, - "./transformer-rename-class": { - "types": "./dist/transformer-rename-class.d.ts", - "require": "./dist/transformer-rename-class.cjs", - "import": "./dist/transformer-rename-class.mjs" + "./transformer-applet": { + "types": "./dist/transformer-applet.d.ts", + "require": "./dist/transformer-applet.cjs", + "import": "./dist/transformer-applet.mjs" } }, "main": "./dist/index.mjs", @@ -57,6 +57,7 @@ "dependencies": { "@unocss-applet/preset-applet": "workspace:*", "@unocss-applet/preset-rem-to-rpx": "workspace:*", - "@unocss-applet/transformer-rename-class": "workspace:*" + "@unocss-applet/transformer-applet": "workspace:*", + "@unocss-applet/transformer-attributify": "workspace:*" } } diff --git a/packages/unocss-applet/src/index.ts b/packages/unocss-applet/src/index.ts index fba4fa6..cc0cf35 100644 --- a/packages/unocss-applet/src/index.ts +++ b/packages/unocss-applet/src/index.ts @@ -1,3 +1,4 @@ export { default as presetApplet } from '@unocss-applet/preset-applet' export { default as presetRemToRpx } from '@unocss-applet/preset-rem-to-rpx' -export { default as transformerRenameClass } from '@unocss-applet/transformer-rename-class' +export { default as transformerAttributify } from '@unocss-applet/transformer-attributify' +export { default as transformerApplet } from '@unocss-applet/transformer-applet' diff --git a/packages/unocss-applet/src/transformer-applet.ts b/packages/unocss-applet/src/transformer-applet.ts new file mode 100644 index 0000000..6d1c60e --- /dev/null +++ b/packages/unocss-applet/src/transformer-applet.ts @@ -0,0 +1 @@ +export * from '@unocss-applet/transformer-applet' diff --git a/packages/unocss-applet/src/transformer-attributify.ts b/packages/unocss-applet/src/transformer-attributify.ts new file mode 100644 index 0000000..a052454 --- /dev/null +++ b/packages/unocss-applet/src/transformer-attributify.ts @@ -0,0 +1 @@ +export * from '@unocss-applet/transformer-attributify' diff --git a/packages/unocss-applet/src/transformer-rename-class.ts b/packages/unocss-applet/src/transformer-rename-class.ts deleted file mode 100644 index 5b152e4..0000000 --- a/packages/unocss-applet/src/transformer-rename-class.ts +++ /dev/null @@ -1 +0,0 @@ -export * from '@unocss-applet/transformer-rename-class' diff --git a/playground/package.json b/playground/package.json index 764790d..4b5c7b8 100644 --- a/playground/package.json +++ b/playground/package.json @@ -53,6 +53,7 @@ "@dcloudio/uni-automator": "3.0.0-alpha-3040820220424001", "@dcloudio/uni-cli-shared": "3.0.0-alpha-3040820220424001", "@dcloudio/vite-plugin-uni": "3.0.0-alpha-3040820220424001", + "@iconify-json/carbon": "^1.1.6", "sass": "^1.54.4" } } diff --git a/playground/src/pages.json b/playground/src/pages.json index 630b54f..fd4af4e 100644 --- a/playground/src/pages.json +++ b/playground/src/pages.json @@ -1,10 +1,7 @@ { "pages": [ { - "path": "pages/index/index", - "style": { - "navigationBarTitleText": "uni-app" - } + "path": "pages/index/index" } ], "globalStyle": { diff --git a/playground/src/pages/index/index.vue b/playground/src/pages/index/index.vue index 1ff1df2..2b31e06 100644 --- a/playground/src/pages/index/index.vue +++ b/playground/src/pages/index/index.vue @@ -7,7 +7,7 @@ const bool = true