@ecopages/postcss-processor 0.2.0-alpha.9 → 0.2.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,72 +0,0 @@
1
- /**
2
- * Tailwind CSS v3 Preset for PostCSS Processor
3
- * @module @ecopages/postcss-processor/presets/tailwind-v3
4
- *
5
- * Requires: tailwindcss, postcss-import, autoprefixer, cssnano
6
- * Install: bun add tailwindcss postcss-import autoprefixer cssnano
7
- */
8
-
9
- import autoprefixer from 'autoprefixer';
10
- import browserslist from 'browserslist';
11
- import cssnano from 'cssnano';
12
- import type postcss from 'postcss';
13
- import postcssImport from 'postcss-import';
14
- import tailwindcss from 'tailwindcss';
15
- import tailwindcssNesting from 'tailwindcss/nesting/index.js';
16
- import type { PluginFactoryRecord, PostCssProcessorPluginConfig } from '../plugin.ts';
17
-
18
- type PluginsRecord = Record<string, postcss.AcceptedPlugin>;
19
-
20
- /**
21
- * Creates a PostCSS processor config preset for Tailwind CSS v3.
22
- *
23
- * Features:
24
- * - Uses classic Tailwind v3 plugin stack
25
- * - Includes postcss-import, tailwindcss/nesting, tailwindcss, autoprefixer, cssnano
26
- * - Returns both `plugins` for immediate use and `pluginFactories` so Ecopages
27
- * can recreate fresh Tailwind/PostCSS plugin instances on dependency-driven rebuilds
28
- *
29
- * @example
30
- * ```typescript
31
- * import { postcssProcessorPlugin } from '@ecopages/postcss-processor';
32
- * import { tailwindV3Preset } from '@ecopages/postcss-processor/presets';
33
- *
34
- * // Basic usage
35
- * postcssProcessorPlugin(tailwindV3Preset())
36
- *
37
- * // Extend with additional plugins
38
- * const preset = tailwindV3Preset();
39
- * postcssProcessorPlugin({
40
- * ...preset,
41
- * plugins: { ...preset.plugins, myPlugin: myPlugin() },
42
- * })
43
- * ```
44
- */
45
- export function tailwindV3Preset(): PostCssProcessorPluginConfig {
46
- // Check if browserslist config exists
47
- const browserslistConfig = browserslist.loadConfig({ path: process.cwd() });
48
- const autoprefixerOptions = browserslistConfig
49
- ? {}
50
- : {
51
- overrideBrowserslist: ['>0.3%', 'not ie 11', 'not dead', 'not op_mini all'],
52
- };
53
-
54
- const pluginFactories: PluginFactoryRecord = {
55
- 'postcss-import': () => postcssImport(),
56
- 'tailwindcss/nesting': () => tailwindcssNesting(),
57
- tailwindcss: () => tailwindcss(),
58
- autoprefixer: () => autoprefixer(autoprefixerOptions),
59
- cssnano: () => cssnano(),
60
- };
61
-
62
- const plugins: PluginsRecord = Object.fromEntries(
63
- Object.entries(pluginFactories).map(([name, factory]) => [name, factory()]),
64
- ) as PluginsRecord;
65
-
66
- /**
67
- * Keep both forms:
68
- * - `plugins` are used immediately by the processor
69
- * - `pluginFactories` let the processor recreate fresh plugin instances later
70
- */
71
- return { plugins, pluginFactories };
72
- }
@@ -1,122 +0,0 @@
1
- /**
2
- * Tailwind CSS v4 Preset for PostCSS Processor
3
- * @module @ecopages/postcss-processor/presets/tailwind-v4
4
- *
5
- * Requires: @tailwindcss/postcss, cssnano
6
- * Install: bun add @tailwindcss/postcss cssnano
7
- */
8
-
9
- import tailwindcss from '@tailwindcss/postcss';
10
- import autoprefixer from 'autoprefixer';
11
- import browserslist from 'browserslist';
12
- import cssnano from 'cssnano';
13
- import path from 'node:path';
14
- import postcssImport from 'postcss-import';
15
- import postcssNested from 'postcss-nested';
16
- import type { PluginFactoryRecord, PostCssProcessorPluginConfig } from '../plugin.ts';
17
-
18
- /**
19
- * Options for Tailwind v4 preset
20
- */
21
- export interface TailwindV4PresetOptions {
22
- /**
23
- * Absolute path to the main Tailwind CSS file containing `@import "tailwindcss"`.
24
- * Used to calculate relative @reference paths for CSS files using @apply.
25
- */
26
- referencePath: string;
27
- }
28
-
29
- /**
30
- * Creates a PostCSS processor config preset for Tailwind CSS v4.
31
- *
32
- * Features:
33
- * - Uses `@tailwindcss/postcss` plugin (v4)
34
- * - Automatically injects `@reference` headers for `@apply` support
35
- * - Includes cssnano for CSS minification
36
- * - Returns both `plugins` for immediate use and `pluginFactories` so Ecopages
37
- * can recreate fresh Tailwind/PostCSS plugin instances on dependency-driven rebuilds
38
- *
39
- * @example
40
- * ```typescript
41
- * import { postcssProcessorPlugin } from '@ecopages/postcss-processor';
42
- * import { tailwindV4Preset } from '@ecopages/postcss-processor/presets';
43
- *
44
- * // Basic usage
45
- * postcssProcessorPlugin(tailwindV4Preset({
46
- * referencePath: path.resolve(import.meta.dir, 'src/styles/tailwind.css'),
47
- * }))
48
- *
49
- * // Extend with additional plugins
50
- * const preset = tailwindV4Preset({ referencePath });
51
- * postcssProcessorPlugin({
52
- * ...preset,
53
- * plugins: { ...preset.plugins, myPlugin: myPlugin() },
54
- * })
55
- * ```
56
- */
57
- export function tailwindV4Preset(options: TailwindV4PresetOptions): PostCssProcessorPluginConfig {
58
- const { referencePath } = options;
59
-
60
- // Check if browserslist config exists
61
- const browserslistConfig = browserslist.loadConfig({ path: process.cwd() });
62
- const autoprefixerOptions = browserslistConfig
63
- ? {}
64
- : {
65
- overrideBrowserslist: ['>0.3%', 'not ie 11', 'not dead', 'not op_mini all'],
66
- };
67
-
68
- const pluginFactories: PluginFactoryRecord = {
69
- 'postcss-import': () => postcssImport(),
70
- 'postcss-nested': () => postcssNested(),
71
- '@tailwindcss/postcss': () => tailwindcss({ optimize: false }),
72
- autoprefixer: () => autoprefixer(autoprefixerOptions),
73
- cssnano: () => cssnano(),
74
- };
75
-
76
- return {
77
- /**
78
- * Instantiate the initial plugin list for the active processor instance.
79
- * Fresh instances can later be recreated from `pluginFactories`.
80
- */
81
- plugins: Object.fromEntries(Object.entries(pluginFactories).map(([name, factory]) => [name, factory()])),
82
- pluginFactories,
83
- transformInput: async (contents: string | Buffer, filePath: string): Promise<string> => {
84
- const css = contents instanceof Buffer ? contents.toString('utf-8') : (contents as string);
85
- const normalizedFilePath = path.resolve(filePath);
86
- const normalizedReferencePath = path.resolve(referencePath);
87
-
88
- /** Skip transformation for the main tailwind entry file */
89
- if (normalizedFilePath === normalizedReferencePath) {
90
- return css;
91
- }
92
-
93
- /** Skip if file already has an @reference directive */
94
- if (/^\s*@reference\s+/m.test(css)) {
95
- return css;
96
- }
97
-
98
- const relativePath = path.relative(path.dirname(filePath), referencePath);
99
-
100
- /** Skip if file already imports the referencePath */
101
- if (css.includes(`@import '${relativePath}'`) || css.includes(`@import "${relativePath}"`)) {
102
- return css;
103
- }
104
-
105
- /**
106
- * Replace `@import 'tailwindcss'` with an import to the referencePath.
107
- * This ensures custom theme variables are available for @apply directives.
108
- */
109
- const tailwindImportPattern = /^@import\s+['"]tailwindcss(?:\/[^'"]*)?['"];?\s*$/m;
110
- if (tailwindImportPattern.test(css)) {
111
- return css.replace(tailwindImportPattern, `@import '${relativePath}';`);
112
- }
113
-
114
- /** If file uses @apply but has no tailwind import, add @reference */
115
- if (css.includes('@apply')) {
116
- return `@reference "${relativePath}";\n\n${css}`;
117
- }
118
-
119
- return css;
120
- },
121
- };
122
- }
@@ -1,37 +0,0 @@
1
- import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
2
-
3
- import { getFileAsBuffer } from '../postcss-processor';
4
- import type { CssTransform } from './css-runtime-contract';
5
-
6
- type CssLoaderOptions = {
7
- name: string;
8
- filter: RegExp;
9
- transform: CssTransform;
10
- };
11
-
12
- export const createCssLoaderPlugin = ({ name, filter, transform }: CssLoaderOptions): EcoBuildPlugin => ({
13
- name,
14
- setup(build) {
15
- build.onLoad({ filter }, (args) => {
16
- const rawFile = getFileAsBuffer(args.path);
17
- const css = transform({
18
- contents: rawFile,
19
- filePath: args.path,
20
- });
21
-
22
- if (css instanceof Promise) {
23
- return css.then((resolved) => ({
24
- exports: { default: resolved },
25
- loader: 'object' as const,
26
- }));
27
- }
28
-
29
- return {
30
- exports: {
31
- default: css as string,
32
- },
33
- loader: 'object' as const,
34
- };
35
- });
36
- },
37
- });
@@ -1,30 +0,0 @@
1
- import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
2
-
3
- import { getFileAsBuffer } from '../postcss-processor';
4
- import type { CssTransform } from './css-runtime-contract';
5
-
6
- type BunCssLoaderOptions = {
7
- name: string;
8
- filter: RegExp;
9
- transform: CssTransform;
10
- };
11
-
12
- export const createBunCssLoaderPlugin = ({ name, filter, transform }: BunCssLoaderOptions): EcoBuildPlugin => ({
13
- name,
14
- setup(build) {
15
- build.onLoad({ filter }, async (args) => {
16
- const rawFile = await getFileAsBuffer(args.path);
17
- const css = await transform({
18
- contents: rawFile,
19
- filePath: args.path,
20
- });
21
-
22
- return {
23
- exports: {
24
- default: css,
25
- },
26
- loader: 'object',
27
- };
28
- });
29
- },
30
- });
@@ -1,6 +0,0 @@
1
- export type CssTransformInput = {
2
- contents: string | Buffer;
3
- filePath: string;
4
- };
5
-
6
- export type CssTransform = (input: CssTransformInput) => string | Promise<string>;