Add bundled support for styles in template literals #3405

gucong3000 · 2018-06-20T06:39:42Z

Which issue, if any, is this issue related to?

#3264

Is there anything in the PR that needs further explanation?

e.g. "No, it's self explanatory."

alexander-akait

Why we remove postcss-markdown? We are using this for linting css in markdown

ntwb · 2018-06-20T11:55:51Z

@evilebottnawi Please read the discussion in #3264 that you yourself had given a 👍 to.

If you have a question on a PR also please add that as a question in a comment or make your PR review a comment, but please don't make these types of questions/comments as "Request Changes" as this is not the intended purpose of the "Request Changes" feature.

alexander-akait · 2018-06-20T12:02:40Z

@ntwb i support css-in-js out of box, but how it is related to markdown? We should support markdown and css-in-js out of box 😕 And i use Request Changes, because css-in-js is not related to markdown.

alexander-akait · 2018-06-20T12:07:06Z

lib/utils/isStandardSyntaxSelector.js

@@ -12,7 +12,7 @@ module.exports = function(selector /*: string*/) /*: boolean*/ {
  }

  // SCSS placeholder selectors
-  if (selector.indexOf("%") === 0) {
+  if (selector[0] === "%") {


Regression, i can use .my-class%foo { }

".my-class%foo".indexOf("%") === 0 // false

selector.startsWith("%") is much clearer in the intent... assuming that I'm reading the intent of that code correctly in the first place!

Rollback of unrelated modifications in 48d4788

alexander-akait · 2018-06-20T12:07:37Z

package.json

    "postcss-media-query-parser": "^0.2.3",
    "postcss-reporter": "^5.0.0",
    "postcss-resolve-nested-selector": "^0.1.1",
    "postcss-safe-parser": "^3.0.1",
    "postcss-sass": "^0.3.0",
    "postcss-scss": "^1.0.2",
    "postcss-selector-parser": "^3.1.0",
-    "postcss-syntax": "^0.28.0",
+    "postcss-styled": "github:gucong3000/postcss-styled#literal_part",


I think better use stable release for this

alexander-akait · 2018-06-20T12:08:41Z

Also PR title is misleading 😕 because in package.json we still have postcss-markdown

ntwb · 2018-06-20T12:10:47Z

Sorry @evilebottnawi, thanks for that clarification, I missed that myself 😞

gucong3000 · 2018-06-29T12:48:50Z

@evilebottnawi
All fixed.

jeddy3 · 2018-06-29T14:31:41Z

@gucong3000 Am I right in thinking we also need to bundle postcss-jsx if we wish to support the following out-of-the-box?:

import React from "react";

const Component = () => (
  <div style={{top: 0}}></div>
);

gucong3000 · 2018-07-02T02:03:45Z

Am I right in thinking we also need to bundle postcss-jsx if we wish to support the following out-of-the-box?

Yes, right.

jeddy3 · 2018-07-02T08:06:03Z

Yes, right.

Thanks. Shall we add it in this PR?

gucong3000 · 2018-07-02T08:16:20Z

Shall we add it in this PR?

postcss-jsx currently dependencies some non-stable version of @babel/*.
Maybe we need to wait for the official release of babel@7 and then add postcss-jsx.

jeddy3 · 2018-07-02T09:40:03Z

Maybe we need to wait for the official release of babel@7 and then add postcss-jsx.

Any ideas when babel@7 is due out?

We could always include postcss-jsx and flag it as experimental (which is what we did with the other syntaxes like Less and Sass).

gucong3000 · 2018-07-02T10:39:33Z

We could always include postcss-jsx and flag it as experimental.

If there is no objection, I'd like to add postcss-jsx in the next PR

jeddy3

@gucong3000 I've requested some minor changes... just setting syntax: .. on objects or moving tests into their own testRule blocks to bring them in line with our conventions.

Once these changes are in, I think we can merge this and add bundled support for styled components.

jeddy3 · 2018-07-09T13:02:38Z

lib/rules/declaration-block-no-duplicate-properties/__tests__/index.js

@@ -114,6 +114,10 @@ testRule(rule, {
    {
      code: "a { -WEBKIT-border-radius: 12px; -webkit-BORDER-radius: 10px; }",
      message: messages.rejected("-webkit-BORDER-radius")
+    },


Can we please pull this out into its own testRule block with syntax: styled, please?

We should place it at the end of the file, after the syntax: html testRule block.

jeddy3 · 2018-07-09T13:03:04Z

lib/rules/declaration-block-no-redundant-longhand-properties/__tests__/index.js

@@ -79,6 +79,10 @@ testRule(rule, {
      code:
        "a { border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; }",
      message: messages.expected("border-width")
+    },
+    {


Can we please pull this out into its own testRule block with syntax: styled, please?

We should place it at the end of the file.

jeddy3 · 2018-07-09T13:03:11Z

lib/rules/declaration-block-no-shorthand-property-overrides/__tests__/index.js

@@ -100,6 +100,10 @@ testRule(rule, {
        "-webKIT-transition",
        "-WEBKIT-transition-property"
      )
+    },


Can we please pull this out into its own testRule block with syntax: styled, please?

We should place it at the end of the file.

jeddy3 · 2018-07-09T13:03:20Z

lib/rules/function-url-no-scheme-relative/__tests__/index.js

@@ -69,6 +69,10 @@ testRule(rule, {
    {
      code: "a { background: url(var(--image)); }",
      description: "ignore variable"
+    },


Can we please pull this out into its own testRule block with syntax: styled, please?

We should place it at the end of the file.

jeddy3 · 2018-07-09T13:03:30Z

lib/rules/function-url-quotes/__tests__/index.js

@@ -185,6 +185,9 @@ testRule(rule, {
    },
    {
      code: 'a { background: url("") }'
+    },
+    {


Can we please pull this out into its own testRule block with syntax: styled, please?

We should place it at the end of the file.

jeddy3 · 2018-07-09T13:03:59Z

lib/rules/max-empty-lines/__tests__/index.js

@@ -112,6 +112,50 @@ testRule(rule, {
  ]
 });

+testRule(rule, {
+  ruleName,
+  config: [1],


Can we add syntax: styled here to be explicit, please?

jeddy3 · 2018-07-09T13:05:39Z

lib/rules/max-line-length/__tests__/index.js

+
+testRule(rule, {
+  ruleName,
+  config: [20],


Can we add syntax: styled here please.

jeddy3 · 2018-07-09T13:05:56Z

lib/rules/property-no-unknown/__tests__/index.js

@@ -34,6 +34,12 @@ testRule(rule, {
    {
      code: ".foo { *width: 100px; }",
      description: "ignore CSS hacks"
+    },


Can we please pull this out into its own testRule block with syntax: styled, please?

We should place it at the end of the file.

jeddy3 · 2018-07-09T13:06:02Z

lib/rules/selector-type-no-unknown/__tests__/index.js

@@ -132,6 +132,9 @@ testRule(rule, {
    {
      code: ".foo /for/ .bar {}",
      description: "reference combinators"
+    },


Can we please pull this out into its own testRule block with syntax: styled, please?

We should place it at the end of the file.

gucong3000 · 2018-07-21T07:47:07Z

I've requested some minor changes...

Done.

jeddy3 · 2018-07-21T08:30:30Z

@gucong3000 Thank you. Those tests are much easier to scan and consume now.

LGTM.

Has anyone got time to add a 2nd review to this? I'll endeavour to release tomorrow if we get this merged.

jeddy3

Thanks! This is an exciting new direction for stylelint.

ntwb

Unavailable

jeddy3 · 2018-07-21T10:16:06Z

Added: bundled support for styles in template literals (#3405).

gucong3000 force-pushed the postcss-styled branch 2 times, most recently from 79de13a to 4aac942 Compare June 20, 2018 08:36

alexander-akait suggested changes Jun 20, 2018

View reviewed changes

gucong3000 force-pushed the postcss-styled branch 2 times, most recently from 9bf4a3f to 51af626 Compare June 20, 2018 10:53

alexander-akait previously requested changes Jun 20, 2018

View reviewed changes

gucong3000 force-pushed the postcss-styled branch 3 times, most recently from 1097434 to 6d57272 Compare June 21, 2018 01:37

gucong3000 changed the title ~~[WIP] replace postcss-markdown with postcss-styled~~ [WIP] Add build-in CSS-in-JS support Jun 21, 2018

gucong3000 force-pushed the postcss-styled branch 4 times, most recently from bbcc249 to 48d4788 Compare June 21, 2018 10:13

gucong3000 force-pushed the postcss-styled branch from 48d4788 to c9ba730 Compare June 29, 2018 10:55

gucong3000 changed the title ~~[WIP] Add build-in CSS-in-JS support~~ Add build-in CSS-in-JS support Jun 29, 2018

jeddy3 mentioned this pull request Jun 29, 2018

Add CSS-in-JS support #3264

Closed

jeddy3 requested changes Jul 9, 2018

View reviewed changes

hudochenkov added the PR: needs revision label Jul 10, 2018

jeddy3 mentioned this pull request Jul 12, 2018

Release 9.4.0 #3456

Closed

4 tasks

jeddy3 mentioned this pull request Jul 19, 2018

Bump postcss syntaxes packages #3482

Closed

gucong3000 force-pushed the postcss-styled branch 2 times, most recently from 7961662 to 74bbab2 Compare July 20, 2018 05:48

jeddy3 mentioned this pull request Jul 20, 2018

Fix false positives for style attributes in no-missing-end-of-source-newline #3485

Merged

gucong3000 force-pushed the postcss-styled branch from 74bbab2 to 9faa4a7 Compare July 21, 2018 07:46

Add build-in CSS-in-JS support

7e2043e

gucong3000 force-pushed the postcss-styled branch from 9faa4a7 to 7e2043e Compare July 21, 2018 08:10

jeddy3 removed the PR: needs revision label Jul 21, 2018

jeddy3 approved these changes Jul 21, 2018

View reviewed changes

ntwb approved these changes Jul 21, 2018

View reviewed changes

jeddy3 changed the title ~~Add build-in CSS-in-JS support~~ Add bundled support for styles in template literals Jul 21, 2018

jeddy3 merged commit 9bb9d17 into master Jul 21, 2018

jeddy3 deleted the postcss-styled branch July 21, 2018 10:14

This was referenced Jul 26, 2018

Update stylelint in /packages/generator/app/templates from 9.2.1 to 9.4.0 JetBrains/ring-ui#329

Merged

Update 2 dependencies from npm JetBrains/ring-ui#330

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add bundled support for styles in template literals #3405

Add bundled support for styles in template literals #3405

gucong3000 commented Jun 20, 2018

alexander-akait left a comment

ntwb commented Jun 20, 2018

alexander-akait commented Jun 20, 2018 •

edited

alexander-akait Jun 20, 2018

gucong3000 Jun 21, 2018

Arcanemagus Jun 22, 2018

gucong3000 Jun 25, 2018 •

edited

alexander-akait Jun 20, 2018

alexander-akait commented Jun 20, 2018

ntwb commented Jun 20, 2018

gucong3000 commented Jun 29, 2018

jeddy3 commented Jun 29, 2018

gucong3000 commented Jul 2, 2018

jeddy3 commented Jul 2, 2018

gucong3000 commented Jul 2, 2018 •

edited

jeddy3 commented Jul 2, 2018

gucong3000 commented Jul 2, 2018

jeddy3 left a comment

jeddy3 Jul 9, 2018

jeddy3 Jul 9, 2018

jeddy3 Jul 9, 2018

jeddy3 Jul 9, 2018

jeddy3 Jul 9, 2018

jeddy3 Jul 9, 2018

jeddy3 Jul 9, 2018

jeddy3 Jul 9, 2018

jeddy3 Jul 9, 2018

gucong3000 commented Jul 21, 2018

jeddy3 commented Jul 21, 2018 •

edited

jeddy3 left a comment

ntwb left a comment

jeddy3 commented Jul 21, 2018

Add bundled support for styles in template literals #3405

Add bundled support for styles in template literals #3405

Conversation

gucong3000 commented Jun 20, 2018

alexander-akait left a comment

Choose a reason for hiding this comment

ntwb commented Jun 20, 2018

alexander-akait commented Jun 20, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gucong3000 Jun 25, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexander-akait commented Jun 20, 2018

ntwb commented Jun 20, 2018

gucong3000 commented Jun 29, 2018

jeddy3 commented Jun 29, 2018

gucong3000 commented Jul 2, 2018

jeddy3 commented Jul 2, 2018

gucong3000 commented Jul 2, 2018 • edited

jeddy3 commented Jul 2, 2018

gucong3000 commented Jul 2, 2018

jeddy3 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gucong3000 commented Jul 21, 2018

jeddy3 commented Jul 21, 2018 • edited

jeddy3 left a comment

Choose a reason for hiding this comment

ntwb left a comment

Choose a reason for hiding this comment

jeddy3 commented Jul 21, 2018

alexander-akait commented Jun 20, 2018 •

edited

gucong3000 Jun 25, 2018 •

edited

gucong3000 commented Jul 2, 2018 •

edited

jeddy3 commented Jul 21, 2018 •

edited