Skip to content
Permalink
Browse files

feat(styles): extract static style (#477)

* feat(theme): generate theme with custom properties

* WIP: docs for static themeing

* feat(scripts): CLI for static style extraction

* refactor(components): make components work with static style extraction

* test(scripts): add unit tests

* refactor(scripts): simplify render function

* feat(scripts): remove old static style extraction

* test(scripts): add unit tests

* feat(scripts): handle wrapped styled components

* feat(scripts): extract styles from more components

* feat(scripts): add a simple yarn script

* refactor(components): make more components work with static style extraction

* feat(scripts): extract styles from more components

* docs(scripts): finish documentation

* test(scripts): add tests for component types
  • Loading branch information
connor-baer committed Oct 15, 2019
1 parent 9f1ac55 commit f3d0688106de3b5348bd23b686760f84ff95a462
Showing with 1,660 additions and 453 deletions.
  1. +30 −1 .babelrc
  2. +2 −1 .cz-config.js
  3. +0 −12 build/global-styles
  4. 0 build/stylesheet/MockSvg.js
  5. +0 −4 build/stylesheet/SvgMock.js
  6. +0 −29 build/stylesheet/extract-static.js
  7. +0 −2 build/stylesheet/index.js
  8. +0 −6 build/stylesheet/lib/custom-styled.js
  9. +0 −97 build/stylesheet/lib/extract-styles.js
  10. +0 −14 build/stylesheet/lib/list-files.js
  11. +0 −55 build/stylesheet/lib/parse-component.js
  12. +0 −6 build/stylesheet/lib/read-file.js
  13. +44 −0 docs/content/styles/static-styles.mdx
  14. +16 −1 jest.config.js
  15. +10 −13 package.json
  16. +54 −0 scripts/static-styles/__fixtures__/functional-component.js
  17. +19 −0 scripts/static-styles/__fixtures__/index.js
  18. +43 −0 scripts/static-styles/__fixtures__/styled-component.js
  19. +5 −0 scripts/static-styles/__snapshots__/component-styles.spec.js.snap
  20. +83 −0 scripts/static-styles/cli.js
  21. +121 −0 scripts/static-styles/component-styles.js
  22. +67 −0 scripts/static-styles/component-styles.spec.js
  23. +193 −0 scripts/static-styles/config.js
  24. +81 −0 scripts/static-styles/custom-properties.js
  25. +135 −0 scripts/static-styles/custom-properties.spec.js
  26. +37 −0 scripts/static-styles/global-styles.js
  27. +28 −0 scripts/static-styles/global-styles.spec.js
  28. +67 −0 scripts/static-styles/index.js
  29. +35 −0 scripts/static-styles/render.js
  30. +66 −0 scripts/static-styles/render.spec.js
  31. +1 −0 src/components/Badge/Badge.js
  32. +5 −6 src/components/Blockquote/Blockquote.js
  33. +6 −2 src/components/Button/__snapshots__/Button.spec.js.snap
  34. +4 −3 src/components/Button/components/PlainButton/PlainButton.js
  35. +22 −20 src/components/Button/components/RegularButton/RegularButton.js
  36. +66 −22 src/components/Button/components/RegularButton/__snapshots__/RegularButton.spec.js.snap
  37. +6 −0 src/components/Card/Card.js
  38. +6 −6 src/components/Hamburger/Hamburger.js
  39. +4 −6 src/components/Heading/Heading.js
  40. +5 −4 src/components/Input/Input.js
  41. +6 −6 src/components/Input/__snapshots__/Input.spec.js.snap
  42. +2 −1 src/components/Label/Label.js
  43. +3 −0 src/components/List/List.js
  44. +18 −6 src/components/LoadingButton/__snapshots__/LoadingButton.spec.js.snap
  45. +18 −6 src/components/LoadingButton/components/Button/__snapshots__/Button.spec.js.snap
  46. +6 −2 src/components/Pagination/PageButton/__snapshots__/PageButton.spec.js.snap
  47. +6 −2 src/components/Pagination/PaginationButton/__snapshots__/PaginationButton.spec.js.snap
  48. +36 −12 src/components/Pagination/PaginationContainer/__snapshots__/PaginationContainer.spec.js.snap
  49. +174 −58 src/components/Pagination/__snapshots__/Pagination.spec.js.snap
  50. +3 −2 src/components/ProgressBar/ProgressBar.js
  51. +7 −5 src/components/SubHeading/SubHeading.js
  52. +5 −2 src/components/Tag/Tag.js
  53. +4 −2 src/components/Text/Text.js
  54. +1 −1 src/components/TextArea/TextArea.js
  55. +6 −6 src/components/TextArea/__snapshots__/TextArea.spec.js.snap
  56. +5 −4 src/components/Toggle/components/Switch/Switch.js
  57. +5 −2 src/components/Tooltip/Tooltip.js
  58. +94 −26 yarn.lock
@@ -50,8 +50,37 @@
]
]
},
"static": {
"plugins": [
"@babel/plugin-proposal-class-properties",
"lodash",
"inline-react-svg",
"dev-expression",
"react-docgen"
],
"presets": [
[
"@babel/preset-env",
{
"loose": true
}
],
"@babel/preset-react",
[
"@emotion/babel-preset-css-prop",
{
"autoLabel": false,
"labelFormat": "[filename]--[local]"
}
]
]
},
"test": {
"plugins": ["@babel/plugin-proposal-class-properties", "lodash"],
"plugins": [
"@babel/plugin-proposal-class-properties",
"lodash",
"react-docgen"
],
"presets": [
[
"@babel/preset-env",
@@ -32,7 +32,8 @@ module.exports = {
{ name: 'utils' },
{ name: 'docs' },
{ name: 'theme' },
{ name: 'configs' }
{ name: 'configs' },
{ name: 'scripts' }
],

allowCustomScopes: true,

This file was deleted.

No changes.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

@@ -0,0 +1,44 @@
---
name: Static Styles
route: /styles/static-styles
menu: Styles
---

# Static Styles

Projects that can't or don't use React can still benefit from Circuit UI. They can use the styles by extracting the plain CSS from the components.

## Generating a stylesheet

Circuit UI offers a CLI to generate a stylesheet that is tailored to your project: `yarn static-styles`. Below is an overview of the available options:

```sh
$ yarn static-styles --help
Usage:
--theme The name of the theme to use.
[options: "circuit"] [default: "circuit"]
--components A comma separated list of the components to include.
Also supports "all" or "none".
[array] [default: "all"]
--global Whether to include global styles.
[boolean] [default: false]
--customProperties Whether to use CSS custom properties (variables).
[boolean] [default: false]
--pretty Whether the CSS should be formatted with prettier.
[boolean] [default: false]
--filePath Path to the file where the stylesheet should be saved,
relative to the current directory. [string]
--help Show help [boolean]
--version Show the version [boolean]
```

A hosted version of a stylesheet with all supported components is available at https://circuit.sumup.com/static/circuit-ui-v1.css, however, we recommend generating a custom stylesheet with only the styles you need.

## Theming

At built time, when the styles are extracted to static CSS, any dynamic values are replaced by static values. By default, the theme values are hard-coded and cannot be changed with JavaScript at runtime.

In order to change the theme values at runtime you can use [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). Pass the `--customProperties` flag to the CLI to generate the CSS with custom properties and add the root values to the global styles.

Be aware that custom properties are [only supported in Edge 16+](https://caniuse.com/#feat=css-variables). Depending on your target group, you should use a [polyfill](https://github.com/jhildenbiddle/css-vars-ponyfill).
@@ -1,8 +1,23 @@
/**
* Copyright 2019, SumUp Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

module.exports = {
testURL: 'http://localhost',
coverageDirectory: './__coverage__',
rootDir: '.',
roots: ['src'],
roots: ['src', 'scripts'],
moduleFileExtensions: ['js'],
collectCoverageFrom: [
'src/@(components|util|styles)/**/*.{js,jsx}',

0 comments on commit f3d0688

Please sign in to comment.
You can’t perform that action at this time.