doczjs / docz-plugin-css Goto Github PK

View Code? Open in Web Editor NEW

38.0 3.0 32.0 1.96 MB

This package makes it possible to use preprocessors and css modules on docz

Home Page: https://docz.site

JavaScript 3.26% TypeScript 96.74%

docz react css sass less styles postscss

docz-plugin-css's Introduction

docz-plugin-css

Docz plugin to parse css files inside your documents

Examples

Installation

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 */
      }
    })
  ]
}

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:

// 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:

// 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!

If in your project some places use both CSS modules and some place doesn't, you can leave out the cssmodules option so that webpack can determined by itself the correct way to load the CSS.

Multiple pre-processor

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' }),
  ]
}

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 configuration

`ruleOpts`

Type: { [key:string]: any }
Default: {}

Custom options passed on webpack rule configuration

docz-plugin-css's People

Contributors

Stargazers

Watchers

docz-plugin-css's Issues

Handling Sass Imports

My app has a Sass structure where individual component .scss files, collocated with the components they style, use Sass imports (@import ...) to pull in global variables from a centralized styles folder.

When I try using this package:

  plugins: [
    css({
      preprocessor: 'sass'
    })
  ]

I get the following error on doc build:

./src/components/Dropdown/Dropdown.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
> @import 'styles/_sass-includes.scss';

I assume once I clear up this error, I may also have to set up the root folder for Webpack to search for these styles (eg something like the below):

  plugins: [
    css({
      preprocessor: 'sass',
      loaderOpts: {
        includePaths: [path.resolve(__dirname, 'src')]
      },
    })
  ]

But before I hit that error, I'm having trouble figuring out how to handle this one, and get the internal Sass dependencies to import.

Is this something this plugin supports?

SplitChunks plugin test condition always returning false

I can't see the point of this, as m.type will always be like "javascript/auto" or "javascript/dynamic", and never something like "style.module.scss". For me, it's always returning false.

https://github.com/pedronauck/docz-plugin-css/blob/169c0971e016a528bf92f8330075d0063dbc6025/src/index.ts#L142

Cannot compile CSS file

I downloaded the /examples/css-sass/ source code, then I upgraded the docz version to be 0.13.7.

I just renamed the Alert.module.scss to Alert.module.css and change its reference in Alert.jsx file. Unfortunately, i got the following error

the package.json

File Structure

Alert File

doczrc.js

is there any missing configuration or anything I forgot it?

less: nested-rules is't work

Make heavy dependencies as peer dependencies

Hi!

Thank you for the amazing docz work, I find it great to use and build documentations.
I am currently using this plugin in many sites, but unfortunately in few projects node-sass is not an option to be installed due to the way it is compiled.

Would it be possible to put it, with less and postcss, as peer dependencies?
It seems to be an overload to install all these dependencies in order to use simple CSS.

Create-React-App v2 and this package are conflicting due to Webpack version

After installing this package and running dev server, I get this screen:
What is the most convenient way to go around this?

The react-scripts package provided by Create React App requires a dependency:

"webpack": "4.19.1"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:

~node_modules/webpack (version: 4.29.0)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.

Delete node_modules in your project folder.

Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.

Run npm install or yarn, depending on the package manager you use.

Is there a way for docz to auto recognize file as either css module or normal css without adding `.module` to the file?

In my project I use both CSS module and normal CSS. I'm trying to integrate docz with it, but there's some hurdle. All my CSS file extensions are .scss, and webpack will autodetect which one is used as CSS module or not.

My question is, without changing CSS files extension, is there a way that docz can auto recognize the whether it is CSS module or not? I have looked at the cssmodules option but seems like it is a binary choice.

Thanks for the amazing tools!

Is there any plan to update css-loader to v2 ?

Recently css-loader was updated to v2 with breaking changes.

Important change is resolving logic for url(......).

resolving logic for uls() and import at-rules works the same everywhere, it does not matter whether css modules are enabled (with global and local module) or not. Examples - url('image.png') as require('./image.png'), url('./image.png') as require('./image.png'), url('~module/image.png') as require('module/image.png')

They says if we used assets from webpack aliased path, we should use ~ prefix.
But css-loader v1 can't resolve its path.

Do you have any plan for css-loader v2 ?

~~Note: Because there is workaround, this issue's priority may not be high.~~
Following settings don't work.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'css-loader',
        options: {
          url: () => true, // <- keep resolving logic same to css-loader v1
        },
      },
    ],
  },
};

This plugin is only for docz v1 and breaks docz v2

If this is true, the docs on this repo should be updated to say this only works with docz v1.

For anyone wondering, here is the way to do css preprocessors in docz v2
https://www.docz.site/docs/usage-with-css-preprocessors

Alias on docz

I'm trying to use @imports on my SASS files.

I had this working with my webpack settings but it required ~ to work. Example @import ~alias/somefolder;

Since the ~ was webpack specific, I wanted to get rid of it by adding some options to my sass loader

{
        test: /\.(sa|sc|c)ss$/,
        use: [
            'style-loader',
            'css-loader',
            {
                loader: 'sass-loader',
                options: {
                    includePaths: [path.resolve(PATH_SOURCE)], // this defaults to a folder on my desktop UPGRADE/src
                },
            },
        ],
    }

and on my sass now I can have @import app/styles which resolves to UPGRADE/src/app/styles.

So far so good, I can run this, I can compile it but I can't generate docs.

I get this error:

 error  in ./src/app/components/_example/index.scss

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import 'app/styles/variables';
^
      File to import not found or unreadable: app/styles/variables.
      in /Users/andrevenancio/Desktop/UPGRADE/src/app/components/_example/index.scss (line 1, column 1)

 @ ./src/app/components/_example/index.scss 2:14-157 21:1-42:3 22:19-162
 @ ./src/app/components/_example/index.js
 @ ./src/app/components/_example/index.mdx
 @ ./.docz/app/imports.js
 @ ./.docz/app/root.jsx
 @ ./.docz/app/index.jsx
 @ multi ./node_modules/@babel/polyfill/lib/index.js ./.docz/app/index.jsx

So I thought, ok docz simply needs to have the same options being passed on.

I've tried

// 1
export default {
    dest: '/documentation',
    plugins: [
        css({
            preprocessor: 'sass',
            loaderOpts: {
                includePaths: [path.resolve(PATH_SOURCE)],
            },
        }),
    ],
};

// 2
export default {
    dest: '/documentation',
    plugins: [
        css({
            preprocessor: 'sass',
            loaderOpts: {
                includePaths: [path.resolve(PATH_SOURCE, 'app')],
            },
        }),
    ],
};

// 3
export default {
    dest: '/documentation',
    plugins: [
        css({
            preprocessor: 'sass',
            cssOpts: {
                includePaths: [path.resolve(PATH_SOURCE)],
            },
        }),
    ],
};

// 4
export default {
    dest: '/documentation',
    plugins: [
        css({
            preprocessor: 'sass',
            cssOpts: {
                includePaths: [path.resolve(PATH_SOURCE, 'app')],
            },
        }),
    ],
};

And I keep getting the same error....

Any ideas?

Using Global CSS

Is there a way to use a global css scope based, I am having a global css for my project with scss which my project auto detect the compiled css and append it to the head, but I can't seems to get a way to work with this on my project. The problem is that I am not using css modules so its not going to work, is there an option to use this without css module and having a global scope styles, I dig into the styling and I see that the compiled styles if I import import '../styles/scss/styles.scss' in my document.mdx file it usually append on the class names with .docz_...

Unexpected character '@'

Cannot use with docz-core 0.12.x

Bug Report

Describe the bug

When upgrading to [email protected] the docz-plugin-css no longer works with yarn docz dev

To Reproduce

Install [email protected] and [email protected]
Run yarn docz dev
Setup a basic example using docz-plugin-css
See the errors

ERROR  Failed to compile with 1 errors                                                                                    

This dependency was not found:

* webpack-hot-client/client?612c344c-f04d-4637-984c-bdd09dbde9cf in multi webpack-hot-client/client?612c344c-f04d-4637-984c-bdd09dbde9cf ./node_modules/@babel/polyfill/lib/index.js ./.docz/app/index.jsx

To install it, you can run: npm install --save webpack-hot-client/client?612c344c-f04d-4637-984c-bdd09dbde9cf

doczrc.js

This is what the doczrc.js config looks like (to see the css config)

import { css } from "docz-plugin-css";

export default {
  title: ".....",
  description: "...",
  typescript: true,
  themeConfig: {
    colors: {
      primary: "#ccc"
    }
  },
  plugins: [
    css({
      preprocessor: "sass",
      cssmodules: true,
      cssOpts: {
        camelCase: "only"
      }
    })
  ]
};

Expected behavior

docz-plugin-css should work with [email protected].

Environment

Additional context/Screenshots

I suspect the issue is having two different versions of docz-core installed.

