bion-auto-css v1.0.15

Bion auto css

Auto generate css code from special class names

• Installation

npm install bion-auto-css

• Configuration

Add to buildModules in nuxt.config.js:

buildModules: [
    'bion-auto-css'
]

With options

buildModules: [
    ['bion-auto-css', {
        pattern: 'pages/*.vue',
        output: 'assets/auto-css/index.scss',
        watch: true,
        prefix: 'a-'
    }]
]

pattern

• Path of vue files
• Default: {pages,components,layouts}/**/*.vue
• Type: string

output

• Path for auto generated css code
• Default: assets/auto-css/index.scss
• Type: string

watch

• Css code generates when code changes in file
• Default: true
• Type: boolean

prefix

• Prefix for classes
• Default: a-
• Type: string

Add output path to css in nuxt.config.js:

css: [
    '@/assets/auto-css/index.scss'
]

How does it work?

When you write code in pages/index.vue or any file that belongs to pattern like this:

<template>
    <div class="a-color-red">
        Hello World
    </div>
</template>

Auto generate code to output file like this:

.a-color-red {
    color: red;
}

Structure:

color-red - css_property-property_value

It splits border-1px-solid-black to border and 1px solid black and it write to css file

Examples

1.

<template>
    <div class="a-color-red">...</div>
</template>

Generated scss code

.a-color-red {
  color: red;
}

2.

<template>
    <div class="a-display-inline--flex">...</div>
</template>

Generated scss code

.a-display-inline--flex {
  display: inline-flex;
}

3.

<template>
    <div class="hover:a-color-blue">...</div>
</template>

Generated scss code

.hover\:a-color-blue:hover {
  color: blue;
}