Skip to content

Commit be0830c

Browse files
sonofmagicsonofmagic
authored
Merge pull request #25 from sonofmagic/dev
Release: 1.2.4
2 parents 87592ce + 936aa53 commit be0830c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+891
-276
lines changed

‎.eslintrc.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
module.exports = {
22
root: true,
3-
extends: ['@icebreakers/eslint-config-ts']
3+
extends: ['@icebreakers/eslint-config-ts', 'plugin:unicorn/recommended'],
4+
rules: {
5+
'unicorn/prefer-module': 0,
6+
'unicorn/prevent-abbreviations': 0,
7+
'unicorn/filename-case': 0,
8+
'unicorn/no-object-as-default-parameter': 0,
9+
'unicorn/no-null': 0
10+
}
411
}

‎apps/vite-vue/src/App.vue

Lines changed: 39 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
</script>
44

55
<template>
6-
<main class="flex min-h-screen flex-col items-center justify-between p-24">
6+
<main class="flex min-h-screen flex-col items-center justify-between p-24 ">
77
<div class="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
88
<p
99
class="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
@@ -27,11 +27,11 @@
2727
priority />
2828
</div>
2929

30-
<div class="mb-32 grid text-center lg:mb-0 lg:grid-cols-4 lg:text-left">
30+
<div class="mb-32 grid text-center lg:mb-0 lg:grid-cols-4 lg:text-left ">
3131
<a href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
3232
class="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
3333
target="_blank" rel="noopener noreferrer">
34-
<h2 class="mb-3 text-2xl font-semibold">
34+
<h2 class="bg-red-200 mb-3 text-2xl font-semibold">
3535
Docs <span
3636
class="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">-&gt;</span>
3737
</h2>
@@ -42,7 +42,7 @@
4242
<a href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
4343
class="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
4444
target="_blank" rel="noopener noreferrer">
45-
<h2 class="mb-3 text-2xl font-semibold">
45+
<h2 class="bg-red-200/40 mb-3 text-2xl font-semibold">
4646
Learn <span
4747
class="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">-&gt;</span>
4848
</h2>
@@ -53,7 +53,7 @@
5353
<a href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
5454
class="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
5555
target="_blank" rel="noopener noreferrer">
56-
<h2 class="mb-3 text-2xl font-semibold">
56+
<h2 class="bg-red-200/70 mb-3 text-2xl font-semibold">
5757
Templates <span
5858
class="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">-&gt;</span>
5959
</h2>
@@ -64,7 +64,7 @@
6464
<a href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
6565
class="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
6666
target="_blank" rel="noopener noreferrer">
67-
<h2 class="mb-3 text-2xl font-semibold">
67+
<h2 class="bg-red-200/90 mb-3 text-2xl font-semibold">
6868
Deploy <span
6969
class="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">-&gt;</span>
7070
</h2>
@@ -75,6 +75,39 @@
7575
</main>
7676
</template>
7777

