Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add base-styles package #17883

Merged
merged 15 commits into from
Oct 23, 2019
Merged

Add base-styles package #17883

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
b2a556d
Add base-styles package
simison Oct 10, 2019
33f2a8b
Update manifest-devhub.json
simison Oct 10, 2019
1e0d7d9
Move Post CSS config's themes to the package
simison Oct 11, 2019
9cae689
Add snapshot tests
simison Oct 14, 2019
82eb4af
Add @wordpress/base-styles as devDependency
simison Oct 14, 2019
b489eda
Use admin color schemes from package
simison Oct 14, 2019
cb10861
Lint in test file
simison Oct 14, 2019
c2988f3
Resolve styles from package in the playground
simison Oct 15, 2019
d27eece
Revert minor package-lock changes to test if those are due difference…
simison Oct 16, 2019
b38746d
Update title in readme
simison Oct 16, 2019
24d0047
Add `alpha` to version
simison Oct 18, 2019
60b0c1b
Title case package name in docs
simison Oct 18, 2019
071883c
scss → SCSS
simison Oct 18, 2019
910c3b1
Update README.md
simison Oct 18, 2019
68dd606
Remove tests
simison Oct 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion bin/packages/build-worker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ const BUILD_TASK_BY_EXTENSION = {

const builtSass = await renderSass( {
file,
includePaths: [ path.resolve( __dirname, '../../assets/stylesheets' ) ],
includePaths: [ path.join( PACKAGES_DIR, 'base-styles' ) ],
data: (
[
'colors',
Expand Down
63 changes: 3 additions & 60 deletions bin/packages/post-css-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,7 @@
const { adminColorSchemes } = require( '@wordpress/base-styles' );

module.exports = [
require( '@wordpress/postcss-themes' )( {
defaults: {
primary: '#0085ba',
secondary: '#11a0d2',
toggle: '#11a0d2',
button: '#007cba',
outlines: '#007cba',
},
themes: {
'admin-color-light': {
primary: '#0085ba',
secondary: '#c75726',
toggle: '#11a0d2',
button: '#0085ba',
outlines: '#007cba',
},
'admin-color-blue': {
primary: '#82b4cb',
secondary: '#d9ab59',
toggle: '#82b4cb',
button: '#d9ab59',
outlines: '#417e9B',
},
'admin-color-coffee': {
primary: '#c2a68c',
secondary: '#9fa47b',
toggle: '#c2a68c',
button: '#c2a68c',
outlines: '#59524c',
},
'admin-color-ectoplasm': {
primary: '#a7b656',
secondary: '#c77430',
toggle: '#a7b656',
button: '#a7b656',
outlines: '#523f6d',
},
'admin-color-midnight': {
primary: '#e14d43',
secondary: '#77a6b9',
toggle: '#77a6b9',
button: '#e14d43',
outlines: '#497b8d',
},
'admin-color-ocean': {
primary: '#a3b9a2',
secondary: '#a89d8a',
toggle: '#a3b9a2',
button: '#a3b9a2',
outlines: '#5e7d5e',
},
'admin-color-sunrise': {
primary: '#d1864a',
secondary: '#c8b03c',
toggle: '#c8b03c',
button: '#d1864a',
outlines: '#837425',
},
},
} ),
require( '@wordpress/postcss-themes' )( adminColorSchemes ),
require( 'autoprefixer' )( { grid: true } ),
require( 'postcss-color-function' ),
];
2 changes: 1 addition & 1 deletion docs/contributors/coding-guidelines.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export default function Notice( { children, onRemove, isDismissible } ) {
}
```

A component's class name should **never** be used outside its own folder (with rare exceptions such as [`_z-index.scss`](https://github.com/WordPress/gutenberg/blob/master/assets/stylesheets/_z-index.scss)). If you need to inherit styles of another component in your own components, you should render an instance of that other component. At worst, you should duplicate the styles within your own component's stylesheet. This is intended to improve maintainability by treating individual components as the isolated abstract interface.
A component's class name should **never** be used outside its own folder (with rare exceptions such as [`_z-index.scss`](https://github.com/WordPress/gutenberg/blob/master/packages/base-styles/_z-index.scss)). If you need to inherit styles of another component in your own components, you should render an instance of that other component. At worst, you should duplicate the styles within your own component's stylesheet. This is intended to improve maintainability by treating individual components as the isolated abstract interface.

#### SCSS File Naming Conventions for Blocks

Expand Down
6 changes: 6 additions & 0 deletions docs/manifest-devhub.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1079,6 +1079,12 @@
"markdown_source": "../packages/babel-preset-default/README.md",
"parent": "packages"
},
{
"title": "@wordpress/base-styles",
"slug": "packages-base-styles",
"markdown_source": "../packages/base-styles/README.md",
"parent": "packages"
},
{
"title": "@wordpress/blob",
"slug": "packages-blob",
Expand Down
4 changes: 4 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@
"@wordpress/babel-plugin-import-jsx-pragma": "file:packages/babel-plugin-import-jsx-pragma",
"@wordpress/babel-plugin-makepot": "file:packages/babel-plugin-makepot",
"@wordpress/babel-preset-default": "file:packages/babel-preset-default",
"@wordpress/base-styles": "file:packages/base-styles",
"@wordpress/browserslist-config": "file:packages/browserslist-config",
"@wordpress/custom-templated-path-webpack-plugin": "file:packages/custom-templated-path-webpack-plugin",
"@wordpress/dependency-extraction-webpack-plugin": "file:packages/dependency-extraction-webpack-plugin",
Expand Down
1 change: 1 addition & 0 deletions packages/base-styles/.npmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
package-lock=false
51 changes: 51 additions & 0 deletions packages/base-styles/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
# Base Styles

Base SCSS utilities and variables for WordPress.

## Installation

Install the module

```bash
npm install @wordpress/base-styles --save-dev
```

## Use

### SCSS utilities and variables

In your application's SCSS file, include styles like so:

```scss
@import "node_modules/@wordpress/base-styles/colors";
@import "node_modules/@wordpress/base-styles/variables";
@import "node_modules/@wordpress/base-styles/mixins";
@import "node_modules/@wordpress/base-styles/breakpoints";
@import "node_modules/@wordpress/base-styles/animations";
@import "node_modules/@wordpress/base-styles/z-index";
```

If you use [Webpack](https://webpack.js.org/) for your SCSS pipeline, you can use `~` to resolve to `node_modules`:

```scss
@import "~@wordpress/base-styles/colors";
```

To make that work with [`sass`](https://www.npmjs.com/package/sass) or [`node-sass`](https://www.npmjs.com/package/node-sass) NPM modules without Webpack, you'd have to use [includePaths option](https://sass-lang.com/documentation/js-api#includepaths):

```json
{
"includePaths": ["node_modules"]
}
```

### PostCSS color schemes

To use color schemes with [`@wordpress/postcss-themes`](https://www.npmjs.com/package/@wordpress/postcss-themes), import them like so:

```js
const { adminColorSchemes } = require( '@wordpress/base-styles' );
const wpPostcss = require( '@wordpress/postcss-themes' )( adminColorSchemes )
```

<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
0 assets/stylesheets/_animations.scss → packages/base-styles/_animations.scss
View file
Open in desktop
File renamed without changes.
0 assets/stylesheets/_breakpoints.scss → packages/base-styles/_breakpoints.scss
View file
Open in desktop
File renamed without changes.
0 assets/stylesheets/_colors.scss → packages/base-styles/_colors.scss
View file
Open in desktop
File renamed without changes.
0 assets/stylesheets/_mixins.scss → packages/base-styles/_mixins.scss
View file
Open in desktop
File renamed without changes.
0 assets/stylesheets/_variables.scss → packages/base-styles/_variables.scss
View file
Open in desktop
File renamed without changes.
0 assets/stylesheets/_z-index.scss → packages/base-styles/_z-index.scss
View file
Open in desktop
File renamed without changes.
60 changes: 60 additions & 0 deletions packages/base-styles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
exports.adminColorSchemes = {
simison marked this conversation as resolved.
Show resolved Hide resolved
defaults: {
primary: '#0085ba',
secondary: '#11a0d2',
toggle: '#11a0d2',
button: '#007cba',
outlines: '#007cba',
},
themes: {
'admin-color-light': {
primary: '#0085ba',
secondary: '#c75726',
toggle: '#11a0d2',
button: '#0085ba',
outlines: '#007cba',
},
'admin-color-blue': {
primary: '#82b4cb',
secondary: '#d9ab59',
toggle: '#82b4cb',
button: '#d9ab59',
outlines: '#417e9B',
},
'admin-color-coffee': {
primary: '#c2a68c',
secondary: '#9fa47b',
toggle: '#c2a68c',
button: '#c2a68c',
outlines: '#59524c',
},
'admin-color-ectoplasm': {
primary: '#a7b656',
secondary: '#c77430',
toggle: '#a7b656',
button: '#a7b656',
outlines: '#523f6d',
},
'admin-color-midnight': {
primary: '#e14d43',
secondary: '#77a6b9',
toggle: '#77a6b9',
button: '#e14d43',
outlines: '#497b8d',
},
'admin-color-ocean': {
primary: '#a3b9a2',
secondary: '#a89d8a',
toggle: '#a3b9a2',
button: '#a3b9a2',
outlines: '#5e7d5e',
},
'admin-color-sunrise': {
primary: '#d1864a',
secondary: '#c8b03c',
toggle: '#c8b03c',
button: '#d1864a',
outlines: '#837425',
},
},
};
25 changes: 25 additions & 0 deletions packages/base-styles/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"name": "@wordpress/base-styles",
"version": "1.0.0-alpha.1",
"description": "Base SCSS utilities and variables for WordPress.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
"keywords": [
"wordpress",
"sass",
"scss",
"css"
],
"homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/base-styles/README.md",
"repository": {
"type": "git",
"url": "https://github.com/WordPress/gutenberg.git",
"directory": "packages/base-styles"
},
"bugs": {
"url": "https://github.com/WordPress/gutenberg/issues"
},
"publishConfig": {
"access": "public"
}
}
5 changes: 5 additions & 0 deletions playground/.sassrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"includePaths": [
"node_modules"
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Needed for ~@wordpress/base-styles/colors -style imports to work in the playground.

See parcel-bundler/parcel#39

Copy link
Contributor

@jameslnewell jameslnewell Oct 15, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does a similar setup work for people consuming the package via webpack/sass-loader?

How do people consume the package using something like create-react-app? @import "../node_modules/@wordpress/base-styles/colors?

Copy link
Member Author

@simison simison Oct 16, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

~ is a Webpack thing and Playground in Gutenberg uses Parcel. If ~ in consumer's build pipeline doesn't resolve to node_modules, they'd have to import using node_modules/@wordpress/base-styles/colors directly indeed. I'll mention that in docs.

Thanks for asking!

Copy link
Contributor

@jameslnewell jameslnewell Oct 17, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great!

The reason I ask is because from memory the default setup for ~ in webpack/sass-loader is that webpack resolves and compiles any imports which means any variables/mixins defined in the imported file aren't accessible in the consuming file.

e.g.
./node_modules/abc/stuff.scss

$foo: 'bar';

./test.scss

@import "~abc/stuff";
// $foo isn't defined because webpack resolved the module and compiled it to CSS
@import "./node_modules/abc/stuff";
// $foo is defined because SASS resolved the module and imported it

Copy link
Member Author

@simison simison Oct 21, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The reason I ask is because from memory the default setup for ~ in webpack/sass-loader is that webpack resolves and compiles any imports which means any variables/mixins defined in the imported file aren't accessible in the consuming file.

No, they do work. :-) I guess it could depend on your Webpack config tho?

I also updated README.md about ~, wanna check if it's clear now @jameslnewell?

]
}
12 changes: 6 additions & 6 deletions playground/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
@import "../../assets/stylesheets/colors";
@import "../../assets/stylesheets/variables";
@import "../../assets/stylesheets/mixins";
@import "../../assets/stylesheets/breakpoints";
@import "../../assets/stylesheets/animations";
@import "../../assets/stylesheets/z-index";
@import "~@wordpress/base-styles/colors";
simison marked this conversation as resolved.
Show resolved Hide resolved
@import "~@wordpress/base-styles/variables";
@import "~@wordpress/base-styles/mixins";
@import "~@wordpress/base-styles/breakpoints";
@import "~@wordpress/base-styles/animations";
@import "~@wordpress/base-styles/z-index";

@import "./reset";
@import "./editor-styles";
Expand Down