kylefang/docz
1
0
Fork 0
mirror of https://github.com/zhigang1992/docz.git synced 2026-03-26 10:14:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: move docz-plugin-css to another repo

Browse Source
This commit is contained in:
Pedro Nauck
2018-09-07 00:05:36 -03:00
parent 232f0f381e
commit e60614b3d4
10 changed files with 3 additions and 691 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -80,7 +80,7 @@ Documenting our things is one of the most important and heavy processes when you
## 🎛   Plugins
- **[css](https://github.com/pedronauck/docz/blob/master/packages/docz-plugin-css)** - Parse css files inside your documents
- **[css](https://github.com/pedronauck/docz-plugin-css)** - Parse css files inside your documents
- **[babel6](https://github.com/pedronauck/docz/blob/master/packages/docz-plugin-babel6)** - Use this plugin to use older babel version **[DEPRECATED]** ⚠️
- **[netlify](https://github.com/nicholasess/docz-plugin-netlify)** - Deploy your documentation to [Netlify](http://netlify.com/)
- **[react-native](https://github.com/pedronauck/docz/blob/master/packages/docz-plugin-react-native)** - Allow you to use docz with React Native

288
packages/docz-plugin-css/CHANGELOG.md
View File

@@ -1,288 +0,0 @@
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.11.0"></a>
# [0.11.0](https://github.com/pedronauck/docz/compare/v0.10.3...v0.11.0) (2018-09-02)
### Bug Fixes
* **docz-plugin-css:** fix empty loaderOpts ([bb9b946](https://github.com/pedronauck/docz/commit/bb9b946))
<a name="0.10.3"></a>
## [0.10.3](https://github.com/pedronauck/docz/compare/v0.9.6...v0.10.3) (2018-08-16)
**Note:** Version bump only for package docz-plugin-css
<a name="0.10.2"></a>
## [0.10.2](https://github.com/pedronauck/docz/compare/v0.10.1...v0.10.2) (2018-08-13)
**Note:** Version bump only for package docz-plugin-css
<a name="0.10.1"></a>
## [0.10.1](https://github.com/pedronauck/docz/compare/v0.10.0...v0.10.1) (2018-08-13)
**Note:** Version bump only for package docz-plugin-css
<a name="0.10.0"></a>
# [0.10.0](https://github.com/pedronauck/docz/compare/v0.9.6...v0.10.0) (2018-08-13)
**Note:** Version bump only for package docz-plugin-css
<a name="0.9.6"></a>
## [0.9.6](https://github.com/pedronauck/docz/compare/v0.9.5...v0.9.6) (2018-08-06)
**Note:** Version bump only for package docz-plugin-css
<a name="0.9.4"></a>
## [0.9.4](https://github.com/pedronauck/docz/compare/v0.9.4-beta.1...v0.9.4) (2018-08-04)
**Note:** Version bump only for package docz-plugin-css
<a name="0.9.3"></a>
## [0.9.3](https://github.com/pedronauck/docz/compare/v0.9.2...v0.9.3) (2018-08-03)
**Note:** Version bump only for package docz-plugin-css
<a name="0.9.2"></a>
## [0.9.2](https://github.com/pedronauck/docz/compare/v0.9.1...v0.9.2) (2018-08-02)
**Note:** Version bump only for package docz-plugin-css
<a name="0.9.1"></a>
## [0.9.1](https://github.com/pedronauck/docz/compare/v0.9.0...v0.9.1) (2018-08-02)
**Note:** Version bump only for package docz-plugin-css
<a name="0.9.0"></a>
# [0.9.0](https://github.com/pedronauck/docz/compare/v0.9.0-beta.1...v0.9.0) (2018-08-02)
### Bug Fixes
* **docz:** using context for imports to prevent disposed hmr ([b37284c](https://github.com/pedronauck/docz/commit/b37284c))
* **docz-plugin-css:** pass default parameter ([389979a](https://github.com/pedronauck/docz/commit/389979a))
<a name="0.9.0-beta.1"></a>
# [0.9.0-beta.1](https://github.com/pedronauck/docz/compare/v0.9.0-beta.0...v0.9.0-beta.1) (2018-08-01)
**Note:** Version bump only for package docz-plugin-css
<a name="0.9.0-beta.0"></a>
# [0.9.0-beta.0](https://github.com/pedronauck/docz/compare/v0.8.0...v0.9.0-beta.0) (2018-08-01)
**Note:** Version bump only for package docz-plugin-css
<a name="0.8.0"></a>
# [0.8.0](https://github.com/pedronauck/docz/compare/v0.7.1...v0.8.0) (2018-07-28)
**Note:** Version bump only for package docz-plugin-css
<a name="0.7.1"></a>
## [0.7.1](https://github.com/pedronauck/docz/compare/v0.7.0...v0.7.1) (2018-07-24)
### Bug Fixes
* **docz-plugin-css:** allow css from node_modules ([c21929a](https://github.com/pedronauck/docz/commit/c21929a))
<a name="0.7.0"></a>
# [0.7.0](https://github.com/pedronauck/docz/compare/v0.6.2...v0.7.0) (2018-07-23)
### Bug Fixes
* **docz-plugin-css:** css modules applied logic ([c5fa378](https://github.com/pedronauck/docz/commit/c5fa378))
<a name="0.6.2"></a>
## [0.6.2](https://github.com/pedronauck/docz/compare/v0.6.1...v0.6.2) (2018-07-20)
**Note:** Version bump only for package docz-plugin-css
<a name="0.6.0"></a>
# [0.6.0](https://github.com/pedronauck/docz/compare/v0.5.9...v0.6.0) (2018-07-19)
**Note:** Version bump only for package docz-plugin-css
<a name="0.5.9"></a>
## [0.5.9](https://github.com/pedronauck/docz/compare/v0.5.8...v0.5.9) (2018-07-16)
**Note:** Version bump only for package docz-plugin-css
<a name="0.5.7"></a>
## [0.5.7](https://github.com/pedronauck/docz/compare/v0.5.6...v0.5.7) (2018-07-11)
**Note:** Version bump only for package docz-plugin-css
<a name="0.5.6"></a>
## [0.5.6](https://github.com/pedronauck/docz/compare/v0.5.5...v0.5.6) (2018-07-11)
**Note:** Version bump only for package docz-plugin-css
<a name="0.5.5"></a>
## [0.5.5](https://github.com/pedronauck/docz/compare/v0.5.4...v0.5.5) (2018-07-07)
**Note:** Version bump only for package docz-plugin-css
<a name="0.5.4"></a>
## [0.5.4](https://github.com/pedronauck/docz/compare/v0.5.3...v0.5.4) (2018-07-07)
**Note:** Version bump only for package docz-plugin-css
<a name="0.5.2"></a>
## [0.5.2](https://github.com/pedronauck/docz/compare/v0.5.1...v0.5.2) (2018-07-05)
**Note:** Version bump only for package docz-plugin-css
<a name="0.5.1"></a>
## [0.5.1](https://github.com/pedronauck/docz/compare/v0.3.4...v0.5.1) (2018-07-03)
**Note:** Version bump only for package docz-plugin-css
<a name="0.5.0"></a>
# [0.5.0](https://github.com/pedronauck/docz/compare/v0.3.4...v0.5.0) (2018-07-03)
**Note:** Version bump only for package docz-plugin-css
<a name="0.4.0"></a>
# [0.4.0](https://github.com/pedronauck/docz/compare/v0.3.4...v0.4.0) (2018-06-30)
**Note:** Version bump only for package docz-plugin-css
<a name="0.3.4"></a>
## [0.3.4](https://github.com/pedronauck/docz/compare/v0.3.3...v0.3.4) (2018-06-26)
**Note:** Version bump only for package docz-plugin-css
<a name="0.3.3"></a>
## [0.3.3](https://github.com/pedronauck/docz/compare/v0.3.2...v0.3.3) (2018-06-26)
### Bug Fixes
* **docz-core:** copy templates files for dist ([#88](https://github.com/pedronauck/docz/issues/88)) ([5e4b98d](https://github.com/pedronauck/docz/commit/5e4b98d))
<a name="0.3.2"></a>
## [0.3.2](https://github.com/pedronauck/docz/compare/v0.3.1...v0.3.2) (2018-06-25)
**Note:** Version bump only for package docz-plugin-css
<a name="0.3.1"></a>
## [0.3.1](https://github.com/pedronauck/docz/compare/v0.2.11...v0.3.1) (2018-06-25)
**Note:** Version bump only for package docz-plugin-css
<a name="0.2.11"></a>
## [0.2.11](https://github.com/pedronauck/docz/compare/v0.2.10...v0.2.11) (2018-06-22)
### Bug Fixes
* **docz-plugin-css:** production build ([1a66d8a](https://github.com/pedronauck/docz/commit/1a66d8a))
<a name="0.2.10"></a>
## [0.2.10](https://github.com/pedronauck/docz/compare/v0.2.9...v0.2.10) (2018-06-21)
### Features
* **docz-plugin-css:** add initial version ([#78](https://github.com/pedronauck/docz/issues/78)) ([299372e](https://github.com/pedronauck/docz/commit/299372e))

145
packages/docz-plugin-css/README.md
View File

@@ -1,144 +1,3 @@
# docz-plugin-css
# docz-plugin-css [MOVED]
Docz plugin to parse css files inside your documents
![](https://cdn-std.dprcdn.net/files/acc_649651/4Q4QBN)
## Examples
- [PostCSS](https://github.com/pedronauck/docz/tree/master/examples/css-postcss)
- [Less](https://github.com/pedronauck/docz/tree/master/examples/css-less)
- [Sass](https://github.com/pedronauck/docz/tree/master/examples/css-sass)
- [Stylus](https://github.com/pedronauck/docz/tree/master/examples/css-stylus)
## Instalation
First of all, install plugin:
```bash
$ yarn add docz-plugin-css --dev
```
After that, use the plugin on your `doczrc.js`:
```js
// doczrc.js
import { css } from 'docz-plugin-css'
export default {
plugins: [
css({
preprocessor: 'postcss',
cssmodules: true,
loaderOpts: {
/* whatever your preprocessor loader accept */
}
})
]
}
```
### Choosing PostCSS, Sass, Less or Stylus
Do you can choose how preprocessor your bundler will use just by changing the `preprocessor` property at the plugin definition:
```js
// doczrc.js
import { css } from 'docz-plugin-css'
export default {
plugins: [
css({
preprocessor: 'sass'
})
]
}
```
### Using CSS Modules
To use css modules, just turn on `cssmodules` property on your project configuration:
```js
// 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
```markdown
---
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!
### Multiple pre-processor
You can still use multiple pre-processor together in the same configuration:
```js
// doczrc.js
import { css } from 'docz-plugin-css'
export default {
plugins: [
css({ preprocessor: 'sass' }),
css({ preprocessor: 'stylus' }),
]
}
```
## Api
### Params
#### `preprocessor`
- **Type:** `postcss | sass | less | stylus`
- **Default:** `postcss`
Use to define the preprocessor you want to use
#### `cssmodules`
- **Type:** `Boolean`
- **Default:** `false`
Use this option if you want to use css modules
#### `loaderOpts`
- **Type:** `{ [key:string]: any }`
- **Default:** `{}`
Custom options passed on pre-processor loader configuration
#### `cssOpts`
- **Type:** `{ [key:string]: any }`
- **Default:** `{}`
Custom options passed on [css-loader](https://github.com/webpack-contrib/css-loader) configuration
Since this package has some big dependencies, we moved it to [another repo](https://github.com/pedronauck/docz-plugin-css) in order to improve monorepo performance!

7
packages/docz-plugin-css/librc.js
View File

@@ -1,7 +0,0 @@
const pkg = require('./package.json')
module.exports = {
external: Object.keys(pkg.dependencies).concat([
'react-dev-utils/getCSSModuleLocalIdent',
]),
}

45
packages/docz-plugin-css/package.json
View File

@@ -1,45 +0,0 @@
{
"name": "docz-plugin-css",
"version": "0.11.0",
"description": "This package makes it possible to use preprocessors and css modules on docz",
"license": "MIT",
"main": "dist/index.js",
"umd:main": "dist/index.umd.js",
"module": "dist/index.m.js",
"typings": "dist/index.d.ts",
"source": "src/index.ts",
"files": [
"dist/",
"package.json",
"README.md"
],
"scripts": {
"dev": "libundler watch --ts",
"build": "libundler build --ts --c",
"fix": "run-s fix:*",
"fix:prettier": "prettier \"src/**/*.{ts,tsx}\" --write",
"fix:tslint": "tslint --fix --project .",
"tslint": "tslint --project ."
},
"dependencies": {
"autoprefixer": "^9.1.5",
"css-loader": "^1.0.0",
"deepmerge": "^2.1.1",
"docz-core": "^0.11.0",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"loader-utils": "^1.1.0",
"mini-css-extract-plugin": "^0.4.2",
"node-sass": "^4.9.3",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss": "^7.0.2",
"postcss-flexbugs-fixes": "^4.1.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"webpack": "^4.17.2",
"webpack-chain": "^4.10.0"
}
}

30
packages/docz-plugin-css/src/get-local-ident.ts
View File

@@ -1,30 +0,0 @@
import loaderUtils from 'loader-utils'
export const getLocalIdent = (
context: any,
localIdentName: any,
localName: any,
options: any
) => {
// Use the filename or folder name, based on some uses the index.js / index.module.(css|scss|sass) project style
const fileNameOrFolder = context.resourcePath.match(
/index\.module\.(css|scss|sass)$/
)
? '[folder]'
: '[name]'
// Create a hash based on a the file location and class name. Will be unique across a project, and close to globally unique.
const hash = loaderUtils.getHashDigest(
context.resourcePath + localName,
'md5',
'base64',
5
)
// Use loaderUtils to find the file or folder name
const className = loaderUtils.interpolateName(
context,
fileNameOrFolder + '_' + localName + '__' + hash,
options
)
// remove the .module that appears in every classname when based on the file.
return className.replace('.module_', '_')
}

159
packages/docz-plugin-css/src/index.ts
View File

@@ -1,159 +0,0 @@
import { createPlugin } from 'docz-core'
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin'
import merge from 'deepmerge'
import { getLocalIdent } from './get-local-ident'
/**
* Tests
*/
type PreProcessor = 'postcss' | 'sass' | 'less' | 'stylus'
const tests: Record<PreProcessor, RegExp> = {
postcss: /(\.module)?\.css$/,
sass: /(\.module)?\.s(a|c)ss$/,
less: /(\.module)?\.less$/,
stylus: /(\.module)?\.styl(us)?$/,
}
/**
* Loaders
*/
export interface Opts {
[key: string]: any
}
const getStyleLoaders = (loader: any, opts: Opts) => (
cssopts: any,
dev: boolean
) => {
return [
{
loader: dev
? require.resolve('style-loader')
: MiniCssExtractPlugin.loader,
},
{
loader: require.resolve('css-loader'),
options: cssopts,
},
{
loader,
options: opts,
},
]
}
const loaders = {
postcss: (opts: Opts = { plugins: [] }) =>
getStyleLoaders(
require.resolve('postcss-loader'),
merge(opts, {
plugins: () => {
const defaultPlugins = [
require('postcss-flexbugs-fixes'),
require('autoprefixer')({
flexbox: 'no-2009',
}),
]
return opts && opts.plugins && Array.isArray(opts.plugins)
? opts.plugins.concat(defaultPlugins)
: defaultPlugins
},
})
),
sass: (opts: Opts = {}) =>
getStyleLoaders(
require.resolve('sass-loader'),
merge(opts, { indentedSyntax: false })
),
less: (opts: Opts = {}) =>
getStyleLoaders(require.resolve('less-loader'), opts),
stylus: (opts: Opts = {}) =>
getStyleLoaders(
require.resolve('stylus-loader'),
merge(opts, { preferPathResolver: 'webpack' })
),
}
/**
* Rules
*/
const applyRule = (
opts: CSSPluginOptions,
cssmodules: boolean | undefined,
dev: boolean
) => {
const { preprocessor, cssOpts, loaderOpts } = opts
const loaderfn = loaders[preprocessor as PreProcessor]
const loader = loaderfn(loaderOpts)
const cssoptions = merge(cssOpts, {
importLoaders: 1,
modules: cssmodules,
sourceMap: !dev,
...(cssmodules && { getLocalIdent }),
})
return {
test: tests[preprocessor as PreProcessor],
use: loader(cssoptions, dev),
}
}
export interface CSSPluginOptions {
preprocessor?: 'postcss' | 'sass' | 'less' | 'stylus'
cssmodules?: boolean
loaderOpts?: Opts
cssOpts?: Opts
}
const defaultOpts: Record<string, any> = {
preprocessor: 'postcss',
cssmodules: false,
loadersOpts: {},
cssOpts: {},
}
export const css = (opts: CSSPluginOptions = defaultOpts) =>
createPlugin({
modifyBundlerConfig: (config, dev) => {
config.module.rules.push(applyRule(opts, opts.cssmodules, dev))
if (!dev) {
const test = tests[opts.preprocessor || ('postcss' as PreProcessor)]
const minimizer = config.optimization.minimizer || []
const splitChunks = { ...config.optimization.splitChunks }
config.optimization.minimizer = minimizer.concat([
new OptimizeCSSAssetsPlugin({}),
])
config.optimization.splitChunks = merge(splitChunks, {
cacheGroups: {
styles: {
test: (m: any) => test.test(m.type),
name: 'styles',
chunks: 'all',
enforce: true,
},
},
})
config.plugins.push(
new MiniCssExtractPlugin({
filename: 'static/css/[name].[hash].css',
})
)
}
return config
},
})

3
packages/docz-plugin-css/src/typed.d.ts vendored
View File

@@ -1,3 +0,0 @@
declare module 'optimize-css-assets-webpack-plugin'
declare module 'mini-css-extract-plugin'
declare module 'loader-utils'

12
packages/docz-plugin-css/tsconfig.json
View File

@@ -1,12 +0,0 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "dist",
"rootDir": "src",
"declaration": true,
"types": ["node"],
"typeRoots": ["node_modules/@types"]
},
"include": ["src/**/*", "src/types.d.ts"],
"exclude": ["node_modules/**"]
}

3
packages/docz-plugin-css/tslint.json
View File

@@ -1,3 +0,0 @@
{
"extends": "../../tslint.json"
}