yarn why docz-core
yarn why v1.9.4
[1/4] 🤔  Why do we have the module "docz-core"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "docz-plugin-css" depends on it
   - Hoisted from "docz-plugin-css#docz-core"
info Disk size without dependencies: "6.87GB"
info Disk size with unique dependencies: "6.87GB"
info Disk size with transitive dependencies: "6.87GB"
info Number of shared dependencies: 514
=> Found "docz#[email protected]"
info This module exists because "docz" depends on it.
info Disk size without dependencies: "248MB"
info Disk size with unique dependencies: "248MB"
info Disk size with transitive dependencies: "248MB"
info Number of shared dependencies: 532
✨  Done in 1.88s.

Short-term fix

I was able to temporarily work around this issue by forcing docz-plugin-css to resolve to [email protected] and it seems compatible by adding this in the package.json:

  ...
 "resolutions": {
    "docz-core": "0.12.16"
  },
  ...

Cannot output any css when build docz

Add a class hello-can-you-see-me for a.

js:

css:

dev mode preview (docz dev):

as you see, it works perfect!

build mode preview (docz build):

there is no css file in the dist folder, and it can not work.

check the output files

I cannot figure out what happend for this.
I just found diff from here

Bug with React Scripts

If I add this with
yarn add docz-plugin-css --dev

I get the error:

The react-scripts package provided by Create React App requires a dependency:

"babel-loader": "8.0.5"

and my App wont start anymore…

so if I take a look with npm ls babel-loader

├─┬ [email protected]
│ └─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ └─┬ [email protected]
│ └── [email protected] deduped
└─┬ [email protected]
└── [email protected]

I see the docz AND the docz-plugin-css uses [email protected] but the error appers only after adding the css plugin

CSS Modules is forced even without `.module` extension

Hi !

When using the cssmodules flag for SASS files, I noticed that even if the file doesn't have the .module extension it still bundles it as it was a CSS module. This means we can't use in the same project both CSS Modules and normal CSS.

Maybe #6 fixes it ?

TypeError: setArgs is not a function

I'm getting this error when trying to run yarn docz dev:

UNHANDLED REJECTION setArgs is not a function

  TypeError: setArgs is not a function

  - parseConfig.js:5 getDoczConfig
    [calendar]/[gatsby-theme-docz]/lib/utils/parseConfig.js:5:20

  - gatsby-config.js:36 module.exports.opts
    [calendar]/[gatsby-theme-docz]/gatsby-config.js:36:18

  - index.js:73 resolveTheme
    [calendar]/[gatsby]/dist/bootstrap/load-themes/index.js:73:19

  - From previous event:

  - From previous event:

  - index.js:137 module.exports
    [calendar]/[gatsby]/dist/bootstrap/load-themes/index.js:137:33

  - index.js:158 module.exports
    [calendar]/[gatsby]/dist/bootstrap/index.js:158:27

  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7


not finished open and validate gatsby-configs - 1.260s

doczrc.js

import { css } from 'docz-plugin-css'

export default {
  files: 'src/docs/**/*.{md,markdown,mdx}',
  typescript: true,
  plugins: [
    css({
      preprocessor: 'postcss',
      cssmodules: true,
    }),
  ],
}

I'm using Lerna in this monorepo project.

package.json

{
  "name": "root",
  "private": true,
  "scripts": {
    "start": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "deploy-storybook": "storybook-to-ghpages && git clean -f -d",
    "test": "jest",
    "prepublishOnly": "yarn build",
    "prerelease": "yarn build",
    "release": "lerna publish",
    "build": "yarn build:es && yarn build:declaration",
    "build:es": "lerna exec -- babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
    "build:declaration": "lerna exec -- tsc --project ./tsconfig.build.json"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,tsx}": [
      "eslint --fix",
      "prettier-standard",
      "jest --bail --findRelatedTests"
    ]
  },
  "workspaces": [
    "packages/*"
  ],
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-transform-modules-commonjs": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.4",
    "@babel/preset-typescript": "^7.9.0",
    "@storybook/addon-actions": "^5.3.17",
    "@storybook/addon-info": "^5.3.17",
    "@storybook/addon-links": "^5.3.17",
    "@storybook/addons": "^5.3.17",
    "@storybook/react": "^5.3.17",
    "@storybook/storybook-deployer": "^2.8.3",
    "@testing-library/jest-dom": "^5.3.0",
    "@testing-library/react": "^10.0.1",
    "@testing-library/react-hooks": "^3.2.1",
    "@types/jest": "^25.1.4",
    "@types/testing-library__jest-dom": "^5.0.2",
    "@typescript-eslint/eslint-plugin": "^2.25.0",
    "@typescript-eslint/parser": "^2.25.0",
    "babel-jest": "^25.2.4",
    "babel-loader": "^8.1.0",
    "babel-plugin-css-modules-transform": "^1.6.2",
    "husky": "^4.2.3",
    "jest": "^25.1.0",
    "lerna": "^3.20.2",
    "prettier-standard": "^16.2.1",
    "react-docgen-typescript-loader": "^3.7.1",
    "react-test-renderer": "16.9.0",
    "ts-jest": "^25.2.1",
    "ts-loader": "^6.2.1",
    "typescript": "^3.8.3"
  },
  "dependencies": {
    "css-loader": "^3.4.2",
    "eslint-plugin-react": "^7.19.0",
    "postcss-cssnext": "^3.1.0",
    "postcss-loader": "^3.0.0",
    "style-loader": "^1.1.3"
  }
}

