Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
docz-plugin-css
Advanced tools
This package makes it possible to use preprocessors and css modules on docz
Docz plugin to parse css files inside your documents
First of all, install plugin:
$ yarn add docz-plugin-css --dev
After that, use the plugin on your doczrc.js
:
// doczrc.js
import { css } from 'docz-plugin-css'
export default {
plugins: [
css({
preprocessor: 'postcss',
cssmodules: true,
loaderOpts: {
/* whatever your preprocessor loader accept */
}
})
]
}
Do you can choose how preprocessor your bundler will use just by changing the preprocessor
property at the plugin definition:
// doczrc.js
import { css } from 'docz-plugin-css'
export default {
plugins: [
css({
preprocessor: 'sass'
})
]
}
To use css modules, just turn on cssmodules
property on your project configuration:
// doczrc.js
import { css } from 'docz-plugin-css'
export default {
plugins: [
css({
preprocessor: 'sass',
cssmodules: true
})
]
}
After that, to import styles from css modules, just use .module.{preprocessor-ext}
on your files
---
name: Button
----
import { Playground } from 'docz'
import { Button } from './Button'
import { styles } from './styles.module.css'
# Button
Example of Button component with custom class!
<Playground>
<Button className={styles.custom}>
Click me
</Button>
</Playground>
If you don't pass .module
in front of the preprocessor extension, bundler will don't parse your css as cssmodule!
You can still use multiple pre-processor together in the same configuration:
// doczrc.js
import { css } from 'docz-plugin-css'
export default {
plugins: [
css({ preprocessor: 'sass' }),
css({ preprocessor: 'stylus' }),
]
}
preprocessor
postcss | sass | less | stylus
postcss
Use to define the preprocessor you want to use
cssmodules
Boolean
false
Use this option if you want to use css modules
loaderOpts
{ [key:string]: any }
{}
Custom options passed on pre-processor loader configuration
cssOpts
{ [key:string]: any }
{}
Custom options passed on css-loader configuration
FAQs
This package makes it possible to use preprocessors and css modules on docz
The npm package docz-plugin-css receives a total of 239 weekly downloads. As such, docz-plugin-css popularity was classified as not popular.
We found that docz-plugin-css demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.