Skip to content

Commit 68f3fee

Browse files
navanshunavanshu
committed
Split files support
1 parent 50628f0 commit 68f3fee

File tree

8 files changed

+763
-492
lines changed

8 files changed

+763
-492
lines changed

‎README.md‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,8 @@ If you want it not modify some css variables, then pass them `--{variable-name}`
66

77
[postcss]: https://github.com/postcss/postcss
88
[postcss-variable-compress]: https://github.com/navanshu/postcss-variable-compress
9-
[vitecss-variable-compress]: https://github.com/Febnik/vitecss-variable-compress
109

11-
If you are looking for a plugin that can work on seprate files go to [vitecss-variable-compress]
10+
### If you are looking for a plugin that can work on separate files go to import splitFiles.js, works the same but it doesn't resets the variables.
1211

1312
```css
1413
:root {
@@ -93,6 +92,4 @@ module.exports = {
9392

9493
```
9594

96-
97-
9895
[official docs]: https://github.com/postcss/postcss#usage

‎package-lock.json‎

Lines changed: 418 additions & 425 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@
88
"postcss-plugin",
99
"minify",
1010
"compress",
11-
"cssnano"
11+
"cssnano",
12+
"css-variables",
13+
"clean-css",
14+
"shrik-css"
1215
],
1316
"scripts": {
1417
"test": "jest --coverage && eslint .",

‎splitFiles.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export declare namespace variableCompressSplitFiles {
2+
type skip = (variableName: string) => boolean | undefined;
3+
type parameters = skip | string;
4+
}

‎splitFiles.js‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
"use strict";
2+
Object.defineProperty(exports, "__esModule", { value: true });
3+
const postcssPlugin = 'postcss-variable-compress';
4+
let processed = Symbol('processed');
5+
let renamedVariables = [];
6+
let cssVariables = -1;
7+
let pureSkips = [];
8+
let scriptBasedSkips = [];
9+
let cssVariablesMap = new Map();
10+
function scriptCheck(val) {
11+
const should = scriptBasedSkips.findIndex(E => E(val));
12+
return (should > -1);
13+
}
14+
function shouldRun(val) {
15+
let should = true;
16+
if (renamedVariables.indexOf(val) > -1) {
17+
should = false;
18+
}
19+
if (should && scriptCheck(val)) {
20+
should = false;
21+
}
22+
return should;
23+
}
24+
function increase() {
25+
cssVariables = cssVariables + 1;
26+
let temp = cssVariables.toString(36);
27+
pureSkips.forEach(E => {
28+
if (E === temp) {
29+
temp = cssVariables.toString(36);
30+
cssVariables = cssVariables + 1;
31+
}
32+
});
33+
}
34+
function replacer(match) {
35+
if (!shouldRun(match))
36+
return match;
37+
let exist = cssVariablesMap.get(match);
38+
if (!exist) {
39+
exist = '--' + (cssVariables).toString(36);
40+
increase();
41+
cssVariablesMap.set(match, exist);
42+
renamedVariables.push(exist);
43+
}
44+
return exist;
45+
}
46+
function map(j) {
47+
let prop = j.prop;
48+
if (prop && j.variable && shouldRun(prop)) {
49+
let old = prop;
50+
let exist = cssVariablesMap.get(old);
51+
if (!exist) {
52+
exist = '--' + cssVariables.toString(36);
53+
increase();
54+
cssVariablesMap.set(old, exist);
55+
renamedVariables.push(exist);
56+
}
57+
prop = exist;
58+
j.prop = prop;
59+
}
60+
let value = j.value;
61+
if (value && value.includes('var(--') && value.length <= 1000) {
62+
value = value.replace(/--[\w-_]{1,1000}/g, replacer);
63+
j.value = value;
64+
}
65+
// @ts-ignore
66+
j[processed] = true;
67+
}
68+
module.exports = function variableCompressSplitFiles(opts) {
69+
processed = Symbol('processed');
70+
opts === null || opts === void 0 ? void 0 : opts.forEach(E => {
71+
if (typeof E === 'string') {
72+
let name = E;
73+
let cssName = E;
74+
if (E.slice(0, 2) === '--') {
75+
name = E.slice(2);
76+
}
77+
else {
78+
cssName = '--' + E;
79+
}
80+
pureSkips.push(name);
81+
cssVariablesMap.set(cssName, cssName);
82+
}
83+
else
84+
scriptBasedSkips.push(E);
85+
});
86+
increase();
87+
return {
88+
postcssPlugin,
89+
Declaration: {
90+
'*': map
91+
}
92+
};
93+
};
94+
module.exports.postcss = true;

‎splitFiles.test.js‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
const postcss = require('postcss');
2+
3+
const variableCompress = require('./splitFiles');
4+
5+
async function run (input, output, opts) {
6+
let result = await postcss(
7+
[variableCompress(opts)]
8+
).process(input, { from: undefined });
9+
10+
expect(result.css).toEqual(output);
11+
expect(result.warnings()).toHaveLength(0);
12+
13+
}
14+
15+
16+
it('Shorten css variables', async () => {
17+
await run(
18+
`:root {
19+
--first-color: #16f;
20+
--second-color: #ff7;
21+
--2: #000;
22+
}
23+
24+
#firstParagraph {
25+
background-color: var(--first-color);
26+
color: var(--second-color);
27+
}
28+
29+
#secondParagraph {
30+
background-color: var(--second-color);
31+
color: var(--first-color);
32+
}
33+
34+
#container {
35+
--first-color: #290;
36+
}
37+
38+
#thirdParagraph {
39+
background-color: var(--first-color);
40+
color: var(--second-color);
41+
}
42+
43+
.section-title {
44+
color: var(--primary-color, var(--black, #222));
45+
}
46+
47+
code {
48+
--5: #555;
49+
}`,
50+
`:root {
51+
--0: #16f;
52+
--1: #ff7;
53+
--2: #000;
54+
}
55+
56+
#firstParagraph {
57+
background-color: var(--0);
58+
color: var(--1);
59+
}
60+
61+
#secondParagraph {
62+
background-color: var(--1);
63+
color: var(--0);
64+
}
65+
66+
#container {
67+
--0: #290;
68+
}
69+
70+
#thirdParagraph {
71+
background-color: var(--0);
72+
color: var(--1);
73+
}
74+
75+
.section-title {
76+
color: var(--primary-color, var(--3, #222));
77+
}
78+
79+
code {
80+
--5: #555;
81+
}`,
82+
[
83+
'--primary-color',
84+
'2',
85+
(e) => e.includes('special'),
86+
(e) => e === '--5'
87+
]
88+
);
89+
});
90+
91+
it('No reloading', async () => {
92+
await run(`:root{--first-color: #16f;--second-color: #ff7;}`, `:root{--0: #16f;--1: #ff7;}`, []);
93+
await run(`:root{--second-color: #ff7;--first-color: #16f;}`, `:root{--1: #ff7;--0: #16f;}`, []);
94+
});
95+
96+
97+
it('Base array check or no array', async () => {
98+
await run(`:root{}`, `:root{}`);
99+
});

‎splitFiles.ts‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
export namespace variableCompressSplitFiles {
2+
export type skip = (variableName: string) => boolean | undefined;
3+
export type parameters = skip | string;
4+
}
5+
6+
const postcssPlugin = 'postcss-variable-compress';
7+
8+
let processed = Symbol('processed');
9+
let renamedVariables: string[] = [];
10+
let cssVariables = -1;
11+
let pureSkips: string[] = [];
12+
let scriptBasedSkips: variableCompressSplitFiles.skip[] = [];
13+
let cssVariablesMap = new Map();
14+
15+
function scriptCheck(val: string) {
16+
17+
const should = scriptBasedSkips.findIndex(E => E(val));
18+
return (should > -1);
19+
20+
}
21+
22+
function shouldRun(val: string) {
23+
24+
let should = true;
25+
26+
if (renamedVariables.indexOf(val) > -1) {
27+
should = false;
28+
}
29+
30+
if (should && scriptCheck(val)) {
31+
should = false;
32+
}
33+
34+
return should;
35+
}
36+
37+
function increase() {
38+
39+
cssVariables = cssVariables + 1;
40+
41+
let temp = cssVariables.toString(36);
42+
43+
pureSkips.forEach(E => {
44+
if (E === temp) {
45+
temp = cssVariables.toString(36);
46+
cssVariables = cssVariables + 1;
47+
}
48+
});
49+
50+
}
51+
52+
function replacer(match: string) {
53+
54+
if (!shouldRun(match)) return match;
55+
let exist = cssVariablesMap.get(match);
56+
57+
if (!exist) {
58+
exist = '--' + (cssVariables).toString(36);
59+
increase();
60+
cssVariablesMap.set(match, exist);
61+
renamedVariables.push(exist);
62+
}
63+
64+
return exist;
65+
}
66+
67+
function map(j: import('postcss').Declaration) {
68+
69+
let prop = j.prop;
70+
if (prop && j.variable && shouldRun(prop)) {
71+
let old = prop;
72+
let exist = cssVariablesMap.get(old);
73+
if (!exist) {
74+
exist = '--' + cssVariables.toString(36);
75+
increase();
76+
cssVariablesMap.set(old, exist);
77+
renamedVariables.push(exist);
78+
}
79+
prop = exist;
80+
j.prop = prop;
81+
}
82+
83+
let value = j.value;
84+
if (value && value.includes('var(--') && value.length <= 1000) {
85+
value = value.replace(/--[\w-_]{1,1000}/g, replacer);
86+
j.value = value;
87+
}
88+
89+
// @ts-ignore
90+
j[processed] = true;
91+
92+
}
93+
94+
95+
module.exports = function variableCompressSplitFiles(opts?: variableCompressSplitFiles.parameters[]) {
96+
97+
processed = Symbol('processed');
98+
99+
opts?.forEach(E => {
100+
if (typeof E === 'string') {
101+
102+
let name = E;
103+
let cssName = E;
104+
105+
if (E.slice(0, 2) === '--') {
106+
name = E.slice(2);
107+
} else {
108+
cssName = '--' + E;
109+
}
110+
111+
pureSkips.push(name);
112+
cssVariablesMap.set(cssName, cssName);
113+
}
114+
else
115+
scriptBasedSkips.push(E);
116+
});
117+
118+
increase();
119+
120+
return {
121+
postcssPlugin,
122+
Declaration: {
123+
'*': map
124+
}
125+
};
126+
};
127+
128+
module.exports.postcss = true;

0 commit comments

Comments
 (0)