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

Jump to bottom

Scripts: Add support for postcss.config.js #22735

Merged
merged 3 commits into from
Jun 1, 2020
Merged

Scripts: Add support for postcss.config.js #22735

merged 3 commits into from
Jun 1, 2020

Conversation

ocean90
Copy link
Member

@ocean90 ocean90 commented May 29, 2020 •
edited
Loading

Description

Fixes #22732.

This implements the Babel config behaviour for PostCSS and its postcss.config.js.

How has this been tested?

  • Copy the example config from Scripts: Add support for postcss.config.js #22732
  • npm i -D postcss-import postcss-mixins postcss-nested postcss-preset-env postcss-hexrgba css-mqpacker cssnano
  • Run the build command
  • Verify that the CSS files are built as expected

Screenshots

Types of changes

New feature

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@ocean90 ocean90 added [Type] Enhancement A suggestion for improvement. [Tool] WP Scripts /packages/scripts labels May 29, 2020
@github-actions
Copy link

github-actions bot commented May 29, 2020 •
edited
Loading

Size Change: -16.3 kB (1%)

Total Size: 1.11 MB

Filename Size Change
build/annotations/index.js 3.62 kB +1 B
build/block-directory/index.js 6.48 kB +2 B (0%)
build/block-directory/style-rtl.css 787 B -1 B
build/block-directory/style.css 787 B -1 B
build/block-editor/index.js 105 kB -39 B (0%)
build/block-editor/style-rtl.css 11.3 kB +307 B (2%)
build/block-editor/style.css 11.3 kB +309 B (2%)
build/block-library/editor-rtl.css 7.61 kB +391 B (5%) 🔍
build/block-library/editor.css 7.61 kB +392 B (5%) 🔍
build/block-serialization-default-parser/index.js 1.88 kB -1 B
build/blocks/index.js 48.1 kB +2 B (0%)
build/components/index.js 190 kB -4 B (0%)
build/components/style-rtl.css 19.5 kB +2.39 kB (12%) ⚠️
build/components/style.css 19.5 kB +2.4 kB (12%) ⚠️
build/compose/index.js 9.32 kB +1 B
build/core-data/index.js 11.4 kB +2 B (0%)
build/data-controls/index.js 1.29 kB -3 B (0%)
build/data/index.js 8.43 kB +5 B (0%)
build/edit-navigation/index.js 7.88 kB +1.25 kB (15%) ⚠️
build/edit-post/index.js 302 kB +73 B (0%)
build/edit-post/style-rtl.css 5.43 kB -6.79 kB (125%) 🏆
build/edit-post/style.css 5.43 kB -6.79 kB (125%) 🏆
build/edit-site/index.js 14.1 kB +75 B (0%)
build/edit-site/style-rtl.css 2.96 kB -2.57 kB (86%) 🏆
build/edit-site/style.css 2.96 kB -2.57 kB (86%) 🏆
build/edit-widgets/index.js 8.88 kB +829 B (9%) 🔍
build/edit-widgets/style-rtl.css 2.4 kB -2.19 kB (91%) 🏆
build/edit-widgets/style.css 2.4 kB -2.19 kB (90%) 🏆
build/editor/index.js 44.6 kB +11 B (0%)
build/editor/style-rtl.css 4.26 kB -793 B (18%) 👏
build/editor/style.css 4.27 kB -793 B (18%) 👏
build/element/index.js 4.64 kB -2 B (0%)
build/format-library/index.js 7.71 kB +3 B (0%)
build/hooks/index.js 2.13 kB +1 B
build/keyboard-shortcuts/index.js 2.51 kB +2 B (0%)
build/list-reusable-blocks/index.js 3.12 kB -3 B (0%)
build/notices/index.js 1.79 kB +1 B
build/nux/index.js 3.4 kB +1 B
build/plugins/index.js 2.56 kB -1 B
build/server-side-render/index.js 2.68 kB +1 B
build/viewport/index.js 1.84 kB -2 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/api-fetch/index.js 3.4 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 620 B 0 B
build/block-library/index.js 119 kB 0 B
build/block-library/style-rtl.css 7.68 kB 0 B
build/block-library/style.css 7.68 kB 0 B
build/block-library/theme-rtl.css 684 B 0 B
build/block-library/theme.css 686 B 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 771 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.11 kB 0 B
build/edit-navigation/style-rtl.css 857 B 0 B
build/edit-navigation/style.css 856 B 0 B
build/editor/editor-styles-rtl.css 425 B 0 B
build/editor/editor-styles.css 428 B 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/media-utils/index.js 5.29 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 14.8 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.02 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

ntwb
ntwb approved these changes May 30, 2020
View reviewed changes
Copy link
Member

@ntwb ntwb left a comment

Choose a reason for hiding this comment

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

Looks good to me 👍

gziolo
gziolo approved these changes May 31, 2020
View reviewed changes
Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

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

Nicely done, thank you for adding support for it do quickly 💯

@gziolo
Copy link
Member

gziolo commented May 31, 2020

Awesome, feel free to merge it 😃

@ocean90 ocean90 merged commit fc943af into master Jun 1, 2020
@ocean90 ocean90 deleted the feature/postcss-config branch June 1, 2020 10:10
@github-actions github-actions bot added this to the Gutenberg 8.3 milestone Jun 1, 2020
@khoipro
Copy link
Contributor

khoipro commented Jun 10, 2021

@ocean90 could you validate this case? In postcss.config.js taken from this demo, I enable custom-media-queries:

'postcss-preset-env': {
  stage: 0,
  preserve: false, // Omit pre-polyfilled CSS.
  features: {
    'custom-media-queries': true, // Enable custom media query
    'nesting-rules': true
  },
  autoprefixer: {
    grid: true,
  },
}

My file variables.css

:root {
  ...
}

@custom-media --sm (min-width: 960px);

Then I import to my source src/index.js

import './variables.css';
import './test.css';

My test.css file:

.test {
  margin-top: 1em;

  @media (--sm) {
    margin-top: 2em;
  }
}

But the compiled source seems not convert to @media (min-width: 960px) {} as expected. It still displays @media (--sm) {}.

@codetot codetot mentioned this pull request Jun 11, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@gziolo gziolo gziolo approved these changes

@ntwb ntwb ntwb approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra

@nerrad nerrad Awaiting requested review from nerrad

Assignees
No one assigned
Labels
[Tool] WP Scripts /packages/scripts [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
Gutenberg 8.3
Development

Successfully merging this pull request may close these issues.

Scripts: Add support for postcss.config.js
4 participants
@ocean90 @gziolo @khoipro @ntwb