Skip to content

Commit

Permalink
Replace stylis with postcss (#175)
Browse files Browse the repository at this point in the history 
* feat: replaces stylis with postcss

* chore: remove unused dep

* feat: bubble up top level pseudos inside supports and media at rules

* fix: handle edge cases for parenting pseudos
  • Loading branch information
@Madou
Madou authored Apr 28, 2020
1 parent 28ef50d commit a25d214
Show file tree
Hide file tree
Showing 20 changed files with 552 additions and 215 deletions.
29 changes: 25 additions & 4 deletions packages/babel-plugin/src/__tests__/index.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { transformSync, TransformOptions } from '@babel/core';
import 'jest-extended';
import compiledPlugin from '../index';

const babelOpts: TransformOptions = {
Expand Down Expand Up @@ -41,7 +42,7 @@ describe('babel plugin', () => {
const StyledDiv = /*#__PURE__*/React.forwardRef(({
as: C = \\"div\\",
...props
}, ref) => <CC><Style hash=\\"1x3e11p\\" nonce={__webpack_nonce__}>{[\\".cc-1x3e11p{font-size:12px;}\\"]}</Style><C {...props} ref={ref} className={\\"cc-1x3e11p\\" + (props.className ? \\" \\" + props.className : \\"\\")} /></CC>);
}, ref) => <CC><Style hash=\\"1x3e11p\\" nonce={__webpack_nonce__}>{[\\".cc-1x3e11p{font-size:12px}\\"]}</Style><C {...props} ref={ref} className={\\"cc-1x3e11p\\" + (props.className ? \\" \\" + props.className : \\"\\")} /></CC>);
if (process.env.NODE_ENV === \\"development\\") {
StyledDiv.displayName = \\"StyledDiv\\";
Expand All @@ -67,7 +68,7 @@ describe('babel plugin', () => {
const StyledDiv = /*#__PURE__*/React.forwardRef(({
as: C = \\"div\\",
...props
}, ref) => <CC><Style hash=\\"1x3e11p\\">{[\\".cc-1x3e11p{font-size:12px;}\\"]}</Style><C {...props} ref={ref} className={\\"cc-1x3e11p\\" + (props.className ? \\" \\" + props.className : \\"\\")} /></CC>);
}, ref) => <CC><Style hash=\\"1x3e11p\\">{[\\".cc-1x3e11p{font-size:12px}\\"]}</Style><C {...props} ref={ref} className={\\"cc-1x3e11p\\" + (props.className ? \\" \\" + props.className : \\"\\")} /></CC>);
if (process.env.NODE_ENV === \\"development\\") {
StyledDiv.displayName = \\"StyledDiv\\";
Expand All @@ -89,7 +90,7 @@ describe('babel plugin', () => {
expect(output?.code).toMatchInlineSnapshot(`
"import React from 'react';
import { CC, Style } from '@compiled/css-in-js';
<CC><Style hash=\\"1iqe21w\\">{[\\".cc-1iqe21w{font-size:12px;}\\"]}</Style><div className=\\"cc-1iqe21w\\" /></CC>;"
<CC><Style hash=\\"1iqe21w\\">{[\\".cc-1iqe21w{font-size:12px}\\"]}</Style><div className=\\"cc-1iqe21w\\" /></CC>;"
`);
});

Expand All @@ -108,7 +109,27 @@ describe('babel plugin', () => {
expect(output?.code).toMatchInlineSnapshot(`
"import React from \\"react\\";
import { CC, Style } from '@compiled/css-in-js';
<CC><Style hash=\\"31m7m\\">{[\\".cc-1iqe21w{font-size:12px;}\\"]}</Style><div className={\\"cc-1iqe21w\\"} /></CC>;"
<CC><Style hash=\\"31m7m\\">{[\\".cc-1iqe21w{font-size:12px}\\"]}</Style><div className={\\"cc-1iqe21w\\"} /></CC>;"
`);
});

it('should minify the css', () => {
const output = transformSync(
`
import { styled } from '@compiled/css-in-js';
styled.div\`
font-size: 12px;
color: blue;
\`;
`,
{
configFile: false,
babelrc: false,
plugins: ['@babel/plugin-syntax-jsx', [compiledPlugin, { minify: true }]],
}
);

expect(output?.code).toInclude('.cc-1rl8k7o{color:#00f;font-size:9pt}');
});
});
2 changes: 1 addition & 1 deletion packages/css-in-js/src/__tests__/browser.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ describe('browser', () => {
);

expect(document.head.innerHTML).toMatchInlineSnapshot(
`"<style nonce=\\"k0Mp1lEd\\">.cc-1610nsm{font-size:12px;}</style>"`
`"<style nonce=\\"k0Mp1lEd\\">.cc-1610nsm{font-size:12px}</style>"`
);
});
});
8 changes: 4 additions & 4 deletions packages/css-in-js/src/__tests__/ssr.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ describe('SSR', () => {
const result = renderToStaticMarkup(<StyledDiv>hello world</StyledDiv>);

expect(result).toMatchInlineSnapshot(
`"<style nonce=\\"k0Mp1lEd\\">.cc-1610nsm{font-size:12px;}</style><div class=\\"cc-1610nsm\\">hello world</div>"`
`"<style nonce=\\"k0Mp1lEd\\">.cc-1610nsm{font-size:12px}</style><div class=\\"cc-1610nsm\\">hello world</div>"`
);
});

