doczjs / docz-plugin-css Goto Github PK
View Code? Open in Web Editor NEWThis package makes it possible to use preprocessors and css modules on docz
Home Page: https://docz.site
This package makes it possible to use preprocessors and css modules on docz
Home Page: https://docz.site
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 ?
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.
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
.
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_...
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
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
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
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.
{
"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"
}
}
{
"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"
}
}
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
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?
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.
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.
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,
})
]
};
Describe the bug
When upgrading to [email protected]
the docz-plugin-css
no longer works with yarn docz dev
To Reproduce
[email protected]
and [email protected]
yarn docz dev
docz-plugin-css
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"
},
...
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?
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!
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
},
},
],
},
};
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.