package/react-nice-calendar/package.json

{
  "name": "react-nice-calendar",
  "version": "0.1.6",
  "main": "lib/index.js",
  "types": "typings/index.d.ts",
  "author": {
    "name": "Maycon Santos",
    "email": "[email protected]",
    "url": "https://github.com/Maycon-Santos"
  },
  "license": "MIT",
  "private": false,
  "dependencies": {
    "calendar-provider": "^0.1.0",
    "core-js": "^3.6.5",
    "transition-engine": "^0.2.2"
  },
  "keywords": [
    "calendar",
    "date",
    "date-picker",
    "react"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/Maycon-Santos/calendar.git"
  },
  "peerDependencies": {
    "react": ">=16.13.1",
    "react-dom": ">=16.3"
  },
  "devDependencies": {
    "docz": "^2.3.1",
    "docz-plugin-css": "^0.11.0"
  }
}

Unparseable filetype scss

Hey,

thanks for this awesome package.
I'm having an issue with my next.js, React + typescript + scss-modules application.

it works perfectly on simple components, but I always get an error in components with scss files.

This is the error on dev:
Could not create Open in CodeSandbox Error: unparseable filetype: .scss for file ...

This is what my component looks like:

    import * as React from 'react';
import { ReactChild } from 'react';
import * as styles from './Col.scss';

interface IColProps {
  children: ReactChild,
  size: number,
  width: string|number,
}

class Col extends React.Component<IColProps, {}> {
  public render () {
    const { children, size, width } = this.props;

    return (
      <div className={styles.col} style={{ flexGrow: size, minWidth: width }}>
        {children}
      </div>
    );
  }
}

export default Col;

I've installed this plugin and also added it to my doczrc.js:
import { css } from 'docz-plugin-css'

module.exports = {
	title: 'Test doc',
	typescript: true,
	plugins: [
		css({
			preprocessor: 'sass',
			cssmodules: true,
		})
	]
};

ruleOpts not published in package?

it's documented in README.md and code，but not in npm package.
README.md

npm

installed this plugin; errors immediately when running the site

ERROR

UNHANDLED REJECTION Unable to find plugin "gatsby-plugin-mdx". Perhaps you need to install its package?



  Error: Unable to find plugin "gatsby-plugin-mdx". Perhaps you need to install its package?

  - load.js:109 resolvePlugin
    [.docz]/[gatsby]/dist/bootstrap/load-plugins/load.js:109:11

  - load.js:153 processPlugin
    [.docz]/[gatsby]/dist/bootstrap/load-plugins/load.js:153:20

  - load.js:172
    [.docz]/[gatsby]/dist/bootstrap/load-plugins/load.js:172:20

  - Array.forEach

  - load.js:171 module.exports
    [.docz]/[gatsby]/dist/bootstrap/load-plugins/load.js:171:20

  - index.js:58 module.exports
    [.docz]/[gatsby]/dist/bootstrap/load-plugins/index.js:58:19

  - index.js:136 module.exports
    [.docz]/[gatsby]/dist/bootstrap/index.js:136:34

  - develop.js:380 async module.exports
    [.docz]/[gatsby]/dist/commands/develop.js:380:7

Do i need to install this as well? your instructions and examples do not detail this process.

Cannot handle .pcss extension

This plugin cannot handle other files than .css extensions, I would like to use .pcss extensions in my project

You may need an appropriate loader to handle this file type.
> @import 'styles/variables';
| 
| .my_class {

I tried using

loaderOpts: { test: /\.pcss$/ }

But no success