cosmic-san
v0.0.31
Published
The san components of cosmic design ## Install ```shell npm install cosmic-ui-san -D ``` ## Config
Downloads
16
Keywords
Readme
cosmic san components
The san components of cosmic design
Install
npm install cosmic-ui-san -D
Config
ts project
rollup or vite config:
import { defineConfig } from 'vite';
import path from 'path';
import { cStyle } from 'cosmic-ui-san/plugin/vanilla/rollup-plugin-san-cosmic';
export default defineConfig({
build: {
rollupOptions: {
external: ['san', 'your-design-lib'],
},
},
plugins: [
cStyle({/* options */}),
]
});
SFC project
DOING
Options
|option|type|desc|default| |---|---|---|---| |target|string|component tag's attribute name|c-style| |propName|string|the precompiled name of component tag's attribute|styles| |basePath|string|css module's import base path|cosmic-ui|
Usage
Usage 1:
import { Button } from 'cosmic-san';
export class Page extends Component {
static template = `
<Button
c-style="icon"
>
button text
</Button>
`;
}
After PreCompile:
import { Button } from 'cosmic-san';
import { ButtonIcon as _ModuleCSS_1 } from 'cosmic-ui/button-icon.module.css'
export class Page extends Component {
static template = `
<Button
styles="_ModuleCSS_1"
>
button text
</Button>
`;
}
Usage 2:
import { Button } from 'cosmic-san';
export class Page extends Component {
static template = `
<Button
c-style="icon"
>
button text
</Button>
`;
}
After PreCompile:
import { Button } from 'cosmic-san';
import { ButtonIcon as _ModuleCSS_1 } from 'cosmic-ui/button-icon.module.css';
export class Page extends Component {
static template = `
<Button
styles="_ModuleCSS_1"
>
button text
</Button>
`;
}
Usage 3:
import { Button } from 'cosmic-san';
export class Page extends Component {
static template = `
<Button
c-style="./button-custom"
>
button text
</Button>
<Button
c-style="./button-custom.module.css"
>
button text
</Button>
`;
}
After PreCompile:
import { Button } from './button.ts';
import _ModuleCSS_1 from './button.custom.css';
import _ModuleCSS_2 from './button.custom.module.css';
export class Page extends Component {
static template = `
<Button
styles="_ModuleCSS_1"
>
button text 1
</Button>
<Button
styles="_ModuleCSS_2"
>
button text 2
</Button>
`;
}
Usage 4:
import { Button } from 'cosmic-san';
export class Page extends Component {
static template = `
<Button
c-style="-custom"
>
button text
</Button>
`;
}
After PreCompile:
import { Button } from 'cosmic-san';
import _ModuleCSS_1 from 'custom.module.css'
export class Page extends Component {
static template = `
<Button
styles="_ModuleCSS_1"
>
button text
</Button>
`;
}
TODO:
- Support san component's static components property
- more robust import and export ability