78+
<script lang="ts">
79+
import { onMounted, defineComponent } from 'vue'
80+
81+
export default defineComponent({
82+
setup() {
83+
onMounted(() => {
84+
const clipPath = '';
85+
document.documentElement.animate(
86+
{
87+
clipPath
88+
},
89+
{
90+
duration: 500,
91+
easing: /* tw-mangle ignore */ 'ease-out',
92+
pseudoElement: '::view-transition-new(root)'
93+
})
94+
document.documentElement.animate(
95+
{
96+
clipPath
97+
},
98+
{
99+
duration: 500,
100+
easing: 'ease-out',
101+
pseudoElement: '::view-transition-new(root)'
102+
}
103+
)
104+
})
105+
return {}
106+
}
107+
})
108+
109+
</script>
110+
78111
<style scoped>
79112
.logo {
80113
height: 6em;

‎apps/vite-vue/vite.config.ts

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,22 @@
11
import { defineConfig } from 'vite'
22
import vue from '@vitejs/plugin-vue'
3-
import { vitePlugin as utwm } from 'unplugin-tailwindcss-mangle'
3+
import { vitePlugin as utwm, defaultMangleClassFilter } from 'unplugin-tailwindcss-mangle'
44
// https://vitejs.dev/config/
55
export default defineConfig({
66
plugins: [
77
vue(),
88
utwm({
9+
mangleClassFilter(className) {
10+
if (['ease-out', 'ease-linear', 'ease-in', 'ease-in-out'].includes(className)) {
11+
return false
12+
}
13+
return defaultMangleClassFilter(className)
14+
},
915
classSetOutput: true,
10-
classMapOutput: true
16+
classMapOutput: true,
17+
jsHandlerOptions: {
18+
minified: true
19+
}
1120
})
1221
]
1322
})

‎package.json

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "tailwindcss-mangle",
3-
"version": "1.2.2",
3+
"version": "1.2.4",
44
"private": true,
55
"workspaces": [
66
"apps/*",
@@ -29,6 +29,7 @@
2929
"bumpp": "^9.1.1",
3030
"cross-env": "^7.0.3",
3131
"eslint": "^8.42.0",
32+
"eslint-plugin-unicorn": "^47.0.0",
3233
"jest": "^29.5.0",
3334
"only-allow": "^1.1.1",
3435
"prettier": "^2.8.8",
@@ -44,5 +45,8 @@
4445
"engines": {
4546
"node": ">=14.0.0"
4647
},
47-
"packageManager": "[email protected]"
48+
"packageManager": "[email protected]",
49+
"dependencies": {
50+
"vitest": "^0.32.0"
51+
}
4852
}

‎packages/core/jest.config.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import baseConfig from '../../jest.config'
33
const config: Config = {
44
projects: [
55
{
6-
...baseConfig
6+
...baseConfig,
7+
modulePathIgnorePatterns: ['test/html.test.ts']
78
// transformIgnorePatterns: ['/node_modules/(?!(@parse5/)/tools)']
89
}
910
]

‎packages/core/package.json

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "tailwindcss-mangle-core",
3-
"version": "1.2.2",
3+
"version": "1.2.4",
44
"description": "The core of tailwindcss-mangle",
55
"main": "dist/index.js",
66
"module": "./dist/index.mjs",
@@ -13,7 +13,11 @@
1313
"build": "cross-env NODE_ENV=production rollup -c",
1414
"dev:tsc": "tsc -p tsconfig.json --sourceMap",
1515
"build:tsc": "tsc -p tsconfig.json",
16-
"test": "yarn build && jest"
16+
"_test": "yarn build && jest",
17+
"jest:u": "jest -u",
18+
"test:dev": "yarn build && vitest",
19+
"test": "yarn build && jest && vitest run",
20+
"coverage": "vitest run --coverage"
1721
},
1822
"keywords": [
1923
"tailwindcss",

‎packages/core/src/css/plugins.ts

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ const postcssPlugin = 'postcss-mangle-tailwindcss-plugin'
88

99
export function isVueScoped(s: parser.ClassName): boolean {
1010
if (s.parent) {
11-
const idx = s.parent.nodes.indexOf(s)
12-
if (idx > -1) {
13-
const nextNode = s.parent.nodes[idx + 1]
14-
if (nextNode && nextNode.type === 'attribute' && nextNode.attribute.indexOf('data-v-') > -1) {
11+
const index = s.parent.nodes.indexOf(s)
12+
if (index > -1) {
13+
const nextNode = s.parent.nodes[index + 1]
14+
if (nextNode && nextNode.type === 'attribute' && nextNode.attribute.includes('data-v-')) {
1515
return true
1616
}
1717
}
@@ -27,10 +27,8 @@ const postcssMangleTailwindcssPlugin: PostcssMangleTailwindcssPlugin = (options)
2727
// must set newClassMap options
2828
let set: Set<string> = new Set()
2929

30-
if (options) {
31-
if (options.runtimeSet) {
32-
set = options.runtimeSet
33-
}
30+
if (options && options.runtimeSet) {
31+
set = options.runtimeSet
3432
}
3533
return {
3634
postcssPlugin,
@@ -54,10 +52,8 @@ const postcssMangleTailwindcssPlugin: PostcssMangleTailwindcssPlugin = (options)
5452
} else {
5553
let newClassMap: Record<string, IClassGeneratorContextItem> = {}
5654

57-
if (options) {
58-
if (options.classGenerator) {
59-
newClassMap = options.classGenerator.newClassMap
60-
}
55+
if (options && options.classGenerator) {
56+
newClassMap = options.classGenerator.newClassMap
6157
}
6258

6359
return {

‎packages/core/src/html/index.ts

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,14 @@ export function htmlHandler(rawSource: string, options: IHtmlHandlerOptions) {
88
const fragment = parse(rawSource)
99
traverse(fragment, {
1010
element(node, parent) {
11-
const attr = node.attrs.find((x) => x.name === 'class')
12-
if (attr) {
13-
const arr = splitCode(attr.value, {
11+
const attribute = node.attrs.find((x) => x.name === 'class')
12+
if (attribute) {
13+
const array = splitCode(attribute.value, {
1414
splitQuote: false
1515
})
16-
for (let i = 0; i < arr.length; i++) {
17-
const v = arr[i]
16+
for (const v of array) {
1817
if (runtimeSet.has(v)) {
19-
attr.value = attr.value.replace(makeRegex(v), classGenerator.generateClassName(v).name)
18+
attribute.value = attribute.value.replace(makeRegex(v), classGenerator.generateClassName(v).name)
2019
}
2120
}
2221
}

‎packages/core/src/js/index.ts

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,28 @@ import * as t from '@babel/types'
33
import { transformSync, type BabelFileResult, type NodePath } from '@babel/core'
44
import type { IJsHandlerOptions } from '../types'
55
import { makeRegex, splitCode } from '../shared'
6-
import { isProd } from '../env'
6+
import { isProd as isProduction } from '../env'
77

8-
export function handleValue(str: string, node: StringLiteral | TemplateElement, options: IJsHandlerOptions) {
8+
export function handleValue(string_: string, node: StringLiteral | TemplateElement, options: IJsHandlerOptions) {
99
const { runtimeSet: set, classGenerator: clsGen, splitQuote = true } = options
1010

11-
const arr = splitCode(str, {
11+
const array = splitCode(string_, {
1212
splitQuote
1313
})
14-
let rawStr = str
15-
for (let i = 0; i < arr.length; i++) {
16-
const v = arr[i]
14+
let rawString = string_
15+
for (const v of array) {
1716
if (set.has(v)) {
1817
let ignoreFlag = false
1918
if (Array.isArray(node.leadingComments)) {
2019
ignoreFlag = node.leadingComments.findIndex((x) => x.value.includes('tw-mangle') && x.value.includes('ignore')) > -1
2120
}
2221

2322
if (!ignoreFlag) {
24-
rawStr = rawStr.replace(makeRegex(v), clsGen.generateClassName(v).name)
23+
rawString = rawString.replace(makeRegex(v), clsGen.generateClassName(v).name)
2524
}
2625
}
2726
}
28-
return rawStr
27+
return rawString
2928
}
3029

3130
export function jsHandler(rawSource: string, options: IJsHandlerOptions) {
@@ -52,12 +51,10 @@ export function jsHandler(rawSource: string, options: IJsHandlerOptions) {
5251
enter(p: NodePath<CallExpression>) {
5352
const n = p.node
5453
// eval()
55-
if (t.isIdentifier(n.callee) && n.callee.name === 'eval') {
56-
if (t.isStringLiteral(n.arguments[0])) {
57-
const res = jsHandler(n.arguments[0].value, options)
58-
if (res.code) {
59-
n.arguments[0].value = res.code
60-
}
54+
if (t.isIdentifier(n.callee) && n.callee.name === 'eval' && t.isStringLiteral(n.arguments[0])) {
55+
const res = jsHandler(n.arguments[0].value, options)
56+
if (res.code) {
57+
n.arguments[0].value = res.code
6158
}
6259
}
6360
}
@@ -67,7 +64,7 @@ export function jsHandler(rawSource: string, options: IJsHandlerOptions) {
6764
}
6865
}
6966
],
70-
minified: options.minified ?? isProd(),
67+
minified: options.minified ?? isProduction(),
7168
sourceMaps: false,
7269
configFile: false
7370
})

‎packages/core/test/__snapshots__/html.test.ts.snap

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2+
3+
exports[`html handler > common usage 1`] = `
4+
"<!DOCTYPE html><html><head>
5+
<meta charset=\\"UTF-8\\">
6+
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\">
7+
<link href=\\"/main.css\\" rel=\\"stylesheet\\">
8+
</head>
9+
10+
<body>
11+
<h1 class=\\"tw-a tw-b tw-c\\">
12+
Hello world!
13+
</h1>
14+
15+
16+
</body></html>"
17+
`;
18+
19+
exports[`html handler > trailing slash case 0 1`] = `
20+
"<!DOCTYPE html><html lang=\\"en\\"><head>
21+
<meta charset=\\"UTF-8\\">
22+
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\">
23+
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\">
24+
<title>Document</title>
25+
</head>
26+
27+
<body>
28+
<div>
29+
<div class=\\"tw-a\\">
30+
Block with bg-red-500/50 class
31+
</div>
32+
<div class=\\"tw-b\\">
33+
Block with bg-red-500 class
34+
</div>
35+
</div>
36+
37+
38+
</body></html>"
39+
`;
40+
41+
exports[`html handler > trailing slash case 1`] = `
42+
"<!DOCTYPE html><html lang=\\"en\\"><head>
43+
<meta charset=\\"UTF-8\\">
44+
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\">
45+
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\">
46+
<title>Document</title>
47+
</head>
48+
49+
<body>
50+
<div>
51+
<div class=\\"tw-a\\">
52+
Block with bg-red-500 class
53+
</div>
54+
<div class=\\"tw-b\\">
55+
Block with bg-red-500/50 class
56+
</div>
57+
</div>
58+
59+
60+
</body></html>"
61+
`;

0 commit comments

Comments
 (0)