Skip to content

Commit

Permalink
fix: should return transform result even if its's empty
Browse files Browse the repository at this point in the history
  • Loading branch information
nonzzz committed Jan 15, 2024
1 parent 35898fd commit 8f348b6
Show file tree
Hide file tree
Showing 9 changed files with 83 additions and 39 deletions.
11 changes: 11 additions & 0 deletions __tests__/fixtures/empty/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { create, props } from '@stylexjs/stylex'

const styles = create({
link: {
padding: null
}
})

const { className } = props(styles.link)

export { className }
7 changes: 7 additions & 0 deletions __tests__/fixtures/empty/output.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import "@stylexjs/stylex";
const {
className: s
} = {};
export {
s as className
};
2 changes: 2 additions & 0 deletions __tests__/fixtures/normal/output.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
.xju2f9n{color:blue}
.x1e2nbdu{color:red}
17 changes: 17 additions & 0 deletions __tests__/fixtures/normal/output.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import * as s from "@stylexjs/stylex";
const e = {
blue: {
color: "xju2f9n",
$$css: !0
}
}, o = {
red: {
color: "x1e2nbdu",
$$css: !0
}
}, {
className: r
} = s.props(e.blue, o.red);
export {
r as className
};
9 changes: 9 additions & 0 deletions __tests__/fixtures/path-alias/output.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import "@stylexjs/stylex";
const {
className
} = {
className: "x97kcnl"
};
export {
className
};
70 changes: 33 additions & 37 deletions __tests__/plugin.spec.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import fsp from 'fs/promises'
import fs from 'fs'
import path from 'path'
import test from 'ava'
import type { UserConfig } from 'vite'
Expand All @@ -15,11 +17,12 @@ interface BuildOptions {

async function mockBuild(taskName: string, opts: BuildOptions = {}) {
const { stylex = {}, vite: viteOptions = {} } = opts
const basePath = path.join(__dirname, 'fixtures', taskName)
const vite = await import('vite')
const bundle = await vite.build(vite.mergeConfig({
build: {
lib: {
entry: path.join(__dirname, 'fixtures', taskName, 'main.ts'),
entry: path.join(basePath, 'main.ts'),
formats: ['es'],
fileName: 'bundle'
},
Expand All @@ -45,34 +48,33 @@ async function mockBuild(taskName: string, opts: BuildOptions = {}) {
js = chunkOrAsset.code
}
}
return { css, js }
const snaphotPaths = [path.join(basePath, 'output.css'), path.join(basePath, 'output.js')]
const snaphots = {
css: '',
js: ''
}
await Promise.all(snaphotPaths.map(async (p) => {
if (fs.existsSync(p)) {
const result = await fsp.readFile(p, 'utf8')
if (p.includes('.js')) {
snaphots.js = result
} else {
snaphots.css = result
}
}
}))
return { css, js, snaphots }
}

// Currently, i can't find a good way to write unit test case.
// So this test file only test build case
// I think most dev related scenarios should be executed in e2e.

test('normal suit disable css minify', async (t) => {
const { css, js } = await mockBuild('normal', { vite: { build: { cssMinify: false } } })
const { css, js, snaphots } = await mockBuild('normal', { vite: { build: { cssMinify: false } } })
await sleep()
t.is(css, `.xju2f9n{color:blue}
.x1e2nbdu{color:red}`)
t.is(js, `import * as s from "@stylexjs/stylex";
const e = {
blue: {
color: "xju2f9n",
$$css: !0
}
}, o = {
red: {
color: "x1e2nbdu",
$$css: !0
}
}, { className: r } = s.props(e.blue, o.red);
export {
r as className
};
`)
t.is(css, snaphots.css)
t.is(js, snaphots.js)
})

test('normal suite enable css minify', async (t) => {
Expand All @@ -94,9 +96,9 @@ test('pxtorem suite should transform px to rem', async (t) => {
})

test('path-alias suite should be work', async (t) => {
const { js } = await mockBuild('path-alias',
const { js, snaphots } = await mockBuild('path-alias',
{ vite:
{
{
resolve: {
alias: {
'@': '.'
Expand All @@ -108,18 +110,12 @@ test('path-alias suite should be work', async (t) => {
}
})
await sleep()
t.is(js, `import { defineVars, create, props } from "@stylexjs/stylex";
const colors = defineVars({
black: "#000"
});
const styles = create({
black: {
color: colors.black
}
});
const { className } = props(styles.black);
export {
className
};
`)
t.is(js, snaphots.js)
})

test('empty style object should be work', async (t) => {
const { css, js, snaphots } = await mockBuild('empty')
await sleep()
t.is(css, snaphots.css)
t.is(js, snaphots.js)
})
2 changes: 1 addition & 1 deletion eslint.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ const parserVue = require('vue-eslint-parser')
const parserTs = require('@typescript-eslint/parser')
const pluginVue = require('eslint-plugin-vue')

module.exports = nonzzz({ ts: true, jsx: true, unusedImports: false, react: true }, { ignores: ['dist', 'node_modules', 'public', 'viteUtil'],
module.exports = nonzzz({ ts: true, jsx: true, react: true }, { ignores: ['dist', 'node_modules', 'public', '**/*output.js'] }, {
plugins: {
vue: pluginVue
},
Expand Down
3 changes: 2 additions & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,8 @@ export function stylexPlugin(opts: StylexPluginOptions = {}): Plugin {
if (!result) return
if ('stylex' in result.metadata) {
const rules = result.metadata.stylex as Rule[]
if (!rules.length) return
// #10 If user pass empty styles we should return the paased result.
if (!rules.length) return { code: result.code, map: result.map }
// pipe to vite's internal plugin for processing.
result.code = `import ${JSON.stringify(VIRTUAL_STYLEX_MODULE)};\n${result.code}`
stylexRules[id] = rules
Expand Down
1 change: 1 addition & 0 deletions src/patch-alias.ts
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export function createPatchAlias(alias: AliasOptions & Alias[], opts: PatchAlias
// https://rollupjs.org/plugin-development/#plugin-context
const resolved = await rollupContext.resolve(stmt.n, id)
if (resolved && resolved.id) {
if (resolved.id === stmt.n) continue
const relativePath = handleRelativePath(id, resolved.id)
if (!relativePath.includes('node_modules')) {
withAliasPath.push({ ...stmt, relative: relativePath })
Expand Down

0 comments on commit 8f348b6

Please sign in to comment.