From e3e2738147f42e3d82e489ed45af37a74836b23b Mon Sep 17 00:00:00 2001 From: Evan Jacobs Date: Mon, 23 Dec 2019 22:19:04 -0500 Subject: [PATCH] fix shorthand flipping, handling of @noflip directives --- package-lock.json | 59 ++++++++++++++++++++++++++-------- package.json | 4 ++- src/stylis-rtl.js | 15 +++++---- src/stylis-rtl.test.js | 73 ++++++++++++++++++++++++++++++++++-------- 4 files changed, 118 insertions(+), 33 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8fe77d5..522a39c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "stylis-rtl", - "version": "1.0.0", + "version": "1.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -104,6 +104,7 @@ "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=", "dev": true, + "optional": true, "requires": { "kind-of": "^3.0.2", "longest": "^1.0.1", @@ -2403,7 +2404,8 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -2427,13 +2429,15 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2450,19 +2454,22 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2593,7 +2600,8 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -2607,6 +2615,7 @@ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2623,6 +2632,7 @@ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -2631,13 +2641,15 @@ "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.2.4.tgz", "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==", "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -2658,6 +2670,7 @@ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -2746,7 +2759,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -2760,6 +2774,7 @@ "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -2855,7 +2870,8 @@ "version": "5.1.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==", - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -2897,6 +2913,7 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -2918,6 +2935,7 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -2966,13 +2984,15 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz", "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=", - "dev": true + "dev": true, + "optional": true } } }, @@ -4341,7 +4361,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=", - "dev": true + "dev": true, + "optional": true }, "loose-envify": { "version": "1.4.0", @@ -5016,6 +5037,12 @@ "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=", "dev": true }, + "prettier": { + "version": "1.19.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz", + "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==", + "dev": true + }, "pretty-format": { "version": "23.5.0", "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-23.5.0.tgz", @@ -5871,6 +5898,12 @@ "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", "dev": true }, + "stylis": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", + "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==", + "dev": true + }, "supports-color": { "version": "5.4.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz", diff --git a/package.json b/package.json index e2e70ea..5fcef33 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,9 @@ "babel-preset-flow": "^6.23.0", "flow-bin": "^0.78.0", "flow-typed": "^2.5.1", - "jest": "^23.5.0" + "jest": "^23.5.0", + "prettier": "^1.19.1", + "stylis": "^3.5.4" }, "dependencies": { "cssjanus": "^1.3.0" diff --git a/src/stylis-rtl.js b/src/stylis-rtl.js index 16c85ce..2825bb4 100644 --- a/src/stylis-rtl.js +++ b/src/stylis-rtl.js @@ -1,6 +1,6 @@ // @flow -import cssjanus from 'cssjanus' +import cssjanus from "cssjanus"; // https://github.com/thysultan/stylis.js#plugins const STYLIS_CONTEXTS = { @@ -10,13 +10,16 @@ const STYLIS_CONTEXTS = { PROPERTY: 1, SELECTOR_BLOCK: 2, AT_RULE: 3 -} +}; -export type StylisContextType = $Values -export const STYLIS_PROPERTY_CONTEXT = STYLIS_CONTEXTS.PROPERTY +export type StylisContextType = $Values; + +// We need to apply cssjanus as early as possible to capture the noflip directives if used +// (they are not present at the PROPERTY, SELECTOR_BLOCK, or POST_PROCESS steps) +export const STYLIS_PROPERTY_CONTEXT = STYLIS_CONTEXTS.PREPARATION; export default (context: StylisContextType, content: string): ?string => { if (context === STYLIS_PROPERTY_CONTEXT) { - return cssjanus.transform(content) + return cssjanus.transform(content); } -} +}; diff --git a/src/stylis-rtl.test.js b/src/stylis-rtl.test.js index de527a9..63353a4 100644 --- a/src/stylis-rtl.test.js +++ b/src/stylis-rtl.test.js @@ -1,25 +1,30 @@ // @flow -import stylisRtlPlugin, { STYLIS_PROPERTY_CONTEXT } from './stylis-rtl' +import Stylis from "stylis"; +import stylisRtlPlugin, { STYLIS_PROPERTY_CONTEXT } from "./stylis-rtl"; -describe('Stylis RTL Plugin', () => { - it('converts LTR to RTL', () => { +const stylis = new Stylis(); + +stylis.use(stylisRtlPlugin); + +describe("Stylis RTL Plugin", () => { + it("converts LTR to RTL", () => { expect( - stylisRtlPlugin(STYLIS_PROPERTY_CONTEXT, 'padding-left: 2px;') - ).toEqual('padding-right: 2px;') + stylisRtlPlugin(STYLIS_PROPERTY_CONTEXT, "padding-left: 2px;") + ).toEqual("padding-right: 2px;"); expect( - stylisRtlPlugin(STYLIS_PROPERTY_CONTEXT, 'margin: 0 1px 0 2px;') - ).toEqual('margin: 0 2px 0 1px;') - }) + stylisRtlPlugin(STYLIS_PROPERTY_CONTEXT, "margin: 0 1px 0 2px;") + ).toEqual("margin: 0 2px 0 1px;"); + }); - it('allows you to skip rules via comments', () => { + it("allows you to skip rules via comments", () => { const input = ` margin: 0 2px 0 1px; /* @noflip */ margin: 0 1px 0 2px; /* just a regular comment */ margin: 0 2px 0 1px; - ` + `; const output = ` margin: 0 1px 0 2px; @@ -27,7 +32,49 @@ describe('Stylis RTL Plugin', () => { margin: 0 1px 0 2px; /* just a regular comment */ margin: 0 1px 0 2px; + `; + expect(stylisRtlPlugin(STYLIS_PROPERTY_CONTEXT, input)).toEqual(output); + }); +}); + +describe("integration test with stylis", () => { + it("flips simple rules", () => { + expect( + stylis( + ".a", + ` + padding-left: 5px; + margin-right: 5px; + border-left: 1px solid red; + ` + ) + ).toMatchInlineSnapshot( + `".a{padding-right:5px;margin-left:5px;border-right:1px solid red;}"` + ); + }); + + it("flips shorthands", () => { + expect( + stylis( + ".a", + ` + padding: 0 5px 0 0; + margin: 0 0 0 5px; + ` + ) + ).toMatchInlineSnapshot(`".a{padding:0 0 0 5px;margin:0 5px 0 0;}"`); + }); + + it("handles noflip directives", () => { + expect( + stylis( + ".a", + ` + /* @noflip */ + padding: 0 5px 0 0; + margin: 0 0 0 5px; ` - expect(stylisRtlPlugin(STYLIS_PROPERTY_CONTEXT, input)).toEqual(output) - }) -}) + ) + ).toMatchInlineSnapshot(`".a{padding:0 5px 0 0;margin:0 5px 0 0;}"`); + }); +});