Expand All @@ -32,7 +32,7 @@ describe('SSR', () => {
);

expect(result).toMatchInlineSnapshot(
`"<style nonce=\\"k0Mp1lEd\\">.cc-1610nsm{font-size:12px;}</style><div class=\\"cc-1610nsm\\">hello world</div><div class=\\"cc-1610nsm\\">hello world</div>"`
`"<style nonce=\\"k0Mp1lEd\\">.cc-1610nsm{font-size:12px}</style><div class=\\"cc-1610nsm\\">hello world</div><div class=\\"cc-1610nsm\\">hello world</div>"`
);
});

Expand All @@ -56,7 +56,7 @@ describe('SSR', () => {
);

expect(result).toMatchInlineSnapshot(
`"<div><div><div><style nonce=\\"k0Mp1lEd\\">.cc-1610nsm{font-size:12px;}</style><div class=\\"cc-1610nsm\\">hello world</div></div></div><div class=\\"cc-1610nsm\\">hello world</div></div>"`
`"<div><div><div><style nonce=\\"k0Mp1lEd\\">.cc-1610nsm{font-size:12px}</style><div class=\\"cc-1610nsm\\">hello world</div></div></div><div class=\\"cc-1610nsm\\">hello world</div></div>"`
);
});

Expand All @@ -76,7 +76,7 @@ describe('SSR', () => {
);

expect(result).toMatchInlineSnapshot(
`"<style nonce=\\"k0Mp1lEd\\">.cc-10mivee{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><div class=\\"cc-10mivee\\"><style nonce=\\"k0Mp1lEd\\">.cc-1610nsm{font-size:12px;}</style><div class=\\"cc-1610nsm\\">hello world</div><div class=\\"cc-1610nsm\\">hello world</div></div>"`
`"<style nonce=\\"k0Mp1lEd\\">.cc-10mivee{display:flex}</style><div class=\\"cc-10mivee\\"><style nonce=\\"k0Mp1lEd\\">.cc-1610nsm{font-size:12px}</style><div class=\\"cc-1610nsm\\">hello world</div><div class=\\"cc-1610nsm\\">hello world</div></div>"`
);
});
});
1 change: 1 addition & 0 deletions packages/css-in-js/src/styled/__tests__/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import { render } from '@testing-library/react';
import { styled } from '@compiled/css-in-js';
import { em } from 'polished';
import '@compiled/jest-css-in-js';

describe('styled component', () => {
it('should render a simple styled div using an object', () => {
Expand Down
1 change: 1 addition & 0 deletions packages/jest/src/__tests__/matchers.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,7 @@ describe('toHaveCompliedCss', () => {
hello world
</div>
);

const el = getByText('hello world');
expect(el).toHaveCompiledCss('color', 'red', { target: '> :first-child' });
});
Expand Down
9 changes: 7 additions & 2 deletions packages/ts-transform/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,19 @@
],
"dependencies": {
"@emotion/is-prop-valid": "^0.8.6",
"autoprefixer": "^9.7.6",
"convert-source-map": "^1.7.0",
"cssnano-preset-default": "^4.0.7",
"postcss": "^7.0.27",
"postcss-nested": "^4.2.1",
"postcss-normalize-whitespace": "^4.0.2",
"source-map": "^0.7.3",
"stylis": "^3.5.4",
"stylis-rule-sheet": "^0.0.10",
"typescript": "^3.7.3"
},
"devDependencies": {
"@types/autoprefixer": "^9.7.2",
"@types/convert-source-map": "^1.5.1",
"@types/cssnano": "^4.0.0",
"ts-transformer-testing-library": "^1.0.0-alpha.7"
}
}
32 changes: 25 additions & 7 deletions packages/ts-transform/src/__tests__/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ describe('root transformer', () => {
expect(actual.outputText).toMatchInlineSnapshot(`
"import React from \\"react\\";
import { CC, Style } from '@compiled/css-in-js';
<CC><Style hash=\\"1b1wq3m\\">{[\\".cc-1b1wq3m{font-size:20px;}\\\\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1vZHVsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRVEiLCJmaWxlIjoibW9kdWxlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIlxuICAgICAgICBpbXBvcnQgJ0Bjb21waWxlZC9jc3MtaW4tanMnO1xuICAgICAgICA8ZGl2IGNzcz17eyBmb250U2l6ZTogJzIwcHgnIH19PmhlbGxvIHdvcmxkPC9kaXY+XG4gICAgICAiXX0= */\\"]}</Style><div className=\\"cc-1b1wq3m\\">hello world</div></CC>;
<CC><Style hash=\\"1b1wq3m\\">{[\\".cc-1b1wq3m{font-size:20px}\\\\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1vZHVsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRVEiLCJmaWxlIjoibW9kdWxlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIlxuICAgICAgICBpbXBvcnQgJ0Bjb21waWxlZC9jc3MtaW4tanMnO1xuICAgICAgICA8ZGl2IGNzcz17eyBmb250U2l6ZTogJzIwcHgnIH19PmhlbGxvIHdvcmxkPC9kaXY+XG4gICAgICAiXX0= */\\"]}</Style><div className=\\"cc-1b1wq3m\\">hello world</div></CC>;
"
`);
});
Expand All @@ -108,7 +108,7 @@ describe('root transformer', () => {
expect(actual.outputText).toMatchInlineSnapshot(`
"import React from \\"react\\";
import { CC, Style } from '@compiled/css-in-js';
/*#__PURE__*/ React.forwardRef(({ as: C = \\"div\\", ...props }, ref) => <CC><Style hash=\\"1b1wq3m\\">{[\\".cc-1b1wq3m{font-size:20px;}\\\\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1vZHVsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR1EiLCJmaWxlIjoibW9kdWxlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIlxuICAgICAgICBpbXBvcnQgeyBzdHlsZWQgfSBmcm9tICdAY29tcGlsZWQvY3NzLWluLWpzJztcblxuICAgICAgICBzdHlsZWQuZGl2KHsgZm9udFNpemU6IDIwIH0pO1xuICAgICAgIl19 */\\"]}</Style><C {...props} ref={ref} className={\\"cc-1b1wq3m\\" + (props.className ? \\" \\" + props.className : \\"\\")}/></CC>);
/*#__PURE__*/ React.forwardRef(({ as: C = \\"div\\", ...props }, ref) => <CC><Style hash=\\"1b1wq3m\\">{[\\".cc-1b1wq3m{font-size:20px}\\\\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1vZHVsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR1EiLCJmaWxlIjoibW9kdWxlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIlxuICAgICAgICBpbXBvcnQgeyBzdHlsZWQgfSBmcm9tICdAY29tcGlsZWQvY3NzLWluLWpzJztcblxuICAgICAgICBzdHlsZWQuZGl2KHsgZm9udFNpemU6IDIwIH0pO1xuICAgICAgIl19 */\\"]}</Style><C {...props} ref={ref} className={\\"cc-1b1wq3m\\" + (props.className ? \\" \\" + props.className : \\"\\")}/></CC>);
"
`);
});
Expand All @@ -128,7 +128,7 @@ describe('root transformer', () => {
expect(actual.outputText).toMatchInlineSnapshot(`
"import React from \\"react\\";
import { CC, Style } from '@compiled/css-in-js';
<CC><Style hash=\\"gpurwr\\">{[\\".cc-1b1wq3m{font-size:20px;}\\\\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1vZHVsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR1EiLCJmaWxlIjoibW9kdWxlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIlxuICAgICAgICBpbXBvcnQgeyBDbGFzc05hbWVzIH0gZnJvbSAnQGNvbXBpbGVkL2Nzcy1pbi1qcyc7XG5cbiAgICAgICAgPENsYXNzTmFtZXM+eyh7IGNzcyB9KSA9PiA8ZGl2IGNsYXNzTmFtZT17Y3NzKHsgZm9udFNpemU6IDIwIH0pfSAvPn08L0NsYXNzTmFtZXM+XG4gICAgICAiXX0= */\\"]}</Style><div className={\\"cc-1b1wq3m\\"}/></CC>;
<CC><Style hash=\\"gpurwr\\">{[\\".cc-1b1wq3m{font-size:20px}\\\\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1vZHVsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR1EiLCJmaWxlIjoibW9kdWxlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIlxuICAgICAgICBpbXBvcnQgeyBDbGFzc05hbWVzIH0gZnJvbSAnQGNvbXBpbGVkL2Nzcy1pbi1qcyc7XG5cbiAgICAgICAgPENsYXNzTmFtZXM+eyh7IGNzcyB9KSA9PiA8ZGl2IGNsYXNzTmFtZT17Y3NzKHsgZm9udFNpemU6IDIwIH0pfSAvPn08L0NsYXNzTmFtZXM+XG4gICAgICAiXX0= */\\"]}</Style><div className={\\"cc-1b1wq3m\\"}/></CC>;
"
`);
});
Expand Down Expand Up @@ -167,12 +167,30 @@ describe('root transformer', () => {
const react_1 = require(\\"react\\");
const css_in_js_1 = require(\\"@compiled/css-in-js\\");
react_1.default.createElement(css_in_js_1.CC, null,
react_1.default.createElement(css_in_js_1.Style, { hash: '1b1wq3m' }, [\\".cc-1b1wq3m{font-size:20px;}\\"]),
react_1.default.createElement(css_in_js_1.Style, { hash: '1b1wq3m' }, [\\".cc-1b1wq3m{font-size:20px}\\"]),
react_1.default.createElement(\\"div\\", { className: 'cc-1b1wq3m' }, \\"hello world\\"));
"
`);
});

it('should minify the css', () => {
const transformer = rootTransformer(stubProgam, { options: { minify: true } });

const actual = ts.transpileModule(
`
import { styled } from '@compiled/css-in-js';
styled.div\`
font-size: 12px;
color: blue;
\`;
`,
createTsConfig(transformer)
);

expect(actual.outputText).toInclude('.cc-1rl8k7o{color:#00f;font-size:9pt}');
});

it('should not change code where there is no compiled components', () => {
const transformer = rootTransformer(stubProgam, {});

Expand Down Expand Up @@ -206,7 +224,7 @@ describe('root transformer', () => {
expect(actual.outputText).toMatchInlineSnapshot(`
"import React from \\"react\\";
import { CC, Style } from '@compiled/css-in-js';
/*#__PURE__*/ React.forwardRef(({ as: C = \\"div\\", ...props }, ref) => <CC><Style hash=\\"1x3e11p\\">{[\\".cc-1x3e11p{font-size:12px;}\\"]}</Style><C {...props} ref={ref} className={\\"cc-1x3e11p\\" + (props.className ? \\" \\" + props.className : \\"\\")}/></CC>);
/*#__PURE__*/ React.forwardRef(({ as: C = \\"div\\", ...props }, ref) => <CC><Style hash=\\"1x3e11p\\">{[\\".cc-1x3e11p{font-size:12px}\\"]}</Style><C {...props} ref={ref} className={\\"cc-1x3e11p\\" + (props.className ? \\" \\" + props.className : \\"\\")}/></CC>);
"
`);
});
Expand All @@ -226,7 +244,7 @@ describe('root transformer', () => {
expect(actual.outputText).toMatchInlineSnapshot(`
"import React from \\"react\\";
import { CC, Style } from '@compiled/css-in-js';
<CC><Style hash=\\"1iqe21w\\">{[\\".cc-1iqe21w{font-size:12px;}\\"]}</Style><div className=\\"cc-1iqe21w\\"/></CC>;
<CC><Style hash=\\"1iqe21w\\">{[\\".cc-1iqe21w{font-size:12px}\\"]}</Style><div className=\\"cc-1iqe21w\\"/></CC>;
"
`);
});
Expand All @@ -248,7 +266,7 @@ describe('root transformer', () => {
expect(actual.outputText).toMatchInlineSnapshot(`
"import React from \\"react\\";
import { CC, Style } from '@compiled/css-in-js';
<CC><Style hash=\\"31m7m\\">{[\\".cc-1iqe21w{font-size:12px;}\\"]}</Style><div className={\\"cc-1iqe21w\\"}/></CC>;
<CC><Style hash=\\"31m7m\\">{[\\".cc-1iqe21w{font-size:12px}\\"]}</Style><div className={\\"cc-1iqe21w\\"}/></CC>;
"
`);
});
Expand Down
Loading

0 comments on commit a25d214

Please sign in to comment.