-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[styled-engine] Add support for goober
- Loading branch information
1 parent
f6e6151
commit c6f812f
Showing
18 changed files
with
230 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
# @material-ui/styled-engine-goober | ||
|
||
This package is a wrapper around the `goober` package. | ||
It is created to be used as alias for the `@material-ui/styled-engine` package, for the developers who would like to use `goober` as a styled engine instead of `@emotion/styled`. | ||
|
||
## Installation | ||
|
||
The installation of the dependency in your package is slightly different from the usual. | ||
You need to alias the default `emotion` implementation to the `goober` one. | ||
Depending on the bundler you are using, you made add it like this: | ||
|
||
### webpack | ||
|
||
```js | ||
module.exports = { | ||
//... | ||
resolve: { | ||
alias: { | ||
'@material-ui/styled-engine': '@material-ui/styled-engine-goober', | ||
}, | ||
}, | ||
}; | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
{ | ||
"name": "@material-ui/styled-engine-goober", | ||
"version": "5.0.0-beta.1", | ||
"private": false, | ||
"author": "Material-UI Team", | ||
"description": "styled() API wrapper package for goober.", | ||
"main": "./src/index.js", | ||
"keywords": [ | ||
"react", | ||
"react-component", | ||
"material-ui", | ||
"goober" | ||
], | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/mui-org/material-ui.git", | ||
"directory": "packages/material-ui-styled-engine-goober" | ||
}, | ||
"license": "MIT", | ||
"bugs": { | ||
"url": "https://github.com/mui-org/material-ui/issues" | ||
}, | ||
"homepage": "https://next.material-ui.com/guides/styled-engine/", | ||
"funding": { | ||
"type": "opencollective", | ||
"url": "https://opencollective.com/material-ui" | ||
}, | ||
"scripts": { | ||
"build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:copy-files", | ||
"build:legacy": "node ../../scripts/build legacy", | ||
"build:modern": "node ../../scripts/build modern", | ||
"build:node": "node ../../scripts/build node", | ||
"build:stable": "node ../../scripts/build stable", | ||
"build:copy-files": "node ../../scripts/copy-files.js", | ||
"prebuild": "rimraf build", | ||
"release": "yarn build && npm publish build --tag next", | ||
"test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-styled-engine-goober/**/*.test.{js,ts,tsx}'", | ||
"typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json" | ||
}, | ||
"dependencies": { | ||
"@emotion/unitless": "^0.7.5", | ||
"prop-types": "^15.7.2" | ||
}, | ||
"peerDependencies": { | ||
"goober": "^5.0.0" | ||
}, | ||
"sideEffects": false, | ||
"publishConfig": { | ||
"access": "public" | ||
}, | ||
"engines": { | ||
"node": ">=12.0.0" | ||
} | ||
} |
29 changes: 29 additions & 0 deletions
29
packages/material-ui-styled-engine-goober/src/GlobalStyles/GlobalStyles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import PropTypes from 'prop-types'; | ||
import { deepmerge } from '@material-ui/utils'; | ||
import { createGlobalStyles } from 'goober/global'; | ||
|
||
function isEmpty(obj) { | ||
return obj === undefined || obj === null || Object.keys(obj).length === 0; | ||
} | ||
|
||
const GlobalStyles = createGlobalStyles((props) => { | ||
const { styles, defaultTheme = {} } = props; | ||
|
||
if (typeof styles === 'function') { | ||
const globalStyles = styles(isEmpty(props.theme) ? defaultTheme : props.theme); | ||
const mergeStyles = Array.isArray(globalStyles) | ||
? globalStyles.reduce((acc, item) => deepmerge(acc, item), {}) | ||
: globalStyles; | ||
|
||
return mergeStyles; | ||
} | ||
|
||
return styles; | ||
}); | ||
|
||
GlobalStyles.propTypes = { | ||
defaultTheme: PropTypes.object, | ||
styles: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]), | ||
}; | ||
|
||
export default GlobalStyles; |
2 changes: 2 additions & 0 deletions
2
packages/material-ui-styled-engine-goober/src/GlobalStyles/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
export { default } from './GlobalStyles'; | ||
export * from './GlobalStyles'; |
3 changes: 3 additions & 0 deletions
3
packages/material-ui-styled-engine-goober/src/StyledEngineProvider/StyledEngineProvider.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export default function StyledEngineProvider(props) { | ||
return props.children; | ||
} |
2 changes: 2 additions & 0 deletions
2
packages/material-ui-styled-engine-goober/src/StyledEngineProvider/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
export { default } from './StyledEngineProvider'; | ||
export * from './StyledEngineProvider'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
import * as React from 'react'; | ||
import { styled as styledGoober, setup } from 'goober'; | ||
import unitless from '@emotion/unitless'; | ||
import { prefix } from 'goober/prefixer'; | ||
|
||
export const ThemeContext = React.createContext({}); | ||
|
||
// TODO drop hard coded function | ||
function shouldForwardProp(prop: string) { | ||
return prop !== 'styleProps' && prop !== 'theme' && prop !== 'sx' && prop !== 'as'; | ||
} | ||
|
||
const useTheme = () => React.useContext(ThemeContext); | ||
|
||
function forwardProps(props: object) { | ||
Object.keys(props).forEach((prop) => { | ||
// Or any other conditions. | ||
// This could also check if this is a dev build and not remove the props | ||
if (!shouldForwardProp(prop)) { | ||
// @ts-ignore | ||
delete props[prop]; | ||
} | ||
}); | ||
} | ||
|
||
function isCustomProperty(property: string) { | ||
// 45 is - | ||
return property.charCodeAt(1) === 45; | ||
} | ||
|
||
function camelize(str: string) { | ||
return str.replace(/-./g, (chunk) => chunk[1].toUpperCase()); | ||
} | ||
|
||
function plugins(property: string, inValue: any) { | ||
// Add default px unit when needed | ||
let value = inValue; | ||
const key = camelize(property); | ||
if ( | ||
unitless[key] !== 1 && | ||
!isCustomProperty(property) && | ||
typeof value === 'number' && | ||
value !== 0 | ||
) { | ||
value = `${value}px`; | ||
} | ||
|
||
return prefix(property, value); | ||
} | ||
|
||
// @ts-expect-error Wrong type https://github.com/cristianbote/goober/pull/364 | ||
setup(React.createElement, plugins, useTheme, forwardProps); | ||
|
||
// TODO hanle options | ||
// eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
export default function styled(tag: any, options: any) { | ||
const stylesFactory = styledGoober(tag, React.forwardRef); | ||
|
||
return (...styles: any[]) => { | ||
if (process.env.NODE_ENV !== 'production') { | ||
const component = typeof tag === 'string' ? `"${tag}"` : 'component'; | ||
if (styles.length === 0) { | ||
console.error( | ||
[ | ||
`Material-UI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`, | ||
'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.', | ||
].join('\n'), | ||
); | ||
} else if (styles.some((style) => style === undefined)) { | ||
console.error( | ||
`Material-UI: the styled(${component})(...args) API requires all its args to be defined.`, | ||
); | ||
} | ||
} | ||
|
||
// @ts-ignore | ||
return stylesFactory(styles); | ||
}; | ||
} | ||
|
||
export { keyframes, css } from 'goober'; | ||
export { default as StyledEngineProvider } from './StyledEngineProvider'; | ||
export { default as GlobalStyles } from './GlobalStyles'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"extends": "../../tsconfig", | ||
"include": ["src/**/*", "test/**/*"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters